diff options
Diffstat (limited to 'js/panels/css-panel')
5 files changed, 78 insertions, 4 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 ac22878e..d2c81b93 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 | |||
@@ -86,6 +86,15 @@ exports.CssStyleRule = Montage.create(Component, { | |||
86 | } | 86 | } |
87 | }, | 87 | }, |
88 | 88 | ||
89 | update: { | ||
90 | value: function() { | ||
91 | if(this.cssText !== this.rule.cssText) { | ||
92 | // TODO: add update for selector and stylesheet name | ||
93 | this.declarationComponent.update(); | ||
94 | } | ||
95 | } | ||
96 | }, | ||
97 | |||
89 | templateDidLoad : { | 98 | templateDidLoad : { |
90 | value: function() { | 99 | value: function() { |
91 | //console.log("css style rule : template did load"); | 100 | //console.log("css style rule : template did load"); |
@@ -93,8 +102,11 @@ exports.CssStyleRule = Montage.create(Component, { | |||
93 | }, | 102 | }, |
94 | prepareForDraw : { | 103 | prepareForDraw : { |
95 | value: function() { | 104 | value: function() { |
96 | this.selectorField.addEventListener('change', this, false); | 105 | if(this.rule.type === 'inline') { |
97 | 106 | this.selectorField.readOnly = true; | |
107 | } else { | ||
108 | this.selectorField.addEventListener('change', this, false); | ||
109 | } | ||
98 | //console.log("css style rule : prepare for draw"); | 110 | //console.log("css style rule : prepare for draw"); |
99 | 111 | ||
100 | } | 112 | } |
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.js b/js/panels/css-panel/rule-list.reel/rule-list.js index 4ed3ec11..8d179248 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.js +++ b/js/panels/css-panel/rule-list.reel/rule-list.js | |||
@@ -25,7 +25,7 @@ exports.RuleList = Montage.create(Component, { | |||
25 | console.log('list: ', list); | 25 | console.log('list: ', list); |
26 | this._rules = list; | 26 | this._rules = list; |
27 | 27 | ||
28 | ///// remove previsouly added rules | 28 | ///// remove previously added rules |
29 | if(this.childComponents){ | 29 | if(this.childComponents){ |
30 | this.childComponents.forEach(function(ruleComponent) { | 30 | this.childComponents.forEach(function(ruleComponent) { |
31 | this.removeRule(ruleComponent); | 31 | this.removeRule(ruleComponent); |
@@ -50,7 +50,10 @@ exports.RuleList = Montage.create(Component, { | |||
50 | value: [], | 50 | value: [], |
51 | distinct: true | 51 | distinct: true |
52 | }, | 52 | }, |
53 | 53 | rulesToRemove : { | |
54 | value: [], | ||
55 | distinct: true | ||
56 | }, | ||
54 | addRule: { | 57 | addRule: { |
55 | value: function(rule) { | 58 | value: function(rule) { |
56 | var componentBase = this.supportedRules[rule.type], | 59 | var componentBase = this.supportedRules[rule.type], |
@@ -73,6 +76,14 @@ exports.RuleList = Montage.create(Component, { | |||
73 | } | 76 | } |
74 | }, | 77 | }, |
75 | 78 | ||
79 | removeRule : { | ||
80 | value: function(rule) { | ||
81 | this.childComponents.splice(this.childComponents.indexOf(rule), 1); | ||
82 | this.rulesToRemove.push(rule); | ||
83 | this.needsDraw = true; | ||
84 | } | ||
85 | }, | ||
86 | |||
76 | update : { | 87 | update : { |
77 | value: function() { | 88 | value: function() { |
78 | this.childComponents.forEach(function(component) { | 89 | this.childComponents.forEach(function(component) { |
@@ -106,11 +117,18 @@ exports.RuleList = Montage.create(Component, { | |||
106 | this.rulesToDraw.forEach(function(component) { | 117 | this.rulesToDraw.forEach(function(component) { |
107 | this.element.appendChild(component.element); | 118 | this.element.appendChild(component.element); |
108 | this._needsScrollToBottom = this.needsDraw = true; | 119 | this._needsScrollToBottom = this.needsDraw = true; |
120 | this.childComponents.push(component); | ||
109 | component.needsDraw = true; | 121 | component.needsDraw = true; |
110 | }, this); | 122 | }, this); |
111 | 123 | ||
124 | //// Iterate through all rules that need draw and append them | ||
125 | this.rulesToRemove.forEach(function(component) { | ||
126 | this.element.removeChild(component.element); | ||
127 | }, this); | ||
128 | |||
112 | ///// Null out any rules that were just drawn | 129 | ///// Null out any rules that were just drawn |
113 | this.rulesToDraw.length = 0; | 130 | this.rulesToDraw.length = 0; |
131 | this.rulesToRemove.length = 0; | ||
114 | } | 132 | } |
115 | } | 133 | } |
116 | }); | 134 | }); |
diff --git a/js/panels/css-panel/style.reel/style.js b/js/panels/css-panel/style.reel/style.js index b86be0ae..a8939bc6 100644 --- a/js/panels/css-panel/style.reel/style.js +++ b/js/panels/css-panel/style.reel/style.js | |||
@@ -131,6 +131,18 @@ exports.Style = Montage.create(TreeNode, { | |||
131 | } | 131 | } |
132 | }, | 132 | }, |
133 | 133 | ||
134 | remove : { | ||
135 | value: function() { | ||
136 | var branchController = this.parentComponent.parentComponent.contentController; | ||
137 | |||
138 | ///// Remove style property from declaration | ||
139 | this.treeView.parentComponent.declaration.removeProperty(this.propertyField._preEditValue); | ||
140 | |||
141 | ///// Remove data from branch controller and update UI | ||
142 | branchController.removeObjects(this.sourceObject); | ||
143 | } | ||
144 | }, | ||
145 | |||
134 | getRule : { | 146 | getRule : { |
135 | value: function() { | 147 | value: function() { |
136 | return this.treeView.parentComponent.declaration.parentRule; | 148 | return this.treeView.parentComponent.declaration.parentRule; |
@@ -315,10 +327,16 @@ exports.Style = Montage.create(TreeNode, { | |||
315 | if(this.empty) { | 327 | if(this.empty) { |
316 | this.element.draggable = false; | 328 | this.element.draggable = false; |
317 | this.element.classList.add('empty-css-style'); | 329 | this.element.classList.add('empty-css-style'); |
330 | if(!this.addStyleButton.parentNode) { | ||
331 | console.log("Adding style for ", this.propertyText); | ||
332 | this.element.appendChild(this.addStyleButton); | ||
333 | this.addStyleButton.addEventListener('click', this, false); | ||
334 | } | ||
318 | } else { | 335 | } else { |
319 | this.element.draggable = true; | 336 | this.element.draggable = true; |
320 | this.element.classList.remove('empty-css-style'); | 337 | this.element.classList.remove('empty-css-style'); |
321 | if(this.addStyleButton.parentNode) { | 338 | if(this.addStyleButton.parentNode) { |
339 | console.log("Removing style for ", this.propertyText); | ||
322 | this.element.removeChild(this.addStyleButton); | 340 | this.element.removeChild(this.addStyleButton); |
323 | } | 341 | } |
324 | } | 342 | } |
diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.js b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js index 0204d2b8..e51c78cd 100644 --- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.js +++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js | |||
@@ -29,6 +29,7 @@ exports.StylesViewContainer = Montage.create(Component, { | |||
29 | templateDidLoad : { | 29 | templateDidLoad : { |
30 | value: function() { | 30 | value: function() { |
31 | this.eventManager.addEventListener('styleSheetsReady', this, false); | 31 | this.eventManager.addEventListener('styleSheetsReady', this, false); |
32 | this.eventManager.addEventListener('elementChange', this, false); | ||
32 | } | 33 | } |
33 | }, | 34 | }, |
34 | handleStyleSheetsReady: { | 35 | handleStyleSheetsReady: { |
@@ -46,6 +47,13 @@ exports.StylesViewContainer = Montage.create(Component, { | |||
46 | this.hasStyles = true; | 47 | this.hasStyles = true; |
47 | } | 48 | } |
48 | }, | 49 | }, |
50 | handleElementChange : { | ||
51 | value: function(e) { | ||
52 | if(e._event.detail.type !== 'cssChange') { | ||
53 | this.ruleListContainer.displayedList.component.update(); | ||
54 | } | ||
55 | } | ||
56 | }, | ||
49 | 57 | ||
50 | draw : { | 58 | draw : { |
51 | value: function() { | 59 | value: function() { |
diff --git a/js/panels/css-panel/styles-view-mediator.js b/js/panels/css-panel/styles-view-mediator.js index 8a0e4137..c3154db0 100644 --- a/js/panels/css-panel/styles-view-mediator.js +++ b/js/panels/css-panel/styles-view-mediator.js | |||
@@ -23,6 +23,12 @@ exports.StylesViewMediator = Montage.create(Component, { | |||
23 | 23 | ||
24 | handleSelectorChange : { | 24 | handleSelectorChange : { |
25 | value: function(rule, newSelector, ruleComponent) { | 25 | value: function(rule, newSelector, ruleComponent) { |
26 | if(newSelector === "") { | ||
27 | debugger; | ||
28 | ruleComponent.parentComponent.removeRule(ruleComponent); | ||
29 | return false; | ||
30 | } | ||
31 | |||
26 | rule.selectorText = newSelector; | 32 | rule.selectorText = newSelector; |
27 | 33 | ||
28 | ruleComponent.applied = this.ruleListContainer.displayedList.selection.every(function(el) { | 34 | ruleComponent.applied = this.ruleListContainer.displayedList.selection.every(function(el) { |
@@ -103,6 +109,12 @@ exports.StylesViewMediator = Montage.create(Component, { | |||
103 | return false; | 109 | return false; |
104 | } | 110 | } |
105 | 111 | ||
112 | if(property === '') { | ||
113 | style.remove(); | ||
114 | this._dispatchChange(oldProperty, browserValue); | ||
115 | return false; | ||
116 | } | ||
117 | |||
106 | ///// Remove old property and add new one | 118 | ///// Remove old property and add new one |
107 | this.stylesController.deleteStyle(rule, oldProperty); | 119 | this.stylesController.deleteStyle(rule, oldProperty); |