www

commit a66cbba3fe31483d36e84451994a1dfe70649a32
parent d97df7e8318e58a1e72c66677a5b26c1c6be0632
Author: Georges Dupéron <jahvascriptmaniac+github@free.fr>
Date:   Mon, 30 Aug 2010 17:25:04 +0200

Bouton "Important".

Diffstat:
M
editeur.css
 | 
39
++++++++++++++++++++++++++++-----------
M
editeur.js
 | 
46
++++++++++++++++++++++++++++++++--------------

2 files changed, 60 insertions(+), 25 deletions(-)
diff --git a/editeur.css b/editeur.css
@@ -1,29 +1,46 @@
 .conteneur-esem {
-	border: thin solid red; /* DEBUG */
+	border: thin solid black;
 }
 
 .conteneur-esem .aperçu {
-	border: thin solid green;
+	margin: 0.5em;
 }
 
-.conteneur-esem .editeur {
-	border: thin solid blue;
+.conteneur-esem .boutons {
+	margin: 0.5em;
+}
+
+.conteneur-esem .éditeur {
+	margin: 0.5em;
 }
 
 .conteneur-esem .element {
+	margin-bottom: 0.1em;
 }
 
 
+.conteneur-esem .boutons .bouton {
+	border: thin solid black;
+	background-color: white;
+}
+
 
-.curseur {
-	display:inline-block;
-	width:1px;
-	height:1em;
-	background-color:transparent;
+.conteneur-esem .element.document {
+	display: block;
 }
 
-.curseur.affiché {
-	background-color:black;
+.conteneur-esem .element.titre {
+	font-weight: bold;
+	font-size: large;
+	border: thick solid #ddd;
+	display: block;
+}
+
+.conteneur-esem .element.titre:before {
+	content: "Titre";
+	font-weight: bold;
+	padding: 0 0.3em;
+	background-color: #ddd;
 }
 
 .conteneur-esem .element.paragraphe {
diff --git a/editeur.js b/editeur.js
@@ -12,15 +12,16 @@ $(function() {
 	});
 });
 
-$.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"/>');
+	var conteneur = $('<div class="conteneur-esem"/>');
+	var éditeur = $(textareaÉditeur).removeClass("éditeur-semantique").addClass("éditeur");
+	var boutons = $('<div class="boutons"/>');
+	var aperçu = $('<div class="aperçu"/>');
+	var elementActif = null;
 	
 	éditeur.replaceWith(conteneur);
 	conteneur.append(aperçu);
+	conteneur.append(boutons);
 	conteneur.append(éditeur);
 	
 	var xml = $("<document/>").append(éditeur.text()); // Est-ce portable ?.
@@ -29,16 +30,28 @@ function éditeurSémantique(textareaÉditeur) {
 	function init() {
 		xmlVersDom(xml, aperçu);
 		sélectionElement(aperçu.children().first()); // assertion : type == Document
+		bouton("important", function(debut, fin) {
+			var t = elementActif.text();
+			var t1 = créerElement("texte").text(t.substring(0,debut));
+			var t2 = créerElement("texte").text(t.substring(debut,fin));
+			var t2important = créerElement("important").append(t2);
+			var t3 = créerElement("texte").text(t.substring(fin));
+			elementActif.replaceWith(t1);
+			t2important.insertAfter(t1);
+			t3.insertAfter(t2important);
+			sélectionElement(t2);
+		});
+	}
+	
+	function bouton(texte, fonction) {
+		boutons.append($('<input type="button" class="bouton"/>').val(texte).click(function(e) {
+			fonction(éditeur.get(0).selectionStart, éditeur.get(0).selectionEnd);
+		}));
 	}
 	
 	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());
 		}
@@ -49,12 +62,18 @@ function éditeurSémantique(textareaÉditeur) {
 	}
 	
 	function créerElement(type) {
-		return $('<span class="element"/>')
+		var el = $('<span class="element"/>')
 			.addClass(type)
-			.data("type", type);
+			.data("type", type)
+			.click(function(e) {
+				sélectionElement(el);
+				return false;
+			});
+		return el;
 	}
 	
 	function sélectionElement(e) {
+		elementActif = e;
 		if (e.data("type") == "texte") {
 			éditeurAttacher(e);
 		} else {
@@ -81,4 +100,4 @@ function éditeurSémantique(textareaÉditeur) {
 	}
 	
 	init();
-}
-\ No newline at end of file
+}