From a1e8540f5656e62db6a89f3af7829be6b259b7ed Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Tue, 8 May 2012 17:33:13 -0700
Subject: Adding SAVE for I/O

Adding save functionality to new template. Need to implement user UI for prompts and also clean up...
---
 js/controllers/document-controller.js        |  29 +++++---
 js/document/models/base.js                   | 102 ++++++++++++++++++++++-----
 js/document/templates/montage-web/index.html |  17 +++--
 js/document/views/design.js                  |   7 ++
 js/io/templates/files/html.txt               |   1 +
 js/mediators/io-mediator.js                  |  89 +++++++++++++----------
 6 files changed, 178 insertions(+), 67 deletions(-)

diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index 6a25420a..ed4d33eb 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -166,23 +166,34 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
             }
     },
 	////////////////////////////////////////////////////////////////////
-	//TODO: Check for appropiate structures
+	//
     handleExecuteSave: {
     	value: function(event) {
-            if((typeof this.activeDocument !== "undefined") && this.application.ninja.coreIoApi.cloudAvailable()){
-                //Text and HTML document classes should return the same save object for fileSave
-                this.application.ninja.ioMediator.fileSave(this.activeDocument.save(), this.fileSaveResult.bind(this));
-            }
+    		//
+    		if((typeof this.activeDocument !== "undefined") && this.application.ninja.coreIoApi.cloudAvailable()){
+    			//
+    			this.activeDocument.model.save(this.testCallback.bind(this)); //this.fileSaveResult.bind(this)
+    		} else {
+    			//Error:
+    		}
 		}
     },
+    testCallback: {
+    	value: function (value) {
+    		console.log(value);
+    	}
+    },
     ////////////////////////////////////////////////////////////////////
 	//TODO: Check for appropiate structures
     handleExecuteSaveAll: {
     	value: function(event) {
-            if((typeof this.activeDocument !== "undefined") && this.application.ninja.coreIoApi.cloudAvailable()){
-                //Text and HTML document classes should return the same save object for fileSave
-                this.application.ninja.ioMediator.fileSave(this.activeDocument.saveAll(), this.fileSaveResult.bind(this));
-            }
+           //
+    		if((typeof this.activeDocument !== "undefined") && this.application.ninja.coreIoApi.cloudAvailable()){
+    			//
+    			this.activeDocument.model.saveAll(this.testCallback.bind(this)); //this.fileSaveResult.bind(this)
+    		} else {
+    			//Error:
+    		}
 		}
     },
     ////////////////////////////////////////////////////////////////////
diff --git a/js/document/models/base.js b/js/document/models/base.js
index 5667fb24..2bbbe501 100755
--- a/js/document/models/base.js
+++ b/js/document/models/base.js
@@ -76,39 +76,104 @@ exports.BaseDocumentModel = Montage.create(Component, {
 	//TODO: Add API to allow other browser support
 	browserPreview: {
         value: function (browser) {
-        	
-        	//TODO: Add file save before previewing
-        	
-        	//Currently only supporting current browser (Chrome, obviously)
-        	switch (browser) {
-        		case 'chrome':
-        			window.open(this.application.ninja.coreIoApi.rootUrl + this.file.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]);
-        			break;
-        		default:
-        			window.open(this.application.ninja.coreIoApi.rootUrl + this.file.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]);
-        			break;
-        	}
+        	//Generating URL for document
+        	var url = this.application.ninja.coreIoApi.rootUrl + this.file.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1];
+        	//TODO: Add logic to prompt user to save (all) before preview
+        	this.saveAll(function (result) {
+        		//Currently only supporting current browser (Chrome, obviously)
+        		switch (this.browser) {
+        			case 'chrome':
+        				window.open(this.url);
+	        			break;
+    	    		default:
+        				window.open(this.url);
+        				break;
+	        	}
+        	}.bind({browser: browser, url: url}));
         }
     },
