diff options
Diffstat (limited to 'js/panels')
-rw-r--r-- | js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js | 20 | ||||
-rw-r--r-- | js/panels/css-panel/styles-view-delegate.js | 17 |
2 files changed, 31 insertions, 6 deletions
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, { | |||
85 | } | 85 | } |
86 | } | 86 | } |
87 | }, | 87 | }, |
88 | 88 | handleMouseover: { | |
89 | value: function(e) { | ||
90 | if(this.focusDelegate) { | ||
91 | this.focusDelegate.handleSelectorHover(this.selectorField.value, 'over'); | ||
92 | } | ||
93 | } | ||
94 | }, | ||
95 | handleMouseout: { | ||
96 | value: function(e) { | ||
97 | if(this.focusDelegate) { | ||
98 | this.focusDelegate.handleSelectorHover(this.selectorField.value, 'out'); | ||
99 | } | ||
100 | } | ||
101 | }, | ||
89 | update: { | 102 | update: { |
90 | value: function() { | 103 | value: function() { |
91 | if(this.cssText !== this.rule.cssText) { | 104 | if(this.cssText !== this.rule.cssText) { |
@@ -107,11 +120,12 @@ exports.CssStyleRule = Montage.create(Component, { | |||
107 | this.declarationComponent.type = 'inline'; | 120 | this.declarationComponent.type = 'inline'; |
108 | } else { | 121 | } else { |
109 | this.selectorField.addEventListener('change', this, false); | 122 | this.selectorField.addEventListener('change', this, false); |
123 | this.selectorField.element.addEventListener('mouseover', this, false); | ||
124 | this.selectorField.element.addEventListener('mouseout', this, false); | ||
110 | } | 125 | } |
111 | //console.log("css style rule : prepare for draw"); | ||
112 | |||
113 | } | 126 | } |
114 | }, | 127 | }, |
128 | |||
115 | willDraw : { | 129 | willDraw : { |
116 | value: function() { | 130 | value: function() { |
117 | if(this.applied) { | 131 | 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, | |||
9 | Keyboard = require("js/mediators/keyboard-mediator").Keyboard; | 9 | Keyboard = require("js/mediators/keyboard-mediator").Keyboard; |
10 | 10 | ||
11 | exports.StylesViewMediator = Montage.create(Component, { | 11 | exports.StylesViewMediator = Montage.create(Component, { |
12 | newClassPrefix : { | 12 | newClassPrefix : { value: "new-class" }, |
13 | value: "new-class" | 13 | elementOutlineClass : { value: "nj-element-highlight" }, |
14 | }, | 14 | |
15 | stylesController : { | 15 | stylesController : { |
16 | get: function() { | 16 | get: function() { |
17 | return this.application.ninja.stylesController; | 17 | return this.application.ninja.stylesController; |
@@ -21,6 +21,17 @@ exports.StylesViewMediator = Montage.create(Component, { | |||
21 | } | 21 | } |
22 | }, | 22 | }, |
23 | 23 | ||
24 | handleSelectorHover : { | ||
25 | value: function(selector, direction) { | ||
26 | var elements = this.stylesController._activeDocument._document.querySelectorAll(selector), | ||
27 | method = (direction === "out") ? "remove" : "add"; | ||
28 | |||
29 | Array.prototype.slice.call(elements).forEach(function(el) { | ||
30 | el.classList[method](this.elementOutlineClass); | ||
31 | }, this); | ||
32 | } | ||
33 | }, | ||
34 | |||
24 | handleSelectorChange : { | 35 | handleSelectorChange : { |
25 | value: function(rule, newSelector, ruleComponent) { | 36 | value: function(rule, newSelector, ruleComponent) { |
26 | if(newSelector === "") { | 37 | if(newSelector === "") { |