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.html45
-rw-r--r--js/panels/css-panel/rule-list-container.reel/rule-list-container.js175
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>
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 "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
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
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