commit 7dc8c060a091e16483ffe86bfeeff0beabd09eb0
parent 9f13e4ca99a6bea1c12db6a61d57f26509602250
Author: Georges Dupéron <jahvascriptmaniac+github@free.fr>
Date: Sun, 5 Sep 2010 21:07:44 +0200
Refactor des types de noeuds.
Diffstat:
| M | editeur.css | | | 59 | +++++++++++++++++++++++++++++++++++++++++++++-------------- |
| M | editeur.html | | | 2 | +- |
| M | editeur.js | | | 124 | +++++++++++++++++++++++++++++++++++++++++++------------------------------------ |
| M | todo | | | 1 | - |
4 files changed, 113 insertions(+), 73 deletions(-)
diff --git a/editeur.css b/editeur.css
@@ -14,55 +14,85 @@
margin: 0.5em;
}
-.conteneur-esem .noeud {
- margin-bottom: 0.1em;
-}
-
-
.conteneur-esem .boutons .bouton {
border: thin solid black;
background-color: white;
}
-.conteneur-esem .noeud.document {
+/* Noeuds Multi-ligne */
+.conteneur-esem .noeud.multi-ligne {
+ display:block;
+ margin-bottom: 0.3em;
+}
+
+.conteneur-esem .noeud.multi-ligne:before {
+ display:block;
+ font-size: smaller;
+}
+
+/* Noeuds Mono-ligne */
+.conteneur-esem .noeud.mono-ligne {
display: block;
+ margin-bottom: 0.3em;
+}
+
+.conteneur-esem .noeud.mono-ligne:before {
+ border-right: medium solid white;
+ padding: 0 0.3em;
+ display: inline-block;
+}
+
+/* Noeuds En-ligne */
+.conteneur-esem .noeud.en-ligne {
+ display: inline;
}
+.conteneur-esem .noeud.en-ligne:before {
+ padding: 0 0.3em;
+ font-size: smaller;
+ display: inline-block;
+}
+
+/* Titre */
.conteneur-esem .noeud.titre {
font-weight: bold;
font-size: large;
border: thick solid #ddd;
- display: block;
}
.conteneur-esem .noeud.titre:before {
content: "Titre";
font-weight: bold;
- padding: 0 0.3em;
background-color: #ddd;
}
+/* Paragraphe */
.conteneur-esem .noeud.paragraphe {
border: thick solid #ddd;
- display: block;
}
.conteneur-esem .noeud.paragraphe:before {
content: "Paragraphe";
- font-size: smaller;
background-color: #ddd;
- display:block;
}
+/* Important */
.conteneur-esem .noeud.important {
background-color: mistyrose;
}
.conteneur-esem .noeud.important:before {
content: "Important";
- padding: 0 0.3em;
- font-size: smaller;
background-color: pink;
- display: inline;
}
+
+/* Lien */
+.conteneur-esem .noeud.lien {
+ background-color: #ddf;
+}
+
+.conteneur-esem .noeud.lien:before {
+ content: "Lien";
+ background-color: #aaf;
+}
+\ 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">
<titre><texte>Test</texte></titre>
-<paragraphe><important><texte>hello world</texte></important><texte>, bonjour monde !</texte></paragraphe>
+<paragraphe><important><texte>hello world</texte></important><texte>, bonjour </texte><lien interne="false" cible="http://www.example.com/">monde</lien><texte> !</texte></paragraphe>
</textarea>
</body>
</html>
diff --git a/editeur.js b/editeur.js
@@ -2,59 +2,49 @@ var MULTI_LIGNE = 0;
var MONO_LIGNE = 1;
var EN_LIGNE = 2;
-function appendVuesEnfants(html, typeVue) {
- for (var i = 0; i < this.contenu.length; i++) {
- html.append(this.contenu[i].créerVue(typeVue));
+$.fn.extend({
+ appendVuesEnfants: function (modèle, typeVue) {
+ for (var i = 0; i < modèle.contenu.length; i++) {
+ this.append(modèle.contenu[i].créerVue(typeVue));
+ }
}
-}
+});
+
var typesNoeud = {
document: {
catégorie: MULTI_LIGNE,
enfants: ['titre', 'paragraphe'],
+ // surcharge de la _fonction_ "vue" (pas le tableau "vues").
vue: function() {
var ret = $('<div class="conteneur-esem"/>');
- appendVuesEnfants.call(this, ret, 'aperçu');
+ ret.appendVuesEnfants(this, 'aperçu');
return ret;
}
},
titre: {
catégorie: MONO_LIGNE,
enfants: ['important', 'texte'],
- vue: function() {
- var ret = $('<div class="noeud titre mono-ligne"/>');
- appendVuesEnfants.call(this, ret, 'aperçu');
- return ret;
- }
},
paragraphe: {
catégorie: MULTI_LIGNE,
enfants: ['important', 'texte'],
- vue: function() {
- var ret = $('<div class="noeud paragraphe multi-ligne"/>');
- appendVuesEnfants.call(this, ret, 'aperçu');
- return ret;
- }
},
important: {
catégorie: EN_LIGNE,
enfants: ['texte'],
- vue: function() {
- var ret = $('<span class="noeud important en-ligne"/>');
- appendVuesEnfants.call(this, ret, 'aperçu');
- return ret;
- }
},
lien: {
catégorie: EN_LIGNE,
enfants: ['texte'],
- vue: {
- aperçu: function(typeVue) {
- return aperçu_noeud(this)
- .children(".étiquette")
- .append('<img src="..." alt="">');
+ 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);
+ return ret;
},
- édition: function(n) {
- return édition_noeud(n).prepend('<input type="text" value="propriété <cible>"/>')
+ édition: function() {
+ return édition_noeud(this).prepend('<input type="text" value="<<<propriétés.cible>>>"/>')
},
},
propriétés: {
@@ -65,23 +55,59 @@ var typesNoeud = {
texte: {
catégorie: EN_LIGNE,
enfants: [],
- vue: {
+ vues: {
aperçu: function(typeVue) {
return $('<span class="noeud texte en-ligne"/>')
- /* .append($('<span class="étiquette">texte</span>')) */
- .append($('<span class="contenu"/>').text(this.texte));
+ .text(this.texte);
// .bind_text(this.texte);
},
édition: function(n) {
return $("<textarea/>").bind_val(n.texte);
},
- },
- propriétés: {
- texte: new valeur("")
}
}
};
+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;
+ },
+ edition: function() {
+ return $('<div class="info">Cliquez sur du texte pour le modifier.</div>');
+ }
+ },
+ vue: function (typeVue) {
+ return typesNoeud[this.type].vues[typeVue].call(this, typeVue);
+ },
+ propriétés: {}
+}
+
+function nettoyerTypesNoeud(typesNoeud) {
+ var tn = {};
+
+ for (var i in typesNoeud) {
+ tn[i] = $.extend({}, typeNoeudDéfaut, typesNoeud[i]);
+ tn[i].vues = $.extend({}, typeNoeudDéfaut.vues, typesNoeud[i].vues);
+ }
+
+ return tn;
+}
+
+typesNoeud = nettoyerTypesNoeud(typesNoeud);
+
$(function() {
$(".éditeur-semantique").each(function(i,e) {
éditeurSémantique(e);
@@ -112,6 +138,7 @@ function xmlVersModèle(xml) {
contenu: $(xml).children().map(function (i,e) {
return recursion(e, {p:ret}, document);
}).get(),
+ propriétés: typesNoeud[tag].propriétés,
// Navigation
parent: function() { return parent.p; },
@@ -197,6 +224,13 @@ function xmlVersModèle(xml) {
}
}
};
+
+ for (var i in ret.propriétés) {
+ var propval = $(xml).attr(i);
+ if (typeof propval != "undefined") {
+ ret.propriétés[i]
+ }
+ }
return ret;
}
@@ -260,30 +294,6 @@ function valeur(v) { // TODO : voir si ça peut marcher aussi pour des élément
return f;
}
-function aperçu_noeud(n) {
- switch (noeud.type.catégorie) {
- case MULTI_LIGNE:
- var tag='div';
- var cat='multi-ligne';
- break;
- case MONO_LIGNE:
- var tag='div';
- var cat='mono-ligne';
- break;
- case EN_LIGNE:
- var tag='span';
- var cat='en-ligne';
- break;
- }
-
- var html = $('<' + tag + ' class="noeud"/>');
- html.addClass(n.type.classe).addClass(cat);
- $('<span class="étiquette"/>').text(n.type.étiquette).appendTo(html);
- $('<span class="contenu"/>').text(n.type.étiquette).appendTo(html);
-
- return html;
-}
-
function unique_enfant_texte(n) {
return (n.enfants().length == 1 && n.enfants(0).type == 'texte')
}
diff --git a/todo b/todo
@@ -12,5 +12,4 @@ Afficher "texte" pour les noeuds texte ?
Faire du M(VC) !!! Modèle -> objet javascript (DOM + focus), vue/contrôleur -> arbre, aperçu, paneau d'édition
Court-terme :
-corriger et compléter typesNoeud;
nettoyer typesNoeud (toujours avoir une fonction vue() au lieu d'un tableau, fonctions pour créer les vues d'aperçu courantes, appendVuesEnfants -> $.appendVuesEnfants(), ...).
\ No newline at end of file
