aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/rule-list.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/css-panel/rule-list.reel')
-rw-r--r--js/panels/css-panel/rule-list.reel/rule-list.css26
-rw-r--r--js/panels/css-panel/rule-list.reel/rule-list.html26
-rw-r--r--js/panels/css-panel/rule-list.reel/rule-list.js173
3 files changed, 225 insertions, 0 deletions
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.css b/js/panels/css-panel/rule-list.reel/rule-list.css
new file mode 100644
index 00000000..0f744511
--- /dev/null
+++ b/js/panels/css-panel/rule-list.reel/rule-list.css
@@ -0,0 +1,26 @@
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.rule-list-container {
7 display: -webkit-box;
8 -webkit-box-orient: vertical;
9 -webkit-box-flex: 1;
10}
11.rule-list {
12 background-color: #FFF;
13 background: #FFF -webkit-linear-gradient(top, rgba(0,0,0,0.12) 0%,rgba(0,0,0,0) 4px);
14 color: #333;
15 display: -webkit-box;
16 font-family: monospace;
17 padding: 0;
18 margin: 0;
19 overflow-y: auto;
20 -webkit-box-orient: vertical;
21 -webkit-box-flex: 1;
22}
23.rule-list li {
24 list-style-type: none;
25 margin: 0;
26} \ No newline at end of file
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.html b/js/panels/css-panel/rule-list.reel/rule-list.html
new file mode 100644
index 00000000..c11e488d
--- /dev/null
+++ b/js/panels/css-panel/rule-list.reel/rule-list.html
@@ -0,0 +1,26 @@
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 <link href="rule-list.css" type="text/css" rel="stylesheet">
11 <script type="text/montage-serialization">
12 {
13 "owner": {
14 "module" : "js/panels/css-panel/rule-list.reel",
15 "name" : "RuleList",
16 "properties" : {
17 "element" : {"#" : "rule-list"}
18 }
19 }
20 }
21 </script>
22</head>
23<body>
24<ul id="rule-list" class="rule-list"></ul>
25</body>
26</html> \ No newline at end of file
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.js b/js/panels/css-panel/rule-list.reel/rule-list.js
new file mode 100644
index 00000000..5f6afee5
--- /dev/null
+++ b/js/panels/css-panel/rule-list.reel/rule-list.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.RuleList = Montage.create(Component, {
11 focusDelegate : { value: null },
12 ruleNodeName : { value: 'li' },
13 _needsScrollToBottom: { value: null },
14
15 childComponents : {
16 value: [],
17 distinct: true
18 },
19
20 rulesToDraw : {
21 value: [],
22 distinct: true
23 },
24 rulesToRemove : {
25 value: [],
26 distinct: true
27 },
28
29 update : {
30 value: function(rules) {
31 this.childComponents.forEach(function(component) {
32 component.update();
33 }, this);
34 }
35 },
36
37 _rules: { value: null },
38 rules: {
39 get: function() {
40 return this._rules;
41 },
42 set: function(list) {
43 if(!list) {
44 return null;
45 }
46
47 var foundIndices = [];
48
49 //// Iterate existing rules, update those which rule exists in new
50 //// rule list
51 this.childComponents.forEach(function(ruleComponent, i, drawnRules) {
52 //// If rule exists in new list, update it
53 var index = list.indexOf(ruleComponent.rule);
54
55 if(ruleComponent.rule.type === 'inline') {
56 //// Let's emulate finding the line rule at the first index
57 index = 0;
58 }
59
60 if(index !== -1) {
61 // found rule in our component list, or it's the inline rule
62 ruleComponent.update();
63 foundIndices.push(index);
64 } else {
65 this.rulesToRemove.push(ruleComponent);
66 }
67 }, this);
68
69 //// Find rules to add
70 list.forEach(function(rule, index) {
71 //// If we haven't updated the rule already,
72 //// we're dealing with a new rule to add
73 if(foundIndices.indexOf(index) === -1) {
74 this.addRule(rule, index);
75 }
76 }, this);
77
78 this._rules = list;
79
80 this.needsDraw = true;
81
82 }
83 },
84
85 addRule: {
86 value: function(rule, atIndex) {
87 var insertIndex = atIndex || this.childComponents.length;
88
89 this.rulesToDraw.push({
90 rule: rule,
91 index: insertIndex,
92 instance : null
93 });
94
95 this.needsDraw = true;
96 }
97 },
98
99 willDraw : {
100 value: function() {
101 this.rulesToDraw.forEach(function(ruleObj) {
102 var el = document.createElement(this.ruleNodeName);
103
104 var componentBase = this.supportedRules[ruleObj.rule.type],
105 instance;
106
107 ///// Draw the rule if we have a template for the rule type
108 if(!componentBase) { return false; }
109
110 instance = Montage.create(componentBase);
111 instance.element = document.createElement(this.ruleNodeName);
112 instance.rule = ruleObj.rule;
113
114 if(this.focusDelegate) {
115 instance.focusDelegate = this.focusDelegate;
116 }
117
118 ruleObj.instance = instance;
119
120 }, this);
121
122 }
123 },
124
125 draw : {
126 value: function() {
127 ///// If needed, scroll to bottom
128 if(this._needsScrollToBottom) {
129 ///// Make sure the appended rule item is visible (scrolled-to)
130 this.element.scrollTop = this.element.offsetHeight;
131 console.log("Scroll top:", this.element.scrollTop);
132 this._needsScrollToBottom = false;
133 }
134
135 //// Iterate through all rules needing removal
136 console.log("Rule List :: Rules to draw:,", this.rulesToDraw.length);
137 this.rulesToRemove.forEach(function(ruleComponent) {
138 var componentIndex = this.childComponents.indexOf(ruleComponent);
139 this.childComponents.splice(componentIndex, 1);
140 this.element.removeChild(ruleComponent.element);
141 }, this);
142
143 //// Iterate through all rules that need draw and append them
144 this.rulesToDraw.forEach(function(ruleObj) {
145 var ruleAtIndex = this.childComponents[ruleObj.index];
146
147 if(ruleAtIndex) {
148 //// Insert rule at appropriate index
149 this.element.insertBefore(ruleObj.instance.element, ruleAtIndex.element);
150 } else {
151 this.element.appendChild(ruleObj.instance.element);
152 }
153
154 this._needsScrollToBottom = this.needsDraw = true;
155 this.childComponents.push(ruleObj.instance);
156 ruleObj.instance.needsDraw = true;
157 }, this);
158
159 ///// Null out any rules that were just drawn
160 this.rulesToDraw.length = 0;
161
162 }
163 },