www

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs
commit 1a2140e52aa2e4d5fa85a3e53a5a5372312f447e
parent 7dc8c060a091e16483ffe86bfeeff0beabd09eb0
Author: Georges Dupéron <jahvascriptmaniac+github@free.fr>
Date:   Sun,  5 Sep 2010 22:20:03 +0200

Encore un peu de refactor.

Chaque vue de noeud (html) contient maintenant .étiquette et .contenu (sauf les noeuds texte).

Diffstat:

Mediteur.css | 75++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------


Mediteur.html | 2+-


Mediteur.js | 55++++++++++++++++++++++++-------------------------------


3 files changed, 81 insertions(+), 51 deletions(-)

diff --git a/editeur.css b/editeur.css
@@ -1,3 +1,17 @@
+/* Hacks :
+ * 
+ * Si on fait <span class="important">un truc</span> avec
+ *     .important        { background-color: pink; }
+ *     .important:before { background-color: red;  font-size: x-small; content: "Important"; }
+ * alors le "Important" est sur fond rouge, mais la ligne est moins haute, donc on voit du rose an haut et en bas.
+ * Par contre, en faisant <span class="important"><span class="étiquette"></span>un truc</span> et avec
+ *     .important                  { background-color: pink; }
+ *     .important.étiquette        { background-color: red;}
+ *     .important.étiquette:before { font-size: x-small; content: "Important"; }
+ * on a l'effet désiré (le .étiquette est en rouge, et le "important" est sur une ligne moins haute _à l'intérieur_
+ * du .étiquette, donc on ne remarque pas qu'elle est moins haute.
+ */
+
 .conteneur-esem {
 	border: thin solid black;
 }
@@ -25,9 +39,10 @@
 	display:block;
 	margin-bottom: 0.3em;
 }
-
-.conteneur-esem .noeud.multi-ligne:before {
+.conteneur-esem .noeud.multi-ligne .étiquette {
 	display:block;
+}
+.conteneur-esem .noeud.multi-ligne .étiquette:before {
 	font-size: smaller;
 }
 
@@ -36,23 +51,25 @@
 	display: block;
 	margin-bottom: 0.3em;
 }
