aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/rule-list.reel
diff options
context:
space:
mode:
authorPushkar Joshi2012-05-31 17:16:21 -0700
committerPushkar Joshi2012-05-31 17:16:21 -0700
commit8915a7109d918a2e69b0999ebaa2deb84811fef8 (patch)
tree19a8af74c58c9ea261f0842f36efdab959be3256 /js/panels/css-panel/rule-list.reel
parenteea0a556e44c2b60d3aaf6e46d2432d3e6303812 (diff)
parent06b609df1ff7833592faddbd8d7abb5b9f15a74d (diff)
downloadninja-8915a7109d918a2e69b0999ebaa2deb84811fef8.tar.gz
Merge branch 'pentool' into brushtool
Diffstat (limited to 'js/panels/css-panel/rule-list.reel')
-rw-r--r--js/panels/css-panel/rule-list.reel/rule-list.css30
-rw-r--r--js/panels/css-panel/rule-list.reel/rule-list.html25
-rw-r--r--js/panels/css-panel/rule-list.reel/rule-list.js213
3 files changed, 268 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..2aba01da
--- /dev/null
+++ b/js/panels/css-panel/rule-list.reel/rule-list.css
@@ -0,0 +1,30 @@
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: block;
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}
27
28.hidden-rule-list {
29 display: none;
30} \ 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..67b17f48
--- /dev/null
+++ b/js/panels/css-panel/rule-list.reel/rule-list.html
@@ -0,0 +1,25 @@
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 "prototype" : "js/panels/css-panel/rule-list.reel",
15 "properties" : {
16 "element" : {"#" : "rule-list"}
17 }
18 }
19 }
20 </script>
21</head>
22<body>
23<ul id="rule-list" class="rule-list"></ul>
24</body>
25</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..3e18c3bf
--- /dev/null
+++ b/js/panels/css-panel/rule-list.reel/rule-list.js
@@ -0,0 +1,213 @@
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 _hide : {
16 value: null
17 },
18 hide : {
19 get: function() {
20 return this._hide;
21 },
22 set: function(value) {
23 if(value === this._hide) { return; }
24
25 this._hide = value;
26 this.needsDraw = true;
27 }
28 },
29
30 childComponents : {
31 value: [],
32 distinct: true
33 },
34
35 rulesToDraw : {
36 value: [],
37 distinct: true
38 },
39 rulesToRemove : {
40 value: [],
41 distinct: true
42 },
43
44 update : {
45 value: function(rules) {
46 this.childComponents.forEach(function(component) {
47 component.update();
48 }, this);
49 }
50 },
51
52 _rules: { value: null },
53 rules: {
54 get: function() {
55 return this._rules;
56 },
57 set: function(list) {
58 if(!list) {
59 return null;
60 }
61
62 var foundIndices = [];
63
64 //// Iterate existing rules, update those which rule exists in new
65 //// rule list
66 this.childComponents.forEach(function(ruleComponent, i, drawnRules) {
67 //// If rule exists in new list, update it
68 var index = list.indexOf(ruleComponent.rule);
69
70 if(ruleComponent.rule.type === 'inline') {
71 //// Let's emulate finding the line rule at the first index
72 index = 0;
73 }
74
75 if(index !== -1) {
76 // found rule in our component list, or it's the inline rule
77 ruleComponent.update();
78 foundIndices.push(index);
79 } else if(!rule.applied) { /// remove rule (unless unapplied)
80 this.rulesToRemove.push(ruleComponent);
81 }
82 }, this);
83
84 //// Find rules to add
85 list.forEach(function(rule, index) {
86 //// If we haven't updated the rule already,
87 //// we're dealing with a new rule to add
88 if(foundIndices.indexOf(index) === -1) {
89 this.addRule(rule, index);
90 }
91 }, this);
92
93 this._rules = list;
94
95 this.needsDraw = true;
96
97 }
98 },
99
100 addRule: {
101 value: function(rule, atIndex, applies, drawCallback) {
102 var insertIndex = atIndex || this.childComponents.length;
103
104 this.rulesToDraw.push({
105 rule: rule,
106 index: insertIndex,
107 instance : null,
108 applies : applies,
109 callback : drawCallback
110 });
111
112 this.needsDraw = true;
113 }
114 },
115
116 removeRule: {
117 value: function(ruleComponent) {
118 this.rulesToRemove.push(ruleComponent);
119 this.needsDraw = true;
120 }
121 },
122
123 willDraw : {
124 value: function() {
125 this.rulesToDraw.forEach(function(ruleObj) {
126 var el = document.createElement(this.ruleNodeName);
127
128 var componentBase = this.supportedRules[ruleObj.rule.type],
129 instance;
130
131 ///// Draw the rule if we have a template for the rule type
132 if(!componentBase) { return false; }
133
134 instance = Montage.create(componentBase);
135 instance.element = document.createElement(this.ruleNodeName);
136 instance.rule = ruleObj.rule;
137 instance.applied = ruleObj.applies;
138
139 if(this.focusDelegate) {
140 instance.focusDelegate = this.focusDelegate;
141 }
142
143 ruleObj.instance = instance;
144
145 }, this);
146
147 }
148 },
149
150 draw : {
151 value: function() {
152 ///// If needed, scroll to bottom
153 if(this._needsScrollToBottom) {
154 ///// Make sure the appended rule item is visible (scrolled-to)
155 this.element.scrollTop = this.element.offsetHeight;
156 this._needsScrollToBottom = false;
157 }
158