aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorEric Guzman2012-05-02 17:00:09 -0700
committerEric Guzman2012-05-02 17:00:09 -0700
commita447eaf48ffbaea89cbb229f06e8b5a7e199f77f (patch)
tree05c410e22551bd5faf672ad81d52ef1b4d81444a /js
parent8bea1e0807f36595d762592c030d4810396ada85 (diff)
downloadninja-a447eaf48ffbaea89cbb229f06e8b5a7e199f77f.tar.gz
CSS Panel - Added element highlight on selector field hover
Diffstat (limited to 'js')
-rwxr-xr-xjs/document/templates/montage-html/default_html.css4
-rw-r--r--js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js20
-rw-r--r--js/panels/css-panel/styles-view-delegate.js17
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
71 71
72.nj-preset-transition { 72.nj-preset-transition {
73 -webkit-transition: all 450ms linear !important; 73 -webkit-transition: all 450ms linear !important;
74}
75
76.nj-element-highlight {
77 outline: 4px solid rgba(21, 190, 22, 0.60);
74} \ No newline at end of file 78} \ 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, {
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
11exports.StylesViewMediator = Montage.create(Component, { 11exports.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 === "") {