aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/css-panel')
-rw-r--r--js/panels/css-panel/rule-list-container.reel/rule-list-container.js133
-rw-r--r--js/panels/css-panel/styles-view-container.reel/styles-view-container.css1
-rw-r--r--js/panels/css-panel/styles-view-container.reel/styles-view-container.js48
3 files changed, 73 insertions, 109 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 04689602..17bdc2a4 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
@@ -8,26 +8,45 @@ var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component; 8 Component = require("montage/ui/component").Component;
9 9
10exports.RuleListContainer = Montage.create(Component, { 10exports.RuleListContainer = Montage.create(Component, {
11 ruleListComponent : { 11 _instanceToAdd : { value: null },
12 value: null 12 _appendElement : { value: null },
13 _lastDisplayedList : { value: null },
14 _displayedList : { value: null },
15
16 displayedList : {
17 get: function() {
18 return this._displayedList;
19 },
20 set: function(list) {
21 this._lastDisplayedList = this._displayedList;
22 this._displayedList = list;
23 this.needsDraw = true;
24 }
13 }, 25 },
14 templateDidLoad: { 26
15 value: function() { 27 displayListForSelection : {
16 console.log('rule list container - tempalte did load'); 28 value: function(selection) {
29 var list = this._getListForSelection(selection);
30
31 if(!list) {
32 list = this.add(selection);
33 } else {
34 console.log("rule list found!");
35 }
36
37 this.displayedList = list;
17 } 38 }
18 }, 39 },
19 _getRuleList : {
20 value: function(s) {
21 var ruleListsOfType, i, list, matchesAll;
22 40
23 ruleListsOfType = this.ruleLists.filter(function(list) { 41 //// Get the element containing list based on selection
24 return list.selectionType = s.selectionType; 42 _getListForSelection : {
25 }); 43 value: function(selection) {
44 var i, list, matchesAll;
26 45
27 for(i = 0; i<ruleListsOfType.length; i++) { 46 for(i = 0; i<this.ruleLists.length; i++) {
28 list = ruleListsOfType[i]; 47 list = this.ruleLists[i];
29 48
30 if(s.selectionType === 'elements') { 49 if(selection.length > 1) {
31 matchesAll = list.selection.every(function(element, index, array) { 50 matchesAll = list.selection.every(function(element, index, array) {
32 return array.indexOf(element) !== 0; 51 return array.indexOf(element) !== 0;
33 }); 52 });
@@ -38,86 +57,72 @@ exports.RuleListContainer = Montage.create(Component, {
38 } else { 57 } else {
39 ///// Selection (single element or stylesheet) is the same, 58 ///// Selection (single element or stylesheet) is the same,
40 ///// Use the existing rule list 59 ///// Use the existing rule list
41 if(list.selection === s.selection) { 60 if(list.selection[0] === selection[0]) {
42 break; 61 break;
43 } 62 }
44 } 63 }
64
65 list = null;
45 } 66 }
46 67
47 return list; 68 return list;
48 69
49 } 70 }
50 }, 71 },
51 ruleLists : {
52 value: []
53 },
54 add : {
55 value: function(type, selection) {
56 console.log("Rule List Container : add()");
57 72
73 //// Creates a new rule list to be added to the container
74 add : {
75 value: function(selection) {
58 var stylesController = this.application.ninja.stylesController, 76 var stylesController = this.application.ninja.stylesController,
59 listInstance = Montage.create(this.ruleListComponent), 77 listInstance = Montage.create(this.ruleListComponent),
60 container = document.createElement('div'), 78 container = document.createElement('div'),
61 rules; 79 rules, ruleListLog;
62 80
63 if(type === 'ELEMENT') { 81 if(selection.length === 1) {
64 rules = stylesController.getMatchingRules(selection); 82 rules = stylesController.getMatchingRules(selection[0]);
65 } 83 } //// TODO: support more selection types
66 84
67 //listInstance.element = container;
68 this._instanceToAdd = listInstance; 85 this._instanceToAdd = listInstance;
69 listInstance.rules = rules; 86 listInstance.rules = rules;
70 87
71 this.appendElement = container; 88 ruleListLog = {
72 } 89 selection: selection,
73 }, 90 component : listInstance
74 _instanceToAdd : { 91 };
75 value: null 92
76 }, 93 this.ruleLists.push(ruleListLog);
77 _appendElement : { 94
78 value: null 95 this._appendElement = container;
79 },
80 appendElement : {
81 get: function() {
82 return this._appendElement;
83 },
84 set: function(el) {
85 this._appendElement = el;
86 this.needsDraw = true; 96 this.needsDraw = true;
97
98 return ruleListLog;
87 } 99 }
88 }, 100 },
89 _lastDisplayedList : { 101
90 value: null 102 //// Array of lists that have been added to the container
91 }, 103 //// Lists include selection type (element/stylesheet), and
92 _displayedList : { 104 //// the selection itself
93 value: null 105 ruleLists : {
94 }, 106 value: [],
95 displayedList : { 107 distinct: true
96 get: function() {
97 return this._displayedList;
98 },
99 set: function(list) {
100 this._lastDisplayedList = this._displayedList;
101 this._displayedList = list;
102 this.needsDraw = true;
103 }
104 }, 108 },
109
105 draw : { 110 draw : {
106 value: function() { 111 value: function() {
107 if(this._lastDisplayedList) {
108 this._lastDisplayedList.style.display = 'none';
109
110 if(this._displayedList.element) {
111 this._displayedList.style.display = null;
112 }
113 }
114
115 if(this._appendElement) { 112 if(this._appendElement) {
116 this.element.appendChild(this._appendElement); 113 this.element.appendChild(this._appendElement);
117 this._instanceToAdd.element = this._appendElement; 114 this._instanceToAdd.element = this._appendElement;
118 this._appendElement = null; 115 this._appendElement = null;
116 this.needsDraw = true;
117 return;
119 } 118 }
120 119
120 if(this._lastDisplayedList) {
121 this._lastDisplayedList.component.element.style.display = 'none';
122 if(this._displayedList.component.element) {
123 this._displayedList.component.element.style.display = null;
124 }
125 }
121 } 126 }
122 } 127 }
123}); \ No newline at end of file 128}); \ No newline at end of file
diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.css b/js/panels/css-panel/styles-view-container.reel/styles-view-container.css
index 0b1aa892..5bc34d57 100644
--- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.css
+++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.css
@@ -4,6 +4,7 @@
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. 4 (c) Copyright 2011 Motor