CSS Panel - Added element highlight on selector field hover

1 files changed, 14 insertions, 3 deletions

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 === "") {