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 | 51 | ||||
-rw-r--r-- | js/panels/css-panel/rule-list-container.reel/rule-list-container.js | 173 |
2 files changed, 224 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..809f9bfe --- /dev/null +++ b/js/panels/css-panel/rule-list-container.reel/rule-list-container.html | |||
@@ -0,0 +1,51 @@ | |||
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 | } | ||
28 | } | ||
29 | }, | ||
30 | "cssStyleRule": { | ||
31 | "module": "js/panels/css-panel/rule-components/css-style-rule.reel", | ||
32 | "name": "CssStyleRule" | ||
33 | } | ||
34 | } | ||
35 | </script> | ||
36 | <script type="text/json"> | ||
37 | "supportedRules" : { | ||
38 | "inline": {"@": "cssStyleRule" }, | ||
39 | "1" : {"@": "cssStyleRule"}, | ||
40 | "3" : {"@": "cssImportRule"}, | ||
41 | "4" : {"@": "cssMediaRule"}, | ||
42 | "5" : {"@": "cssFontFaceRule"}, | ||
43 | "6" : {"@": "cssPageRule"}, | ||
44 | "10" : {"@": "namespaceRule"} | ||
45 | } | ||
46 | </script> | ||
47 | </head> | ||
48 | <body> | ||
49 | <div id="container" class="rule-list-container"></div> | ||
50 | </body> | ||
51 | </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..e7174c3d --- /dev/null +++ b/js/panels/css-panel/rule-list-container.reel/rule-list-container.js | |||
@@ -0,0 +1,173 @@ | |||
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 | ruleListDrawn : { value: null }, | ||
15 | |||
16 | _displayedList : { value: null }, | ||
17 | displayedList : { | ||
18 | get: function() { | ||
19 | return this._displayedList; | ||
20 | }, | ||
21 | set: function(list) { | ||
22 | this._lastDisplayedList = this._displayedList; | ||
23 | this._displayedList = list; | ||
24 | this.needsDraw = true; | ||
25 | } | ||
26 | }, | ||
27 | |||
28 | displayListForSelection : { | ||
29 | value: function(selection) { | ||
30 | var list = this._getListForSelection(selection); | ||
31 | |||
32 | if(!list) { | ||
33 | list = this.add(selection); | ||
34 | } | ||
35 | |||
36 | this.displayedList = list; | ||
37 | } | ||
38 | }, | ||
39 | |||
40 | //// Get the element containing list based on selection | ||
41 | _getListForSelection : { | ||
42 | value: function(selection) { | ||
43 | var i, list, matchesAll; | ||
44 | |||
45 | for(i = 0; i<this.ruleLists.length; i++) { | ||
46 | list = this.ruleLists[i]; | ||
47 | |||
48 | if(selection.length > 1) { | ||
49 | matchesAll = selection.every(function(element, index, array) { | ||
50 | return list.selection.indexOf(element) !== -1; | ||
51 | }); | ||
52 | |||
53 | if(matchesAll) { | ||
54 | break; | ||
55 | } | ||
56 | } else { | ||
57 | ///// Selection (single element or stylesheet) is the same, | ||
58 | ///// Use the existing rule list | ||
59 | if(list.selection[0] === selection[0]) { | ||
60 | break; | ||
61 | } | ||
62 | } | ||
63 | |||
64 | list = null; | ||
65 | } | ||
66 | |||
67 | return list; | ||
68 | |||
69 | } | ||
70 | }, | ||
71 | |||
72 | //// Creates a new rule list to be added to the container | ||
73 | add : { | ||
74 | value: function(selection) { | ||
75 | var stylesController = this.application.ninja.stylesController, | ||
76 | instance = Montage.create(this.ruleListComponent), | ||
77 | container = document.createElement('div'), | ||
78 | rules, ruleListLog; | ||
79 | |||
80 | rules = this.getRulesForSelection(selection); | ||
81 | |||
82 | this._instanceToAdd = instance; | ||
83 | instance.rules = rules; | ||
84 | |||
85 | ruleListLog = { | ||
86 | selection: selection, | ||
87 | component : instance | ||
88 | }; | ||
89 | |||
90 | this.ruleLists.push(ruleListLog); | ||
91 | this._appendElement = container; | ||
92 | this.needsDraw = true; | ||
93 | |||
94 | return ruleListLog; | ||
95 | } | ||
96 | }, | ||
97 | |||
98 | getRulesForSelection : { | ||
99 | value: function(selection) { | ||
100 | var rules; | ||
101 | |||
102 | if(selection.length > 1) { | ||
103 | rules = this.stylesController.getCommonRules(selection); | ||
104 | } else if(selection.length === 1) { | ||
105 | rules = this.stylesController.getMatchingRules(selection[0]); | ||
106 | |||
107 | ///// Add inline style to rule list | ||
108 | rules.splice(0, 0, { | ||
109 | type : 'inline', | ||
110 | selectorText : 'element.style', | ||
111 | parentStyleSheet : 'Inline Style', | ||
112 | style : selection[0].style | ||
113 | }); | ||
114 | |||
115 | } | ||
116 | |||
117 | return rules; | ||
118 | } | ||
119 | }, | ||
120 | |||
121 | update : { | ||
122 | value: function() { | ||
123 | this.displayedList.component.rules = this.getRulesForSelection(this.displayedList.selection); | ||
124 | } | ||
125 | }, | ||
126 | |||
127 | //// Array of lists that have been added to the container | ||
128 | //// Lists include selection type (element/stylesheet), and | ||
129 | //// the selection itself | ||
130 | ruleLists : { | ||
131 | value: [], | ||
132 | distinct: true | ||
133 | }, | ||
134 | |||
135 | templateDidLoad : { | ||
136 | value: function() { | ||
137 | if(this.focusDelegate) { | ||
138 | this.ruleListComponent.focusDelegate = this.focusDelegate; | ||
139 | } | ||
140 | this.stylesController = this.application.ninja.stylesController; | ||
141 | } | ||
142 | }, | ||
143 | |||
144 | draw : { | ||
145 | value: function() { | ||
146 | if(this._appendElement) { | ||
147 | this.element.appendChild(this._appendElement); | ||
148 | this._instanceToAdd.element = this._appendElement; | ||
149 | this._appendElement = null; | ||
150 | this.needsDraw = true; | ||
151 | return; | ||
152 | } | ||
153 | |||