From: Marcin Koziej <marcin.koziej@nowoczesnapolska.org.pl>
Date: Fri, 14 Dec 2012 09:09:42 +0000 (+0100)
Subject: Edit attributes in wysiwyg editor
X-Git-Url: https://git.mdrn.pl/redakcja.git/commitdiff_plain/f8dfb5772407898329418480670950566f2c3281

Edit attributes in wysiwyg editor
---

diff --git a/redakcja/static/css/html.css b/redakcja/static/css/html.css
index 1818467a..b5737f87 100644
--- a/redakcja/static/css/html.css
+++ b/redakcja/static/css/html.css
@@ -618,7 +618,7 @@ div[x-node] > .uwaga {
 }
 
 .html-editarea textarea {
-    position: absolute;
+/*    position: absolute; -- might be unnecessary, and we need attributes to be pushed down*/
     top: 0;
     margin: 0px;
     padding: 0px;
@@ -630,6 +630,20 @@ div[x-node] > .uwaga {
     /*    background-color: ivory;*/
 }
 
+.html-editarea .html-editarea-attributes span {
+    border: 1px dotted black;
+    padding: 2px;
+    margin: 2px;
+}
+
+.html-editarea .html-editarea-attributes span label {
+    background-color: white;
+    padding: 5px;
+    min-width: 150px;
+    display: inline-block;
+    font-family: mono;
+}
+
 .htmlview .out-of-flow-text {
     display: block;
     font-face: monospace;
diff --git a/redakcja/static/js/wiki/view_editor_wysiwyg.js b/redakcja/static/js/wiki/view_editor_wysiwyg.js
index 23abde02..7c0bb0e0 100644
--- a/redakcja/static/js/wiki/view_editor_wysiwyg.js
+++ b/redakcja/static/js/wiki/view_editor_wysiwyg.js
@@ -348,6 +348,33 @@
         txtarea.scrollTop = scrollPos; 
     } 
 
+    function getXNodeAttributes(node) {
+	var m = {}
+	$.map(node.attributes, function(attrNode) {
+	    if (attrNode.nodeName.startsWith('data-wlf-')) {
+		var n = attrNode.nodeName.substr(9);
+		var v = attrNode.nodeValue;
+		m[n] = v;
+	    };
+	});
+	return m;
+    }
+
+    function setXNodeAttributes(node, attrs) {
+	$.map(node.attributes, function(attrNode) {
+	    var xName = attrNode.nodeName.substr(9);
+	    if (attrNode.nodeName.startsWith('data-wlf-')
+		&& xName in attrs) {
+		attrNode.nodeValue = attrs[xName];
+	    }
+	    if (attrNode.nodeName.startsWith('x-attr-name-') 
+		&& attrNode.nodeValue in attrs) {
+		node.setAttribute('x-attr-value-' + attrNode.nodeName.substr("x-attr-name-".length),
+				  attrs[attrNode.nodeValue]);
+	    }
+	});
+    }
+
     /* open edition window for selected fragment */
     function openForEdit($origin){
         var $box = null
@@ -376,7 +403,17 @@
         }
 
         // start edition on this node
-        var $overlay = $('<div class="html-editarea"><button class="accept-button">Zapisz</button><button class="delete-button">Usuń</button><button class="tytul-button akap-edit-button">tytuł dzieła</button><button class="wyroznienie-button akap-edit-button">wyróżnienie</button><button class="slowo-button akap-edit-button">słowo obce</button><button class="znak-button akap-edit-button">znak spec.</button><button class="luka-button akap-edit-button">luka</button><button class="zastap-button akap-edit-button">zastąp</button><textarea></textarea></div>').css({
+        var $overlay = $('<div class="html-editarea"><button class="accept-button">Zapisz</button><button class="delete-button">Usuń</button><button class="tytul-button akap-edit-button">tytuł dzieła</button><button class="wyroznienie-button akap-edit-button">wyróżnienie</button><button class="slowo-button akap-edit-button">słowo obce</button><button class="znak-button akap-edit-button">znak spec.</button><button class="luka-button akap-edit-button">luka</button><button class="zastap-button akap-edit-button">zastąp</button><textarea></textarea></div>');
+	
+	$attributes = $('<div class="html-editarea-attributes"></div>')
+	
+	$.map(getXNodeAttributes($origin.get(0)),
+	      function(v, n) {
+		$attributes.append('<span><label for="attr-'+n+'">'+n+'</label><input type="text" name="'+n+'" id="attr-'+n+'" value="'+v+'"/></span>');
+	      });
+	$overlay.append($attributes);
+
+	$overlay.css({
             position: 'absolute',
             height: h,
             left: x,
@@ -459,6 +496,14 @@
                             else {
                                 $origin.html($(element).html());
                             }
+			    /* Set attributres back to the node */
+			    var attrs = {};
+			    $(".html-editarea-attributes [name]")
+				.each(function(i, textField) {
+				    attrs[textField.name] = textField.value;
+				});
+			    setXNodeAttributes($origin.get(0), attrs);
+
                             $overlay.remove();
                         },
                         error: function(text){