-
-.conteneur-esem .noeud.mono-ligne:before {
+.conteneur-esem .noeud.mono-ligne .étiquette {
 	border-right: medium solid white;
 	padding: 0 0.3em;
 	display: inline-block;
 }
+.conteneur-esem .noeud.mono-ligne .étiquette:before {
+}
 
 /* Noeuds En-ligne */
 .conteneur-esem .noeud.en-ligne {
 	display: inline;
 }
-
-.conteneur-esem .noeud.en-ligne:before {
+.conteneur-esem .noeud.en-ligne .étiquette {
 	padding: 0 0.3em;
-	font-size: smaller;
 	display: inline-block;
 }
+.conteneur-esem .noeud.en-ligne .étiquette:before {
+	font-size: smaller;
+}
 
 /* Titre */
 .conteneur-esem .noeud.titre {
@@ -60,39 +77,59 @@
 	font-size: large;
 	border: thick solid #ddd;
 }
-
-.conteneur-esem .noeud.titre:before {
+.conteneur-esem .noeud.titre .étiquette {
+	background-color: #ddd;
+}
+.conteneur-esem .noeud.titre .étiquette:before {
 	content: "Titre";
 	font-weight: bold;
-	background-color: #ddd;
 }
 
 /* Paragraphe */
 .conteneur-esem .noeud.paragraphe {
 	border: thick solid #ddd;
 }
-
-.conteneur-esem .noeud.paragraphe:before {
-	content: "Paragraphe";
+.conteneur-esem .noeud.paragraphe .étiquette {
 	background-color: #ddd;
 }
+.conteneur-esem .noeud.paragraphe .étiquette:before {
+	content: "Paragraphe";
+}
 
 /* Important */
 .conteneur-esem .noeud.important {
 	background-color: mistyrose;
 }
-
-.conteneur-esem .noeud.important:before {
-	content: "Important";
+.conteneur-esem .noeud.important .étiquette {
 	background-color: pink;
+	border: thin solid pink;
+}
+.conteneur-esem .noeud.important .étiquette:before {
+	content: "Important";
+}
+.conteneur-esem .noeud.important .contenu {
+	border: thin solid pink;
 }
 
 /* Lien */
 .conteneur-esem .noeud.lien {
 	background-color: #ddf;
 }
-
-.conteneur-esem .noeud.lien:before {
-	content: "Lien";
+.conteneur-esem .noeud.lien .étiquette {
 	background-color: #aaf;
+	border: thin solid #aaf;
+}
+.conteneur-esem .noeud.lien .étiquette:before {
+	content: "Lien";
+}
+.conteneur-esem .noeud.lien .cible {
+	border: thin solid #aaf;
+	padding: 0 0.2em;
+	color: blue;
+	background-color: #eef;
+}
+.conteneur-esem .noeud.lien .texte {
+	border: thin solid #aaf;
+	border-left: none;
+	padding: 0 0.2em;
 }
 \ No newline at end of file
diff --git a/editeur.html b/editeur.html
@@ -13,7 +13,7 @@
 	<body>
 		<textarea class="éditeur-semantique" cols="70" rows="15">
 &lt;titre&gt;&lt;texte&gt;Test&lt;/texte&gt;&lt;/titre&gt;
-&lt;paragraphe&gt;&lt;important&gt;&lt;texte&gt;hello world&lt;/texte&gt;&lt;/important&gt;&lt;texte&gt;, bonjour &lt;/texte&gt;&lt;lien interne="false" cible="http://www.example.com/"&gt;monde&lt;/lien&gt;&lt;texte&gt; !&lt;/texte&gt;&lt;/paragraphe&gt;
+&lt;paragraphe&gt;&lt;important&gt;&lt;texte&gt;hello world&lt;/texte&gt;&lt;/important&gt;&lt;texte&gt;, bonjour &lt;/texte&gt;&lt;lien interne="false" cible="http://www.example.com/" texte="monde"&gt;&lt;/lien&gt;&lt;texte&gt; !&lt;/texte&gt;&lt;/paragraphe&gt;
 </textarea>
 	</body>
 </html>
diff --git a/editeur.js b/editeur.js
@@ -7,6 +7,7 @@ $.fn.extend({
 		for (var i = 0; i < modèle.contenu.length; i++) {
 			this.append(modèle.contenu[i].créerVue(typeVue));
 		}
+		return this;
 	}
 });
 
@@ -16,9 +17,7 @@ var typesNoeud = {
 		enfants: ['titre', 'paragraphe'],
 		// surcharge de la _fonction_ "vue" (pas le tableau "vues").
 		vue: function() {
-			var ret = $('<div class="conteneur-esem"/>');
-			ret.appendVuesEnfants(this, 'aperçu');
-			return ret;
+			return $('<div class="conteneur-esem"/>').appendVuesEnfants(this, 'aperçu');
 		}
 	},
 	titre: {
@@ -38,9 +37,9 @@ var typesNoeud = {
 		enfants: ['texte'],
 		vues: {
 			aperçu: function() {
-				var ret = $('<span class="noeud lien en-ligne"/>');
-				$('<span class="cible"/>').text(this.propriétés.cible).appendTo(ret);
-				$('<span class="texte"/>').text(this.texte).appendTo(ret);
+				var ret = squeletteAperçuNoeud(this);
+				$('<span class="cible"/>').text(this.propriétés.cible).appendTo(ret.children(".contenu"));
+				$('<span class="texte"/>').text(this.propriétés.texte).appendTo(ret.children(".contenu"));
 				return ret;
 			},
 			édition: function() {
@@ -48,8 +47,9 @@ var typesNoeud = {
 			},
 		},
 		propriétés: {
-			'interne': false,
-			'cible': 'http://example.com/'
+			interne: false,
+			cible: 'http://example.com/',
+			texte: 'texte du lien'
 		}
 	},
 	texte: {
@@ -68,22 +68,26 @@ var typesNoeud = {
 	}
 };
 
+function squeletteAperçuNoeud(noeud) {
+	var ct = {};
+	ct[MULTI_LIGNE] = { tag: 'div',  tagc: 'div',  cat: 'multi-ligne' };
+	ct[MONO_LIGNE]  = { tag: 'div',  tagc: 'span', cat: 'mono-ligne' };
+	ct[EN_LIGNE]    = { tag: 'span', tagc: 'span', cat: 'en-ligne' };
+	ct = ct[typesNoeud[noeud.type].catégorie];
+	
+	var html = $('<' + ct.tag + ' class="noeud"/>').addClass(noeud.type).addClass(ct.cat);
+	var étiquette = $('<span class="étiquette"/>').appendTo(html);
+	var contenu = $('<' + ct.tagc + ' class="contenu"/>').appendTo(html);
+	return html;
+}
+
 var typeNoeudDéfaut = {
 	catégorie: EN_LIGNE,
 	enfants: ['texte'],
 	vues: {
 		aperçu: function() {
-			var ct = {};
-			ct[MULTI_LIGNE] = { tag: 'div', cat: 'multi-ligne' };
-			ct[MONO_LIGNE] = { tag: 'div', cat: 'mono-ligne' };
-			ct[EN_LIGNE] = { tag: 'span', cat: 'en-ligne' };
-			ct = ct[typesNoeud[this.type].catégorie];
-			
-			var html = $('<' + ct.tag + ' class="noeud"/>');
-			html.addClass(this.type);
-			html.addClass(ct.cat);
-			html.appendVuesEnfants(this, 'aperçu');
-			return html;
+			return squeletteAperçuNoeud(this)
+				.children(".contenu").appendVuesEnfants(this, 'aperçu').end();
 		},
 		edition: function() {
 			return $('<div class="info">Cliquez sur du texte pour le modifier.</div>');
@@ -210,18 +214,7 @@ function xmlVersModèle(xml) {
 
 			// Vue
 			créerVue: function(typeVue) {
-				surcharge = typesNoeud[tag].vue;
-				if (typeof surcharge == "function") {
-					return surcharge.call(this, typeVue);
-				} else if (typeof surcharge == "object" && typeof surcharge[typeVue] == "function") {
-					return surcharge[typeVue].call(this);
-				} else {
-					var ret = $('<div/>').text("" + typeVue);
-					for (var i = 0; i < this.contenu.length; i++) {
-						ret.append(this.contenu[i].créerVue('aperçu'));
-					}
-					return ret;
-				}
+				return typesNoeud[tag].vue.call(this, typeVue);;
 			}
 		};