Subversion Repositories eFlore/Applications.cel

Rev

Rev 3950 | Rev 3960 | 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>
26 
			<a id="signaler-photo" class="btn btn-sm btn-warning"><i class="fas fa-exclamation-triangle"></i>&nbsp;Signaler une photo inappropriée</a>
3823 idir 27 
			<a id="signaler-erreur-id-bis" 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 28 
		</div>
3826 idir 29 
		<div id="bloc-noter" class="bloc-volet noter hidden todo" data-volet="noter">
3630 idir 30 
			<h2>Protocoles</h2>
31 
			<select name="protocole" id="protocole" class="form-control custom-select">
32 
				<option value="" selected hidden>Choix du protocole</option>
33 
				<option id="capitalisation_image" value="capitalisation_image">Capitalisation d'images</option>
34 
				<option id="aide_identification" value="aide_identification">Aide à l'identification</option>
35 
				<option id="defi_photo" value="defi_photo">Défi photo</option>
36 
				<option id="gentiane_azure" value="gentiane_azure">Enquête Gentiane-azuré</option>
37 
				<option id="arbres_tetards" value="arbres_tetards">Arbres têtards</option>
38 
			</select>
3948 julien 39 
			<p id="message-protocole" class="message mt-3">
3630 idir 40 
				Choisissez un protocole pour pouvoir noter la photo
41 
				<!-- le message change en fonction du protocole -->
42 
			</p>
43 
			<div id="bloc-notes-protocole" class="hidden">
44 
				<ul id="notes-protocole-fct">
45 
					<li id="plus-infos-protocole" class="row">
46 
						<div class="col-10 label">Plus d'infos sur le wiki</div>
3948 julien 47 
						<a class="bouton btn btn-sm btn-outline-secondary" href="https://www.tela-botanica.org/wikini/AideCarnetEnLigne/wakka.php?wiki=AideWidgetPhoto" target="_blank"><i
48 
								class="fas fa-question-circle"></i></a>
3630 idir 49 
					</li>
3948 julien 50 
					<li id="note" class="row">
3630 idir 51 
						<div class="col-5 label">Notez</div>
3948 julien 52 
						<div class="col-5 contenu"><!-- étoiles -->
53 
							<i id="rating-star-1" class="far fa-star notation-star"></i>
54 
							<i id="rating-star-2" class="far fa-star notation-star"></i>
55 
							<i id="rating-star-3" class="far fa-star notation-star"></i>
56 
							<i id="rating-star-4" class="far fa-star notation-star"></i>
57 
							<i id="rating-star-5" class="far fa-star notation-star"></i>
58 
						</div>
59 
							<a id="note-remove"
60 
							   class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-backspace"></i></a>
3630 idir 61 
					</li>
3948 julien 62 
					<li id="note-moyenne" class="row d-flex justify-content-between">
3630 idir 63 
						<div class="col-5 label">Note Moyenne</div>
64 
						<div class="col-5 contenu" style="text-align:right;"></div>
65 
					</li>
3948 julien 66 
					<li id="note-count" class="row d-flex justify-content-between">
3630 idir 67 
						<div class="col-5 label">Nombre de votes</div>
68 
						<div class="col-5 contenu" style="text-align:right;"></div>
69 
					</li>
70 
				</ul>
71 
			</div>
72 
		</div>
3826 idir 73 
		<div id="bloc-signaler" class="bloc-volet signaler hidden todo" data-volet="signaler">
3630 idir 74 
			<h2>Signaler</h2>
75 
			<h3>Signaler une photo inappropriée</h3>
76 
			<p id="message-signaler" class="message">
77 
				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.
78 
			</p>
79 
			<li id="exemple-inapproprie" class="row">
80 
				<div class="col-10 label">Exemple de photos inappropriées</div>
81 
				<a class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-question-circle"></i></a>
82 
			</li>
83 
			<li id="plus-infos-signaler" class="row">
84 
				<div class="col-10 label">Plus d'infos sur le wiki</div>
3950 julien 85 
				<a class="bouton btn btn-sm btn-outline-secondary"
86 
				   href="https://www.tela-botanica.org/wikini/AideCarnetEnLigne/wakka.php?wiki=AideWidgetPhoto" target="_blank"><i class="fas fa-question-circle"></i></a>
3630 idir 87 
			</li>
88 
			<form id="type-inapprorie">
89 
				<div class="list-label">
90 
					En quoi cette photo est-elle inappropriée ?
91 
				</div>
92 
				<div class="list">
93 
					<div class="form-check">
94 
						<input type="checkbox" id="non-vegetale" name="type-inapprorie" class="non-vegetale form-check-input" value="non-vegetale">
95 
						<label for="non-vegetale" class="non-vegetale form-check-label">Photo non végétale</label>
96 
					</div>
97 
					<div class="form-check">
