aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/rule-list-container.reel
diff options
context:
space:
mode:
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.html51
-rw-r--r--js/panels/css-panel/rule-list-container.reel/rule-list-container.js173
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>
3This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4No 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
7var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component;
9
10exports.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