3 files changed, 158 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 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+.rule-list-container {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-box-flex: 1;
+}
+.rule-list {
+    background-color: #FFF;
+    background: #FFF -webkit-linear-gradient(top, rgba(0,0,0,0.12) 0%,rgba(0,0,0,0) 4px);
+    color: #333;
+    display: -webkit-box;
+    font-family: monospace;
+    padding: 0;
+    margin: 0;
+    overflow-y: auto;
+    -webkit-box-orient: vertical;
+    -webkit-box-flex: 1;
+}
+.rule-list li {
+    list-style-type: none;
+    margin: 0;
+}
+\ 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 @@
+<!DOCTYPE html>
+<!-- <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> -->
+<html lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <link href="rule-list.css" type="text/css" rel="stylesheet">
+    <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module" : "js/panels/css-panel/rule-list.reel",
+                "name" : "RuleList",
+                "properties" : {
+                    "element" : {"#" : "rule-list"}
+                }
+            }
+        }
+    </script>
+</head>
+<body>
+<ul id="rule-list" class="rule-list"></ul>
+</body>
+</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..0faff07e
--- /dev/null
+++ b/js/panels/css-panel/rule-list.reel/rule-list.js
@@ -0,0 +1,106 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+var Montage = require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component;
+exports.RuleList = Montage.create(Component, {
+    focusDelegate : {
+        value: null
+    },
+    ruleNodeName : { value: 'li' },
+    _rules: { value: null },
+    rules: {
+        get: function() {
+            return this._rules;
+        },
+        set: function(list) {
+            if(!list) {
+                return null;
+            }
+            //debugger;
+            console.log('list: ', list);
+            this._rules = list;
+            ///// remove previsouly added rules
+            if(this.childComponents){
+                this.childComponents.forEach(function(ruleComponent) {
+                    this.removeRule(ruleComponent);
+                }, this);
+            }
+            this._rules.forEach(function(rule) {
+                this.addRule(rule);
+            }, this);
+            this.needsDraw = true;
+        }
+    },
+    childComponents : {
+        value: [],
+        distinct: true
+    },
+    rulesToDraw : {
+        value: [],
+        distinct: true
+    },
+    addRule: {
+        value: function(rule) {
+            var componentBase = this.supportedRules[rule.type],
+                instance, el;
+            ///// Draw the rule if we have a template for the rule type
+            if(componentBase) {
+                instance = Montage.create(componentBase);
+                instance.rule = rule;
+                if(this.focusDelegate) {
+                    instance.focusDelegate = this.focusDelegate;
+                }
+                this.rulesToDraw.push(instance);
+                this.needsDraw = true;
+            }
+        }
+    },
+    update : {
+        value: function() {
+            this.childComponents.forEach(function(component) {
+                component.update();
+            }, this);
+            //// TODO: find new styles based on selection
+        }
+    },
+    willDraw : {
+        value: function() {
+            this.rulesToDraw.forEach(function(component) {
+                component.element = document.createElement(this.ruleNodeName);
+            }, this);
+        }
+    },
+    draw : {
+        value: function() {
+            //// Iterate through all rules that need draw and append them
+            this.rulesToDraw.forEach(function(component) {
+                this.element.appendChild(component.element);
+                component.needsDraw = true;
+            }, this);
+            ///// Null out any rules that were just drawn
+            this.rulesToDraw.length = 0;
+        }
+    }
+});

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>
	3	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
	4	No 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..0faff07e --- /dev/null +++ b/js/panels/css-panel/rule-list.reel/rule-list.js
@@ -0,0 +1,106 @@
	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
	7	var Montage = require("montage/core/core").Montage,
	8	Component = require("montage/ui/component").Component;
	9
	10	exports.RuleList = Montage.create(Component, {
	11	focusDelegate : {
	12	value: null
	13	},
	14	ruleNodeName : { value: 'li' },
	15
	16	_rules: { value: null },
	17	rules: {
	18	get: function() {
	19	return this._rules;
	20	},
	21	set: function(list) {
	22	if(!list) {
	23	return null;
	24	}
	25	//debugger;
	26	console.log('list: ', list);
	27	this._rules = list;
	28
	29	///// remove previsouly added rules
	30	if(this.childComponents){
	31	this.childComponents.forEach(function(ruleComponent) {
	32	this.removeRule(ruleComponent);
	33	}, this);
	34	}
	35
	36	this._rules.forEach(function(rule) {
	37	this.addRule(rule);
	38	}, this);
	39
	40	this.needsDraw = true;
	41
	42	}
	43	},
	44
	45	childComponents : {
	46	value: [],
	47	distinct: true
	48	},
	49
	50	rulesToDraw : {
	51	value: [],
	52	distinct: true
	53	},
	54
	55	addRule: {
	56	value: function(rule) {
	57	var componentBase = this.supportedRules[rule.type],
	58	instance, el;
	59
	60	///// Draw the rule if we have a template for the rule type
	61	if(componentBase) {
	62	instance = Montage.create(componentBase);
	63	instance.rule = rule;
	64
	65	if(this.focusDelegate) {
	66	instance.focusDelegate = this.focusDelegate;
	67	}
	68
	69	this.rulesToDraw.push(instance);
	70	this.needsDraw = true;
	71	}
	72	}
	73	},
	74
	75	update : {
	76	value: function() {
	77	this.childComponents.forEach(function(component) {
	78	component.update();
	79	}, this);
	80
	81	//// TODO: find new styles based on selection
	82	}
	83	},
	84
	85	willDraw : {
	86	value: function() {
	87	this.rulesToDraw.forEach(function(component) {
	88	component.element = document.createElement(this.ruleNodeName);
	89	}, this);
	90
	91	}
	92	},
	93
	94	draw : {
	95	value: function() {
	96	//// Iterate through all rules that need draw and append them
	97	this.rulesToDraw.forEach(function(component) {
	98	this.element.appendChild(component.element);
	99	component.needsDraw = true;
	100	}, this);
	101
	102	///// Null out any rules that were just drawn
	103	this.rulesToDraw.length = 0;
	104	}
	105	}
	106	});