98 
						<input type="checkbox" id="ecran" name="type-inapprorie" class="ecran form-check-input" value="ecran">
99 
						<label for="ecran" class="ecran form-check-label">Photo d'écran</label>
100 
					</div>
101 
					<div class="form-check">
102 
						<input type="checkbox" id="floue-pixelisee" name="type-inapprorie" class="floue-pixelisee form-check-input" value="floue-pixelisee">
103 
						<label for="floue-pixelisee" class="floue-pixelisee form-check-label">Photo floue ou pixelisée</label>
104 
					</div>
105 
					<div class="form-check">
106 
						<input type="checkbox" id="cultivee-pot" name="type-inapprorie" class="cultivee-pot form-check-input" value="cultivee-pot">
107 
						<label for="cultivee-pot" class="cultivee-pot form-check-label">Plante cultivée / en pot</label>
108 
					</div>
109 
				</div>
110 
			</form>
3823 idir 111 
			<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 112 
		</div>
113 
 
114 
 
115 
		<!-- pas pour la version 1 -->
3826 idir 116 
		<div id="bloc-revision" class="bloc-volet revision hidden todo" data-volet="revision">
3630 idir 117 
			<h2>Révision</h2>
118 
			<h3>Proposition de détermination</h3>
119 
 
120 
		</div>
121 
 
122 
 
123 
 
124 
		<div id="bloc-meta" class="bloc-volet meta" data-volet="meta">
125 
			<h2>Métadonnées</h2>
126 
			<ul id="contenu-meta">
127 
				<li id="nom" class="row">
128 
					<div class="col-5 label">Nom</div>
129 
					<div class="col-5 contenu"></div>
3823 idir 130 
					<a class="bouton btn btn-sm btn-outline-secondary" target="_blank"><i class="fas fa-search"></i></a>
3630 idir 131 
				</li>
132 
				<li id="localisation" class="row">
133 
					<div class="col-5 label">Localisation</div>
134 
					<div class="col-5 contenu"></div>
3823 idir 135 
					<a id="obs-localisation" class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-map-marker-alt"></i></a>
3630 idir 136 
				</li>
137 
				<li id="auteur" class="row">
138 
					<div class="col-5 label">Auteur</div>
139 
					<div class="col-5 contenu"></div>
3826 idir 140 
					<a class="bouton btn btn-sm btn-outline-secondary" target="_blank"><i class="fas fa-user"></i></a>
3630 idir 141 
				</li>
142 
				<li id="date-obs" class="row">
143 
					<div class="col-5 label">Date d'observation</div>
144 
					<div class="col-5 contenu"></div>
145 
				</li>
3823 idir 146 
				<li id="commentaire" class="row">
3630 idir 147 
					<div class="col-5 label">Commentaires</div>
148 
					<div class="col-5 contenu"></div>
149 
				</li>
150 
				<li id="certitude" class="row">
151 
					<div class="col-5 label">Certitude de l'identification</div>
152 
					<div class="col-5 contenu"></div>
153 
				</li>
154 
				<li id="fiabilite" class="row">
3825 idir 155 
					<div class="col-5 label">Grade</div>
3630 idir 156 
					<div class="col-5 contenu"></div>
3827 idir 157 
					<a class="bouton btn btn-sm btn-outline-secondary todo"><i class="fas fa-question-circle"></i></a>
3630 idir 158 
				</li>
159 
			</ul>
160 
			<a id="plus-meta" class="afficher-plus"><i class="fas fa-angle-down"></i>&nbsp;Afficher plus de metadonnées sur l'observation</a>
161 
			<ul id="contenu-meta-plus"></ul>
162 
			<ul id="contenu-meta-suite">
163 
				<li id="num-photo" class="row">
164 
					<div class="col-5 label">Photo n°</div>
165 
					<div class="col-5 contenu"></div>
166 
				</li>
167 
				<li id="licence" class="row">
168 
					<div class="col-5 label">Licence</div>
3823 idir 169 
					<div class="col-5 contenu">
170 
						<a target="_blank" href="http://creativecommons.org/licenses/by-sa/2.0/fr/">CC-BY-SA 2.0 FR</a>
171 
					</div>
3630 idir 172 
				</li>
173 
			</ul>
3823 idir 174 
 
175 
			<a id="signaler-erreur-id" 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" href="https://www.tela-botanica.org/appli:identiplante"><i class="fas fa-exclamation-triangle"></i>&nbsp;Signaler une erreur d'identification</a>
176 
 
3630 idir 177 
			<h2>Téléchargement</h2>
178 
			<ul id="contenu-telechargement">
179 
				<li id="titre-original" class="row">
180 
					<div class="col-5 label">Titre original</div>
3829 idir 181 
					<div class="col-7 contenu"></div>
3630 idir 182 
				</li>
183 
				<li id="date-photo" class="row">
