CSS Panel - Added element highlight on selector field hover

3 files changed, 35 insertions, 6 deletions

diff --git a/js/document/templates/montage-html/default_html.css b/js/document/templates/montage-html/default_html.css
index 04b21c6f..a8f119a2 100755
--- a/js/document/templates/montage-html/default_html.css
+++ b/js/document/templates/montage-html/default_html.css
@@ -71,4 +71,8 @@ body
 
 .nj-preset-transition {
     -webkit-transition: all 450ms linear !important;
+}
+
+.nj-element-highlight {
+    outline: 4px solid rgba(21, 190, 22, 0.60);
 }
\ No newline at end of file
diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
index cfa3e605..7a6a3957 100644
--- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
+++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
@@ -85,7 +85,20 @@ exports.CssStyleRule = Montage.create(Component, {
             }
         }
     },
-
+    handleMouseover: {
+        value: function(e) {
+            if(this.focusDelegate) {
+                this.focusDelegate.handleSelectorHover(this.selectorField.value, 'over');
+            }
+        }
+    },
+    handleMouseout: {
+        value: function(e) {
+            if(this.focusDelegate) {
+                this.focusDelegate.handleSelectorHover(this.selectorField.value, 'out');
+            }
+        }
+    },
     update: {
         value: function() {
             if(this.cssText !== this.rule.cssText) {
@@ -107,11 +120,12 @@ exports.CssStyleRule = Montage.create(Component, {
                 this.declarationComponent.type = 'inline';
             } else {
                 this.selectorField.addEventListener('change', this, false);
+                this.selectorField.element.addEventListener('mouseover', this, false);
+                this.selectorField.element.addEventListener('mouseout', this, false);
             }
-            //console.log("css style rule : prepare for draw");
-
         }
     },
+
     willDraw : {
         value: function() {
             if(this.applied) {
diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js
index a76d25ad..7e0987eb 100644
--- a/js/panels/css-panel/styles-view-delegate.js
+++ b/js/panels/css-panel/styles-view-delegate.js
@@ -9,9 +9,9 @@ var Montage = require("montage/core/core").Montage,
     Keyboard = require("js/mediators/keyboard-mediator").Keyboard;
 
 exports.StylesViewMediator = Montage.create(Component, {
-    newClassPrefix : {
-        value: "new-class"
-    },
+    newClassPrefix      : { value: "new-class" },
+    elementOutlineClass : { value: "nj-element-highlight" },
+
     stylesController : {
         get: function() {
             return this.application.ninja.stylesController;
@@ -21,6 +21,17 @@ exports.StylesViewMediator = Montage.create(Component, {
         }
     },
 
+    handleSelectorHover : {
+        value: function(selector, direction) {
+            var elements = this.stylesController._activeDocument._document.querySelectorAll(selector),
+                method = (direction === "out") ? "remove" : "add";
+
+            Array.prototype.slice.call(elements).forEach(function(el) {
+                el.classList[method](this.elementOutlineClass);
+            }, this);
+        }
+    },
+
     handleSelectorChange : {
         value: function(rule, newSelector, ruleComponent) {
             if(newSelector === "") {