Subversion Repositories eFlore/Applications.cel

Rev

Rev 3960 | Rev 3971 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
3630 idir 1 
<div id="bloc-infos-img"></div>
2 
<div id="volet" class="col-lg-4 col-12">
3 
	<div id="volets-fct">
4 
		<a id="retour-metas" class="btn hidden" data-volet="meta"><i class="fas fa-info-circle"></i>&nbsp;<i class="fas fa-angle-double-left"></i></a>
5 
		<div class="nettoyage-volet haut"></div>
3826 idir 6 
		<div id="bloc-tags" class="bloc-volet tags hidden todo" data-volet="tags">
3630 idir 7 
			<h2>Tags</h2>
8 
			<h3>Tags CEL (propres à l'auteur)</h3>
9 
			<form id="form-tags-auteur">
10 
				<input type="text" name="null" id="tags-auteur" placeholder="Aucun tag ajouté par l'auteur de l'observation" disabled>
11 
			</form>
12 
			<h3>Tags Pictoflora</h3>
13 
			<div id="tags-pf">
14 
				<a id="port" class="btn tag">Port</a><!--
15 
				--><a id="fleur" class="btn tag">Fleur</a><!--
16 
				--><a id="fruit" class="btn tag">Fruit</a><!--
17 
				--><a id="feuille" class="btn tag">Feuille</a><!--
18 
				--><a id="ecorce" class="btn tag">Ecorce</a><!--
19 
				--><a id="rameau" class="btn tag">Rameau</a><!--
20 
				--><a id="planche" class="btn tag">Planche</a><!--
21 
				--><a id="insecte" class="btn tag">Insecte</a>
22 
			</div>
23 
			<label for="saisir-tag">Saisir un tag</label>
24 
			<input type="text" class="form-control" id="saisir-tag" name="saisir-tag">
25 
			<div id="tags-pf-supp"></div>
3960 julien 26 
			<a id="signaler-photo" class="btn btn-sm btn-warning hidden"><i
27 
					class="fas fa-exclamation-triangle"></i>&nbsp;Signaler une photo inappropriée</a>
28 
			<a id="signaler-erreur-id-bis" class="btn btn-sm btn-warning signaler-erreur-obs hidden"
29 
			   title="Signaler une mauvaise identification ou en proposer une autre via l'outil identiplante" target="_blank"><i class="fas fa-exclamation-triangle"></i>&nbsp;Signaler une erreur d'identification</a>
3630 idir 30 
		</div>
3826 idir 31 
		<div id="bloc-noter" class="bloc-volet noter hidden todo" data-volet="noter">
3630 idir 32 
			<h2>Protocoles</h2>
33 
			<select name="protocole" id="protocole" class="form-control custom-select">
34 
				<option value="" selected hidden>Choix du protocole</option>
35 
				<option id="capitalisation_image" value="capitalisation_image">Capitalisation d'images</option>
36 
				<option id="aide_identification" value="aide_identification">Aide à l'identification</option>
37 
				<option id="defi_photo" value="defi_photo">Défi photo</option>
38 
				<option id="gentiane_azure" value="gentiane_azure">Enquête Gentiane-azuré</option>
39 
				<option id="arbres_tetards" value="arbres_tetards">Arbres têtards</option>
40 
			</select>
3948 julien 41 
			<p id="message-protocole" class="message mt-3">
3630 idir 42 
				Choisissez un protocole pour pouvoir noter la photo
43 
				<!-- le message change en fonction du protocole -->
44 
			</p>
45 
			<div id="bloc-notes-protocole" class="hidden">
46 
				<ul id="notes-protocole-fct">
47 
					<li id="plus-infos-protocole" class="row">
48 
						<div class="col-10 label">Plus d'infos sur le wiki</div>
3960 julien 49 
						<a class="bouton btn btn-sm btn-outline-secondary" href="https://www.tela-botanica.org/wikini/pictoflora/wakka.php?wiki=PagePrincipale" target="_blank"><i
3948 julien 50 
								class="fas fa-question-circle"></i></a>
3630 idir 51 
					</li>
3948 julien 52 
					<li id="note" class="row">
3630 idir 53 
						<div class="col-5 label">Notez</div>
3948 julien 54 
						<div class="col-5 contenu"><!-- étoiles -->
55 
							<i id="rating-star-1" class="far fa-star notation-star"></i>
56 
							<i id="rating-star-2" class="far fa-star notation-star"></i>
57 
							<i id="rating-star-3" class="far fa-star notation-star"></i>
58 
							<i id="rating-star-4" class="far fa-star notation-star"></i>
59 
							<i id="rating-star-5" class="far fa-star notation-star"></i>
60 
						</div>
61 
							<a id="note-remove"
62 
							   class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-backspace"></i></a>
3630 idir 63 
					</li>
3948 julien 64 
					<li id="note-moyenne" class="row d-flex justify-content-between">
3630 idir 65 
						<div class="col-5 label">Note Moyenne</div>
66 
						<div class="col-5 contenu" style="text-align:right;"></div>
67 
					</li>
3948 julien 68 
					<li id="note-count" class="row d-flex justify-content-between">
3630 idir 69 
						<div class="col-5 label">Nombre de votes</div>
70 
						<div class="col-5 contenu" style="text-align:right;"></div>
71 
					</li>
72 
				</ul>
73 
			</div>
74 
		</div>
3826 idir 75 
		<div id="bloc-signaler" class="bloc-volet signaler hidden todo" data-volet="signaler">
3630 idir 76 
			<h2>Signaler</h2>
77 
			<h3>Signaler une photo inappropriée</h3>
78 
			<p id="message-signaler" class="message">
79 
				En signalant cette photo vous participez à la qualification des données d'observation botaniques. Les photos qualifiées d'inappropriées pour l'une des raison ci-dessous ne seront pas affichées parmi les autres illustrations sur eFlore, voire pourront être dépubliées.
80 
			</p>
81 
			<li id="exemple-inapproprie" class="row">
82 
				<div class="col-10 label">Exemple de photos inappropriées</div>
83 
				<a class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-question-circle"></i></a>
84 
			</li>
85 
			<li id="plus-infos-signaler" class="row">
86 
				<div class="col-10 label">Plus d'infos sur le wiki</div>
3950 julien 87 
				<a class="bouton btn btn-sm btn-outline-secondary"
88 
				   href="https://www.tela-botanica.org/wikini/AideCarnetEnLigne/wakka.php?wiki=AideWidgetPhoto" target="_blank"><i class="fas fa-question-circle"></i></a>
3630 idir 89 
			</li>
90 
			<form id="type-inapprorie">
91 
				<div class="list-label">
92 
					En quoi cette photo est-elle inappropriée ?
93 
				</div>
94 
				<div class="list">
95 
					<div class="form-check">
96 
						<input type="checkbox" id="non-vegetale" name="type-inapprorie" class="non-vegetale form-check-input" value="non-vegetale">
97 
						<label for="non-vegetale" class="non-vegetale form-check-label">Photo non végétale</label>
98 
					</div>
99 
					<div class="form-check">
100 
						<input type="checkbox" id="ecran" name="type-inapprorie" class="ecran form-check-input" value="ecran">
101 
						<label for="ecran" class="ecran form-check-label">Photo d'écran</label>
102 
					</div>
103 
					<div class="form-check">
104 
						<input type="checkbox" id="floue-pixelisee" name="type-inapprorie" class="floue-pixelisee form-check-input" value="floue-pixelisee">
105 
						<label for="floue-pixelisee" class="floue-pixelisee form-check-label">Photo floue ou pixelisée</label>
106 
					</div>
107 
					<div class="form-check">
108 
						<input type="checkbox" id="cultivee-pot" name="type-inapprorie" class="cultivee-pot form-check-input" value="cultivee-pot">
109 
						<label for="cultivee-pot" class="cultivee-pot form-check-label">Plante cultivée / en pot</label>
110 
					</div>
111 
				</div>
112 
			</form>
3823 idir 113 
			<a id="signaler-erreur-id-signaler" class="btn btn-sm btn-warning signaler-erreur-obs" title="Signaler une mauvaise identification ou en proposer une autre via l'outil identiplante" target="_blank"><i class="fas fa-exclamation-triangle"></i>&nbsp;Signaler une erreur d'identification</a>
3630 idir 114 
		</div>
115 
 
116 
 
117 
		<!-- pas pour la version 1 -->
3826 idir 118 
		<div id="bloc-revision" class="bloc-volet revision hidden todo" data-volet="revision">
3630 idir 119 
			<h2>Révision</h2>
120 
			<h3>Proposition de détermination</h3>
121 
 
122 
		</div>
123 
 
124 
 
125 
 
126 
		<div id="bloc-meta" class="bloc-volet meta" data-volet="meta">
127 
			<h2>Métadonnées</h2>
128 
			<ul id="contenu-meta">
129 
				<li id="nom" class="row">
130 
					<div class="col-5 label">Nom</div>
131 
					<div class="col-5 contenu"></div>
3823 idir 132 
					<a class="bouton btn btn-sm btn-outline-secondary" target="_blank"><i class="fas fa-search"></i></a>
3630 idir 133 
				</li>
134 
				<li id="localisation" class="row">
135 
					<div class="col-5 label">Localisation</div>
136 
					<div class="col-5 contenu"></div>
3823 idir 137 
					<a id="obs-localisation" class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-map-marker-alt"></i></a>
3630 idir 138 
				</li>
139 
				<li id="auteur" class="row">
140 
					<div class="col-5 label">Auteur</div>
141 
					<div class="col-5 contenu"></div>
3826 idir 142 
					<a class="bouton btn btn-sm btn-outline-secondary" target="_blank"><i class="fas fa-user"></i></a>
3630 idir 143 
				</li>
144 
				<li id="date-obs" class="row">
145 
					<div class="col-5 label">Date d'observation</div>
146 
					<div class="col-5 contenu"></div>
147 
				</li>
3823 idir 148 
				<li id="commentaire" class="row">
3630 idir 149 
					<div class="col-5 label">Commentaires</div>
150 
					<div class="col-5 contenu"></div>
151 
				</li>
152 
				<li id="certitude" class="row">
153 
					<div class="col-5 label">Certitude de l'identification</div>
154 
					<div class="col-5 contenu"></div>
155 
				</li>
156 
				<li id="fiabilite" class="row">
3825 idir 157 
					<div class="col-5 label">Grade</div>
3630 idir 158 
					<div class="col-5 contenu"></div>
3827 idir 159 
					<a class="bouton btn btn-sm btn-outline-secondary todo"><i class="fas fa-question-circle"></i></a>
3630 idir 160 
				</li>
161 
			</ul>
162 
			<a id="plus-meta" class="afficher-plus"><i class="fas fa-angle-down"></i>&nbsp;Afficher plus de metadonnées sur l'observation</a>
163 
			<ul id="contenu-meta-plus"></ul>
164 
			<ul id="contenu-meta-suite">
165 
				<li id="num-photo" class="row">
166 
					<div class="col-5 label">Photo n°</div>
167 
					<div class="col-5 contenu"></div>
168 
				</li>
169 
				<li id="licence" class="row">
170 
					<div class="col-5 label">Licence</div>
3823 idir 171 
					<div class="col-5 contenu">
172 
						<a target="_blank" href="http://creativecommons.org/licenses/by-sa/2.0/fr/">CC-BY-SA 2.0 FR</a>
173 
					</div>
3630 idir 174 
				</li>
175 
			</ul>
3823 idir 176 
 
3960 julien 177 
			<a id="signaler-erreur-id" class="btn btn-sm btn-warning signaler-erreur-obs hidden"
178 
			   title="Signaler une mauvaise identification ou en proposer une autre via l'outil identiplante" target="_blank" href="https://www.tela-botanica.org/appli:identiplante"><i class="fas fa-exclamation-triangle"></i>&nbsp;Signaler une erreur d'identification</a>
3823 idir 179 
 
3630 idir 180 
			<h2>Téléchargement</h2>
181 
			<ul id="contenu-telechargement">
182 
				<li id="titre-original" class="row">
183 
					<div class="col-5 label">Titre original</div>
3829 idir 184 
					<div class="col-7 contenu"></div>
3630 idir 185 
				</li>
186 
				<li id="date-photo" class="row">
187 
					<div class="col-5 label">Date de la photo</div>
3829 idir 188 
					<div class="col-7 contenu"></div>
3630 idir 189 
				</li>
190 
				<li id="Licence-bis" class="row">
191 
					<div class="col-5 label">Licence</div>
3829 idir 192 
					<div class="col-7 contenu">
3823 idir 193 
						<a target="_blank" href="http://creativecommons.org/licenses/by-sa/2.0/fr/">CC-BY-SA 2.0 FR</a>
194 
					</div>
3630 idir 195 
				</li>
196 
				<li id="attribution" class="row">
3823 idir 197 
					<div class="col-12 label">Attribution</div>
198 
					<div class="col-12 contenu">
199 
						<input id="attribution-copy" type="text" name="attribution-copy" rows="4" class="form-control" readonly="readonly" style="width: 100%; height: 100%;">
200 
					</div>
3630 idir 201 
				</li>
202 
				<li id="url" class="row">
3823 idir 203 
					<div class="col-12 label">Url</div>
204 
					<div class="col-12 contenu">
205 
						<input id="url-copy" type="text" name="url-copy" rows="2" class="form-control" readonly="readonly" style="width: 100%; height: 100%;">
206 
					</div>
3630 idir 207 
				</li>
208 
			</ul>
3825 idir 209 
			<ul id="contenu-telechargement-suite" class="mb-0">
3630 idir 210 
				<li id="autres-formats" class="row">
3825 idir 211 
					<div class="col-12 label">Autres formats</div>
212 
					<div class="col-12 contenu">
3630 idir 213 
						<select name="formats" id="formats" class="form-control custom-select">
3823 idir 214 
						<?php foreach ($formats_description as $format => $description):?>
215 
							<option value="<?php echo $format; ?>" <?php echo $format === 'O' ? 'selected' : ''; ?>><?php echo $description; ?></option>
216 
						<?php endforeach; ?>
3630 idir 217 
						</select>
218 
					</div>
219 
				</li>
220 
			</ul>
3825 idir 221 
			<a href="" data-url-base-telechargement="<?php echo $url_base_telechargement; ?>" id="telecharger" class="btn btn-success mt-0"><i class="fas fa-upload"></i>&nbsp;Télécharger</a>
3960 julien 222 
			<h2 class="todo hidden">Partagez !</h2>
223 
			<p class="message todo hidden">
3630 idir 224 
				Partagez cette photo sur les réseaux sociaux
225 
			</p>
3960 julien 226 
			<div id="boutons-reseaux-sociaux" class="todo hidden">
3950 julien 227 
				<a id="facebook" class="btn btn-outline-secondary btn-lg"
228 
				   href="https://www.facebook.com/telabotanica/" target="_blank"><i class="fab fa-facebook-f"></i></a>
229 
				<a id="twitter" class="btn btn-outline-secondary btn-lg" href="https://twitter.com/TelaBotanica" target="_blank"><i
230 
						class="fab fa-twitter"></i></a>
231 
				<a id="mail" class="btn btn-outline-secondary btn-lg" href="mailto:cel_remarques@tela-botanica.org"><i class="fas fa-envelope"></i>
232 
				</a>
3630 idir 233 
			</div>
234 
		</div>
235 
		<div id="bloc-modif" class="bloc-volet modif hidden" data-volet="modif">
236 
			<h2>Modifier la photo</h2>
3826 idir 237 
			<h3 class="todo">Faire pivoter la photo</h3>
238 
			<div id="pivoter-photo" class="d-flex justify-content-around todo">
3630 idir 239 
				<div id="bloc-pivoter-droite" class="d-flex flex-column">
240 
					<label for="pivoter-droite">Pivoter à droite</label>
241 
					<a id="pivoter-droite" class="btn btn-success btn-lg"><i class="fas fa-redo"></i></a>
242 
				</div>
243 
				<div id="bloc-pivoter-gauche" class="d-flex flex-column">
244 
					<label for="pivoter-gauche">Pivoter à gauche</label>
245 
					<a id="pivoter-gauche" class="btn btn-success btn-lg"><i class="fas fa-undo"></i></a>
246 
				</div>
247 
			</div>
248 
			<h3>Régénérer miniature</h3>
249 
			<p id="message-regenerer" class="message">
250 
				Vous avez remarqué un problème dans l'affichage de la miniature de cette photo ? Vous pouvez la régénérer ci-dessous !
251 
			</p>
252 
			<a id="regenerer-miniature" class="btn btn-warning btn-lg"><i class="fas fa-recycle"></i>&nbsp;Régénérer la miniature</a>
253 
		</div>
3826 idir 254 
		<div id="bloc-aide" class="bloc-volet aide hidden todo" data-volet="aide">
3630 idir 255 
			<h2>Aide</h2>
256 
			<p id="texte-aide" class="message">
257 
				Auxerunt haec vulgi sordidioris audaciam, quod cum ingravesceret penuria commeatuum, famis et furoris inpulsu Eubuli cuiusdam inter suos clari domum ambitiosam ignibus subditis inflammavit rectoremque ut sibi iudicio imperiali addictum calcibus incessens et pugnis conculcans seminecem laniatu miserando discerpsit. post cuius lacrimosum interitum in unius exitio quisque imaginem periculi sui considerans documento recenti similia formidabat.
258 
 
259 
				Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est, quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in quibus diutius commorati sumus.
260 
 
261 
				Erat autem diritatis eius hoc quoque indicium nec obscurum nec latens, quod ludicris cruentis delectabatur et in circo sex vel septem aliquotiens vetitis certaminibus pugilum vicissim se concidentium perfusorumque sanguine specie ut lucratus ingentia laetabatur.
262 
			</p>
263 
			<ul id="aide-plus">
264 
				<li id="plus-infos" class="row">
265 
					<div class="col-10 label">Plus d'infos sur le wiki</div>
3960 julien 266 
					<a class="bouton btn btn-sm btn-outline-secondary" target="_blank" href="https://www.tela-botanica.org/wikini/AideCarnetEnLigne/wakka.php?wiki=AideCELWidgetPhoto"><i
3950 julien 267 
							class="fas fa-question-circle"></i></a>
3630 idir 268 
				</li>
269 
				<li id="autres-questions" class="row">
270 
					<div class="col-10 label">D'autres questions ? Écrivez-nous !</div>
3950 julien 271 
					<a class="bouton btn btn-sm btn-outline-secondary"
272 
					   href="mailto:cel_remarques@tela-botanica.org"><i class="fas fa-envelope"></i></a>
3630 idir 273 
				</li>
274 
			</ul>
275 
 
276 
		</div>
277 
 
278 
		<div class="nettoyage-volet bas"></div>
1480 aurelien 279 
	</div>
3630 idir 280 
 
281 
</div>
282 
<div id="info-img-galerie" class="carousel col-lg-8 col-12" data-ride="carousel" data-interval="false">
283 
	<div class="carousel-inner h-100 w-100">
3837 idir 284 
		<?php $urls = array_keys($infos_images); ?>
285 
		<?php for($index = 0; $index < count($urls); $index++):?>
3630 idir 286 
			<div id="img-cadre-<?php echo $index; ?>" class="carousel-item">
3837 idir 287 
				<img id="illustration-<?php echo $index;?>" class="d-block align-middle" src="<?php echo $urls[$index];?>" alt="" data-width="<?php echo $infos_image[$urls[$index]]['width'];?>" data-height="<?php echo $infos_image[$urls[$index]]['height'];?>">
3630 idir 288 
			</div>
289 
		<?php endfor; ?>
290 
		<a id="precedent" class="carousel-control-prev carousel-control" href="#info-img-galerie" role="button" data-slide="prev">
291 
			<i class="fas fa-chevron-circle-left"></i>
292 
			<span class="sr-only">Precedent</span>
1480 aurelien 293 
		</a>
3630 idir 294 
		<a id="suivant" class="carousel-control-next carousel-control" href="#info-img-galerie" role="button" data-slide="next">
295 
			<i class="fas fa-chevron-circle-right"></i>
296 
			<span class="sr-only">Suivant</span>
297 
		</a>
1480 aurelien 298 
	</div>
299 
</div>
3630 idir 300 
<div id="boutons-footer">
301 
	<div id="bloc-fct" class="">
3961 julien 302 
		<a id="bouton-meta" class="btn bouton-fct meta actif" data-volet="meta"
303 
		   title="Informations / métadonnées"><i class="fas fa-info-circle"></i></a>
304 
		<a id="bouton-noter" class="btn bouton-fct noter" data-volet="noter"
305 
		   title="noter la photo"><i class="far fa-star"></i></a>
306 
		<a id="bouton-tags" class="btn bouton-fct tags todo" data-volet="tags"
307 
		   title="tags"><i class="fas fa-tags"></i></a>
308 
		<a id="bouton-signaler" class="btn bouton-fct signaler todo hidden" data-volet="signaler" title="signaler"><i
3960 julien 309 
				class="fas fa-exclamation-triangle"></i></a>
3961 julien 310 
		<a id="bouton-revision" class="btn bouton-fct revision todo hidden" data-volet="revision" title="révision"><i
3960 julien 311 
				class="fas fa-edit"></i></a>
3961 julien 312 
		<a id="bouton-modif" class="btn bouton-fct modif" data-volet="modif" title="modifier la photo"><i
313 
				class="fas fa-redo-alt"></i></a>
314 
		<a id="bouton-aide" class="btn bouton-fct aide todo" data-volet="aide" title="aide"><i
315 
				class="fas fa-question-circle"></i></a>
3630 idir 316 
	</div>
317 
	<a id="retour-galerie" class="btn btn-outline-dark btn-lg bouton-fct hidden"><i class="fa fa-angle-double-down" aria-hidden="true"></i></a>
318 
</div>
319 
<script type="text/Javascript">
320 
	//<![CDATA[
321 
		var widgetProp = {
3837 idir 322 
			'keys':[<?php echo '"'.implode($keys, '","').'"'; ?>],
3823 idir 323 
			'urlWidget'                    : "<?php echo $url_widget; ?>",
324 
			'urls'                         : [<?php echo '"'.implode($urls, '","').'"'; ?>],
3837 idir 325 
			'infosImages'                  : <?php echo json_encode($infos_images); ?>,
3823 idir 326 
			'urlImage'                     : "<?php echo $url_image; ?>",
3837 idir 327 
			'indexPremiereImage'           : <?php echo array_search($url_image, $urls); ?>,
3823 idir 328 
			'tailleMax'                    : 580,
329 
			'popupUrl'                     : "<?php echo $popup_url; ?>",
330 
			'urlBaseTelechargement'        : "<?php echo $url_base_telechargement; ?>",
3958 julien 331 
			'urlServiceRegenererMiniature' : "<?php echo $url_ws_regenerer_img; ?>",
332 
			'userId'       				   : "<?php echo $userId; ?>",
333 
			'token'       				   : "<?php echo $token; ?>",
334 
			'protocoles'				   : <?php echo json_encode($protocoles); ?>
3630 idir 335 
		};
336 
		$( document ).ready( function() {
337 
			popup = new WidgetPhotoPopup( widgetProp );
338 
			popup.init();
339 
		});
340 
	//]]>
341 
</script>