From 7bdcab084d1991361ba8d37a7435efd229648630 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 1 May 2012 10:12:40 -0700 Subject: Setting up new architecture for I/O --- js/document/document-html.js | 102 +++++++++++++++++++------------------------ 1 file changed, 45 insertions(+), 57 deletions(-) (limited to 'js/document/document-html.js') diff --git a/js/document/document-html.js b/js/document/document-html.js index 89717dd6..28406ee8 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -18,25 +18,33 @@ exports.HtmlDocument = Montage.create(Component, { enumerable: false, value: false }, - + //////////////////////////////////////////////////////////////////// + // model: { + enumerable: false, value: null }, - + //////////////////////////////////////////////////////////////////// + // loadDelegate: { + enumerable: false, value: null }, - + //////////////////////////////////////////////////////////////////// + // delegateContext: { + enumerable: false, value: null }, - + //////////////////////////////////////////////////////////////////// + // exclusionList: { + enumerable: false, value: ["HTML", "BODY"] }, - - // Getters for the model. - // TODO: Change how these properties are accessed through Ninja + //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// + //TODO: Remove these setters/getters, should call model directly name: { get: function() { return this.model._name; @@ -45,7 +53,7 @@ exports.HtmlDocument = Montage.create(Component, { this.model._name = value; } }, - + // isActive: { get: function() { return this.model._isActive; @@ -54,7 +62,7 @@ exports.HtmlDocument = Montage.create(Component, { this.model._isActive = value; } }, - + // needsSave: { get: function() { return this.model._needsSave; @@ -63,82 +71,62 @@ exports.HtmlDocument = Montage.create(Component, { this.model._needsSave = value; } }, - - // View Properties - // TODO: Move those into a view object - for now dump it here - iframe: { - value: null - }, - + // uuid: { get: function() { return this._uuid; } }, - + // currentView: { value: "design" }, //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// - 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.selectionExclude = ["HTML", "BODY", "Viewport", "UserContent", "stageBG"]; - //this.currentView = "design"; - // - - this.delegateContext = context; - this.loadDelegate = callback; - } + // + iframe: { //MOVE TO: base.js in views + value: null }, - - // Create View - // Move this into a base view object - createView: { + // + createView: { //MOVE TO: design.js in views 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"; ifr.addEventListener("load", this.handleWebTemplateLoad.bind(this), true); - + // return document.getElementById("iframeContainer").appendChild(ifr); } }, - + //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// + // + init: { + value:function(file, context, callback) { + this.model = Montage.create(HtmlDocumentModel, { + file: { + value: file + } + }); + this.name = file.name; + this.iframe = this.createView(); + this.delegateContext = context; + this.loadDelegate = callback; + } + }, + //////////////////////////////////////////////////////////////////// + // 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; -- cgit v1.2.3 From 4ba680a7e9168d0f505a81e42a287dfbc54b4d7d Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 1 May 2012 15:26:37 -0700 Subject: Preliminary IO to new DOM view --- js/document/document-html.js | 191 ++++++++++++++++--------------------------- 1 file changed, 72 insertions(+), 119 deletions(-) (limited to 'js/document/document-html.js') diff --git a/js/document/document-html.js b/js/document/document-html.js index 28406ee8..ad82c371 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -7,117 +7,108 @@ 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; - HtmlDocumentModel = require("js/document/models/html").HtmlDocumentModel; + Component = require("montage/ui/component").Component, + HtmlDocumentModel = require("js/document/models/html").HtmlDocumentModel, + DesignDocumentView = require("js/document/views/design").DesignDocumentView; //////////////////////////////////////////////////////////////////////// // exports.HtmlDocument = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // hasTemplate: { - enumerable: false, value: false }, //////////////////////////////////////////////////////////////////// // model: { - enumerable: false, value: null }, - //////////////////////////////////////////////////////////////////// - // - loadDelegate: { - enumerable: false, - value: null - }, - //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// // - delegateContext: { - enumerable: false, - value: null + _document: { + value: null //TODO: Figure out if this will be needed, probably not }, //////////////////////////////////////////////////////////////////// // exclusionList: { - enumerable: false, - value: ["HTML", "BODY"] + value: [] //TODO: Update to correct list }, //////////////////////////////////////////////////////////////////// - //////////////////////////////////////////////////////////////////// - //TODO: Remove these setters/getters, should call model directly - name: { - get: function() { - return this.model._name; - }, - set: function(value) { - this.model._name = value; - } - }, - // - isActive: { - get: function() { - return this.model._isActive; - }, - set: function(value) { - this.model._isActive = value; - } - }, - // - needsSave: { - get: function() { - return this.model._needsSave; - }, - set: function(value) { - this.model._needsSave = value; - } - }, - // + // uuid: { get: function() { return this._uuid; } }, - // - currentView: { - value: "design" - }, - //////////////////////////////////////////////////////////////////// - //////////////////////////////////////////////////////////////////// - // - iframe: { //MOVE TO: base.js in views - value: null - }, - // - createView: { //MOVE TO: design.js in views - 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%"; - // - ifr.src = "js/document/templates/montage-web/index.html"; - ifr.addEventListener("load", this.handleWebTemplateLoad.bind(this), true); - // - return document.getElementById("iframeContainer").appendChild(ifr); + //////////////////////////////////////////////////////////////////// + // + inExclusion: { + value: function(element) { + if(this.exclusionList.indexOf(element.nodeName) === -1) { + return -1; + } + return 1; } }, - //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// // init: { - value:function(file, context, callback) { - this.model = Montage.create(HtmlDocumentModel, { - file: { - value: file - } + value:function(file, context, callback, view) { + //Creating instance of HTML Document Model + this.model = Montage.create(HtmlDocumentModel,{ + file: {value: file}, + views: {value: {'design': DesignDocumentView.create(), 'code': null}} //TODO: Add code view logic }); - this.name = file.name; - this.iframe = this.createView(); - this.delegateContext = context; - this.loadDelegate = callback; + //Initiliazing views and hiding + if (this.model.views.design.initiliaze(document.getElementById("iframeContainer"))) { + //Hiding iFrame, just initiliazing + this.model.views.design.hide(); + } else { + //ERROR: Design View not initilized + } + // + if (view === 'design') { + //Showing design iFrame + this.model.views.design.show(); + this.model.views.design.iframe.style.opacity = 0; + this.model.views.design.content = this.model.file.content; + // + this.model.views.design.render(function () { + //Setting opacity to be viewable after load + this.model.views.design.iframe.style.opacity = 1; + + + + + //TODO: Identify and remove usage of '_document' + this._document = this.model.views.design.document; + //TODO: Check for needed + this.documentRoot = this.model.views.design.document.body; + // + this._liveNodeList = this.documentRoot.getElementsByTagName('*'); + // + document.application.njUtils.makeElementModel(this.documentRoot, "Body", "body"); + + + + + this.hack = {callback: callback, context: context}; + + setTimeout(function () { + //Making callback after view is loaded + this.hack.callback.call(this.hack.context, this); + }.bind(this), 1000); + + + + + + + + }.bind(this)); + } else { + //TODO: Identify default view (probably code) + } } }, //////////////////////////////////////////////////////////////////// @@ -137,21 +128,9 @@ 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.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 () { @@ -322,32 +301,6 @@ exports.HtmlDocument = Montage.create(Component, { }.bind(this), 1000); } - }, - - GetElementFromPoint: { - value: function(x, y) { - return this._window.getElement(x,y); - } - }, - - inExclusion: { - value: function(element) { - if(this.exclusionList.indexOf(element.nodeName) === -1) { - return -1; - } - - return 1; - - } - }, - - // 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; - } } }); //////////////////////////////////////////////////////////////////////// -- cgit v1.2.3 From df3f96beb749951162bb60ec88363340e3ef6d95 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 1 May 2012 15:59:47 -0700 Subject: More clean up, updating menu items --- js/document/document-html.js | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) (limited to 'js/document/document-html.js') diff --git a/js/document/document-html.js b/js/document/document-html.js index ad82c371..6ace440f 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -22,6 +22,11 @@ exports.HtmlDocument = Montage.create(Component, { // model: { value: null + }, + //////////////////////////////////////////////////////////////////// + // + loaded: { + value: {callback: null, context: null} }, //////////////////////////////////////////////////////////////////// // @@ -54,6 +59,9 @@ exports.HtmlDocument = Montage.create(Component, { // init: { value:function(file, context, callback, view) { + // + this.loaded.callback = callback; + this.loaded.context = context; //Creating instance of HTML Document Model this.model = Montage.create(HtmlDocumentModel,{ file: {value: file}, @@ -74,8 +82,7 @@ exports.HtmlDocument = Montage.create(Component, { this.model.views.design.content = this.model.file.content; // this.model.views.design.render(function () { - //Setting opacity to be viewable after load - this.model.views.design.iframe.style.opacity = 1; + @@ -84,19 +91,18 @@ exports.HtmlDocument = Montage.create(Component, { this._document = this.model.views.design.document; //TODO: Check for needed this.documentRoot = this.model.views.design.document.body; - // + //TODO: Why is this needed? this._liveNodeList = this.documentRoot.getElementsByTagName('*'); // document.application.njUtils.makeElementModel(this.documentRoot, "Body", "body"); - - - - - this.hack = {callback: callback, context: context}; - + //TODO: Figure out why timeout is needed setTimeout(function () { //Making callback after view is loaded - this.hack.callback.call(this.hack.context, this); + this.loaded.callback.call(this.loaded.context, this); + //Setting opacity to be viewable after load + setTimeout(function () { + this.model.views.design.iframe.style.opacity = 1; + }.bind(this), 1000); }.bind(this), 1000); -- cgit v1.2.3 From ba7946e8b41430eda7e2956ee4c82fa1f1ee9507 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Wed, 2 May 2012 11:25:32 -0700 Subject: Preliminary Open File (new template) Added basic open file functionality, does not parse document for URLs. --- js/document/document-html.js | 74 ++++++++++++++++++++++++++++++-------------- 1 file changed, 51 insertions(+), 23 deletions(-) (limited to 'js/document/document-html.js') diff --git a/js/document/document-html.js b/js/document/document-html.js index 6ace440f..b169e046 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -82,43 +82,71 @@ exports.HtmlDocument = Montage.create(Component, { this.model.views.design.content = this.model.file.content; // this.model.views.design.render(function () { - - - - - //TODO: Identify and remove usage of '_document' this._document = this.model.views.design.document; //TODO: Check for needed this.documentRoot = this.model.views.design.document.body; //TODO: Why is this needed? this._liveNodeList = this.documentRoot.getElementsByTagName('*'); - // + //Initiliazing document model document.application.njUtils.makeElementModel(this.documentRoot, "Body", "body"); - //TODO: Figure out why timeout is needed - setTimeout(function () { - //Making callback after view is loaded - this.loaded.callback.call(this.loaded.context, this); - //Setting opacity to be viewable after load - setTimeout(function () { - this.model.views.design.iframe.style.opacity = 1; - }.bind(this), 1000); - }.bind(this), 1000); - - - - - - - + //Adding event to know when template is ready + this.model.views.design.document.head.addEventListener('DOMSubtreeModified', this.handleTemplateReady.bind(this), false); }.bind(this)); } else { //TODO: Identify default view (probably code) } } }, - //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// // + handleTemplateReady: { + value: function (e) { + //Removing event listener, a must for this type of event + this.model.views.design.document.head.removeEventListener('DOMSubtreeModified', this.handleTemplateReady.bind(this), false); + //Making callback after view is loaded + this.loaded.callback.call(this.loaded.context, this); + //Setting opacity to be viewable after load + this.model.views.design.iframe.style.opacity = 1; + } + }, + //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + handleWebTemplateLoad: { value: function(event) { //TODO: Remove, also for prototyping -- cgit v1.2.3 From 0df733dd19dc009f3274269dff970e9130ab48b4 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Wed, 2 May 2012 11:53:56 -0700 Subject: Partial URL parsing Added temporary URL parsing to document assets. (head and body) --- js/document/document-html.js | 18 ++---------------- 1 file changed, 2 insertions(+), 16 deletions(-) (limited to 'js/document/document-html.js') diff --git a/js/document/document-html.js b/js/document/document-html.js index b169e046..ec59c3e2 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -59,7 +59,7 @@ exports.HtmlDocument = Montage.create(Component, { // init: { value:function(file, context, callback, view) { - // + //Storing callback data for loaded dispatch this.loaded.callback = callback; this.loaded.context = context; //Creating instance of HTML Document Model @@ -295,11 +295,6 @@ exports.HtmlDocument = Montage.create(Component, { //////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////// - //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, "Body", "body"); -// this.documentRoot.elementModel.props3D.init(this.documentRoot, true); - for(i = 0; i < this._stylesheets.length; i++) { if(this._stylesheets[i].ownerNode.id === "nj-stage-stylesheet") { this.documentRoot.elementModel.defaultRule = this._stylesheets[i]; @@ -314,16 +309,7 @@ exports.HtmlDocument = Montage.create(Component, { 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; - } - */ + } //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -- cgit v1.2.3 From f3479e478f3cec1cb00508bedbce8dc5a210931a Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 3 May 2012 15:55:40 -0700 Subject: Clean up, ready for alpha check-in --- js/document/document-html.js | 229 +++---------------------------------------- 1 file changed, 13 insertions(+), 216 deletions(-) (limited to 'js/document/document-html.js') diff --git a/js/document/document-html.js b/js/document/document-html.js index ec59c3e2..deca9f83 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -28,6 +28,11 @@ exports.HtmlDocument = Montage.create(Component, { loaded: { value: {callback: null, context: null} }, + //////////////////////////////////////////////////////////////////// + // + _observer: { + value: null + }, //////////////////////////////////////////////////////////////////// // _document: { @@ -80,7 +85,7 @@ exports.HtmlDocument = Montage.create(Component, { this.model.views.design.show(); this.model.views.design.iframe.style.opacity = 0; this.model.views.design.content = this.model.file.content; - // + //TODO: Clean up this.model.views.design.render(function () { //TODO: Identify and remove usage of '_document' this._document = this.model.views.design.document; @@ -90,8 +95,9 @@ exports.HtmlDocument = Montage.create(Component, { this._liveNodeList = this.documentRoot.getElementsByTagName('*'); //Initiliazing document model document.application.njUtils.makeElementModel(this.documentRoot, "Body", "body"); - //Adding event to know when template is ready - this.model.views.design.document.head.addEventListener('DOMSubtreeModified', this.handleTemplateReady.bind(this), false); + //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)); } else { //TODO: Identify default view (probably code) @@ -102,226 +108,17 @@ exports.HtmlDocument = Montage.create(Component, { // handleTemplateReady: { value: function (e) { - //Removing event listener, a must for this type of event - this.model.views.design.document.head.removeEventListener('DOMSubtreeModified', this.handleTemplateReady.bind(this), false); + //Removing observer, only needed on initial load + this._observer.disconnect(); + this._observer = null; //Making callback after view is loaded this.loaded.callback.call(this.loaded.context, this); //Setting opacity to be viewable after load this.model.views.design.iframe.style.opacity = 1; } - }, + } //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - handleWebTemplateLoad: { - value: function(event) { - //TODO: Remove, also for prototyping - this.application.ninja.documentController._hackRootFlag = true; - - 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'); - } - } - - // Live node list of the current loaded document - this._liveNodeList = this.documentRoot.getElementsByTagName('*'); - - - 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; - - //////////////////////////////////////////////////////////////////////////// - //////////////////////////////////////////////////////////////////////////// - - 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]; - } - } - - } - //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - - - - - - }.bind(this), 1000); - } - } }); //////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////// \ No newline at end of file -- cgit v1.2.3 From efe62dff2ba6894551fb9679d150255bae5af36e Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 4 May 2012 16:00:14 -0700 Subject: Draw 3d grid by default since app model is not hooked up yet. Signed-off-by: Nivesh Rajbhandari --- js/document/document-html.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) (limited to 'js/document/document-html.js') diff --git a/js/document/document-html.js b/js/document/document-html.js index deca9f83..f3c135ed 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -41,7 +41,7 @@ exports.HtmlDocument = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // exclusionList: { - value: [] //TODO: Update to correct list + value: ["HTML", "BODY"] //TODO: Update to correct list }, //////////////////////////////////////////////////////////////////// // @@ -73,7 +73,7 @@ exports.HtmlDocument = Montage.create(Component, { views: {value: {'design': DesignDocumentView.create(), 'code': null}} //TODO: Add code view logic }); //Initiliazing views and hiding - if (this.model.views.design.initiliaze(document.getElementById("iframeContainer"))) { + if (this.model.views.design.initialize(document.getElementById("iframeContainer"))) { //Hiding iFrame, just initiliazing this.model.views.design.hide(); } else { @@ -115,6 +115,12 @@ exports.HtmlDocument = Montage.create(Component, { this.loaded.callback.call(this.loaded.context, this); //Setting opacity to be viewable after load this.model.views.design.iframe.style.opacity = 1; + + + + + + this.application.ninja.appModel.show3dGrid = true; } } //////////////////////////////////////////////////////////////////// -- cgit v1.2.3 From b8c27edc106818ff84f93ebe30ce50359a03885b Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Mon, 7 May 2012 13:21:31 -0700 Subject: Adding webGL support for opening files Added I/O for loading webGL on open file. I/O support for saving to come. --- js/document/document-html.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) (limited to 'js/document/document-html.js') diff --git a/js/document/document-html.js b/js/document/document-html.js index f3c135ed..79fe461b 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -63,7 +63,7 @@ exports.HtmlDocument = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // init: { - value:function(file, context, callback, view) { + value:function(file, context, callback, view, template) { //TODO: Add template support logic //Storing callback data for loaded dispatch this.loaded.callback = callback; this.loaded.context = context; @@ -85,16 +85,19 @@ exports.HtmlDocument = Montage.create(Component, { this.model.views.design.show(); this.model.views.design.iframe.style.opacity = 0; this.model.views.design.content = this.model.file.content; + //TODO: Improve reference + this.model.views.design.model = this.model; + // //TODO: Clean up this.model.views.design.render(function () { //TODO: Identify and remove usage of '_document' this._document = this.model.views.design.document; - //TODO: Check for needed + //TODO: Remove usage, seems as not needed this.documentRoot = this.model.views.design.document.body; //TODO: Why is this needed? - this._liveNodeList = this.documentRoot.getElementsByTagName('*'); + this._liveNodeList = this.model.views.design.document.body.getElementsByTagName('*'); //Initiliazing document model - document.application.njUtils.makeElementModel(this.documentRoot, "Body", "body"); + document.application.njUtils.makeElementModel(this.model.views.design.document.body, "Body", "body"); //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}); @@ -115,11 +118,7 @@ exports.HtmlDocument = Montage.create(Component, { this.loaded.callback.call(this.loaded.context, this); //Setting opacity to be viewable after load this.model.views.design.iframe.style.opacity = 1; - - - - - + //TODO: Remove, this is a temp hard-coded hack this.application.ninja.appModel.show3dGrid = true; } } -- cgit v1.2.3 From d4976b9e129f690b3255d5c0347c410234f7cefa Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Mon, 7 May 2012 16:15:35 -0700 Subject: Extracting CSS methods to parsing class. Need to do the same with webGL. --- js/document/document-html.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'js/document/document-html.js') diff --git a/js/document/document-html.js b/js/document/document-html.js index 79fe461b..567e4455 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -81,6 +81,10 @@ exports.HtmlDocument = Montage.create(Component, { } // if (view === 'design') { + //TODO: Remove reference and use as part of model + this.currentView = 'design'; + //Setting current view object to design + this.model.currentView = this.model.views.design; //Showing design iFrame this.model.views.design.show(); this.model.views.design.iframe.style.opacity = 0; @@ -118,8 +122,6 @@ exports.HtmlDocument = Montage.create(Component, { this.loaded.callback.call(this.loaded.context, this); //Setting opacity to be viewable after load this.model.views.design.iframe.style.opacity = 1; - //TODO: Remove, this is a temp hard-coded hack - this.application.ninja.appModel.show3dGrid = true; } } //////////////////////////////////////////////////////////////////// -- cgit v1.2.3