From e876941eaa6cf5adf0e028d0f3f9402284ea5de2 Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Mon, 2 Apr 2012 10:39:12 -0700
Subject: Setting up document rework
---
js/document/document-html.js | 24 ++++++++++++++++++++++++
1 file changed, 24 insertions(+)
create mode 100755 js/document/document-html.js
(limited to 'js/document/document-html.js')
diff --git a/js/document/document-html.js b/js/document/document-html.js
new file mode 100755
index 00000000..b48e004a
--- /dev/null
+++ b/js/document/document-html.js
@@ -0,0 +1,24 @@
+/*
+This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+ */
+
+////////////////////////////////////////////////////////////////////////
+//
+var Montage = require("montage/core/core").Montage,
+ Component = require("montage/ui/component").Component;
+////////////////////////////////////////////////////////////////////////
+//
+exports.HtmlDocument = Montage.create(Component, {
+ ////////////////////////////////////////////////////////////////////
+ //
+ hasTemplate: {
+ enumerable: false,
+ value: false
+ }
+ ////////////////////////////////////////////////////////////////////
+ ////////////////////////////////////////////////////////////////////
+});
+////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////
\ No newline at end of file
--
cgit v1.2.3
From c62273126004f057de40ce91ecda5606643f4c92 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Fri, 20 Apr 2012 16:37:47 -0700
Subject: reverting old template to current working status. New template work.
Signed-off-by: Valerio Virgillito
---
js/document/document-html.js | 304 ++++++++++++++++++++++++++++++++++++++++++-
1 file changed, 301 insertions(+), 3 deletions(-)
(limited to 'js/document/document-html.js')
diff --git a/js/document/document-html.js b/js/document/document-html.js
index b48e004a..841e66ed 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -6,8 +6,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
////////////////////////////////////////////////////////////////////////
//
-var Montage = require("montage/core/core").Montage,
- Component = require("montage/ui/component").Component;
+var Montage = require("montage/core/core").Montage,
+ Component = require("montage/ui/component").Component;
+ HtmlDocumentModel = require("js/document/models/html").HtmlDocumentModel;
////////////////////////////////////////////////////////////////////////
//
exports.HtmlDocument = Montage.create(Component, {
@@ -16,9 +17,306 @@ exports.HtmlDocument = Montage.create(Component, {
hasTemplate: {
enumerable: false,
value: false
- }
+ },
+
+ model: {
+ value: null
+ },
+
+ loadDelegate: {
+ value: null
+ },
+
+ delegateContext: {
+ value: null
+ },
+
+ // Getters for the model.
+ // TODO: Change how these properties are accessed through Ninja
+ name: {
+ get: function() {
+ return this.model._name;
+ },
+ set: function(value) {
+ this.model._name = value;
+ }
+ },
+
+ // View Properties
+ // TODO: Move those into a view object - for now dump it here
+ iframe: {
+ value: null
+ },
+
+ uuid: {
+ get: function() {
+ return this._uuid;
+ }
+ },
////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////
+ init: {
+ value:function(file, context, callback) {
+ this.model = Montage.create(HtmlDocumentModel, {
+ file: {
+ value: file
+ }
+ });
+
+ this.name = file.name;
+
+ // this.init(file.name, file.uri, file.extension, iframe, uuid, callback);
+
+ this.iframe = this.createView();
+ this.iframe.addEventListener("load", this.handleWebTemplateLoad.bind(this), true);
+
+ //this.selectionExclude = ["HTML", "BODY", "Viewport", "UserContent", "stageBG"];
+ //this.currentView = "design";
+ //
+
+ this.delegateContext = context;
+ this.loadDelegate = callback;
+ }
+ },
+
+ // Create View
+ // Move this into a base view object
+ createView: {
+ value: function() {
+ var ifr = document.createElement("iframe");
+ ifr.id = "document_" + this._uuid;
+
+
+ ifr.style.border = "none";
+ ifr.style.background = "#FFF";
+ ifr.style.height = "100%";
+ ifr.style.width = "100%";
+
+ // TODO: Reable opacity to display only when done loading
+// ifr.style.opacity = 0;
+
+ ifr.src = "js/document/templates/montage-web/index.html";
+
+ return document.getElementById("iframeContainer").appendChild(ifr);
+ }
+ },
+
+ handleWebTemplateLoad: {
+ value: function(event) {
+ //TODO: Remove, also for prototyping
+ this.application.ninja.documentController._hackRootFlag = true;
+
+
+ //TODO: Clean up, using for prototyping save
+// this._templateDocument = {};
+// this._templateDocument.html = this.iframe.contentWindow.document;
+// this._templateDocument.body =
+
+ this._window = this.iframe.contentWindow;
+ this._document = this.iframe.contentWindow.document;
+ this.documentRoot = this.iframe.contentWindow.document.body;
+
+ for (var k in this._document.styleSheets) {
+ if (this._document.styleSheets[k].ownerNode && this._document.styleSheets[k].ownerNode.setAttribute) {
+ this._document.styleSheets[k].ownerNode.setAttribute('data-ninja-template', 'true');
+ }
+ }
+
+ // TODO: We don't need this anymore -> need to setup the main container still
+ //Adding a handler for the main user document reel to finish loading
+ //this._document.body.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false);
+ this.documentRoot.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false);
+
+ // Live node list of the current loaded document
+ this._liveNodeList = this.documentRoot.getElementsByTagName('*');
+
+ // TODO Move this to the appropriate location
+ /*
+ var len = this._liveNodeList.length;
+
+ for(var i = 0; i < len; i++) {
+ NJUtils.makeModelFromElement(this._liveNodeList[i]);
+ }
+ */
+
+ setTimeout(function () {
+
+ ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+ ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+ ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+ if(this._document.styleSheets.length) {
+ //Checking all styleSheets in document
+ for (var i in this._document.styleSheets) {
+ //If rules are null, assuming cross-origin issue
+ if(this._document.styleSheets[i].rules === null) {
+ //TODO: Revisit URLs and URI creation logic, very hack right now
+ var fileUri, cssUrl, cssData, query, prefixUrl, fileCouldDirUrl, docRootUrl;
+ //
+ docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/'));
+ //TODO: Parse out relative URLs and map them to absolute
+ if (this._document.styleSheets[i].href.indexOf(this.application.ninja.coreIoApi.rootUrl) !== -1) {
+ //
+ cssUrl = this._document.styleSheets[i].href.split(this.application.ninja.coreIoApi.rootUrl)[1];
+ fileUri = this.application.ninja.coreIoApi.cloudData.root+cssUrl;
+ //TODO: Add error handling for reading file
+ cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri});
+ //
+ var tag = this.iframe.contentWindow.document.createElement('style');
+ tag.setAttribute('type', 'text/css');
+ tag.setAttribute('data-ninja-uri', fileUri);
+ tag.setAttribute('data-ninja-file-url', cssUrl);
+ tag.setAttribute('data-ninja-file-read-only', JSON.parse(this.application.ninja.coreIoApi.isFileWritable({uri: fileUri}).content).readOnly);
+ tag.setAttribute('data-ninja-file-name', cssUrl.split('/')[cssUrl.split('/').length-1]);
+ //Copying attributes to maintain same properties as the
+ for (var n in this._document.styleSheets[i].ownerNode.attributes) {
+ if (this._document.styleSheets[i].ownerNode.attributes[n].value && this._document.styleSheets[i].ownerNode.attributes[n].name !== 'disabled' && this._document.styleSheets[i].ownerNode.attributes[n].name !== 'disabled') {
+ if (this._document.styleSheets[i].ownerNode.attributes[n].value.indexOf(docRootUrl) !== -1) {
+ tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value.split(docRootUrl)[1]);
+ } else {
+ tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value);
+ }
+ }
+ }
+ //
+ fileCouldDirUrl = this._document.styleSheets[i].href.split(this._document.styleSheets[i].href.split('/')[this._document.styleSheets[i].href.split('/').length-1])[0];
+
+ //TODO: Make public version of this.application.ninja.ioMediator.getNinjaPropUrlRedirect with dynamic ROOT
+ tag.innerHTML = cssData.content.replace(/url\(()(.+?)\1\)/g, detectUrl);
+
+ function detectUrl (prop) {
+ return prop.replace(/[^()\\""\\'']+/g, prefixUrl);;
+ }
+
+ function prefixUrl (url) {
+ if (url !== 'url') {
+ if (!url.match(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi)) {
+ url = fileCouldDirUrl+url;
+ }
+ }
+ return url;
+ }
+
+ //Looping through DOM to insert style tag at location of link element
+ query = this._templateDocument.html.querySelectorAll(['link']);
+ for (var j in query) {
+ if (query[j].href === this._document.styleSheets[i].href) {
+ //Disabling style sheet to reload via inserting in style tag
+ query[j].setAttribute('disabled', 'true');
+ //Inserting tag
+ this._templateDocument.head.insertBefore(tag, query[j]);
+ }
+ }
+ } else {
+ console.log('ERROR: Cross-Domain-Stylesheet detected, unable to load in Ninja');
+ //None local stylesheet, probably on a CDN (locked)
+ var tag = this.iframe.contentWindow.document.createElement('style');
+ tag.setAttribute('type', 'text/css');
+ tag.setAttribute('data-ninja-external-url', this._document.styleSheets[i].href);
+ tag.setAttribute('data-ninja-file-read-only', "true");
+ tag.setAttribute('data-ninja-file-name', this._document.styleSheets[i].href.split('/')[this._document.styleSheets[i].href.split('/').length-1]);
+ //Copying attributes to maintain same properties as the
+ for (var n in this._document.styleSheets[i].ownerNode.attributes) {
+ if (this._document.styleSheets[i].ownerNode.attributes[n].value && this._document.styleSheets[i].ownerNode.attributes[n].name !== 'disabled' && this._document.styleSheets[i].ownerNode.attributes[n].name !== 'disabled') {
+ if (this._document.styleSheets[i].ownerNode.attributes[n].value.indexOf(docRootUrl) !== -1) {
+ tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value.split(docRootUrl)[1]);
+ } else {
+ tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value);
+ }
+ }
+ }
+ /*
+
+ //TODO: Figure out cross-domain XHR issue, might need cloud to handle
+ var xhr = new XMLHttpRequest();
+ xhr.open("GET", this._document.styleSheets[i].href, true);
+ xhr.send();
+ //
+ if (xhr.readyState === 4) {
+ console.log(xhr);
+ }
+ //tag.innerHTML = xhr.responseText //xhr.response;
+ */
+ //Temp rule so it's registered in the array
+ tag.innerHTML = 'noRULEjustHACK{background: #000}';
+ //Disabling external style sheets
+ query = this._templateDocument.html.querySelectorAll(['link']);
+ for (var k in query) {
+ if (query[k].href === this._document.styleSheets[i].href) {
+
+ //TODO: Removed the temp insertion of the stylesheet
+ //because it wasn't the proper way to do it
+ //need to be handled via XHR with proxy in Cloud Sim
+
+ //Disabling style sheet to reload via inserting in style tag
+ //var tempCSS = query[k].cloneNode(true);
+ //tempCSS.setAttribute('data-ninja-template', 'true');
+ query[k].setAttribute('disabled', 'true');
+ //this.iframe.contentWindow.document.head.appendChild(tempCSS);
+ //Inserting tag
+ this._templateDocument.head.insertBefore(tag, query[k]);
+ }
+ }
+ }
+ }
+ }
+ ////////////////////////////////////////////////////////////////////////////
+ ////////////////////////////////////////////////////////////////////////////
+
+ //TODO: Check if this is needed
+ this._stylesheets = this._document.styleSheets;
+
+ ////////////////////////////////////////////////////////////////////////////
+ ////////////////////////////////////////////////////////////////////////////
+
+ //TODO Finish this implementation once we start caching Core Elements
+ // Assign a model to the UserContent and add the ViewPort reference to it.
+ document.application.njUtils.makeElementModel(this.documentRoot, "Stage", "stage");
+
+ for(i = 0; i < this._stylesheets.length; i++) {
+ if(this._stylesheets[i].ownerNode.id === "nj-stage-stylesheet") {
+ this.documentRoot.elementModel.defaultRule = this._stylesheets[i];
+ break;
+ }
+ }
+
+ //Temporary create properties for each rule we need to save the index of the rule
+ var len = this.documentRoot.elementModel.defaultRule.cssRules.length;
+ for(var j = 0; j < len; j++) {
+ if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "*") {
+ this.documentRoot.elementModel.transitionStopRule = this.documentRoot.elementModel.defaultRule.cssRules[j];
+ }
+ }
+
+
+ this.loadDelegate.call(this.delegateContext, this);
+
+ //Setting webGL data
+ /*
+ if (this._templateDocument.webgl) {
+ this.glData = this._templateDocument.webgl;
+ }
+ */
+ }
+ ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+ ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+ ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+
+
+
+
+ }.bind(this), 1000);
+ }
+ },
+
+ // Handler for user content main reel. Gets called once the main reel of the template
+ // gets deserialized.
+ // Setting up the currentSelectedContainer to the document body.
+ userTemplateDidLoad: {
+ value: function(){
+ this.application.ninja.currentSelectedContainer = this.documentRoot;
+ }
+ }
});
////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
\ No newline at end of file
--
cgit v1.2.3
From d0af21d80441cb7ffe3a92ed00f8dc9b90867098 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Mon, 23 Apr 2012 13:41:16 -0700
Subject: adjusting the bread crumb to work with the new template
Initial container get setup in ninja now.
Signed-off-by: Valerio Virgillito
---
js/document/document-html.js | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
(limited to 'js/document/document-html.js')
diff --git a/js/document/document-html.js b/js/document/document-html.js
index 841e66ed..8cb88516 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -67,8 +67,8 @@ exports.HtmlDocument = Montage.create(Component, {
// this.init(file.name, file.uri, file.extension, iframe, uuid, callback);
+
this.iframe = this.createView();
- this.iframe.addEventListener("load", this.handleWebTemplateLoad.bind(this), true);
//this.selectionExclude = ["HTML", "BODY", "Viewport", "UserContent", "stageBG"];
//this.currentView = "design";
@@ -96,6 +96,7 @@ exports.HtmlDocument = Montage.create(Component, {
// ifr.style.opacity = 0;
ifr.src = "js/document/templates/montage-web/index.html";
+ ifr.addEventListener("load", this.handleWebTemplateLoad.bind(this), true);
return document.getElementById("iframeContainer").appendChild(ifr);
}
@@ -124,8 +125,7 @@ exports.HtmlDocument = Montage.create(Component, {
// TODO: We don't need this anymore -> need to setup the main container still
//Adding a handler for the main user document reel to finish loading
- //this._document.body.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false);
- this.documentRoot.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false);
+// this.documentRoot.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false);
// Live node list of the current loaded document
this._liveNodeList = this.documentRoot.getElementsByTagName('*');
@@ -314,7 +314,7 @@ exports.HtmlDocument = Montage.create(Component, {
// Setting up the currentSelectedContainer to the document body.
userTemplateDidLoad: {
value: function(){
- this.application.ninja.currentSelectedContainer = this.documentRoot;
+// this.application.ninja.currentSelectedContainer = this.documentRoot;
}
}
});
--
cgit v1.2.3