aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/rule-list-container.reel
diff options
context:
space:
mode:
authorArmen Kesablyan2012-05-23 14:34:58 -0700
committerArmen Kesablyan2012-05-23 14:34:58 -0700
commitc21db7f1e4a0582777bdb5366df5d023a915b779 (patch)
treec4d29cb4686101d4a480ae836d20187879cf5400 /js/panels/css-panel/rule-list-container.reel
parent3ed95247e9ea4b0a7833401ed6809647b7c4acbf (diff)
parent1a7e347810401e6262d9d7bad1c3583e6773993b (diff)
downloadninja-c21db7f1e4a0582777bdb5366df5d023a915b779.tar.gz
Merge branch 'refs/heads/dom-architecture' into binding
Conflicts: js/data/panels-data.js Signed-off-by: Armen Kesablyan <armen@motorola.com>
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.js185
2 files changed, 233 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..e2e269ba
--- /dev/null
+++ b/js/panels/css-panel/rule-list-container.reel/rule-list-container.js
@@ -0,0 +1,185 @@
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 instance.rules = rules;
82
83 ruleListLog = {
84 selection: selection,
85 component : instance
86 };
87
88 this.ruleLists.push(ruleListLog);
89
90 this.ruleListsToDraw.push({
91 element : container,
92 component : instance
93 });
94
95 this.needsDraw = true;
96
97 return ruleListLog;
98 }
99 },
100
101 ruleListsToDraw : {
102 value: []
103 },
104
105 getRulesForSelection : {
106 value: function(selection) {
107 var rules;
108
109 if(selection.length > 1) {
110 rules = this.stylesController.getCommonRules(selection);
111 } else if(selection.length === 1) {
112 rules = this.stylesController.getMatchingRules(selection[0]);
113
114 ///// Add inline style to rule list
115 rules.splice(0, 0, {
116 type : 'inline',
117 selectorText : 'element.style',
118 parentStyleSheet : 'Inline Style',
119 style : selection[0].style
120 });
121
122 }
123
124 return rules;
125 }
126 },
127
128 update : {
129 value: function() {
130 this.displayedList.component.rules = this.getRulesForSelection(this.displayedList.selection);
131 }
132 },
133
134 //// Array of lists that have been added to the container
135 //// Lists include selection type (element/stylesheet), and
136 //// the selection itself
137 ruleLists : {
138 value: [],
139 distinct: true
140 },
141
142 templateDidLoad : {
143 value: function() {
144 if(this.focusDelegate) {
145 this.ruleListComponent.focusDelegate = this.focusDelegate;
146 }
147 this.stylesController = this.application.ninja.stylesController;
148 }
149 },
150