diff options
Diffstat (limited to 'js/panels/css-panel/rule-list-container.reel')
-rw-r--r-- | js/panels/css-panel/rule-list-container.reel/rule-list-container.html | 45 | ||||
-rw-r--r-- | js/panels/css-panel/rule-list-container.reel/rule-list-container.js | 175 |
2 files changed, 220 insertions, 0 deletions
diff --git a/js/panels/css-panel/rule-list-container.reel/rule-list-container.html b/js/panels/css-panel/rule-list-container.reel/rule-list-container.html new file mode 100644 index 00000000..8f816d28 --- /dev/null +++ b/js/panels/css-panel/rule-list-container.reel/rule-list-container.html | |||
@@ -0,0 +1,45 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <!-- <copyright> | ||
3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
5 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
6 | </copyright> --> | ||
7 | <html lang="en"> | ||
8 | <head> | ||
9 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | ||
10 | <script type="text/montage-serialization"> | ||
11 | { | ||
12 | "owner": { | ||
13 | "module" : "js/panels/css-panel/rule-list-container.reel", | ||
14 | "name" : "RuleListContainer", | ||
15 | "properties" : { | ||
16 | "element" : {"#" : "container"}, | ||
17 | "ruleListComponent": {"@": "ruleList"} | ||
18 | } | ||
19 | }, | ||
20 | "ruleList": { | ||
21 | "module" : "js/panels/css-panel/rule-list.reel", | ||
22 | "name": "RuleList", | ||
23 | "properties": { | ||
24 | "supportedRules" : { | ||
25 | "inline": {"@": "cssStyleRule" }, | ||
26 | "1" : {"@": "cssStyleRule"}, | ||
27 | "3" : {"@": "cssImportRule"}, | ||
28 | "4" : {"@": "cssMediaRule"}, | ||
29 | "5" : {"@": "cssFontFaceRule"}, | ||
30 | "6" : {"@": "cssPageRule"}, | ||
31 | "10" : {"@": "namespaceRule"} | ||
32 | } | ||
33 | } | ||
34 | }, | ||
35 | "cssStyleRule": { | ||
36 | "module": "js/panels/css-panel/rule-components/css-style-rule.reel", | ||
37 | "name": "CssStyleRule" | ||
38 | } | ||
39 | } | ||
40 | </script> | ||
41 | </head> | ||
42 | <body> | ||
43 | <div id="container" class="rule-list-container"></div> | ||
44 | </body> | ||
45 | </html> \ No newline at end of file | ||
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 new file mode 100644 index 00000000..d9aae867 --- /dev/null +++ b/js/panels/css-panel/rule-list-container.reel/rule-list-container.js | |||
@@ -0,0 +1,175 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | var Montage = require("montage/core/core").Montage, | ||
8 | Component = require("montage/ui/component").Component; | ||
9 | |||
10 | exports.RuleListContainer = Montage.create(Component, { | ||
11 | _instanceToAdd : { value: null }, | ||
12 | _appendElement : { value: null }, | ||
13 | _lastDisplayedList : { value: null }, | ||
14 | |||
15 | _displayedList : { value: null }, | ||
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 | } | ||
25 | }, | ||
26 | |||
27 | displayListForSelection : { | ||
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; | ||
38 | } | ||
39 | }, | ||
40 | |||
41 | //// Get the element containing list based on selection | ||
42 | _getListForSelection : { | ||
43 | value: function(selection) { | ||
44 | var i, list, matchesAll; | ||
45 | |||
46 | for(i = 0; i<this.ruleLists.length; i++) { | ||
47 | list = this.ruleLists[i]; | ||
48 | |||
49 | if(selection.length > 1) { | ||
50 | matchesAll = list.selection.every(function(element, index, array) { | ||
51 | return array.indexOf(element) !== 0; | ||
52 | }); | ||
53 | |||
54 | if(matchesAll) { | ||
55 | break; | ||
56 | } | ||
57 | } else { | ||
58 | ///// Selection (single element or stylesheet) is the same, | ||
59 | ///// Use the existing rule list | ||
60 | if(list.selection[0] === selection[0]) { | ||
61 | break; | ||
62 | } | ||
63 | } | ||
64 | |||
65 | list = null; | ||
66 | } | ||
67 | |||
68 | return list; | ||
69 | |||
70 | } | ||
71 | }, | ||
72 | |||
73 | //// Creates a new rule list to be added to the container | ||
74 | add : { | ||
75 | value: function(selection) { | ||
76 | var stylesController = this.application.ninja.stylesController, | ||
77 | instance = Montage.create(this.ruleListComponent), | ||
78 | container = document.createElement('div'), | ||
79 | rules, ruleListLog; | ||
80 | |||
81 | rules = this.getRulesForSelection(selection); | ||
82 | |||
83 | this._instanceToAdd = instance; | ||
84 | instance.rules = rules; | ||
85 | |||
86 | ruleListLog = { | ||
87 | selection: selection, | ||
88 | component : instance | ||
89 | }; | ||
90 | |||
91 | this.ruleLists.push(ruleListLog); | ||
92 | this._appendElement = container; | ||
93 | this.needsDraw = true; | ||
94 | |||
95 | return ruleListLog; | ||
96 | } | ||
97 | }, | ||
98 | |||
99 | getRulesForSelection : { | ||
100 | value: function(selection) { | ||
101 | var rules; | ||
102 | |||
103 | if(selection.length === 1) { | ||
104 | rules = this.stylesController.getMatchingRules(selection[0]); | ||
105 | |||
106 | ///// Add inline style to rule list | ||
107 | rules.splice(0, 0, { | ||
108 | type : 'inline', | ||
109 | selectorText : 'element.style', | ||
110 | parentStyleSheet : 'Inline Style', | ||
111 | style : selection[0].style | ||
112 | }); | ||
113 | |||
114 | } //// TODO: support more selection types | ||
115 | |||
116 | return rules; | ||
117 | } | ||
118 | }, | ||
119 | |||
120 | update : { | ||
121 | value: function() { | ||
122 | this.displayedList.component.rules = this.getRulesForSelection(this.displayedList.selection); | ||
123 | |||
124 | |||
125 | ///// Update the currently displayed list | ||
126 | //this.displayedList.component.update(); | ||
127 | |||
128 | ///// Find the new rules which need to be added to the rule-list | ||
129 | // newRules = rules.filter(function(rule) { | ||
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); | ||
137 | } | ||
138 | }, | ||
139 | |||
140 | //// Array of lists that have been added to the container | ||
141 | //// Lists include selection type (element/stylesheet), and | ||
142 | //// the selection itself | ||
143 | ruleLists : { | ||
144 | value: [], | ||
145 | distinct: true | ||
146 | }, | ||
147 | |||
148 | templateDidLoad : { | ||
149 | value: function() { | ||
150 | if(this.focusDelegate) { | ||
151 | this.ruleListComponent.focusDelegate = this.focusDelegate; | ||
152 | } | ||
153 | this.stylesController = this.application.ninja.stylesController; | ||
154 | } | ||
155 | }, | ||
156 | |||
157 | draw : { | ||
158 | value: function() { | ||
159 |