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