15 files changed, 454 insertions, 6 deletions
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 662816f5..33084169 100755
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -94,11 +94,18 @@ var stylesController = exports.StylesController = Montage.create(Component, {
            // Returns null if sheet not found (as in non-ninja projects)
            // Setter will handle null case
            this.defaultStylesheet = this.getSheetFromElement(this.CONST.DEFAULT_SHEET_ID);
-                        
-            //debugger;
+            this.userStyleSheets = nj.toArray(document._document.styleSheets).filter(function(sheet) {
+                return sheet !== this._stageStylesheet;
+            }, this);
+            NJevent('styleSheetsReady', this);
        },
        enumerable : false
    },
+    userStyleSheets : {
+        value : null
+    },
    _stageStylesheet : {
        value : null
    },
diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js
index e16715a4..fe8623a1 100755
--- a/js/lib/NJUtils.js
+++ b/js/lib/NJUtils.js
@@ -19,16 +19,18 @@ exports.NJUtils = Object.create(Object.prototype, {
    
    ///// Quick "getElementById"
    $ : {
-        value: function(id) {
+        value: function(id, doc) {
-            return document.getElementById(id);            
+            doc = doc || document;
+            return doc.getElementById(id);
        }
    },
    
    ///// Quick "getElementsByClassName" which also returns as an Array
    ///// Can return as NodeList by passing true as second argument
    $$ : {
-        value: function(className, asNodeList) {
+        value: function(className, asNodeList, doc) {
-            var list = document.getElementsByClassName(className);
+            doc = doc || document;
+            var list = doc.getElementsByClassName(className);
            return (asNodeList) ? list : this.toArray(list);
        }
    },
diff --git a/js/panels/css-panel/css-panel-container.js b/js/panels/css-panel/css-panel-container.js
new file mode 100644
index 00000000..aeaa2d13
--- /dev/null
+++ b/js/panels/css-panel/css-panel-container.js
@@ -0,0 +1,15 @@
+/* <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;
+var PanelBase = require("js/panels/PanelBase").PanelBase;
+var Content = require("js/panels/css-panel/css-panel.reel").CSSPanelNew;
+exports.CSSPanelContainer = Montage.create(PanelBase, {
+    panelName : { value: "CSSPanelNew" },
+    minHeight : { value: 200 },
+    content : { value: Content }
+});
+\ No newline at end of file
diff --git a/js/panels/css-panel/css-panel.reel/css-panel.css b/js/panels/css-panel/css-panel.reel/css-panel.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/js/panels/css-panel/css-panel.reel/css-panel.css
diff --git a/js/panels/css-panel/css-panel.reel/css-panel.html b/js/panels/css-panel/css-panel.reel/css-panel.html
new file mode 100644
index 00000000..86bfbbb7
--- /dev/null
+++ b/js/panels/css-panel/css-panel.reel/css-panel.html
@@ -0,0 +1,45 @@
+<!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 rel="stylesheet" href="css-panel.css" type="text/css">
+    <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module" : "js/panels/css-panel/css-panel.reel",
+                "name" : "CSSPanel",
+                "properties" : {
+                    "element" : {"#" : "container"}
+                }
+            },
+            "styleSheetView": {
+                "module" : "js/panels/css-panel/style-sheets-view.reel",
+                "name": "StyleSheetsView",
+                "properties": {
+                    "element": {"#": "style-sheet-view" }
+                }
+            },
+            "stylesViewContainer": {
+                "module" : "js/panels/css-panel/styles-view-container.reel",
+                "name": "StylesViewContainer",
+                "properties": {
+                    "element": {"#": "styles-view-container" }
+                }
+            }
+        }
+    </script>
+</head>
+<body>
+<section id="container" class="css-panel">
+    <h2>Style Sheets</h2>
+    <div id="style-sheet-view"></div>
+    <h2>Styles</h2>
+    <div id="styles-view-container"></div>
+</section>
+</body>
+</html>
+\ No newline at end of file
diff --git a/js/panels/css-panel/css-panel.reel/css-panel.js b/js/panels/css-panel/css-panel.reel/css-panel.js
new file mode 100644
index 00000000..a593f1c4
--- /dev/null
+++ b/js/panels/css-panel/css-panel.reel/css-panel.js
@@ -0,0 +1,33 @@
+/* <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.CSSPanelNew = Montage.create(Component, {
+    hasTemplate: {
+        value: true
+    },
+    condition: {
+        value: false
+    },
+    templateDidLoad : {
+        value: function() {
+            console.log("css panel : template did load");
+            //this.condition = true;
+        }
+    },
+    prepareForDraw : {
+        value: function() {
+            console.log("css panel : prepare for draw");
+        }
+    },
+    draw : {
+        value: function() {
+            console.log("css panel : draw");
+        }
+    }
+});
diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.css b/js/panels/css-panel/style-sheet.reel/style-sheet.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.css
diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.html b/js/panels/css-panel/style-sheet.reel/style-sheet.html
new file mode 100644
index 00000000..43ffec6f
--- /dev/null
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html
@@ -0,0 +1,43 @@
+<!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" />
+    <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module" : "js/panels/css-panel/style-sheet.reel",
+                "name" : "StyleSheet",
+                "properties" : {
+                    "element" : {"#" : "style-sheet-container"}
+                }
+            },
+            "name": {
+                "module": "montage/ui/dynamic-text.reel",
+                "name": "DynamicText",
+                "properties": {
+                    "element": {"#": "sheet-name"},
+                    "defaultText": "Style sheet"
+                },
+                "bindings": {
+                    "value": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "name",
+                        "onewway": true
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body>
+<div id="style-sheet-container" class="style-sheet-container">
+    <span id="sheet-name"></span>

diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index 662816f5..33084169 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js
@@ -94,11 +94,18 @@ var stylesController = exports.StylesController = Montage.create(Component, {
94	// Returns null if sheet not found (as in non-ninja projects)	94	// Returns null if sheet not found (as in non-ninja projects)
95	// Setter will handle null case	95	// Setter will handle null case
96	this.defaultStylesheet = this.getSheetFromElement(this.CONST.DEFAULT_SHEET_ID);	96	this.defaultStylesheet = this.getSheetFromElement(this.CONST.DEFAULT_SHEET_ID);
97		97
98	//debugger;	98	this.userStyleSheets = nj.toArray(document._document.styleSheets).filter(function(sheet) {
		99	return sheet !== this._stageStylesheet;
		100	}, this);
		101
		102	NJevent('styleSheetsReady', this);
99	},	103	},
100	enumerable : false	104	enumerable : false
101	},	105	},
		106	userStyleSheets : {
		107	value : null
		108	},
102	_stageStylesheet : {	109	_stageStylesheet : {
103	value : null	110	value : null
104	},	111	},


diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js index e16715a4..fe8623a1 100755 --- a/js/lib/NJUtils.js +++ b/js/lib/NJUtils.js
@@ -19,16 +19,18 @@ exports.NJUtils = Object.create(Object.prototype, {
19		19
20	///// Quick "getElementById"	20	///// Quick "getElementById"
21	$ : {	21	$ : {
22	value: function(id) {	22	value: function(id, doc) {
23	return document.getElementById(id);	23	doc = doc \|\| document;
		24	return doc.getElementById(id);
24	}	25	}
25	},	26	},
26		27
27	///// Quick "getElementsByClassName" which also returns as an Array	28	///// Quick "getElementsByClassName" which also returns as an Array
28	///// Can return as NodeList by passing true as second argument	29	///// Can return as NodeList by passing true as second argument
29	$$ : {	30	$$ : {
30	value: function(className, asNodeList) {	31	value: function(className, asNodeList, doc) {
31	var list = document.getElementsByClassName(className);	32	doc = doc \|\| document;
		33	var list = doc.getElementsByClassName(className);
32	return (asNodeList) ? list : this.toArray(list);	34	return (asNodeList) ? list : this.toArray(list);
33	}	35	}
34	},	36	},


diff --git a/js/panels/css-panel/css-panel-container.js b/js/panels/css-panel/css-panel-container.js new file mode 100644 index 00000000..aeaa2d13 --- /dev/null +++ b/js/panels/css-panel/css-panel-container.js
@@ -0,0 +1,15 @@
		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	var PanelBase = require("js/panels/PanelBase").PanelBase;
		9	var Content = require("js/panels/css-panel/css-panel.reel").CSSPanelNew;
		10
		11	exports.CSSPanelContainer = Montage.create(PanelBase, {
		12	panelName : { value: "CSSPanelNew" },
		13	minHeight : { value: 200 },
		14	content : { value: Content }
		15	}); \ No newline at end of file


diff --git a/js/panels/css-panel/css-panel.reel/css-panel.css b/js/panels/css-panel/css-panel.reel/css-panel.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/js/panels/css-panel/css-panel.reel/css-panel.css


diff --git a/js/panels/css-panel/css-panel.reel/css-panel.html b/js/panels/css-panel/css-panel.reel/css-panel.html new file mode 100644 index 00000000..86bfbbb7 --- /dev/null +++ b/js/panels/css-panel/css-panel.reel/css-panel.html
@@ -0,0 +1,45 @@
		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 rel="stylesheet" href="css-panel.css" type="text/css">
		11	<script type="text/montage-serialization">
		12	{
		13	"owner": {
		14	"module" : "js/panels/css-panel/css-panel.reel",
		15	"name" : "CSSPanel",
		16	"properties" : {
		17	"element" : {"#" : "container"}
		18	}
		19	},
		20	"styleSheetView": {
		21	"module" : "js/panels/css-panel/style-sheets-view.reel",
		22	"name": "StyleSheetsView",
		23	"properties": {
		24	"element": {"#": "style-sheet-view" }
		25	}
		26	},
		27	"stylesViewContainer": {
		28	"module" : "js/panels/css-panel/styles-view-container.reel",
		29	"name": "StylesViewContainer",
		30	"properties": {
		31	"element": {"#": "styles-view-container" }
		32	}
		33	}
		34	}
		35	</script>
		36	</head>
		37	<body>
		38	<section id="container" class="css-panel">
		39	<h2>Style Sheets</h2>
		40	<div id="style-sheet-view"></div>
		41	<h2>Styles</h2>
		42	<div id="styles-view-container"></div>
		43	</section>
		44	</body>
		45	</html> \ No newline at end of file


diff --git a/js/panels/css-panel/css-panel.reel/css-panel.js b/js/panels/css-panel/css-panel.reel/css-panel.js new file mode 100644 index 00000000..a593f1c4 --- /dev/null +++ b/js/panels/css-panel/css-panel.reel/css-panel.js
@@ -0,0 +1,33 @@
		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.CSSPanelNew = Montage.create(Component, {
		11	hasTemplate: {
		12	value: true
		13	},
		14	condition: {
		15	value: false
		16	},
		17	templateDidLoad : {
		18	value: function() {
		19	console.log("css panel : template did load");
		20	//this.condition = true;
		21	}
		22	},
		23	prepareForDraw : {
		24	value: function() {
		25	console.log("css panel : prepare for draw");
		26	}
		27	},
		28	draw : {
		29	value: function() {
		30	console.log("css panel : draw");
		31	}
		32	}
		33	});


diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.css b/js/panels/css-panel/style-sheet.reel/style-sheet.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.css


diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.html b/js/panels/css-panel/style-sheet.reel/style-sheet.html new file mode 100644 index 00000000..43ffec6f --- /dev/null +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html
@@ -0,0 +1,43 @@
		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	<script type="text/montage-serialization">
		11	{
		12	"owner": {
		13	"module" : "js/panels/css-panel/style-sheet.reel",
		14	"name" : "StyleSheet",
		15	"properties" : {
		16	"element" : {"#" : "style-sheet-container"}
		17	}
		18	},
		19	"name": {
		20	"module": "montage/ui/dynamic-text.reel",
		21	"name": "DynamicText",
		22	"properties": {
		23	"element": {"#": "sheet-name"},
		24	"defaultText": "Style sheet"
		25	},
		26	"bindings": {
		27	"value": {
		28	"boundObject": {"@": "owner"},
		29	"boundObjectPropertyPath": "name",
		30	"onewway": true
		31	}
		32	}
		33
		34	}
		35	}
		36	</script>
		37	</head>
		38	<body>
		39	<div id="style-sheet-container" class="style-sheet-container">
		40	<span id="sheet-name"></span>