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.js134
3 files changed, 186 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..8d179248
--- /dev/null
+++ b/js/panels/css-panel/rule-list.reel/rule-list.js
@@ -0,0 +1,134 @@
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 _rules: { value: null },
16 rules: {
17 get: function() {
18 return this._rules;
19 },
20 set: function(list) {
21 if(!list) {
22 return null;
23 }
24 //debugger;
25 console.log('list: ', list);
26 this._rules = list;
27
28 ///// remove previously added rules
29 if(this.childComponents){
30 this.childComponents.forEach(function(ruleComponent) {
31 this.removeRule(ruleComponent);
32 }, this);
33 }
34
35 this._rules.forEach(function(rule) {
36 this.addRule(rule);
37 }, this);
38
39 this.needsDraw = true;
40
41 }
42 },
43
44 childComponents : {
45 value: [],
46 distinct: true
47 },
48
49 rulesToDraw : {
50 value: [],
51 distinct: true
52 },
53 rulesToRemove : {
54 value: [],
55 distinct: true
56 },
57 addRule: {
58 value: function(rule) {
59 var componentBase = this.supportedRules[rule.type],
60 instance, el;
61
62 ///// Draw the rule if we have a template for the rule type
63 if(componentBase) {
64 instance = Montage.create(componentBase);
65 instance.rule = rule;
66
67 if(this.focusDelegate) {
68 instance.focusDelegate = this.focusDelegate;
69 }
70
71 this.rulesToDraw.push(instance);
72 this.needsDraw = true;
73 }
74
75 return instance;
76 }
77 },
78
79 removeRule : {
80 value: function(rule) {
81 this.childComponents.splice(this.childComponents.indexOf(rule), 1);
82 this.rulesToRemove.push(rule);
83 this.needsDraw = true;
84 }
85 },
86
87 update : {
88 value: function() {
89 this.childComponents.forEach(function(component) {
90 component.update();
91 }, this);
92
93 //// TODO: find new styles based on selection
94 }
95 },
96
97 willDraw : {
98 value: function() {
99 this.rulesToDraw.forEach(function(component) {
100 component.element = document.createElement(this.ruleNodeName);
101 }, this);
102
103 }
104 },
105
106 draw : {
107 value: function() {
108 ///// If needed, scroll to bottom
109 if(this._needsScrollToBottom) {
110 ///// Make sure the appended rule item is visible (scrolled-to)
111 this.element.scrollTop = this.element.offsetHeight;
112 console.log("Scroll top:", this.element.scrollTop);
113 this._needsScrollToBottom = false;
114 }
115
116 //// Iterate through all rules that need draw and append them
117 this.rulesToDraw.forEach(function(component) {
118 this.element.appendChild(component.element);
119 this._needsScrollToBottom = this.needsDraw = true;
120 this.childComponents.push(component);
121 component.needsDraw = true;
122 }, this);
123
124 //// Iterate through all rules that need draw and append them
125 this.rulesToRemove.forEach(function(component) {
126 this.element.removeChild(component.element);
127 }, this);
128
129 ///// Null out any rules that were just drawn
130 this.rulesToDraw.length = 0;
131 this.rulesToRemove.length = 0;
132 }
133 }
134});
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-06 14:21:12 +0000