X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/9487a7485a9fa56d55a46b36fbc73d8e02eaa412..8e0830cb8d24b4d81d12a4df96d03c9d78f88343:/modules/visualEditor.js?ds=sidebyside

diff --git a/modules/visualEditor.js b/modules/visualEditor.js
index f7ae32c..5e26978 100644
--- a/modules/visualEditor.js
+++ b/modules/visualEditor.js
@@ -15,8 +15,8 @@ rng.modules.visualEditor = function(sandbox) {
                 isDirty = true;
             });
 
-            this.node.on('mouseover', '[wlxml-tag]', function(e) { $(e.target).addClass('rng-hover')});
-            this.node.on('mouseout', '[wlxml-tag]', function(e) { $(e.target).removeClass('rng-hover')});
+            this.node.on('mouseover', '[wlxml-tag]', function(e) { mediator.nodeHovered($(e.target));});
+            this.node.on('mouseout', '[wlxml-tag]', function(e) { mediator.nodeBlured($(e.target));});
             this.node.on('click', '[wlxml-tag]', function(e) {
                 console.log('clicked node type: '+e.target.nodeType);
                 view._markSelected($(e.target));
@@ -91,7 +91,9 @@ rng.modules.visualEditor = function(sandbox) {
               });    
             });
             var config = { attributes: true, childList: true, characterData: true, subtree: true };
-            observer.observe(this.node.find('#rng-visualEditor-contentWrapper')[0], config);
+            observer.observe(this.node.find('#rng-visualEditor-contentWrapper')[0], config);
+            
+            this.gridToggled = false;
         },
         getMetaData: function() {
             var toret = {};
@@ -139,6 +141,24 @@ rng.modules.visualEditor = function(sandbox) {
             if(node)
                 this.selectNode(node);
         },
+        highlightNode: function(node) {
+            if(!this.gridToggled)
+                node.addClass('rng-hover');
+        },
+        dimNode: function(node) {
+            if(!this.gridToggled)
+                node.removeClass('rng-hover');
+        },
+        highlightNodeById: function(id) {
+            var node = this.node.find('#'+id);
+            if(node)
+                this.highlightNode(node);
+        },
+        dimNodeById: function(id) {
+            var node = this.node.find('#'+id);
+            if(node)
+                this.dimNode(node);
+        },
         selectFirstNode: function() {
             var firstNodeWithText = this.node.find('[wlxml-tag]').filter(function() {
                 return $(this).clone().children().remove().end().text().trim() !== '';
@@ -155,6 +175,13 @@ rng.modules.visualEditor = function(sandbox) {
             var newRow = $(sandbox.getTemplate('metaItem')({key: key || '', value: value || ''}));
             newRow.appendTo(this.metaTable);
             return newRow;
+        },
+        toggleGrid: function(toggle) {
+            this.node.find('[wlxml-tag]').toggleClass('rng-hover', toggle);
+            this.gridToggled = toggle;
+        },
+        toggleTags: function(toggle) {
+        
         }
     };
     
@@ -205,8 +232,18 @@ rng.modules.visualEditor = function(sandbox) {
             
             view.node.on('click', '.rng-visualEditor-editPaneSurrouding a', function(e) {
                 var target = $(e.target);
+                mediator.nodeDimmedById(target.attr('data-id'));
                 mediator.nodeSelectedById(target.attr('data-id'));
             });
+            
+            view.node.on('mouseenter', '.rng-visualEditor-editPaneSurrouding a', function(e) {
+                var target = $(e.target);
+                mediator.nodeHighlightedById(target.attr('data-id')); 
+            });
+            view.node.on('mouseleave', '.rng-visualEditor-editPaneSurrouding a', function(e) {
+                var target = $(e.target);
+                mediator.nodeDimmedById(target.attr('data-id')); 
+            });
         },
         selectTab: function(id) {
            this.node.find('.rng-visualEditor-sidebarContentItem').hide();
@@ -230,11 +267,35 @@ rng.modules.visualEditor = function(sandbox) {
             });
             var naviTemplate = sandbox.getTemplate('editPaneNavigation')({parent: parent, children: children});
             pane.find('.rng-visualEditor-editPaneSurrouding > div').html($(naviTemplate));
+        },
+        highlightNode: function(id) {
+            var pane = this.node.find('#rng-visualEditor-edit');
+            pane.find('a[data-id="'+id+'"]').addClass('rng-hover');
+        },
+        dimNode: function(id) {
+            var pane = this.node.find('#rng-visualEditor-edit');
+            pane.find('a[data-id="' +id+'"]').removeClass('rng-hover');
+        }
+    }
+    
+    var toolbarView = {
+        node: view.node.find('#rng-visualEditor-toolbar'),
+        setup: function() {
+            var view = this;
+            
+            view.node.find('button').click(function(e) {
+                var btn = $(e.currentTarget);
+                if(btn.attr('data-btn-type') === 'toggle') {
+                    btn.toggleClass('active')
+                    mediator.toolbarButtonToggled(btn.attr('data-btn'), btn.hasClass('active'));
+                }
+            });
         }
     }
     
     view.setup();
     sideBarView.setup();
+    toolbarView.setup();
     
     var mediator = {
         getCurrentNode: function() {
@@ -249,7 +310,28 @@ rng.modules.visualEditor = function(sandbox) {
         },
         nodeSelectedById: function(id) {
             view.selectNodeById(id);
+        },
+        nodeHighlightedById: function(id) {
+            view.highlightNodeById(id);
+        },
+        nodeDimmedById: function(id) {
+            view.dimNodeById(id);
+        },
+        toolbarButtonToggled: function(btn, toggle) {
+            if(btn === 'grid')
+                view.toggleGrid(toggle);
+            if(btn === 'tags')
+                view.toggleTags(toggle);
+        },
+        nodeHovered: function(node) {
+            view.highlightNode(node);
+            sideBarView.highlightNode(node.attr('id'));
+        },
+        nodeBlured: function(node) {
+            view.dimNode(node);
+            sideBarView.dimNode(node.attr('id'));
         }
+        
     }
     
     var isDirty = false;