aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel
diff options
context:
space:
mode:
authorEric Guzman2012-05-10 13:20:19 -0700
committerEric Guzman2012-05-10 13:20:19 -0700
commit830b6577ee25a6955bd4e275f216e1cadeff168c (patch)
treeca4abd50c63f17e1dfa612c3be99875b756618e9 /js/panels/css-panel
parent0cbfa32fa4e62be128b6478dcba0aa9db902f78b (diff)
downloadninja-830b6577ee25a6955bd4e275f216e1cadeff168c.tar.gz
CSS Panel - Rule List refactor
Improved adding, updating, and sorting of rules in rule list.
Diffstat (limited to 'js/panels/css-panel')
-rw-r--r--js/panels/css-panel/rule-list-container.reel/rule-list-container.js33
-rw-r--r--js/panels/css-panel/rule-list.reel/rule-list.js168
-rw-r--r--js/panels/css-panel/styles-view-delegate.js109
3 files changed, 175 insertions, 135 deletions
diff --git a/js/panels/css-panel/rule-list-container.reel/rule-list-container.js b/js/panels/css-panel/rule-list-container.reel/rule-list-container.js
index 5371ec9a..d9aae867 100644
--- a/js/panels/css-panel/rule-list-container.reel/rule-list-container.js
+++ b/js/panels/css-panel/rule-list-container.reel/rule-list-container.js
@@ -11,8 +11,8 @@ exports.RuleListContainer = Montage.create(Component, {
11 _instanceToAdd : { value: null }, 11 _instanceToAdd : { value: null },
12 _appendElement : { value: null }, 12 _appendElement : { value: null },
13 _lastDisplayedList : { value: null }, 13 _lastDisplayedList : { value: null },
14 _displayedList : { value: null },
15 14
15 _displayedList : { value: null },
16 displayedList : { 16 displayedList : {
17 get: function() { 17 get: function() {
18 return this._displayedList; 18 return this._displayedList;
@@ -74,22 +74,21 @@ exports.RuleListContainer = Montage.create(Component, {
74 add : { 74 add : {
75 value: function(selection) { 75 value: function(selection) {
76 var stylesController = this.application.ninja.stylesController, 76 var stylesController = this.application.ninja.stylesController,
77 listInstance = Montage.create(this.ruleListComponent), 77 instance = Montage.create(this.ruleListComponent),
78 container = document.createElement('div'), 78 container = document.createElement('div'),
79 rules, ruleListLog; 79 rules, ruleListLog;
80 80
81 rules = this.getRulesForSelection(selection); 81 rules = this.getRulesForSelection(selection);
82 82
83 this._instanceToAdd = listInstance; 83 this._instanceToAdd = instance;
84 listInstance.rules = rules; 84 instance.rules = rules;
85 85
86 ruleListLog = { 86 ruleListLog = {
87 selection: selection, 87 selection: selection,
88 component : listInstance 88 component : instance
89 }; 89 };
90 90
91 this.ruleLists.push(ruleListLog); 91 this.ruleLists.push(ruleListLog);
92
93 this._appendElement = container; 92 this._appendElement = container;
94 this.needsDraw = true; 93 this.needsDraw = true;
95 94
@@ -120,17 +119,21 @@ exports.RuleListContainer = Montage.create(Component, {
120 119
121 update : { 120 update : {
122 value: function() { 121 value: function() {
123 var stylesController = this.application.ninja.stylesController, 122 this.displayedList.component.rules = this.getRulesForSelection(this.displayedList.selection);
124 rules = this.getRulesForSelection(this.displayedList.selection), 123
125 newRules;
126 124
127 newRules = rules.filter(function(rule) { 125 ///// Update the currently displayed list
128 return rule.type !== 'inline' && this.displayedList.component.rules.indexOf(rule) === -1; 126 //this.displayedList.component.update();
129 }, this);
130 127
131 newRules.forEach(function(rule) { 128 ///// Find the new rules which need to be added to the rule-list
132 this.displayedList.component.addRule(rule); 129// newRules = rules.filter(function(rule) {
133 },this); 130// return rule.type !== 'inline' && this.displayedList.component.rules.indexOf(rule) === -1;
131// }, this);
132//
133// ///// Add the new rules
134// newRules.forEach(function(rule) {
135// this.displayedList.component.addRule(rule);
136// },this);
134 } 137 }
135 }, 138 },
136 139
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 c9eeb64b..5f6afee5 100644
--- a/js/panels/css-panel/rule-list.reel/rule-list.js
+++ b/js/panels/css-panel/rule-list.reel/rule-list.js
@@ -12,35 +12,6 @@ exports.RuleList = Montage.create(Component, {
12 ruleNodeName : { value: 'li' }, 12 ruleNodeName : { value: 'li' },
13 _needsScrollToBottom: { value: null }, 13 _needsScrollToBottom: { value: null },
14 14
15 _rules: { value: null },
16 rules: {
17 get: function() {
18 return this._rules;
19 },
20 set: function(list) {
21 if(!list) {
22 return null;
23 }
24 //debugger;
25 console.log('list: ', list);
26 this._rules = list;
27
28 ///// remove previously added rules
29 if(this.childComponents){
30 this.childComponents.forEach(function(ruleComponent) {
31 this.removeRule(ruleComponent);
32 }, this);
33 }
34
35 this._rules.forEach(function(rule) {
36 this.addRule(rule);
37 }, this);
38
39 this.needsDraw = true;
40
41 }
42 },
43
44 childComponents : { 15 childComponents : {
45 value: [], 16 value: [],
46 distinct: true 17 distinct: true
@@ -54,51 +25,98 @@ exports.RuleList = Montage.create(Component, {
54 value: [], 25 value: [],
55 distinct: true 26 distinct: true
56 }, 27 },
57 addRule: {
58 value: function(rule) {
59 var componentBase = this.supportedRules[rule.type],
60 instance, el;
61 28
62 ///// Draw the rule if we have a template for the rule type 29 update : {
63 if(componentBase) { 30 value: function(rules) {
64 instance = Montage.create(componentBase); 31 this.childComponents.forEach(function(component) {
65 instance.rule = rule; 32 component.update();
33 }, this);
34 }
35 },
66 36
67 if(this.focusDelegate) { 37 _rules: { value: null },
68 instance.focusDelegate = this.focusDelegate; 38 rules: {
39 get: function() {
40 return this._rules;
41 },
42 set: function(list) {
43 if(!list) {
44 return null;
45 }
46
47 var foundIndices = [];
48
49 //// Iterate existing rules, update those which rule exists in new
50 //// rule list
51 this.childComponents.forEach(function(ruleComponent, i, drawnRules) {
52 //// If rule exists in new list, update it
53 var index = list.indexOf(ruleComponent.rule);
54
55 if(ruleComponent.rule.type === 'inline') {
56 //// Let's emulate finding the line rule at the first index
57 index = 0;
69 } 58 }
70 59
71 this.rulesToDraw.push(instance); 60 if(index !== -1) {
72 this.needsDraw = true; 61 // found rule in our component list, or it's the inline rule
73 } 62 ruleComponent.update();
63 foundIndices.push(index);
64 } else {
65 this.rulesToRemove.push(ruleComponent);
66 }
67 }, this);
74 68
75 return instance; 69 //// Find rules to add
76 } 70 list.forEach(function(rule, index) {
77 }, 71 //// If we haven't updated the rule already,
72 //// we're dealing with a new rule to add
73 if(foundIndices.indexOf(index) === -1) {
74 this.addRule(rule, index);
75 }
76 }, this);
77
78 this._rules = list;
78 79
79 removeRule : {
80 value: function(rule) {
81 this.childComponents.splice(this.childComponents.indexOf(rule), 1);
82 this.rulesToRemove.push(rule);
83 this.needsDraw = true; 80 this.needsDraw = true;
81
84 } 82 }
85 }, 83 },
86 84
87 update : { 85 addRule: {
88 value: function(rules) { 86 value: function(rule, atIndex) {
89 this.childComponents.forEach(function(component) { 87 var insertIndex = atIndex || this.childComponents.length;
90 component.upd