+    ////////////////////////////////////////////////////////////////////
+	//
+	getStyleSheets: {
+		value: function () {
+			//
+			var styles = [];
+    		//
+    		for (var k in this.views.design.iframe.contentWindow.document.styleSheets) {
+    			if (this.views.design.iframe.contentWindow.document.styleSheets[k].ownerNode && this.views.design.iframe.contentWindow.document.styleSheets[k].ownerNode.getAttribute) {
+            		if (this.views.design.iframe.contentWindow.document.styleSheets[k].ownerNode.getAttribute('data-ninja-template') === null) {
+            			styles.push(this.views.design.iframe.contentWindow.document.styleSheets[k]);
+            		}
+            	}
+           	}
+           	//
+           	return styles;
+		}
+	},
     ////////////////////////////////////////////////////////////////////
 	//
 	save: {
-        value: function () {
+        value: function (callback) {
         	//
+        	if (this.currentView === this.views.design) {
+            	//
+        		this.application.ninja.ioMediator.fileSave({
+        			mode: 'html',
+        			file: this.file,
+        			webgl: this.webGlHelper.glData,
+        			styles: this.getStyleSheets(),
+        			document: this.views.design.iframe.contentWindow.document,
+        			head: this.views.design.iframe.contentWindow.document.head,
+        			body: this.views.design.iframe.contentWindow.document.body
+        		}, callback.bind(this));
+        	} else {
+        		//TODO: Add logic to save code view data
+        	}
+        	//
+        	if (this.needsSave) {
+        		//Save
+        	} else {
+        		//Ignore command
+        	}
         }
     },
     ////////////////////////////////////////////////////////////////////
 	//
-	saveAs: {
-        value: function () {
+	saveAll: {
+        value: function (callback) {
+        	//
+        	if (this.currentView === this.views.design) {
+            	//
+        		this.application.ninja.ioMediator.fileSave({
+        			mode: 'html',
+        			file: this.file,
+        			webgl: this.webGlHelper.glData,
+        			css: this.getStyleSheets(),
+        			document: this.views.design.iframe.contentWindow.document,
+        			head: this.views.design.iframe.contentWindow.document.head,
+        			body: this.views.design.iframe.contentWindow.document.body
+        		}, callback.bind(this));
+        	} else {
+        		//TODO: Add logic to save code view data
+        	}
         	//
+        	if (this.needsSave) {
+        		//Save
+        	} else {
+        		//Ignore command
+        	}
         }
     },
     ////////////////////////////////////////////////////////////////////
 	//
-	saveAll: {
+	saveAs: {
         value: function () {
         	//
+        	if (this.needsSave) {
+        		//Save current file on memory
+        	} else {
+        		//Copy file from disk
+        	}
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -116,6 +181,11 @@ exports.BaseDocumentModel = Montage.create(Component, {
 	close: {
         value: function () {
         	//
+        	if (this.needsSave) {
+        		//Prompt user to save of lose data
+        	} else {
+        		//Close file
+        	}
         }
     }
 	////////////////////////////////////////////////////////////////////
diff --git a/js/document/templates/montage-web/index.html b/js/document/templates/montage-web/index.html
index 47964ae4..3d550768 100755
--- a/js/document/templates/montage-web/index.html
+++ b/js/document/templates/montage-web/index.html
@@ -5,13 +5,20 @@
  (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>
 	
-		<title>Ninja Prototype</title>
+		<title data-ninja-template="true">Ninja Prototype</title>
         
-       	<style type="text/css" id="nj-stage-stylesheet">
+       	<style type="text/css" id="nj-stage-stylesheet" data-ninja-template="true">
        		* {
         		-webkit-transition-duration: 0s !important;
     			-webkit-animation-duration: 0s !important;
@@ -44,15 +51,15 @@
 			}
         </style>
     
-    	<script type="text/javascript" data-package="." src="../../../../node_modules/montage/montage.js"></script>
+    	<script type="text/javascript" data-package="." src="../../../../node_modules/montage/montage.js" data-ninja-template="true"></script>
     
-    	<script type="text/javascript">
+    	<script type="text/javascript" data-ninja-template="true">
       		function getElement(x,y) {
             	return document.elementFromPoint(x,y);
         	}
     	</script>
 
-        <script type="text/montage-serialization">
+        <script type="text/montage-serialization" data-ninja-template="true">
         {
             "owner": {
                 "prototype": "main"
diff --git a/js/document/views/design.js b/js/document/views/design.js
index df6e9b53..9ad088cb 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -100,6 +100,13 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
         	this._observer.body.observe(this.document.body, {childList: true});
         	//Inserting <body> HTML and parsing URLs via mediator method
         	this.document.body.innerHTML += '<ninjaloadinghack></ninjaloadinghack>'+(this.content.body.replace(/\b(href|src)\s*=\s*"([^"]*)"/g, this.application.ninja.ioMediator.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator))).replace(/url\(([^"]*)(.+?)\1\)/g, this.application.ninja.ioMediator.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator));
+        	//Copying attributes to maintain same properties as the <body>
+			for (var n in this.content.document.body.attributes) {
+				if (this.content.document.body.attributes[n].value) {
+					this.document.body.setAttribute(this.content.document.body.attributes[n].name, this.content.document.body.attributes[n].value);
+				}
+			}
+			//TODO: Add attribute copying for <HEAD> and <HTML>
         }
     },
     ////////////////////////////////////////////////////////////////////
diff --git a/js/io/templates/files/html.txt b/js/io/templates/files/html.txt
index 4e42267e..5a9010cf 100755
--- a/js/io/templates/files/html.txt
+++ b/js/io/templates/files/html.txt
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
 
 	<head>
diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js
index c20ae8f7..6d146c97 100644
--- a/js/mediators/io-mediator.js
+++ b/js/mediators/io-mediator.js
@@ -147,21 +147,21 @@ exports.IoMediator = Montage.create(Component, {
     //
     fileSave: {
         enumerable: false,
-        value: function (file, callback) {
+        value: function (doc, callback) {
             //
             var contents, save;
             //
-            switch (file.mode) {
+            switch (doc.mode) {
                 case 'html':
                     //Getting content from function to properly handle saving assets (as in external if flagged)
-                    contents = this.parseNinjaTemplateToHtml(file);
+                    contents = this.parseNinjaTemplateToHtml(doc);
                     break;
                 default:
-                    contents = file.content;
+                    contents = doc.content;
                     break;
             }
             //Making call to save file
-            save = this.fio.saveFile({ uri: file.document.uri, contents: contents });
+            save = this.fio.saveFile({ uri: doc.file.uri, contents: contents });
             //Checking for callback
             if (callback) callback(save);
         }
@@ -192,7 +192,7 @@ exports.IoMediator = Montage.create(Component, {
             //Setting content to temp
             doc.getElementsByTagName('html')[0].innerHTML = html;
             //Creating return object
-            return { head: doc.head.innerHTML, body: doc.body.innerHTML, document: doc };
+            return {head: doc.head.innerHTML, body: doc.body.innerHTML, document: doc};
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -203,12 +203,26 @@ exports.IoMediator = Montage.create(Component, {
             var regexRootUrl, rootUrl = this.application.ninja.coreIoApi.rootUrl + escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]));
             regexRootUrl = new RegExp(rootUrl.replace(/\//gi, '\\\/'), 'gi');
             //Injecting head and body into old document
-            template.document.content.document.head.innerHTML = template.head.replace(regexRootUrl, '');
-            template.document.content.document.body.innerHTML = template.body.replace(regexRootUrl, '');
+            template.file.content.document.head.innerHTML = template.head.innerHTML.replace(regexRootUrl, '');
+            template.file.content.document.body.innerHTML = template.body.innerHTML.replace(regexRootUrl, '');
             //Getting all CSS (style or link) tags
-            var styletags = template.document.content.document.getElementsByTagName('style'),
-    			linktags = template.document.content.document.getElementsByTagName('link'),
-    			toremovetags = [];
+            var styletags = template.file.content.document.getElementsByTagName('style'),
+    			linktags = template.file.content.document.getElementsByTagName('link'),
+    			toremovetags = [],
+    			njtemplatetags = template.file.content.document.querySelectorAll('[data-ninja-template]'),
+    			basetags = template.file.content.document.getElementsByTagName('base');
+    		
+    		//////////////////////////////////////////////////
+    		//TODO: Remove, temp hack to avoid montage
+    		for (var g in basetags) {
+    			if (basetags[g].getAttribute) toremovetags.push(basetags[g]);
+    		}
+    		//////////////////////////////////////////////////
+    		
+    		//
+    		for (var f in njtemplatetags) {
+    			if (njtemplatetags[f].getAttribute) toremovetags.push(njtemplatetags[f]);
+    		}
             //Getting styles tags to be removed from document
             if (styletags.length) {
                 for (var j = 0; j < styletags.length; j++) {
@@ -225,15 +239,16 @@ exports.IoMediator = Montage.create(Component, {
             for (var h = 0; toremovetags[h]; h++) {
                 try {
                     //Checking head first
-                    template.document.content.document.head.removeChild(toremovetags[h]);
+                    template.file.content.document.head.removeChild(toremovetags[h]);
                 } catch (e) {
-                    try {
+                    
+                }
+                try {
                         //Checking body if not in head
-                        template.document.content.document.body.removeChild(toremovetags[h]);
+                        template.file.content.document.body.removeChild(toremovetags[h]);
                     } catch (e) {
                         //Error, not found!
                     }
-                }
             }
             //Removing disabled tags from tags that were not originally disabled by user (Ninja enables all)
             for (var l in linktags) {
@@ -251,13 +266,13 @@ exports.IoMediator = Montage.create(Component, {
             if (template.styles) {
                 //Getting all style tags
                 var styleCounter = 0,
-    				docStyles = template.document.content.document.getElementsByTagName('style');
+    				docStyles = template.file.content.document.getElementsByTagName('style');
                 //Looping through all style tags
                 for (var i in template.styles) {
                     if (template.styles[i].ownerNode) {
                         if (template.styles[i].ownerNode.getAttribute) {
                             //Checking for node not to be loaded from file
-                            if (template.styles[i].ownerNode.getAttribute('data-ninja-uri') === null && !template.styles[i].ownerNode.getAttribute('data-ninja-template')) {
+                            if (template.styles[i].ownerNode.getAttribute('data-ninja-uri') === null && !template.styles[i].ownerNode.getAttribute('data-ninja-template') && !template.styles[i].ownerNode.getAttribute('data-ninja-external-url')) {
                                 if (docStyles[styleCounter]) {
                                     //Inseting data from rules array into tag as string
                                     docStyles[styleCounter].innerHTML = this.getCssFromRules(template.styles[i].cssRules);
@@ -271,8 +286,8 @@ exports.IoMediator = Montage.create(Component, {
             } else if (template.css) {
                 //Getting all style and link tags
                 var styleCounter = 0,
-    				docStyles = template.document.content.document.getElementsByTagName('style'),
-    				docLinks = template.document.content.document.getElementsByTagName('link');
+    				docStyles = template.file.content.document.getElementsByTagName('style'),
+    				docLinks = template.file.content.document.getElementsByTagName('link');
                 //Removing Ninja Data Attributes
                 for (var n in docLinks) {
                     if (docLinks[n].attributes) {
@@ -352,13 +367,13 @@ exports.IoMediator = Montage.create(Component, {
                     if (this.application.ninja.coreIoApi.ninjaLibrary.libs[i].name === 'RDGE') {
                         rdgeDirName = (this.application.ninja.coreIoApi.ninjaLibrary.libs[i].name + this.application.ninja.coreIoApi.ninjaLibrary.libs[i].version).toLowerCase();
                         rdgeVersion = this.application.ninja.coreIoApi.ninjaLibrary.libs[i].version;
-                        this.application.ninja.coreIoApi.ninjaLibrary.copyLibToCloud(template.document.root, rdgeDirName);
+                        this.application.ninja.coreIoApi.ninjaLibrary.copyLibToCloud(template.file.root, rdgeDirName);
                     } else {
                         //TODO: Error handle no available library to copy
                     }
                 }
                 //
-                var json, matchingtags = [], webgltag, scripts = template.document.content.document.getElementsByTagName('script'), webgljstag, webgllibtag, webglrdgetag, mjstag, mjslibtag;
+                var json, matchingtags = [], webgltag, scripts = template.file.content.document.getElementsByTagName('script'), webgljstag, webgllibtag, webglrdgetag, mjstag, mjslibtag;
                 //
                 for (var i in scripts) {
                     if (scripts[i].getAttribute) {
@@ -393,32 +408,32 @@ exports.IoMediator = Montage.create(Component, {
                 }
                 //
                 if (!webglrdgetag) {
-                    webglrdgetag = template.document.content.document.createElement('script');
+                    webglrdgetag = template.file.content.document.createElement('script');
                     webglrdgetag.setAttribute('type', 'text/javascript');
                     webglrdgetag.setAttribute('src', rdgeDirName + '/rdge-compiled.js');
                     webglrdgetag.setAttribute('data-ninja-webgl-rdge', 'true');
-                    template.document.content.document.head.appendChild(webglrdgetag);
+                    template.file.content.document.head.appendChild(webglrdgetag);
                 }
                 //
                 if (!webgllibtag) {
-                    webgllibtag = template.document.content.document.createElement('script');
+                    webgllibtag = template.file.content.document.createElement('script');
                     webgllibtag.setAttribute('type', 'text/javascript');
                     webgllibtag.setAttribute('src', rdgeDirName + '/canvas-runtime.js');
                     webgllibtag.setAttribute('data-ninja-webgl-lib', 'true');
-                    template.document.content.document.head.appendChild(webgllibtag);
+                    template.file.content.document.head.appendChild(webgllibtag);
                 }
                 //
                 if (!webgltag) {
-                    webgltag = template.document.content.document.createElement('script');
+                    webgltag = template.file.content.document.createElement('script');
                     webgltag.setAttribute('data-ninja-webgl', 'true');
-                    template.document.content.document.head.appendChild(webgltag);
+                    template.file.content.document.head.appendChild(webgltag);
                 }
                 //TODO: Remove this tag and place inside JS file
                 if (!webgljstag) {
-                    webgljstag = template.document.content.document.createElement('script');
+                    webgljstag = template.file.content.document.createElement('script');
                     webgljstag.setAttribute('type', 'text/javascript');
                     webgljstag.setAttribute('data-ninja-webgl-js', 'true');
-                    template.document.content.document.head.appendChild(webgljstag);
+                    template.file.content.document.head.appendChild(webgljstag);
                 }
                 //TODO: Decide if this should be over-writter or only written on creation
                 var rootElement = 'document.body'; //TODO: Set actual root element
@@ -463,33 +478,33 @@ function loadWebGL (e) {\n\
             //
             if (template.mjs && mjsCounter > 0) {
                 var mjsDirName, mjsVersion,
-    				mjscode = temp.initWithHeadAndBodyElements(template.document.content.document.documentElement.head, template.document.content.document.documentElement.body, mjsComponents)._ownerSerialization;
+    				mjscode = temp.initWithHeadAndBodyElements(template.file.content.document.documentElement.head, template.file.content.document.documentElement.body, mjsComponents)._ownerSerialization;
                 //Copy Montage library if needed
                 for (var i in this.application.ninja.coreIoApi.ninjaLibrary.libs) {
                     //Checking for Montage library to be available
                     if (this.application.ninja.coreIoApi.ninjaLibrary.libs[i].name === 'Montage') {
                         mjsDirName = (this.application.ninja.coreIoApi.ninjaLibrary.libs[i].name + this.application.ninja.coreIoApi.ninjaLibrary.libs[i].version).toLowerCase();
                         mjsVersion = this.application.ninja.coreIoApi.ninjaLibrary.libs[i].version;
-                        this.application.ninja.coreIoApi.ninjaLibrary.copyLibToCloud(template.document.root, mjsDirName);
+                        this.application.ninja.coreIoApi.ninjaLibrary.copyLibToCloud(template.file.root, mjsDirName);
                         //TODO: Fix to allow no overwrite and nested locations
-                        var packjson = this.application.ninja.coreIoApi.createFile({ uri: template.document.root + 'package.json', contents: '{"mappings": {"montage": "' + mjsDirName + '/"}}' });
+                        var packjson = this.application.ninja.coreIoApi.createFile({ uri: template.file.root + 'package.json', contents: '{"mappings": {"montage": "' + mjsDirName + '/"}}' });
                     } else {
                         //TODO: Error handle no available library to copy
                     }
                 }
                 //
                 if (!mjslibtag) {
-                    mjslibtag = template.document.content.document.createElement('script');
+                    mjslibtag = template.file.content.document.createElement('script');
                     mjslibtag.setAttribute('type', 'text/javascript');
                     mjslibtag.setAttribute('src', mjsDirName + '/montage.js');
                     mjslibtag.setAttribute('data-mjs-lib', 'true');
-                    template.document.content.document.head.appendChild(mjslibtag);
+                    template.file.content.document.head.appendChild(mjslibtag);
                 }
                 //
                 if (!mjstag) {
-                    mjstag = template.document.content.document.createElement('script');
+                    mjstag = template.file.content.document.createElement('script');
                     mjstag.setAttribute('type', 'text/montage-serialization');
-                    template.document.content.document.head.appendChild(mjstag);
+                    template.file.content.document.head.appendChild(mjstag);
                 }
                 //
                 mjstag.innerHTML = mjscode;
@@ -502,7 +517,7 @@ function loadWebGL (e) {\n\
 
 
             //Cleaning URLs from HTML
-            var cleanHTML = template.document.content.document.documentElement.outerHTML.replace(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi, parseNinjaRootUrl.bind(this));
+            var cleanHTML = template.file.content.document.documentElement.outerHTML.replace(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi, parseNinjaRootUrl.bind(this));
             //
             function parseNinjaRootUrl(url) {
                 if (url.indexOf(this.application.ninja.coreIoApi.rootUrl) !== -1) {
-- 
cgit v1.2.3