editor: span icon clickable when cursor in appropriate fragment & enables span removal

[fnpeditor.git] / src / editor / modules / nodePane / nodePane.js

diff --git a/src/editor/modules/nodePane/nodePane.js b/src/editor/modules/nodePane/nodePane.js
index 80d4b87..25e5ddb 100644 (file)
--- a/src/editor/modules/nodePane/nodePane.js
+++ b/src/editor/modules/nodePane/nodePane.js
@@ -10,15 +10,25 @@ define([
 
 return function(sandbox) {
     
-    var view = $(_.template(templateSrc)({tagNames: wlxmlUtils.wlxmlTagNames, classNames: wlxmlUtils.wlxmlClassNames})),
-        currentNode;
+    var view = $(_.template(templateSrc)({utils: wlxmlUtils})),
+        listens = false,
+        currentNode,
+        msgs = {
+            Tag: gettext('Tag editing'),
+            Class: gettext('Class editing')
+        };
     
     view.on('change', 'select', function(e) {
         var target = $(e.target);
         var attr = target.attr('class').split('-')[3] === 'tagSelect' ? 'Tag' : 'Class',
-            value = target.val().replace(/-/g, '.');
-        currentNode['set' + attr](value);
+            value = target.val().replace(/-/g, '.'),
+            oldValue = attr === 'Tag' ? currentNode.getTagName() : currentNode.getClass();
+        currentNode.document.transaction(function() {
+            currentNode['set' + attr](value);
+        }, this, msgs[attr] + ': ' + oldValue + ' -> ' + value);
     });
+
+
    
     return {
         start: function() {
@@ -28,27 +38,37 @@ return function(sandbox) {
             return view;
         },
         setNodeElement: function(wlxmlNodeElement) {
-            var module = this;
-            if(!currentNode) {
-                wlxmlNodeElement.document.on('change', function(event) {
-                    if(event.type === 'nodeAttrChange' && event.meta.node.sameNode(currentNode)) {
-                        module.setNodeElement(currentNode);
-                    }
-                });
-            }
+            if(wlxmlNodeElement) {
+                var module = this;
+                if(!listens) {
+                    wlxmlNodeElement.document.on('change', function(event) {
+                        if(currentNode && !currentNode.isInDocument()) {
+                            module.setNodeElement(null);
+                        }
+                        if(event.type === 'nodeAttrChange' && event.meta.node.sameNode(currentNode)) {
+                            module.setNodeElement(currentNode);
+                        }
+                    });
+                    listens = true;
+                }
 
-            view.find('.rng-module-nodePane-tagSelect').val(wlxmlNodeElement.getTagName());
+                view.find('.rng-module-nodePane-tagSelect').attr('disabled', false).val(wlxmlNodeElement.getTagName());
 
-            var escapedClassName = (wlxmlNodeElement.getClass() || '').replace(/\./g, '-');
-            view.find('.rng-module-nodePane-classSelect').val(escapedClassName);
-
-            var widget = metaWidget.create({attrs:wlxmlNodeElement.getMetaAttributes()});
-            widget.on('valueChanged', function(key, value) {
-                wlxmlNodeElement.setMetaAttribute(key, value);
-                //wlxmlNodeElement.setMetaAttribute(key, value);
-            });
-            view.find('.metaFields').empty().append(widget.el);
+                var escapedClassName = (wlxmlNodeElement.getClass() || '').replace(/\./g, '-');
+                view.find('.rng-module-nodePane-classSelect').attr('disabled', false).val(escapedClassName);
 
+                var attrs = _.extend(wlxmlNodeElement.getMetaAttributes(), wlxmlNodeElement.getOtherAttributes());
+                var widget = metaWidget.create({attrs:attrs});
+                widget.on('valueChanged', function(key, value) {
+                    wlxmlNodeElement.setMetaAttribute(key, value);
+                    //wlxmlNodeElement.setMetaAttribute(key, value);
+                });
+                view.find('.metaFields').empty().append(widget.el);
+            } else {
+                view.find('.rng-module-nodePane-tagSelect').attr('disabled', true).val('');
+                view.find('.rng-module-nodePane-classSelect').attr('disabled', true).val('');
+                view.find('.metaFields').empty();
+            }
             currentNode = wlxmlNodeElement;
         }
     };