aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
authorEric Guzman2012-05-01 11:15:14 -0700
committerEric Guzman2012-05-01 11:15:14 -0700
commit9a94c6fb5f82d18139b48341788a0ffca23ae0af (patch)
treec76f84915d7135c81e38f1abc003b6a3b34ff2c3 /js/panels
parent23d8efd4ed9e8fd43f516595009679fb44c8096d (diff)
downloadninja-9a94c6fb5f82d18139b48341788a0ffca23ae0af.tar.gz
CSS Panel - Added removing of rules/styles
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js16
-rw-r--r--js/panels/css-panel/rule-list.reel/rule-list.js22
-rw-r--r--js/panels/css-panel/style.reel/style.js18
-rw-r--r--js/panels/css-panel/styles-view-container.reel/styles-view-container.js8
-rw-r--r--js/panels/css-panel/styles-view-mediator.js18
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;