www

commit cd1b901d07aaba216d725060a43aa6e75d09672f
parent 080cea63298231a84c8e697ba0a2dcfd3456c92d
Author: Georges Dupéron <jahvascriptmaniac+github@free.fr>
Date:   Mon, 30 Aug 2010 04:39:11 +0200

2 panneaux : aperçu et édition. Binding: ok.

Diffstat:
M
editeur.css
 | 
25
+++++++++++++++++++++----
M
editeur.js
 | 
135
++++++++++++++++++++++++++++++++++++++++++++++---------------------------------
M
index.html
 | 
6
++++--

3 files changed, 104 insertions(+), 62 deletions(-)
diff --git a/editeur.css b/editeur.css
@@ -1,3 +1,20 @@
+.conteneur-esem {
+	border: thin solid red; /* DEBUG */
+}
+
+.conteneur-esem .aperçu {
+	border: thin solid green;
+}
+
+.conteneur-esem .editeur {
+	border: thin solid blue;
+}
+
+.conteneur-esem .element {
+}
+
+
+
 .curseur {
 	display:inline-block;
 	width:1px;
@@ -9,23 +26,23 @@
 	background-color:black;
 }
 
-.elem-paragraphe {
+.conteneur-esem .element.paragraphe {
 	border: thick solid #ddd;
 	display: block;
 }
 
-.elem-paragraphe:before {
+.conteneur-esem .element.paragraphe:before {
 	content: "Paragraphe";
 	font-size: smaller;
 	background-color: #ddd;
 	display:block;
 }
 
-.elem-important {
+.conteneur-esem .element.important {
 	background-color: mistyrose;
 }
 
-.elem-important:before {
+.conteneur-esem .element.important:before {
 	content: "Important";
 	padding: 0 0.3em;
 	font-size: smaller;
diff --git a/editeur.js b/editeur.js
@@ -1,62 +1,84 @@
+var typesAutorisés = [
+	'document',
+	'titre',
+	'paragraphe',
+	'important',
+	'texte'
+];
+
 $(function() {
-	var lorem = "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.";
-	var éditeurs = $(".editeur-semantique");
-	éditeurs.append('<span class="elem-paragraphe"><span class="elem-important"><span class="texte">hello </span><span class="curseur"></span><span class="texte">world' + lorem + '</span></span><span class="texte">, bonjour monde !</span></span>');
-	curseurClignotant();
-	raccourcisClavier();
-	curseurGauche();
+	$(".éditeur-semantique").each(function(i,e) {
+		éditeurSémantique(e);
+	});
 });
 
-function curseurClignotant() {
-	var affiché = false;
-	var clignote = function() {
-		if (affiché) {
-			$(".curseur").removeClass("affiché");
-			var délai = 500;
+$.fn.extend()
+
+function éditeurSémantique(textareaÉditeur) {
+	conteneur = $('<div class="conteneur-esem"/>');
+	éditeur = $(textareaÉditeur).removeClass("éditeur-semantique").addClass("éditeur");
+	aperçu = $('<div class="aperçu"/>');
+	
+	éditeur.replaceWith(conteneur);
+	conteneur.append(aperçu);
+	conteneur.append(éditeur);
+	
+	var xml = $("<document/>").append(éditeur.text()); // Est-ce portable ?.
+	éditeur.text("");
+	
+	function init() {
+		xmlVersDom(xml, aperçu);
+		sélectionElement(aperçu.children().first()); // assertion : type == Document
+	}
+	
+	function xmlVersDom(xml,htmlParent) {
+		var htmlElem = créerElement(xml.get(0).tagName.toLowerCase()).appendTo(htmlParent);
+		
+		htmlElem.click(function(e) {
+			sélectionElement(htmlElem);
+			return false;
+		});
+		
+		if (xml.get(0).tagName.toLowerCase() == "texte") {
+			htmlElem.append(xml.text());
+		}
+		
+		xml.children().each(function(i,xmlElem) {
+			xmlVersDom($(xmlElem),htmlElem);
+		});
+	}
+	
+	function créerElement(type) {
+		return $('<span class="element"/>')
+			.addClass(type)
+			.data("type", type);
+	}
+	
+	function sélectionElement(e) {
+		if (e.data("type") == "texte") {
+			éditeurAttacher(e);
 		} else {
-			$(".curseur").addClass("affiché");
-			var délai = 800;
+			éditeurDétacher();
 		}
-		affiché = !affiché;
-		window.setTimeout(clignote, délai);
-	};
-	clignote();
-}
-
-function curseurGauche() {
-	var curseur = $(".curseur");
-	var p = curseur.prev();
-	var n = curseur.next();
-	var c = p.text().charAt(p.text().length - 1);
-	n.text(c + n.text());
-	p.text(p.text().substring(0, p.text().length - 1));
-}
-
-function curseurHaut() {
-}
-
-function curseurDroite() {
-	var curseur = $(".curseur");
-	var p = curseur.prev();
-	var n = curseur.next();
-	var c = n.text().charAt(0);
-	n.text(n.text().substring(1));
-	p.text(p.text() + c);
-}
-
-function curseurBas() {
-}
-
-function raccourcisClavier() {
-	var raccourcis = {
-		37 : curseurGauche,
-		38 : curseurHaut,
-		39 : curseurDroite,
-		40 : curseurBas,
-	};
-	$(document).keydown(function (e) {
-		if (raccourcis[e.keyCode]) {
-			raccourcis[e.keyCode]();
+	}
+	
+	function éditeurAttacher(elem) {
+		éditeurDétacher();
+		éditeur.val(elem.text());
+		
+		var éditeurValPrécédente = éditeur.val();
+		function éditeurModif(e) {
+			if (éditeur.val() != éditeurValPrécédente)
+				elem.text(éditeur.val());
 		}
-	});
-}
+		
+		éditeur.bind("propertychange input cut paste keypress", éditeurModif);
+	}
+	
+	function éditeurDétacher() {
+		éditeur.unbind("propertychange input cut paste keypress");
+		éditeur.val("");
+	}
+	
+	init();
+}
+\ No newline at end of file
diff --git a/index.html b/index.html
@@ -11,7 +11,9 @@
 		<script type="text/javascript" src="editeur.js"></script>
 	</head>
 	<body>
-		<div class="editeur-semantique">
-		</div>
+		<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 monde !&lt;/texte&gt;&lt;/paragraphe&gt;
+</textarea>
 	</body>
 </html>