Merge pull request #222 from joseeight/Document

Adding partial support for templates
author: Valerio Virgillito 2012-05-11 14:46:51 -0700
committer: Valerio Virgillito 2012-05-11 14:46:51 -0700
commit: 1fb663b5f348fe2ff5ce86a80e8a61be289eba70 (patch)
tree: 7ccb54a07eb4adf793bae3f1a4ddd622bd4f9a0c /js/document
parent: 647a7cf0697debe7b3d6fa0d68cd6b37996d6b59 (diff)
parent: d2e1d4eeba4439ed26f2adf1c34991caf44a591f (diff)
download: ninja-1fb663b5f348fe2ff5ce86a80e8a61be289eba70.tar.gz
11 files changed, 189 insertions, 155 deletions
diff --git a/js/document/document-html.js b/js/document/document-html.js
index e00333f0..7e1f1806 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -63,13 +63,14 @@ exports.HtmlDocument = Montage.create(Component, {
        ////////////////////////////////////////////////////////////////////
        //
    init: {
-        value:function(file, context, callback, view, template) { //TODO: Add template support logic
+        value:function(file, context, callback, view, template) {
                //Storing callback data for loaded dispatch
                this.loaded.callback = callback;
                this.loaded.context = context;
            //Creating instance of HTML Document Model
            this.model = Montage.create(HtmlDocumentModel,{
                file: {value: file},
+                fileTemplate: {value: template},
                parentContainer: {value: document.getElementById("iframeContainer")}, //Saving reference to parent container of all views (should be changed to buckets approach
                views: {value: {'design': DesignDocumentView.create(), 'code': null}} //TODO: Add code view logic
            });
@@ -97,8 +98,13 @@ exports.HtmlDocument = Montage.create(Component, {
                this.model.views.design.render(function () {
                        //TODO: Identify and remove usage of '_document'
                        this._document = this.model.views.design.document;
-                                //TODO: Remove usage, seems as not needed
+                        //TODO: Remove usage, seems as not needed
-                        this.documentRoot = this.model.views.design.document.body;
+                                if (template && template.type === 'banner') {
+                                        //this.documentRoot = this.model.views.design.document.body;
+                                        this.documentRoot = this.model.views.design.document.body.getElementsByTagName('ninja-banner')[0];
+                                } else {
+                                        this.documentRoot = this.model.views.design.document.body;
+                                }
                        //TODO: Why is this needed?
                        this._liveNodeList = this.model.views.design.document.body.getElementsByTagName('*');
                        //Initiliazing document model
@@ -106,7 +112,7 @@ exports.HtmlDocument = Montage.create(Component, {
                        //Adding observer to know when template is ready
                        this._observer = new WebKitMutationObserver(this.handleTemplateReady.bind(this));
                                this._observer.observe(this.model.views.design.document.head, {childList: true});
-                }.bind(this));
+                }.bind(this), template);
            } else {
                //TODO: Identify default view (probably code)
            }
diff --git a/js/document/models/base.js b/js/document/models/base.js
index ebfb73b8..0f58e75c 100755
--- a/js/document/models/base.js
+++ b/js/document/models/base.js
@@ -62,6 +62,11 @@ exports.BaseDocumentModel = Montage.create(Component, {
    },
    ////////////////////////////////////////////////////////////////////
        //
+    fileTemplate: {
+        value: null
+    },
+    ////////////////////////////////////////////////////////////////////
+        //
    parentContainer: {
        value: null
    },
diff --git a/js/document/templates/banner/index.html b/js/document/templates/banner/index.html
new file mode 100755
index 00000000..2cd82f51
--- /dev/null
+++ b/js/document/templates/banner/index.html
@@ -0,0 +1,94 @@
+<!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> -->
+ 
+ 
+<!-- 
+        NOTE(s):
+        All elements in the head of the document to be exclude from I/O
+        must set the 'data-ninja-template'
+        data-ninja-template="true"
+-->
+<html>
+        <head>
+        
+        <style type="text/css" id="nj-stage-stylesheet" data-ninja-template="true">
+                * {
+                        -webkit-transition-duration: 0s !important;
+                        -webkit-animation-duration: 0s !important;
+                        -webkit-animation-name: none !important;
+                        }
+                        
+                        body {
+                                margin: 0;
+                        padding: 0;
+                                position: absolute;
+                                -webkit-transform-style: preserve-3d;
+                                -webkit-transform: perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+                        }
+            html {
+                overflow: scroll;
+            }
+            html, body {
+                width: 100%;
+                height: 100%;
+                background: #666;
+            }
+                        
+                        ninjaloadinghack {
+                                display: none;
+                        }
+                        .active-element-outline {
+                        outline: #adff2f solid 2px;
+                        }
+                        .nj-preset-transition {
+                                -webkit-transition: all 450ms linear !important;
+                        }
+                        
+                        ninja-banner {
+                                display: block;
+                                margin: 0;
+                                padding: 0;
+                                border: 0;
+                                position: absolute;
+                                overflow: visible;
+                                top: 50%;
+                                left: 50%;
+                                background: #FFF;
+                        }
+        </style>
+        
+        <script type="text/javascript" data-ninja-template="true">
+                function getElement(x,y) {
+                return document.elementFromPoint(x,y);
+                }
+        </script>
+        
+        <!-- TODO: Determine if loading Montage is always needed or if it could be done author-time or on file open -->
+    
+        <script type="text/javascript" data-package="." src="../../../../node_modules/montage/montage.js" data-ninja-template="true"></script>
+        <script type="text/montage-serialization" data-ninja-template="true">
+        {
+            "owner": {
+                "prototype": "main"
+            }
+        }
+        </script>
+        </head>
+        <body>
+                <ninjaloadinghack></ninjaloadinghack>
+                <ninja-banner></ninja-banner>
+        </body>
+</html>
+\ No newline at end of file
diff --git a/js/document/templates/montage-web/main.js b/js/document/templates/banner/main.js
index d5ac88d5..d5ac88d5 100644
--- a/js/document/templates/montage-web/main.js
+++ b/js/document/templates/banner/main.js
diff --git a/js/document/templates/montage-html/package.json b/js/document/templates/banner/package.json
index c8bc02fb..c8bc02fb 100755
--- a/js/document/templates/montage-html/package.json
+++ b/js/document/templates/banner/package.json
diff --git a/js/document/templates/montage-web/index.html b/js/document/templates/html/index.html
index e02d8d8e..a1b8b242 100755
--- a/js/document/templates/montage-web/index.html
+++ b/js/document/templates/html/index.html
@@ -15,8 +15,6 @@
 <html>
        <head>
-        
-                <title data-ninja-template="true">Ninja Prototype</title>
        
        <style type="text/css" id="nj-stage-stylesheet" data-ninja-template="true">
                * {
@@ -35,7 +33,6 @@
            html {
                overflow: scroll;
-                padding: 0 11px 11px 0;
            }
            html, body {
@@ -55,14 +52,16 @@
                                -webkit-transition: all 450ms linear !important;
                        }
        </style>
-    
+        
-        <script type="text/javascript" data-package="." src="../../../../node_modules/montage/montage.js" data-ninja-template="true"></script>
+        <script type="text/javascript" data-ninja-template="true">
-
author	Valerio Virgillito	2012-05-11 14:46:51 -0700
committer	Valerio Virgillito	2012-05-11 14:46:51 -0700
commit	1fb663b5f348fe2ff5ce86a80e8a61be289eba70 (patch)
tree	7ccb54a07eb4adf793bae3f1a4ddd622bd4f9a0c /js/document
parent	647a7cf0697debe7b3d6fa0d68cd6b37996d6b59 (diff)
parent	d2e1d4eeba4439ed26f2adf1c34991caf44a591f (diff)
download	ninja-1fb663b5f348fe2ff5ce86a80e8a61be289eba70.tar.gz

diff --git a/js/document/document-html.js b/js/document/document-html.js index e00333f0..7e1f1806 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js
@@ -63,13 +63,14 @@ exports.HtmlDocument = Montage.create(Component, {
63	////////////////////////////////////////////////////////////////////	63	////////////////////////////////////////////////////////////////////
64	//	64	//
65	init: {	65	init: {
66	value:function(file, context, callback, view, template) { //TODO: Add template support logic	66	value:function(file, context, callback, view, template) {
67	//Storing callback data for loaded dispatch	67	//Storing callback data for loaded dispatch
68	this.loaded.callback = callback;	68	this.loaded.callback = callback;
69	this.loaded.context = context;	69	this.loaded.context = context;
70	//Creating instance of HTML Document Model	70	//Creating instance of HTML Document Model
71	this.model = Montage.create(HtmlDocumentModel,{	71	this.model = Montage.create(HtmlDocumentModel,{
72	file: {value: file},	72	file: {value: file},
		73	fileTemplate: {value: template},
73	parentContainer: {value: document.getElementById("iframeContainer")}, //Saving reference to parent container of all views (should be changed to buckets approach	74	parentContainer: {value: document.getElementById("iframeContainer")}, //Saving reference to parent container of all views (should be changed to buckets approach
74	views: {value: {'design': DesignDocumentView.create(), 'code': null}} //TODO: Add code view logic	75	views: {value: {'design': DesignDocumentView.create(), 'code': null}} //TODO: Add code view logic
75	});	76	});
@@ -97,8 +98,13 @@ exports.HtmlDocument = Montage.create(Component, {
97	this.model.views.design.render(function () {	98	this.model.views.design.render(function () {
98	//TODO: Identify and remove usage of '_document'	99	//TODO: Identify and remove usage of '_document'
99	this._document = this.model.views.design.document;	100	this._document = this.model.views.design.document;
100	//TODO: Remove usage, seems as not needed	101	//TODO: Remove usage, seems as not needed
101	this.documentRoot = this.model.views.design.document.body;	102	if (template && template.type === 'banner') {
		103	//this.documentRoot = this.model.views.design.document.body;
		104	this.documentRoot = this.model.views.design.document.body.getElementsByTagName('ninja-banner')[0];
		105	} else {
		106	this.documentRoot = this.model.views.design.document.body;
		107	}
102	//TODO: Why is this needed?	108	//TODO: Why is this needed?
103	this._liveNodeList = this.model.views.design.document.body.getElementsByTagName('*');	109	this._liveNodeList = this.model.views.design.document.body.getElementsByTagName('*');
104	//Initiliazing document model	110	//Initiliazing document model
@@ -106,7 +112,7 @@ exports.HtmlDocument = Montage.create(Component, {
106	//Adding observer to know when template is ready	112	//Adding observer to know when template is ready
107	this._observer = new WebKitMutationObserver(this.handleTemplateReady.bind(this));	113	this._observer = new WebKitMutationObserver(this.handleTemplateReady.bind(this));
108	this._observer.observe(this.model.views.design.document.head, {childList: true});	114	this._observer.observe(this.model.views.design.document.head, {childList: true});
109	}.bind(this));	115	}.bind(this), template);
110	} else {	116	} else {
111	//TODO: Identify default view (probably code)	117	//TODO: Identify default view (probably code)
112	}	118	}


diff --git a/js/document/models/base.js b/js/document/models/base.js index ebfb73b8..0f58e75c 100755 --- a/js/document/models/base.js +++ b/js/document/models/base.js
@@ -62,6 +62,11 @@ exports.BaseDocumentModel = Montage.create(Component, {
62	},	62	},
63	////////////////////////////////////////////////////////////////////	63	////////////////////////////////////////////////////////////////////
64	//	64	//
		65	fileTemplate: {
		66	value: null
		67	},
		68	////////////////////////////////////////////////////////////////////
		69	//
65	parentContainer: {	70	parentContainer: {
66	value: null	71	value: null
67	},	72	},


diff --git a/js/document/templates/banner/index.html b/js/document/templates/banner/index.html new file mode 100755 index 00000000..2cd82f51 --- /dev/null +++ b/js/document/templates/banner/index.html
@@ -0,0 +1,94 @@
		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
		8
		9	<!--
		10	NOTE(s):
		11	All elements in the head of the document to be exclude from I/O
		12	must set the 'data-ninja-template'
		13	data-ninja-template="true"
		14	-->
		15	<html>
		16
		17	<head>
		18
		19	<style type="text/css" id="nj-stage-stylesheet" data-ninja-template="true">
		20	* {
		21	-webkit-transition-duration: 0s !important;
		22	-webkit-animation-duration: 0s !important;
		23	-webkit-animation-name: none !important;
		24	}
		25
		26	body {
		27	margin: 0;
		28	padding: 0;
		29	position: absolute;
		30	-webkit-transform-style: preserve-3d;
		31	-webkit-transform: perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		32	}
		33
		34	html {
		35	overflow: scroll;
		36	}
		37
		38	html, body {
		39	width: 100%;
		40	height: 100%;
		41	background: #666;
		42	}
		43
		44	ninjaloadinghack {
		45	display: none;
		46	}
		47
		48	.active-element-outline {
		49	outline: #adff2f solid 2px;
		50	}
		51
		52	.nj-preset-transition {
		53	-webkit-transition: all 450ms linear !important;
		54	}
		55
		56	ninja-banner {
		57	display: block;
		58	margin: 0;
		59	padding: 0;
		60	border: 0;
		61	position: absolute;
		62	overflow: visible;
		63	top: 50%;
		64	left: 50%;
		65	background: #FFF;
		66	}
		67	</style>
		68
		69	<script type="text/javascript" data-ninja-template="true">
		70	function getElement(x,y) {
		71	return document.elementFromPoint(x,y);
		72	}
		73	</script>
		74
		75	<!-- TODO: Determine if loading Montage is always needed or if it could be done author-time or on file open -->
		76
		77	<script type="text/javascript" data-package="." src="../../../../node_modules/montage/montage.js" data-ninja-template="true"></script>
		78
		79	<script type="text/montage-serialization" data-ninja-template="true">
		80	{
		81	"owner": {
		82	"prototype": "main"
		83	}
		84	}
		85	</script>
		86
		87	</head>
		88
		89	<body>
		90	<ninjaloadinghack></ninjaloadinghack>
		91	<ninja-banner></ninja-banner>
		92	</body>
		93
		94	</html> \ No newline at end of file


diff --git a/js/document/templates/montage-web/main.js b/js/document/templates/banner/main.js index d5ac88d5..d5ac88d5 100644 --- a/js/document/templates/montage-web/main.js +++ b/js/document/templates/banner/main.js


diff --git a/js/document/templates/montage-html/package.json b/js/document/templates/banner/package.json index c8bc02fb..c8bc02fb 100755 --- a/js/document/templates/montage-html/package.json +++ b/js/document/templates/banner/package.json


diff --git a/js/document/templates/montage-web/index.html b/js/document/templates/html/index.html index e02d8d8e..a1b8b242 100755 --- a/js/document/templates/montage-web/index.html +++ b/js/document/templates/html/index.html
@@ -15,8 +15,6 @@
15	<html>	15	<html>
16		16
17	<head>	17	<head>
18
19	<title data-ninja-template="true">Ninja Prototype</title>
20		18
21	<style type="text/css" id="nj-stage-stylesheet" data-ninja-template="true">	19	<style type="text/css" id="nj-stage-stylesheet" data-ninja-template="true">
22	* {	20	* {
@@ -35,7 +33,6 @@
35		33
36	html {	34	html {
37	overflow: scroll;	35	overflow: scroll;
38	padding: 0 11px 11px 0;
39	}	36	}
40		37
41	html, body {	38	html, body {
@@ -55,14 +52,16 @@
55	-webkit-transition: all 450ms linear !important;	52	-webkit-transition: all 450ms linear !important;
56	}	53	}
57	</style>	54	</style>
58		55
59	<script type="text/javascript" data-package="." src="../../../../node_modules/montage/montage.js" data-ninja-template="true"></script>	56	<script type="text/javascript" data-ninja-template="true">
60
61