184 
					<div class="col-5 label">Date de la photo</div>
3829 idir 185 
					<div class="col-7 contenu"></div>
3630 idir 186 
				</li>
187 
				<li id="Licence-bis" class="row">
188 
					<div class="col-5 label">Licence</div>
3829 idir 189 
					<div class="col-7 contenu">
3823 idir 190 
						<a target="_blank" href="http://creativecommons.org/licenses/by-sa/2.0/fr/">CC-BY-SA 2.0 FR</a>
191 
					</div>
3630 idir 192 
				</li>
193 
				<li id="attribution" class="row">
3823 idir 194 
					<div class="col-12 label">Attribution</div>
195 
					<div class="col-12 contenu">
196 
						<input id="attribution-copy" type="text" name="attribution-copy" rows="4" class="form-control" readonly="readonly" style="width: 100%; height: 100%;">
197 
					</div>
3630 idir 198 
				</li>
199 
				<li id="url" class="row">
3823 idir 200 
					<div class="col-12 label">Url</div>
201 
					<div class="col-12 contenu">
202 
						<input id="url-copy" type="text" name="url-copy" rows="2" class="form-control" readonly="readonly" style="width: 100%; height: 100%;">
203 
					</div>
3630 idir 204 
				</li>
205 
			</ul>
3825 idir 206 
			<ul id="contenu-telechargement-suite" class="mb-0">
3630 idir 207 
				<li id="autres-formats" class="row">
3825 idir 208 
					<div class="col-12 label">Autres formats</div>
209 
					<div class="col-12 contenu">
3630 idir 210 
						<select name="formats" id="formats" class="form-control custom-select">
3823 idir 211 
						<?php foreach ($formats_description as $format => $description):?>
212 
							<option value="<?php echo $format; ?>" <?php echo $format === 'O' ? 'selected' : ''; ?>><?php echo $description; ?></option>
213 
						<?php endforeach; ?>
3630 idir 214 
						</select>
215 
					</div>
216 
				</li>
217 
			</ul>
3825 idir 218 
			<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>
3826 idir 219 
			<h2 class="todo">Partagez !</h2>
220 
			<p class="message todo">
3630 idir 221 
				Partagez cette photo sur les réseaux sociaux
222 
			</p>
3826 idir 223 
			<div id="boutons-reseaux-sociaux" class="todo">
3950 julien 224 
				<a id="facebook" class="btn btn-outline-secondary btn-lg"
225 
				   href="https://www.facebook.com/telabotanica/" target="_blank"><i class="fab fa-facebook-f"></i></a>
226 
				<a id="twitter" class="btn btn-outline-secondary btn-lg" href="https://twitter.com/TelaBotanica" target="_blank"><i
227 
						class="fab fa-twitter"></i></a>
228 
				<a id="mail" class="btn btn-outline-secondary btn-lg" href="mailto:cel_remarques@tela-botanica.org"><i class="fas fa-envelope"></i>
229 
				</a>
3630 idir 230 
			</div>
231 
		</div>
232 
		<div id="bloc-modif" class="bloc-volet modif hidden" data-volet="modif">
233 
			<h2>Modifier la photo</h2>
3826 idir 234 
			<h3 class="todo">Faire pivoter la photo</h3>
235 
			<div id="pivoter-photo" class="d-flex justify-content-around todo">
3630 idir 236 
				<div id="bloc-pivoter-droite" class="d-flex flex-column">
237 
					<label for="pivoter-droite">Pivoter à droite</label>
238 
					<a id="pivoter-droite" class="btn btn-success btn-lg"><i class="fas fa-redo"></i></a>
239 
				</div>
240 
				<div id="bloc-pivoter-gauche" class="d-flex flex-column">
241 
					<label for="pivoter-gauche">Pivoter à gauche</label>
242 
					<a id="pivoter-gauche" class="btn btn-success btn-lg"><i class="fas fa-undo"></i></a>
243 
				</div>
244 
			</div>
245 
			<h3>Régénérer miniature</h3>
246 
			<p id="message-regenerer" class="message">
247 
				Vous avez remarqué un problème dans l'affichage de la miniature de cette photo ? Vous pouvez la régénérer ci-dessous !
248 
			</p>
249 
			<a id="regenerer-miniature" class="btn btn-warning btn-lg"><i class="fas fa-recycle"></i>&nbsp;Régénérer la miniature</a>
250 
		</div>
3826 idir 251 
		<div id="bloc-aide" class="bloc-volet aide hidden todo" data-volet="aide">
3630 idir 252 
			<h2>Aide</h2>
253 
			<p id="texte-aide" class="message">
254 
				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.
255 
 
256 
				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.
257 
 
258 
				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.
259 
			</p>
260 
			<ul id="aide-plus">
261 
				<li id="plus-infos" class="row">
