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