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.js137
2 files changed, 182 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..4bad8350
--- /dev/null
+++ b/js/panels/css-panel/rule-list-container.reel/rule-list-container.js
@@ -0,0 +1,137 @@
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 _displayedList : { value: null },
15
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 listInstance = Montage.create(this.ruleListComponent),
78 container = document.createElement('div'),
79 rules, ruleListLog;
80
81 if(selection.length === 1) {
82 rules = stylesController.getMatchingRules(selection[0]);
83
84 ///// Add inline style to rule list
85 rules.splice(0, 0, {
86 type : 'inline',
87 selectorText : 'element.style',
88 parentStyleSheet : 'Inline Style',
89 style : selection[0].style
90 });
91
92 } //// TODO: support more selection types
93
94 this._instanceToAdd = listInstance;
95 listInstance.rules = rules;
96
97 ruleListLog = {
98 selection: selection,
99 component : listInstance
100 };
101
102 this.ruleLists.push(ruleListLog);
103
104 this._appendElement = container;
105 this.needsDraw = true;
106
107 return ruleListLog;
108 }
109 },
110
111 //// Array of lists that have been added to the container
112 //// Lists include selection type (element/stylesheet), and
113 //// the selection itself
114 ruleLists : {
115 value: [],
116 distinct: true
117 },
118
119 draw : {
120 value: function() {
121 if(this._appendElement) {
122 this.element.appendChild(this._appendElement);
123 this._instanceToAdd.element = this._appendElement;
124 this._appendElement = null;
125 this.needsDraw = true;
126 return;
127 }
128
129 if(this._lastDisplayedList) {
130 this._lastDisplayedList.component.element.style.display = 'none';
131 if(this._displayedList.component.element) {
132 this._displayedList.component.element.style.display = null;
133 }
134 }
135 }
136 }
137}); \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-02 09:18:42 +0000