262 
					<div class="col-10 label">Plus d'infos sur le wiki</div>
3950 julien 263 
					<a class="bouton btn btn-sm btn-outline-secondary" target="_blank" href="https://www.tela-botanica.org/wikini/AideCarnetEnLigne/wakka.php?wiki=AideWidgetPhoto"><i
264 
							class="fas fa-question-circle"></i></a>
3630 idir 265 
				</li>
266 
				<li id="autres-questions" class="row">
267 
					<div class="col-10 label">D'autres questions ? Écrivez-nous !</div>
3950 julien 268 
					<a class="bouton btn btn-sm btn-outline-secondary"
269 
					   href="mailto:cel_remarques@tela-botanica.org"><i class="fas fa-envelope"></i></a>
3630 idir 270 
				</li>
271 
			</ul>
272 
 
273 
		</div>
274 
 
275 
		<div class="nettoyage-volet bas"></div>
1480 aurelien 276 
	</div>
3630 idir 277 
 
278 
</div>
279 
<div id="info-img-galerie" class="carousel col-lg-8 col-12" data-ride="carousel" data-interval="false">
280 
	<div class="carousel-inner h-100 w-100">
3837 idir 281 
		<?php $urls = array_keys($infos_images); ?>
282 
		<?php for($index = 0; $index < count($urls); $index++):?>
3630 idir 283 
			<div id="img-cadre-<?php echo $index; ?>" class="carousel-item">
3837 idir 284 
				<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 285 
			</div>
286 
		<?php endfor; ?>
287 
		<a id="precedent" class="carousel-control-prev carousel-control" href="#info-img-galerie" role="button" data-slide="prev">
288 
			<i class="fas fa-chevron-circle-left"></i>
289 
			<span class="sr-only">Precedent</span>
1480 aurelien 290 
		</a>
3630 idir 291 
		<a id="suivant" class="carousel-control-next carousel-control" href="#info-img-galerie" role="button" data-slide="next">
292 
			<i class="fas fa-chevron-circle-right"></i>
293 
			<span class="sr-only">Suivant</span>
294 
		</a>
1480 aurelien 295 
	</div>
296 
</div>
3630 idir 297 
<div id="boutons-footer">
298 
	<div id="bloc-fct" class="">
3826 idir 299 
		<a id="bouton-tags" class="btn bouton-fct tags todo" data-volet="tags"><i class="fas fa-tags"></i></a>
300 
		<a id="bouton-noter" class="btn bouton-fct noter todo" data-volet="noter"><i class="far fa-star"></i></a>
301 
		<a id="bouton-signaler" class="btn bouton-fct signaler todo" data-volet="signaler"><i class="fas fa-exclamation-triangle"></i></a>
302 
		<a id="bouton-revision" class="btn bouton-fct revision todo" data-volet="revision"><i class="fas fa-edit"></i></a>
3630 idir 303 
		<a id="bouton-meta" class="btn bouton-fct meta actif" data-volet="meta"><i class="fas fa-info-circle"></i></a>
304 
		<a id="bouton-modif" class="btn bouton-fct modif" data-volet="modif"><i class="fas fa-redo-alt"></i></a>
3826 idir 305 
		<a id="bouton-aide" class="btn bouton-fct aide todo" data-volet="aide"><i class="fas fa-question-circle"></i></a>
3630 idir 306 
	</div>
307 
	<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>
308 
</div>
309 
<script type="text/Javascript">
310 
	//<![CDATA[
311 
		var widgetProp = {
3837 idir 312 
			'keys':[<?php echo '"'.implode($keys, '","').'"'; ?>],
3823 idir 313 
			'urlWidget'                    : "<?php echo $url_widget; ?>",
314 
			'urls'                         : [<?php echo '"'.implode($urls, '","').'"'; ?>],
3837 idir 315 
			'infosImages'                  : <?php echo json_encode($infos_images); ?>,
3823 idir 316 
			'urlImage'                     : "<?php echo $url_image; ?>",
3837 idir 317 
			'indexPremiereImage'           : <?php echo array_search($url_image, $urls); ?>,
3823 idir 318 
			'tailleMax'                    : 580,
319 
			'popupUrl'                     : "<?php echo $popup_url; ?>",
320 
			'urlBaseTelechargement'        : "<?php echo $url_base_telechargement; ?>",
3958 julien 321 
			'urlServiceRegenererMiniature' : "<?php echo $url_ws_regenerer_img; ?>",
322 
			'userId'       				   : "<?php echo $userId; ?>",
323 
			'token'       				   : "<?php echo $token; ?>",
324 
			'protocoles'				   : <?php echo json_encode($protocoles); ?>
3630 idir 325 
		};
326 
		$( document ).ready( function() {
327 
			popup = new WidgetPhotoPopup( widgetProp );
328 
			popup.init();
329 
		});
330 
	//]]>
331 
</script>