diff options
Diffstat (limited to 'js/panels/css-panel')
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 | ||
10 | exports.RuleListContainer = Montage.create(Component, { | 10 | exports.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 |