diff options
Diffstat (limited to 'js')
-rw-r--r-- | js/panels/css-panel/styles-view-delegate.js | 40 |
1 files changed, 31 insertions, 9 deletions
diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index ccbfecad..c3bfdc75 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js | |||
@@ -21,8 +21,15 @@ exports.StylesViewMediator = Montage.create(Component, { | |||
21 | } | 21 | } |
22 | }, | 22 | }, |
23 | 23 | ||
24 | ///// Selector Actions | ||
25 | //// ------------------------------------- | ||
26 | |||
27 | ///// Show the targeted elements in the document by applying a class | ||
28 | ///// temporarily | ||
24 | handleSelectorHover : { | 29 | handleSelectorHover : { |
25 | value: function(selector, direction) { | 30 | value: function(selector, direction) { |
31 | if(!selector) { return false; } | ||
32 | |||
26 | var elements = this.stylesController._activeDocument._document.querySelectorAll(selector), | 33 | var elements = this.stylesController._activeDocument._document.querySelectorAll(selector), |
27 | method = (direction === "out") ? "remove" : "add"; | 34 | method = (direction === "out") ? "remove" : "add"; |
28 | 35 | ||
@@ -32,11 +39,17 @@ exports.StylesViewMediator = Montage.create(Component, { | |||
32 | } | 39 | } |
33 | }, | 40 | }, |
34 | 41 | ||
42 | ///// Apply new selector to the rule | ||
43 | //// Verify that it applies to the selected elements | ||
44 | //// Remove rule if the selector is deleted | ||
35 | handleSelectorChange : { | 45 | handleSelectorChange : { |
36 | value: function(rule, newSelector, ruleComponent) { | 46 | value: function(rule, newSelector, ruleComponent) { |
37 | if(newSelector === "") { | 47 | if(newSelector === "") { |
38 | //debugger; | ||
39 | ruleComponent.parentComponent.removeRule(ruleComponent); | 48 | ruleComponent.parentComponent.removeRule(ruleComponent); |
49 | this.stylesController.deleteRule(rule); | ||
50 | ///// Remove the hover style | ||
51 | this.handleSelectorHover(rule.selectorText, 'out'); | ||
52 | this._dispatchChange(); | ||
40 | return false; | 53 | return false; |
41 | } | 54 | } |
42 | 55 | ||
@@ -46,9 +59,20 @@ exports.StylesViewMediator = Montage.create(Component, { | |||
46 | return this._doesSelectorTargetElement(newSelector, el); | 59 | return this._doesSelectorTargetElement(newSelector, el); |
47 | }, this); | 60 | }, this); |
48 | 61 | ||
62 | this._dispatchChange(); | ||
63 | } | ||
64 | }, | ||
65 | |||
66 | ///// Returns true if the passed-in selector targets the passed-in element | ||
67 | _doesSelectorTargetElement : { | ||
68 | value: function doesSelectorTargetElement(selector, element) { | ||
69 | var doc = element.ownerDocument, | ||
70 | matchingEls = Array.prototype.slice.call(doc.querySelectorAll(selector)); | ||
71 | return matchingEls.indexOf(element) !== -1; | ||
49 | } | 72 | } |
50 | }, | 73 | }, |
51 | 74 | ||
75 | |||
52 | /// Toolbar Button Actions | 76 | /// Toolbar Button Actions |
53 | /// ----------------------- | 77 | /// ----------------------- |
54 | 78 | ||
@@ -85,6 +109,7 @@ exports.StylesViewMediator = Montage.create(Component, { | |||
85 | } | 109 | } |
86 | }, | 110 | }, |
87 | 111 | ||
112 | ///// Show/hide computed style sub panel | ||
88 | handleComputedAction : { | 113 | handleComputedAction : { |
89 | value: function(e) { | 114 | value: function(e) { |
90 | var container = this.ownerComponent, | 115 | var container = this.ownerComponent, |
@@ -102,14 +127,8 @@ exports.StylesViewMediator = Montage.create(Component, { | |||
102 | } | 127 | } |
103 | }, | 128 | }, |
104 | 129 | ||
105 | 130 | ///// Style event handlers | |
106 | _doesSelectorTargetElement : { | 131 | //// ------------------------------------- |
107 | value: function doesSelectorTargetElement(selector, element) { | ||
108 | var doc = element.ownerDocument, | ||
109 | matchingEls = Array.prototype.slice.call(doc.querySelectorAll(selector)); | ||
110 | return matchingEls.indexOf(element) !== -1; | ||
111 | } | ||
112 | }, | ||
113 | 132 | ||
114 | ///// Enable/Disable Style when checkbox is clicked | 133 | ///// Enable/Disable Style when checkbox is clicked |
115 | handleStyleToggle : { | 134 | handleStyleToggle : { |
@@ -250,6 +269,9 @@ exports.StylesViewMediator = Montage.create(Component, { | |||
250 | } | 269 | } |
251 | }, | 270 | }, |
252 | 271 | ||
272 | ///// Utilities | ||
273 | //// ------------------------------------- | ||
274 | |||
253 | _dispatchChange : { | 275 | _dispatchChange : { |
254 | value: function(property, value) { | 276 | value: function(property, value) { |
255 | this.application.ninja.stage.updatedStage = true; | 277 | this.application.ninja.stage.updatedStage = true; |