|
1 <!DOCTYPE html> |
|
2 <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> |
|
3 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> |
|
4 <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> |
|
5 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> |
|
6 <head> |
|
7 <meta charset="iso-8859-1"> |
|
8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1, charset=iso-8859-1"> |
|
9 <title></title> |
|
10 <meta name="description" content=""> |
|
11 <meta name="viewport" content="width=device-width"> |
|
12 |
|
13 <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> |
|
14 |
|
15 <link rel="stylesheet" href="css/normalize.css"> |
|
16 <link rel="stylesheet" href="css/bootstrap.css"> |
|
17 <link rel="stylesheet" href="css/resetButton.css"> |
|
18 <link rel="stylesheet" href="css/style.css"> |
|
19 <!--<script src="js/vendor/modernizr-2.6.2.min.js"></script>--> |
|
20 </head> |
|
21 <body> |
|
22 <!--[if lt IE 7]> |
|
23 <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p> |
|
24 <![endif]--> |
|
25 <input type="text" id="champsRecherche" name="nom" value="<?php if(isset($_GET["mot"])){ echo($_GET["mot"]);}?>" size="35"> |
|
26 <div id="filters"> |
|
27 <input type="radio" id="option1" name="filtres" data-filter="*" checked> |
|
28 <label for="option1">Tous</label> |
|
29 <input type="radio" id="option2" name="filtres" data-filter=".intervenant"> |
|
30 <label for="option2">Intervenants</label> |
|
31 <input type="radio" id="option3" name="filtres" data-filter=".discipline"> |
|
32 <label for="option3">Disciplines</label> |
|
33 <!--<input type="radio" id="option4" name="filtres" data-filter=".thematique"> |
|
34 <label for="option4">Thématiques</label>--> |
|
35 </div> |
|
36 |
|
37 <div id="menuExtraContent"> |
|
38 <button href="#project" data-toggle="modal" role="button" class="titrage">Le projet</button> / |
|
39 <button href="#modeEmploi" data-toggle="modal" role="button" class="titrage">Mode d'emploi</button> / |
|
40 <button href="#credits" data-toggle="modal" role="button" class="titrage">Crédits</button> / |
|
41 <a href="http://enmi12.org" class="titrage linkAsButton">ENMI12.org</a> / |
|
42 <button href="#changelogs" data-toggle="modal" role="button" class="titrage">Changelog</button> |
|
43 </div> |
|
44 |
|
45 <div id="project" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> |
|
46 <div class="modal-header"> |
|
47 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> |
|
48 <h3 id="myModalLabel">Le Projet</h3> |
|
49 </div> |
|
50 <div class="modal-body"> |
|
51 <p>Le glossaire des ENMI12 a pour vocation de fournir un éclairage sur les terminologies à travers trois axes : disciplinaire selon les répertoires de disciplines, thématique en fonction des sessions, intervenants selon les propos par intervenants. Parallèlement à cet aspect réferentiel, le glossaire est contributif dans la mesure où il permet au usager de commenter les définitions.</p> |
|
52 </div> |
|
53 </div> |
|
54 |
|
55 <div id="modeEmploi" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> |
|
56 <div class="modal-header"> |
|
57 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> |
|
58 <h3 id="myModalLabel">Mode d'emploi</h3> |
|
59 </div> |
|
60 <div class="modal-body"> |
|
61 <p>Le glossaire des ENMI12 est un outil de recherches fonctionnant par les différentes entrées suivantes: Ars industrialis, vulgarisation, discipline et intervenants; afin de donner un ensemble varié de la définition recherchée. Il suffit d’utiliser la barre de recherche et de cliquer sur le cadre pour visualiser une définition. Il est aussi possible de laisser un commentaire dans l’onglet au même nom, ou de partager le lien de la définition avec l’URL dans le bloc entrée, sous la définition.</p> |
|
62 </div> |
|
63 </div> |
|
64 |
|
65 <div id="credits" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> |
|
66 <div class="modal-header"> |
|
67 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> |
|
68 <h3 id="myModalLabel">Crédits</h3> |
|
69 </div> |
|
70 <div class="modal-body"> |
|
71 <p>Ce glossaire a été conçut et réalisé par <a href="https://twitter.com/AntremontMaxime">Maxime Antremont</a>, <a href="https://twitter.com/lapinsoig">Agathe Capin</a>, <a href="https://twitter.com/HlneCasado">Hélène Casado</a>, <a href="https://twitter.com/pitipoy2">Arthur Morlé</a>, <a href="https://twitter.com/RoriXIX">Lorry Packo</a> et <a href="https://twitter.com/Titatoa">Inès Abbadi</a> dans le cadre des Entretiens du Nouveau Monde Industriel 2012. Dirigé et initié par les étudiants du BTS Communication et Médias numériques de Boulogne-Billancourt. Avec l’encadrement de Sylvia Fredriksson, Gayané Adourian et Nicolas Loubet (<a href="http://www.knowtex.com/">Knowtex</a>), Nicolas Sauret (<a href="http://www.iri.centrepompidou.fr/">IRI</a>).</p> |
|
72 </div> |
|
73 </div> |
|
74 |
|
75 <div id="changelogs" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> |
|
76 <div class="modal-header"> |
|
77 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> |
|
78 <h3 id="myModalLabel">Changelog</h3> |
|
79 </div> |
|
80 <div class="modal-body"> |
|
81 <p><h3>Changements à venir (26/12)</h3> |
|
82 <ul> |
|
83 <li><p><h4>Optimisation de la vitesse d'affichage :</h4>Chargement dynamique des définitions par "blocs" dans la vue utilisateur.</p></li> |
|
84 <li><h4>Compatibilité mobiles et tablettes</h4></li> |
|
85 <li><h4>Ajout de la première couche participative (commentaires)</h4></li> |
|
86 <li><h4>Ajout de couches participatives profondes (ajout de définitions, curation/modification)</h4></li> |
|
87 </ul> |
|
88 </p> |
|
89 <p><h3>Subversions</h3> |
|
90 <ul> |
|
91 <li><h4>V1.3.a - 26/12/2012</h4>Changement mineur : ajout du changelog.</li> |
|
92 <li><h4>V1.2 - 16/12/2012</h4>Ajout du champs de recherche. <span class="ital">WIP : Commentaires / Chargements dynamiques.</span></li> |
|
93 <li><h4>V1 - 12/12/2012</h4>Première version "front" sans champs de recherche. La série des V1.X concerne les versions non participatives et leur optimisation.</li> |
|
94 </ul> |
|
95 </p> |
|
96 </div> |
|
97 </div> |
|
98 |
|
99 |
|
100 <div id="container" class=""> |
|
101 <?php |
|
102 |
|
103 function removeAccents($str, $charset='utf-8') |
|
104 { |
|
105 $str = htmlentities($str, ENT_NOQUOTES, $charset); |
|
106 |
|
107 $str = preg_replace('#&([A-za-z])(?:acute|cedil|circ|grave|orn|ring|slash|th|tilde|uml);#', '\1', $str); |
|
108 $str = preg_replace('#&([A-za-z]{2})(?:lig);#', '\1', $str); // pour les ligatures e.g. 'œ' |
|
109 $str = preg_replace('#&[^;]+;#', '', $str); |
|
110 $str = str_replace(' ','',$str); |
|
111 |
|
112 return $str; |
|
113 } |
|
114 |
|
115 function parsage_normal($noeud, $contenu_a_inserer='') |
|
116 { |
|
117 $innerMenu = '<ul class="content_commentMenu"><li class="defineTile hidden $6 active" >Définition</li><li class="commentTile hidden" >Commentaires</li></ul>'; |
|
118 $definitionContent = '<p class="definitionContent">'; |
|
119 $champCommentaire = '<form name="ajax" method="POST" action><input type="text" name="pseudo" class="pseudoInput" value="nom/pseudo"><input type="text" name="mail" class="mailInput" value="mail"><input type="text" name="twitter" class="twitterInput" value="twitter"><input type="text" name="twitter" class="twitterInput" value="twitter"><textarea name="comment" class="commentInput" value="votre commentaire">votre commentaire</textarea><input type="button" value="Envoyer" class="submitButton" onclick="submitForm(event)"></form>'; |
|
120 $commentLanding = ''; |
|
121 $commentSection = '<div class="commentSection hidden"><div class="commentContainer"></div>' . $champCommentaire . '</div>'; |
|
122 |
|
123 $balise_1 = array('glossaire' => '', |
|
124 'mot' => '<div class="definition folder element $8" data-mot="$6"><h1>$1</h1><input class="champsCopie" type="text" value="$7"><a class="copyButton">Copier</a><div class="tagSet">$5</div></div>', |
|
125 'arsIndustrialis' => '<div class="element arsIndustrialis definition" data-mot="$6"><h2>Glossaire Arsindustrialis</h2>' . $innerMenu . $definitionContent, |
|
126 'discipline' => '<div class="element definition discipline" data-mot="$6"><h2>$1</h2>'. $innerMenu . $definitionContent, |
|
127 'intervenant' => '<div class="element definition intervenant" data-mot="$6"><h2>$1</h2>'. $innerMenu . $definitionContent, |
|
128 'thematique' => '<div class="element definition thematique" data-mot="$6"><h2>$1</h2>'. $innerMenu . $definitionContent, |
|
129 'vulgarisation' => '<div class="element definition vulgarisation" data-mot="$6"><h2>Vulgarisation</h2>'. $innerMenu . $definitionContent, |
|
130 '#text' => ''); // Tableau des balises ouvrantes |
|
131 |
|
132 $balise_2 = array('glossaire' => '', |
|
133 'mot' => '<div class="element intervenant discipline thematique definition row-end"></div>', |
|
134 'arsIndustrialis' => '</p>' . $commentSection . '</div>', |
|
135 'discipline' => '</p>' . $commentSection . '</div>', |
|
136 'intervenant' => '</p>' . $commentSection . '</div>', |
|
137 'thematique' => '</p>' . $commentSection . '</div>','vulgarisation' => '</p>' . $commentSection . '</div>', |
|
138 '#text' => ''); // Tableau des balises ouvrantes |
|
139 |
|
140 $attributs = array('mot' => 'name', |
|
141 'discipline' => 'name', |
|
142 'intervenant' => 'name', |
|
143 'thematique' => 'name', |
|
144 'vulgarisation' => 'name', |
|
145 ); // Tableau des attributs |
|
146 |
|
147 $nom = $noeud->nodeName; |
|
148 |
|
149 if(!empty($contenu_a_inserer)) |
|
150 { |
|
151 $contenu = $contenu_a_inserer; // Si c'est le cas, on met la variable de fonction en contenu |
|
152 } |
|
153 else |
|
154 { |
|
155 $contenu = $noeud->nodeValue; |
|
156 } |
|
157 |
|
158 $premiere_balise = $balise_1[$nom]; |
|
159 |
|
160 if($noeud->hasAttributes()) // On remplace les attributs (sauf pour les images) |
|
161 { |
|
162 $un = $noeud->attributes->getNamedItem($attributs[$nom])->nodeValue; // |
|
163 $premiere_balise = str_replace("$1", $un, $premiere_balise); // On remplace la valeur $1 par celle de l'attribut |
|
164 } |
|
165 |
|
166 if($nom == 'mot') |
|
167 { |
|
168 $decriptions = $noeud -> childNodes; |
|
169 $tags = ''; |
|
170 $wordName = $noeud -> getAttribute('name'); |
|
171 $wordName = strtolower($wordName); |
|
172 $wordName = removeAccents($wordName); |
|
173 $wordName = strtolower($wordName); |
|
174 $wordUrl = 'http://enmi12.org/glossaire/index.php?mot=' . $wordName; |
|
175 |
|
176 foreach($decriptions as $description) |
|
177 { |
|
178 |
|
179 if($description->hasAttributes()) |
|
180 { |
|
181 $nodeAttribute = $description->getAttribute('name'); |
|
182 $nodeAttribute = strtolower($nodeAttribute); |
|
183 $nodeName = $description -> nodeName; |
|
184 $nodeClasses = ''; |
|
185 $nodeClasses .= $nodeName . ' '; |
|
186 $formatedClass = removeAccents($nodeAttribute) . ' ' . $nodeName; |
|
187 |
|
188 $tags .= '<span class="tag ' . $formatedClass . '">' . $nodeAttribute . "</span>"; |
|
189 } |
|
190 else |
|
191 { |
|
192 $nodeName = $description -> nodeName; |
|
193 if($nodeName == 'arsIndustrialis'){ |
|
194 $tags .= '<span class="tag arsIndustrialis">ArsIndustrialis</span>'; |
|
195 } |
|
196 else if($nodeName == 'vulgarisation'){ |
|
197 $tags .= '<span class="tag vulgarisation">Vulgarisation</span>'; |
|
198 } |
|
199 } |
|
200 |
|
201 |
|
202 |
|
203 |
|
204 //else // ... s'il n'en a plus ! |
|
205 //{ |
|
206 // //$accumulation .= parsage_normal($enfant); |
|
207 //} |
|
208 |
|
209 } |
|
210 |
|
211 if(strstr($nodeClasses, 'discipline') == '') |
|
212 { |
|
213 $nodeClasses .= 'discipline '; |
|
214 } |
|
215 |
|
216 $wordName = removeAccents($wordName); |
|
217 $premiere_balise = str_replace("$7", $wordUrl, $premiere_balise); |
|
218 $premiere_balise = str_replace("$8", $nodeClasses, $premiere_balise); |
|
219 $premiere_balise = str_replace("$6", $wordName, $premiere_balise); |
|
220 $premiere_balise = str_replace("$5", $tags, $premiere_balise); |
|
221 } |
|
222 |
|
223 if($nom == 'arsIndustrialis' || $nom == 'discipline' || $nom == 'intervenant' || $nom == 'thematique'|| $nom == 'vulgarisation') |
|
224 { |
|
225 $classeMot = $noeud -> parentNode -> getAttribute('name'); |
|
226 $classeMot = removeAccents($classeMot); |
|
227 $classeMot = strtolower($classeMot); |
|
228 |
|
229 $premiere_balise = str_replace("$6", $classeMot, $premiere_balise); |
|
230 } |
|
231 |
|
232 if($nom == 'image') // Cas particulier des images |
|
233 |
|
234 { |
|
235 $un = $contenu; |
|
236 $premiere_balise = str_replace("$1", $un, $premiere_balise); |
|
237 |
|
238 if($noeud->hasAttributes()) |
|
239 |
|
240 { |
|
241 $deux = $noeud->attributes->getNamedItem('legende')->nodeValue; |
|
242 } |
|
243 else |
|
244 { |
|
245 $deux = 'Image'; |
|
246 } |
|
247 |
|
248 $premiere_balise = str_replace("$2", $deux, $premiere_balise); |
|
249 $intermediaire = $premiere_balise; |
|
250 |
|
251 } |
|
252 else |
|
253 { |
|
254 $intermediaire = $premiere_balise . $contenu . $balise_2[$nom]; // On assemble le tout |
|
255 if($nom == 'liste' or $nom == 'puce') |
|
256 { |
|
257 $intermediaire = preg_replace("#<ul>(\s)*<li>#sU", "<ul><li>", $intermediaire); |
|
258 $intermediaire = preg_replace("#</li>(\s)*<li>#sU", "</li><li>", $intermediaire); |
|
259 $intermediaire = preg_replace("#</li>(\s)*</ul>#sU", "</li></ul>", $intermediaire); |
|
260 } |
|
261 |
|
262 if($nom == 'zcode') |
|
263 { |
|
264 $intermediaire = nl2br($intermediaire); |
|
265 } |
|
266 } |
|
267 return $intermediaire; |
|
268 } |
|
269 |
|
270 function parsage_enfant($noeud) |
|
271 { |
|
272 if(!isset($accumulation)) |
|
273 { |
|
274 $accumulation = ''; |
|
275 } |
|
276 |
|
277 $enfants_niv1 = $noeud->childNodes; |
|
278 |
|
279 foreach($enfants_niv1 as $enfant) |
|
280 { |
|
281 if($enfant->hasChildNodes() == true) |
|
282 { |
|
283 $accumulation .= parsage_enfant($enfant); // Dans ce cas, on revient sur parsage_enfant |
|
284 } |
|
285 else // ... s'il n'en a plus ! |
|
286 { |
|
287 $accumulation .= parsage_normal($enfant); |
|
288 } |
|
289 } |
|
290 return parsage_normal($noeud, $accumulation); |
|
291 } |
|
292 |
|
293 function parsage($document) |
|
294 { |
|
295 $document_xml = new DomDocument(); |
|
296 $document_xml->load($document); |
|
297 $elements = $document_xml->getElementsByTagName('glossaire'); |
|
298 $resultat_html = ''; |
|
299 $arbre = $elements->item(0); |
|
300 |
|
301 $resultat_html = parsage_enfant($arbre); |
|
302 |
|
303 return $resultat_html; |
|
304 } |
|
305 |
|
306 echo parsage('mots.xml'); |
|
307 |
|
308 |
|
309 ?> |
|
310 |
|
311 |
|
312 |
|
313 <script src="js/jquery-1.7.1.min.js" charset="UTF-8"></script> |
|
314 <script src="js/jquery.isotope.min.js" charset="UTF-8"></script> |
|
315 <script src="js/jquery.infinitescroll.min.js" charset="UTF-8"></script> |
|
316 <script src="js/jquery.ba-bbq.min.js" charset="UTF-8"></script> |
|
317 <script src="js/fake-element.js" charset="UTF-8"></script> |
|
318 <script src="js/main.js" charset="UTF-8"></script> |
|
319 <script src="js/form.js" charset="UTF-8"></script> |
|
320 <script src="js/modals.js" charset="UTF-8"></script> |
|
321 <script src="js/ajax.js" charset="UTF-8"></script> |
|
322 <script type="text/javascript" src="js/jquery.zclip.js"></script> |
|
323 </body> |
|
324 </html> |