CSS Panel Update - Style Rule update

author: Eric Guzman 2012-03-12 15:25:53 -0700
committer: Eric Guzman 2012-03-12 15:25:53 -0700
commit: a43de0b808db09ed76a94bf43ca0108bedeb2e62 (patch)
tree: a55349e73d47c37687f454aea5dd43fd5f2d0b0a /js/panels/css-panel/rule-components
parent: 42d9f27afea3066cbccf22c76753f407fd340c30 (diff)
download: ninja-a43de0b808db09ed76a94bf43ca0108bedeb2e62.tar.gz
3 files changed, 75 insertions, 8 deletions
diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css
index 0441c1cf..9306955c 100644
--- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css
+++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css
@@ -2,4 +2,15 @@
 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> */
-\ No newline at end of file
+ </copyright> */
+.css-style-rule-item {
+    position: relative;
+}
+.style-rule-heading {
+    /*background-color: #333;*/
+}
+.style-sheet-name {
+    position: absolute;
+    right: 0;
+}
+\ No newline at end of file
diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html
index e8661bf9..2f5d69af 100644
--- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html
+++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html
@@ -14,7 +14,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                "module" : "js/panels/css-panel/rule-components/css-style-rule.reel",
                "name" : "CssStyleRule",
                "properties" : {
-                    "element" : {"#" : "rule-item"}
+                    "element" : {"#" : "rule-item"},
+                    "declarationComponent": {"@": "declaration"}
                }
            },
            "sheetName": {
@@ -44,14 +45,31 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                        "oneway": true
                    }
                }
+            },
+            "declaration": {
+                "module": "js/panels/css-panel/declaration.reel",
+                "name": "Declaration",
+                "properties": {
+                    "element": {"#": "declaration-list"}
+                }
+            },
+            "sheetLink": {
+                "module": "montage/ui/anchor.reel",
+                "name": "Anchor",
+                "properties": {
+                    "element": {"#": "style-sheet-name"}
+                }
            }
        }
    </script>
 </head>
 <body>
 <div id="rule-item" class="css-style-rule-item">
-    <a href="#" id="style-sheet-name"></a>
+    <div class="style-rule-heading">
-    <span id="rule-selector" class="nj-css-selector"></span>
+        <a href="#" id="style-sheet-name" class="style-sheet-name"></a>
+        <span id="rule-selector" class="nj-css-selector"></span>
+    </div>
+    <dl id="declaration-list"></dl>
 </div>
 </body>
 </html>
 \ No newline at end of file
diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
index f90104e1..a0ff4b4e 100644
--- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
+++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
@@ -8,6 +8,9 @@ var Montage = require("montage/core/core").Montage,
    Component = require("montage/ui/component").Component;
 exports.CssStyleRule = Montage.create(Component, {
+    cssText: {
+        value: null
+    },
    hasTemplate: {
        value: true
    },
@@ -22,27 +25,62 @@ exports.CssStyleRule = Montage.create(Component, {
            this.cssText = rule.cssText;
            this.sheetName = rule.href || 'Style Tag';
            this.selector = rule.selectorText;
-console.log('Rule with selector "' +rule.selectorText+ '" is set on componenet.');
+            this.declaration = rule.style;
+            console.log('Rule with selector "' +rule.selectorText+ '" is set on componenet.');
            this._rule = rule;
        }
    },
+    declarationComponent: {
+        value: null
+    } ,
+//    declarationNodeName: {
+//        value: "dl"
+//    },
+//    declarationElement: {
+//        value: null
+//    },
+    _declaration: {
+        value: null
+    },
+    declaration: {
+        get: function() {
+            return this._declaration;
+        },
+        set: function(dec) {
+            this._declaration = dec;
+        }
+    },
    condition: {
        value: false
    },
    templateDidLoad : {
        value: function() {
            console.log("css style rule : template did load");
-            //this.condition = true;
+            if(this._declaration) {
+                this.declarationComponent.declaration = this._declaration;
+            }
        }
    },
    prepareForDraw : {
        value: function() {
-            console.log("css panel : prepare for draw");
+            console.log("css style rule : prepare for draw");
+            if(!this.declarationElement) {
+                ///// Create element to contain declaration
+                this.declarationElement = document.createElement(this.declarationNodeName);
+            }
+            if(!this._declaration && this._rule) {
+            }
        }
    },
    draw : {
        value: function() {
-            console.log("css panel : draw");
+            console.log("css style rule : draw");
        }
    }
 });
author	Eric Guzman	2012-03-12 15:25:53 -0700
committer	Eric Guzman	2012-03-12 15:25:53 -0700
commit	a43de0b808db09ed76a94bf43ca0108bedeb2e62 (patch)
tree	a55349e73d47c37687f454aea5dd43fd5f2d0b0a /js/panels/css-panel/rule-components
parent	42d9f27afea3066cbccf22c76753f407fd340c30 (diff)
download	ninja-a43de0b808db09ed76a94bf43ca0108bedeb2e62.tar.gz

diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css index 0441c1cf..9306955c 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css
@@ -2,4 +2,15 @@
2	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>	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/>	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.	4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5	</copyright> */ \ No newline at end of file	5	</copyright> */
		6	.css-style-rule-item {
		7	position: relative;
		8	}
		9	.style-rule-heading {
		10	/background-color: #333;/
		11	}
		12	.style-sheet-name {
		13	position: absolute;
		14	right: 0;
		15
		16	} \ No newline at end of file


diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html index e8661bf9..2f5d69af 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html
@@ -14,7 +14,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
14	"module" : "js/panels/css-panel/rule-components/css-style-rule.reel",	14	"module" : "js/panels/css-panel/rule-components/css-style-rule.reel",
15	"name" : "CssStyleRule",	15	"name" : "CssStyleRule",
16	"properties" : {	16	"properties" : {
17	"element" : {"#" : "rule-item"}	17	"element" : {"#" : "rule-item"},
		18	"declarationComponent": {"@": "declaration"}
18	}	19	}
19	},	20	},
20	"sheetName": {	21	"sheetName": {
@@ -44,14 +45,31 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
44	"oneway": true	45	"oneway": true
45	}	46	}
46	}	47	}
		48	},
		49	"declaration": {
		50	"module": "js/panels/css-panel/declaration.reel",
		51	"name": "Declaration",
		52	"properties": {
		53	"element": {"#": "declaration-list"}
		54	}
		55	},
		56	"sheetLink": {
		57	"module": "montage/ui/anchor.reel",
		58	"name": "Anchor",
		59	"properties": {
		60	"element": {"#": "style-sheet-name"}
		61	}
47	}	62	}
48	}	63	}
49	</script>	64	</script>
50	</head>	65	</head>
51	<body>	66	<body>
52	<div id="rule-item" class="css-style-rule-item">	67	<div id="rule-item" class="css-style-rule-item">
53	<a href="#" id="style-sheet-name"></a>	68	<div class="style-rule-heading">
54	<span id="rule-selector" class="nj-css-selector"></span>	69	<a href="#" id="style-sheet-name" class="style-sheet-name"></a>
		70	<span id="rule-selector" class="nj-css-selector"></span>
		71	</div>
		72	<dl id="declaration-list"></dl>
55	</div>	73	</div>
56	</body>	74	</body>
57	</html> \ No newline at end of file	75	</html> \ No newline at end of file


diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index f90104e1..a0ff4b4e 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
@@ -8,6 +8,9 @@ var Montage = require("montage/core/core").Montage,
8	Component = require("montage/ui/component").Component;	8	Component = require("montage/ui/component").Component;
9		9
10	exports.CssStyleRule = Montage.create(Component, {	10	exports.CssStyleRule = Montage.create(Component, {
		11	cssText: {
		12	value: null
		13	},
11	hasTemplate: {	14	hasTemplate: {
12	value: true	15	value: true
13	},	16	},
@@ -22,27 +25,62 @@ exports.CssStyleRule = Montage.create(Component, {
22	this.cssText = rule.cssText;	25	this.cssText = rule.cssText;
23	this.sheetName = rule.href \|\| 'Style Tag';	26	this.sheetName = rule.href \|\| 'Style Tag';
24	this.selector = rule.selectorText;	27	this.selector = rule.selectorText;
25	console.log('Rule with selector "' +rule.selectorText+ '" is set on componenet.');	28
		29	this.declaration = rule.style;
		30
		31	console.log('Rule with selector "' +rule.selectorText+ '" is set on componenet.');
		32
26	this._rule = rule;	33	this._rule = rule;
27	}	34	}
28	},	35	},
		36	declarationComponent: {
		37	value: null
		38	} ,
		39	// declarationNodeName: {
		40	// value: "dl"
		41	// },
		42	// declarationElement: {
		43	// value: null
		44	// },
		45	_declaration: {
		46	value: null
		47	},
		48	declaration: {
		49	get: function() {
		50	return this._declaration;
		51	},
		52	set: function(dec) {
		53	this._declaration = dec;
		54	}
		55	},
29	condition: {	56	condition: {
30	value: false	57	value: false
31	},	58	},
32	templateDidLoad : {	59	templateDidLoad : {
33	value: function() {	60	value: function() {
34	console.log("css style rule : template did load");	61	console.log("css style rule : template did load");
35	//this.condition = true;	62	if(this._declaration) {
		63	this.declarationComponent.declaration = this._declaration;
		64	}
36	}	65	}
37	},	66	},
38	prepareForDraw : {	67	prepareForDraw : {
39	value: function() {	68	value: function() {
40	console.log("css panel : prepare for draw");	69	console.log("css style rule : prepare for draw");
		70
		71	if(!this.declarationElement) {
		72	///// Create element to contain declaration
		73	this.declarationElement = document.createElement(this.declarationNodeName);
		74	}
		75
		76	if(!this._declaration && this._rule) {
		77
		78	}
41	}	79	}
42	},	80	},
43	draw : {	81	draw : {
44	value: function() {	82	value: function() {
45	console.log("css panel : draw");	83	console.log("css style rule : draw");
46	}	84	}
47	}	85	}
48	});	86	});