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/views/base.js | 53 ++++++++++++++++++++++++++++++++++++++++++++- js/document/views/design.js | 49 ++++++++++++++++++++++++++++++++++++++++- 2 files changed, 100 insertions(+), 2 deletions(-) (limited to 'js/document/views') diff --git a/js/document/views/base.js b/js/document/views/base.js index 50c0a78d..fc380027 100755 --- a/js/document/views/base.js +++ b/js/document/views/base.js @@ -7,7 +7,8 @@ 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; + Component = require("montage/ui/component").Component, + UrlParser = require("js/document/helpers/url-parser").UrlParser; //////////////////////////////////////////////////////////////////////// // exports.BaseDocumentView = Montage.create(Component, { @@ -16,6 +17,56 @@ exports.BaseDocumentView = Montage.create(Component, { hasTemplate: { enumerable: false, value: false + }, + //////////////////////////////////////////////////////////////////// + // + parser: { + enumerable: false, + value: UrlParser + }, + //////////////////////////////////////////////////////////////////// + // + _iframe: { + enumerable: false, + value: null + }, + //////////////////////////////////////////////////////////////////// + // + iframe: { + get: function() { + return this._iframe; + }, + set: function(value) { + this._iframe= value; + } + }, + //////////////////////////////////////////////////////////////////// + // + show: { + enumerable: false, + value: function (callback) { + if (this.iframe) { + this.iframe.style.display = 'block'; + } else { + console.log('Error: View has no iframe to show!'); + } + // + if (callback) callback(); + } + }, + //////////////////////////////////////////////////////////////////// + // + hide: { + enumerable: false, + value: function (callback) { + if (this.iframe) { + this.iframe.style.display = 'none'; + } else { + console.log('Error: View has no iframe to hide!'); + } + // + if (callback) callback(); + } } //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// diff --git a/js/document/views/design.js b/js/document/views/design.js index 84871257..ecd2956c 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -7,7 +7,6 @@ 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, CodeDocumentView = require("js/document/views/code").CodeDocumentView; //////////////////////////////////////////////////////////////////////// // @@ -17,6 +16,54 @@ exports.DesignDocumentView = Montage.create(CodeDocumentView, { hasTemplate: { enumerable: false, value: false + }, + //////////////////////////////////////////////////////////////////// + // + initiliaze: { + enumerable: false, + value: function () { + // + } + }, + //////////////////////////////////////////////////////////////////// + // + render: { + enumerable: false, + value: function () { + // + } + }, + //////////////////////////////////////////////////////////////////// + // + onTemplateLoad: { + enumerable: false, + value: function () { + // + } + }, + //////////////////////////////////////////////////////////////////// + // + initCss: { + enumerable: false, + value: function () { + // + } + }, + //////////////////////////////////////////////////////////////////// + // + initWebGl: { + enumerable: false, + value: function () { + // + } + }, + //////////////////////////////////////////////////////////////////// + // + initMontage: { + enumerable: false, + value: function () { + // + } } //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// -- 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/views/base.js | 15 ++-------- js/document/views/design.js | 72 +++++++++++++++++++++++++++++++++++++-------- 2 files changed, 62 insertions(+), 25 deletions(-) (limited to 'js/document/views') diff --git a/js/document/views/base.js b/js/document/views/base.js index fc380027..d1c65b5e 100755 --- a/js/document/views/base.js +++ b/js/document/views/base.js @@ -15,35 +15,27 @@ exports.BaseDocumentView = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // hasTemplate: { - enumerable: false, value: false }, //////////////////////////////////////////////////////////////////// // - parser: { - enumerable: false, + urlParser: { value: UrlParser }, //////////////////////////////////////////////////////////////////// // _iframe: { - enumerable: false, value: null }, //////////////////////////////////////////////////////////////////// // iframe: { - get: function() { - return this._iframe; - }, - set: function(value) { - this._iframe= value; - } + get: function() {return this._iframe;}, + set: function(value) {this._iframe= value;} }, //////////////////////////////////////////////////////////////////// // show: { - enumerable: false, value: function (callback) { if (this.iframe) { this.iframe.style.display = 'block'; @@ -57,7 +49,6 @@ exports.BaseDocumentView = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // hide: { - enumerable: false, value: function (callback) { if (this.iframe) { this.iframe.style.display = 'none'; diff --git a/js/document/views/design.js b/js/document/views/design.js index ecd2956c..10963cab 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -7,44 +7,85 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot //////////////////////////////////////////////////////////////////////// // var Montage = require("montage/core/core").Montage, - CodeDocumentView = require("js/document/views/code").CodeDocumentView; + BaseDocumentView = require("js/document/views/base").BaseDocumentView; //////////////////////////////////////////////////////////////////////// // -exports.DesignDocumentView = Montage.create(CodeDocumentView, { +exports.DesignDocumentView = Montage.create(BaseDocumentView, { //////////////////////////////////////////////////////////////////// // hasTemplate: { - enumerable: false, value: false }, + //////////////////////////////////////////////////////////////////// + // + _callback: { + value: null + }, + //////////////////////////////////////////////////////////////////// + // + _document: { + value: null + }, + //////////////////////////////////////////////////////////////////// + // + content: { + value: null + }, + //////////////////////////////////////////////////////////////////// + // + document: { + get: function() {return this._document;}, + set: function(value) {this._document = value;} + }, //////////////////////////////////////////////////////////////////// // initiliaze: { - enumerable: false, - value: function () { + value: function (parent) { + // + this.iframe = document.createElement("iframe"); // + this.iframe.style.border = "none"; + this.iframe.style.background = "#FFF"; + this.iframe.style.height = "100%"; + this.iframe.style.width = "100%"; + // + return parent.appendChild(this.iframe); } }, //////////////////////////////////////////////////////////////////// // render: { - enumerable: false, - value: function () { + value: function (callback) { // + this._callback = callback; + this.iframe.addEventListener("load", this.onTemplateLoad.bind(this), true); + this.iframe.src = "js/document/templates/montage-web/index.html"; } }, //////////////////////////////////////////////////////////////////// // onTemplateLoad: { - enumerable: false, - value: function () { + value: function (e) { + // + this.document = this.iframe.contentWindow.document; + // + + + + + //this.document.head.innerHTML += this.content.head; + this.document.body.innerHTML = this.content.head + this.content.body; + + + + // + if (this._callback) this._callback(); } }, //////////////////////////////////////////////////////////////////// // initCss: { - enumerable: false, value: function () { // } @@ -52,7 +93,6 @@ exports.DesignDocumentView = Montage.create(CodeDocumentView, { //////////////////////////////////////////////////////////////////// // initWebGl: { - enumerable: false, value: function () { // } @@ -60,11 +100,17 @@ exports.DesignDocumentView = Montage.create(CodeDocumentView, { //////////////////////////////////////////////////////////////////// // initMontage: { - enumerable: false, value: function () { // } - } + }, + //////////////////////////////////////////////////////////////////// + // + getElementFromPoint: { + value: function(x, y) { + return this.iframe.contentWindow.getElement(x,y); + } + }, //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// }); -- 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/views/design.js | 45 ++++++++++++++++++++++++++++++++++----------- 1 file changed, 34 insertions(+), 11 deletions(-) (limited to 'js/document/views') diff --git a/js/document/views/design.js b/js/document/views/design.js index 10963cab..a2bf965a 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -26,6 +26,11 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { _document: { value: null }, + //////////////////////////////////////////////////////////////////// + // + _headFragment: { + value: null + }, //////////////////////////////////////////////////////////////////// // content: { @@ -69,20 +74,38 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { // this.document = this.iframe.contentWindow.document; // - - - - - //this.document.head.innerHTML += this.content.head; - this.document.body.innerHTML = this.content.head + this.content.body; - - - - + this._headFragment = this.document.createElement('head'); + this._headFragment.addEventListener('DOMSubtreeModified', this.insertHeadContent.bind(this), false); + this._headFragment.innerHTML = this.content.head; // - if (this._callback) this._callback(); + this.document.body.addEventListener('DOMSubtreeModified', this.bodyContentLoaded.bind(this), false); + this.document.body.innerHTML += this.content.body; } }, + //////////////////////////////////////////////////////////////////// + // + bodyContentLoaded: { + value: function (e) { + // + this.document.body.removeEventListener('DOMSubtreeModified', this.bodyContentLoaded.bind(this), false); + // + if (this._callback) this._callback(); + } + }, + //////////////////////////////////////////////////////////////////// + // + insertHeadContent: { + value: function (e) { + // + this._headFragment.removeEventListener('DOMSubtreeModified', this.insertHeadContent, false); + // + for(var i in this._headFragment.childNodes) { + if(this._headFragment.childNodes[i].outerHTML) { + this.document.head.appendChild(this._headFragment.childNodes[i]); + } + } + } + }, //////////////////////////////////////////////////////////////////// // initCss: { -- 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/views/design.js | 38 +++++++++++++++++++++++++------------- 1 file changed, 25 insertions(+), 13 deletions(-) (limited to 'js/document/views') diff --git a/js/document/views/design.js b/js/document/views/design.js index a2bf965a..9fafc42f 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -46,14 +46,14 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { // initiliaze: { value: function (parent) { - // + //Creating iFrame for view this.iframe = document.createElement("iframe"); - // + //Setting default styles this.iframe.style.border = "none"; this.iframe.style.background = "#FFF"; this.iframe.style.height = "100%"; this.iframe.style.width = "100%"; - // + //Returning reference to iFrame created return parent.appendChild(this.iframe); } }, @@ -61,9 +61,11 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { // render: { value: function (callback) { - // + //Storing callback for dispatch ready this._callback = callback; + //Adding listener to know when template is loaded to then load user content this.iframe.addEventListener("load", this.onTemplateLoad.bind(this), true); + //TODO: Add source parameter and root (optional) this.iframe.src = "js/document/templates/montage-web/index.html"; } }, @@ -71,24 +73,33 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { // onTemplateLoad: { value: function (e) { - // + //TODO: Improve usage of this reference this.document = this.iframe.contentWindow.document; - // + //Looping through template styles and marking them with ninja data attribute for I/O clean up + 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'); + } + } + //Creating temp code fragement to load head this._headFragment = this.document.createElement('head'); + //Adding event listener to know when head is ready, event only dispatched once when using innerHTML this._headFragment.addEventListener('DOMSubtreeModified', this.insertHeadContent.bind(this), false); - this._headFragment.innerHTML = this.content.head; - // + //Inserting HTML and parsing URLs via mediator method + this._headFragment.innerHTML = (this.content.head.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)); + //Adding event listener to know when the body is ready and make callback this.document.body.addEventListener('DOMSubtreeModified', this.bodyContentLoaded.bind(this), false); - this.document.body.innerHTML += this.content.body; + //Inserting HTML and parsing URLs via mediator method + this.document.body.innerHTML += (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)); } }, //////////////////////////////////////////////////////////////////// // bodyContentLoaded: { value: function (e) { - // + //Removing event, only needed on initial load this.document.body.removeEventListener('DOMSubtreeModified', this.bodyContentLoaded.bind(this), false); - // + //Makign callback if specified if (this._callback) this._callback(); } }, @@ -96,10 +107,11 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { // insertHeadContent: { value: function (e) { - // + //Removing event this._headFragment.removeEventListener('DOMSubtreeModified', this.insertHeadContent, false); - // + //Adding the loaded nodes from code fragment into actual document head for(var i in this._headFragment.childNodes) { + //Minor hack to know node is actual HTML node if(this._headFragment.childNodes[i].outerHTML) { this.document.head.appendChild(this._headFragment.childNodes[i]); } -- cgit v1.2.3 From ca6c4961649836ca175b235cbb0b261b5f9fb307 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Wed, 2 May 2012 14:18:05 -0700 Subject: Switching DOM Mutation Events to HTML5 --- js/document/views/design.js | 60 ++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 54 insertions(+), 6 deletions(-) (limited to 'js/document/views') diff --git a/js/document/views/design.js b/js/document/views/design.js index 9fafc42f..30a74e9c 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -31,6 +31,11 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { _headFragment: { value: null }, + //////////////////////////////////////////////////////////////////// + // + _observer: { + value: {head: null, body: null} + }, //////////////////////////////////////////////////////////////////// // content: { @@ -64,7 +69,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { //Storing callback for dispatch ready this._callback = callback; //Adding listener to know when template is loaded to then load user content - this.iframe.addEventListener("load", this.onTemplateLoad.bind(this), true); + this.iframe.addEventListener("load", this.onTemplateLoad.bind(this), false); //TODO: Add source parameter and root (optional) this.iframe.src = "js/document/templates/montage-web/index.html"; } @@ -73,6 +78,8 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { // onTemplateLoad: { value: function (e) { + //Removing event + this.iframe.removeEventListener("load", this.onTemplateLoad.bind(this), false); //TODO: Improve usage of this reference this.document = this.iframe.contentWindow.document; //Looping through template styles and marking them with ninja data attribute for I/O clean up @@ -84,11 +91,13 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { //Creating temp code fragement to load head this._headFragment = this.document.createElement('head'); //Adding event listener to know when head is ready, event only dispatched once when using innerHTML - this._headFragment.addEventListener('DOMSubtreeModified', this.insertHeadContent.bind(this), false); + this._observer.head = new WebKitMutationObserver(this.insertHeadContent.bind(this)); + this._observer.head.observe(this._headFragment, {childList: true}); //Inserting HTML and parsing URLs via mediator method this._headFragment.innerHTML = (this.content.head.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)); - //Adding event listener to know when the body is ready and make callback - this.document.body.addEventListener('DOMSubtreeModified', this.bodyContentLoaded.bind(this), false); + //Adding event listener to know when the body is ready and make callback (using HTML5 new DOM Mutation Events) + this._observer.body = new WebKitMutationObserver(this.bodyContentLoaded.bind(this)); + this._observer.body.observe(this.document.body, {childList: true}); //Inserting HTML and parsing URLs via mediator method this.document.body.innerHTML += (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)); } @@ -98,7 +107,46 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { bodyContentLoaded: { value: function (e) { //Removing event, only needed on initial load - this.document.body.removeEventListener('DOMSubtreeModified', this.bodyContentLoaded.bind(this), false); + this._observer.body.disconnect(); + + + + + + + //Temporarily checking for disabled special case + var stags = this.document.getElementsByTagName('style'), + ltags = this.document.getElementsByTagName('link'); + // + for (var m = 0; m < ltags.length; m++) { + if (ltags[m].getAttribute('data-ninja-template') === null) { + if (ltags[m].getAttribute('disabled')) { + ltags[m].removeAttribute('disabled'); + ltags[m].setAttribute('data-ninja-disabled', 'true'); + } + } + } + // + for (var n = 0; n < stags.length; n++) { + if (stags[n].getAttribute('data-ninja-template') === null) { + if (stags[n].getAttribute('disabled')) { + stags[n].removeAttribute('disabled'); + stags[n].setAttribute('data-ninja-disabled', 'true'); + } + } + } + // + if(this.document.styleSheets.length > 0) { + for (var i = 0; i < this.document.styleSheets.length; i++) { + console.log(i); + } + } + + + + + + //Makign callback if specified if (this._callback) this._callback(); } @@ -108,7 +156,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { insertHeadContent: { value: function (e) { //Removing event - this._headFragment.removeEventListener('DOMSubtreeModified', this.insertHeadContent, false); + this._observer.head.disconnect(); //Adding the loaded nodes from code fragment into actual document head for(var i in this._headFragment.childNodes) { //Minor hack to know node is actual HTML node -- cgit v1.2.3 From 0e59bc28a205292e2efd3ce1fb9a5e539086366d Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Wed, 2 May 2012 16:00:15 -0700 Subject: Adding hack to allow for blank documents to open --- js/document/views/design.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) (limited to 'js/document/views') diff --git a/js/document/views/design.js b/js/document/views/design.js index 30a74e9c..fa9d412e 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -88,18 +88,19 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { this.document.styleSheets[k].ownerNode.setAttribute('data-ninja-template', 'true'); } } + //Creating temp code fragement to load head this._headFragment = this.document.createElement('head'); //Adding event listener to know when head is ready, event only dispatched once when using innerHTML this._observer.head = new WebKitMutationObserver(this.insertHeadContent.bind(this)); this._observer.head.observe(this._headFragment, {childList: true}); //Inserting HTML and parsing URLs via mediator method - this._headFragment.innerHTML = (this.content.head.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)); + this._headFragment.innerHTML = (this.content.head.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)); //Adding event listener to know when the body is ready and make callback (using HTML5 new DOM Mutation Events) this._observer.body = new WebKitMutationObserver(this.bodyContentLoaded.bind(this)); this._observer.body.observe(this.document.body, {childList: true}); //Inserting HTML and parsing URLs via mediator method - this.document.body.innerHTML += (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)); + this.document.body.innerHTML += ''+(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)); } }, //////////////////////////////////////////////////////////////////// @@ -108,6 +109,10 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { value: function (e) { //Removing event, only needed on initial load this._observer.body.disconnect(); + //Removing loading container + this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]); + + @@ -138,7 +143,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { // if(this.document.styleSheets.length > 0) { for (var i = 0; i < this.document.styleSheets.length; i++) { - console.log(i); + // } } @@ -147,6 +152,8 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { + + //Makign callback if specified if (this._callback) this._callback(); } -- cgit v1.2.3 From c4114992337ec8b3c37c66ab17d0a45d033993f2 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 3 May 2012 11:43:46 -0700 Subject: Reloading local stylesheets Added the reload method of local linked styles, still need to parse style contents for URLs and also add cross-domain stylesheet support. --- js/document/views/design.js | 133 +++++++++++++++++++++++++++++--------------- 1 file changed, 89 insertions(+), 44 deletions(-) (limited to 'js/document/views') diff --git a/js/document/views/design.js b/js/document/views/design.js index fa9d412e..e5213761 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -88,7 +88,6 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { this.document.styleSheets[k].ownerNode.setAttribute('data-ninja-template', 'true'); } } - //Creating temp code fragement to load head this._headFragment = this.document.createElement('head'); //Adding event listener to know when head is ready, event only dispatched once when using innerHTML @@ -103,12 +102,29 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { this.document.body.innerHTML += ''+(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)); } }, + //////////////////////////////////////////////////////////////////// + // + insertHeadContent: { + value: function (e) { + //Removing event + this._observer.head.disconnect(); + this._observer.head = null; + //Adding the loaded nodes from code fragment into actual document head + for(var i in this._headFragment.childNodes) { + //Minor hack to know node is actual HTML node + if(this._headFragment.childNodes[i].outerHTML) { + this.document.head.appendChild(this._headFragment.childNodes[i]); + } + } + } + }, //////////////////////////////////////////////////////////////////// // bodyContentLoaded: { value: function (e) { //Removing event, only needed on initial load this._observer.body.disconnect(); + this._observer.body = null; //Removing loading container this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]); @@ -116,34 +132,28 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { - - - - //Temporarily checking for disabled special case + // var stags = this.document.getElementsByTagName('style'), ltags = this.document.getElementsByTagName('link'); - // - for (var m = 0; m < ltags.length; m++) { - if (ltags[m].getAttribute('data-ninja-template') === null) { - if (ltags[m].getAttribute('disabled')) { - ltags[m].removeAttribute('disabled'); - ltags[m].setAttribute('data-ninja-disabled', 'true'); - } - } - } - // - for (var n = 0; n < stags.length; n++) { - if (stags[n].getAttribute('data-ninja-template') === null) { - if (stags[n].getAttribute('disabled')) { - stags[n].removeAttribute('disabled'); - stags[n].setAttribute('data-ninja-disabled', 'true'); - } - } - } - // - if(this.document.styleSheets.length > 0) { - for (var i = 0; i < this.document.styleSheets.length; i++) { + //Temporarily checking for disabled special case (we must enabled for Ninja to access styles) + this.ninjaDisableAttribute(stags); + this.ninjaDisableAttribute(ltags); + + + + + //Looping through all link tags to reload into style tags + if(ltags.length > 0) { + for (var i = 0; i < ltags.length; i++) { // + if (ltags[i].href) { + //TODO: Verify this works for tags in body as well (working in head) + this.document.head.insertBefore(this.getStyleTagFromCssFile(ltags[i]), ltags[i]) || this.document.body.insertBefore(this.getStyleTagFromCssFile(ltags[i]), ltags[i]); + //Disabling tag once it has been reloaded + ltags[i].setAttribute('disabled', 'true'); + } else { + //Error: broken? + } } } @@ -151,33 +161,68 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { - - - //Makign callback if specified if (this._callback) this._callback(); } }, //////////////////////////////////////////////////////////////////// // - insertHeadContent: { - value: function (e) { - //Removing event - this._observer.head.disconnect(); - //Adding the loaded nodes from code fragment into actual document head - for(var i in this._headFragment.childNodes) { - //Minor hack to know node is actual HTML node - if(this._headFragment.childNodes[i].outerHTML) { - this.document.head.appendChild(this._headFragment.childNodes[i]); - } - } - } - }, + ninjaDisableAttribute: { + value: function (tags) { + //Looping through tags + for (var i = 0; i < tags.length; i++) { + if (tags[i].getAttribute('data-ninja-template') === null) { + if (tags[i].getAttribute('disabled')) { + tags[i].removeAttribute('disabled'); + tags[i].setAttribute('data-ninja-disabled', 'true'); + } + } + } + } + }, //////////////////////////////////////////////////////////////////// // - initCss: { - value: function () { + getStyleTagFromCssFile: { + value: function (linktag) { // + var tag, cssUrl, fileUri, cssData, docRootUrl; + //TODO: Remove usage of hack reference of URL + docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/')); + //Checking for location of href to load (special case for cross-domain) + if (linktag.href.indexOf(this.application.ninja.coreIoApi.rootUrl) !== -1) { + //Getting file URI (not URL since we must load through I/O API) + cssUrl = linktag.href.split(this.application.ninja.coreIoApi.rootUrl)[1]; + fileUri = this.application.ninja.coreIoApi.cloudData.root+cssUrl; + //Loading data from CSS file + cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri}); + // + } else { + //Cross-domain resource + } + //TODO: Improve into single method + fileCouldDirUrl = linktag.href.split(linktag.href.split('/')[linktag.href.split('/').length-1])[0]; + //Creating style tag to load CSS content into + tag = this.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 linktag.attributes) { + if (linktag.attributes[n].value && linktag.attributes[n].name !== 'disabled') { + if (linktag.attributes[n].value.indexOf(docRootUrl) !== -1) { + tag.setAttribute(linktag.attributes[n].name, linktag.attributes[n].value.split(docRootUrl)[1]); + } else { + tag.setAttribute(linktag.attributes[n].name, linktag.attributes[n].value); + } + } + } + // + //tag.innerHTML = cssData.content.replace(/url\(()(.+?)\1\)/g, detectUrl); + tag.innerHTML = cssData.content; + // + return tag; } }, //////////////////////////////////////////////////////////////////// -- cgit v1.2.3 From 6356edefaea3fe78969c53fec2d371cb8f42d820 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 3 May 2012 15:28:38 -0700 Subject: Full CSS support on open Add full CSS for files on open (including loading cross-domain). This is only for files that are opened. --- js/document/views/design.js | 87 +++++++++++++++++++++++++++++++-------------- 1 file changed, 61 insertions(+), 26 deletions(-) (limited to 'js/document/views') diff --git a/js/document/views/design.js b/js/document/views/design.js index e5213761..4f598305 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -127,21 +127,12 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { this._observer.body = null; //Removing loading container this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]); - - - - - - // + //Getting style and link tags in document var stags = this.document.getElementsByTagName('style'), ltags = this.document.getElementsByTagName('link'); //Temporarily checking for disabled special case (we must enabled for Ninja to access styles) this.ninjaDisableAttribute(stags); this.ninjaDisableAttribute(ltags); - - - - //Looping through all link tags to reload into style tags if(ltags.length > 0) { for (var i = 0; i < ltags.length; i++) { @@ -152,14 +143,15 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { //Disabling tag once it has been reloaded ltags[i].setAttribute('disabled', 'true'); } else { - //Error: broken? + //Error: TBD + //TODO: Determine what link tags would not have href data and error } } } + //TODO: Load webGL (blocking) - - + //TODO: Load Montage Components (blocking) //Makign callback if specified if (this._callback) this._callback(); @@ -186,6 +178,9 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { value: function (linktag) { // var tag, cssUrl, fileUri, cssData, docRootUrl; + //Creating style tag to load CSS content into + tag = this.document.createElement('style'); + tag.setAttribute('type', 'text/css'); //TODO: Remove usage of hack reference of URL docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/')); //Checking for location of href to load (special case for cross-domain) @@ -195,19 +190,19 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { fileUri = this.application.ninja.coreIoApi.cloudData.root+cssUrl; //Loading data from CSS file cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri}); - // + //Setting properties of locally loaded styles + 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]); } else { - //Cross-domain resource + //Cross-domain content + cssData = this.application.ninja.coreIoApi.readExternalFile({url: linktag.href, binary: false}); + //Setting properties of externally loaded styles + tag.setAttribute('data-ninja-external-url', linktag.href); + tag.setAttribute('data-ninja-file-read-only', "true"); + tag.setAttribute('data-ninja-file-name', linktag.href.split('/')[linktag.href.split('/').length-1]); } - //TODO: Improve into single method - fileCouldDirUrl = linktag.href.split(linktag.href.split('/')[linktag.href.split('/').length-1])[0]; - //Creating style tag to load CSS content into - tag = this.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 linktag.attributes) { if (linktag.attributes[n].value && linktag.attributes[n].name !== 'disabled') { @@ -218,9 +213,49 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { } } } + + + + + + + + + + + + //////////////////////////////////////////////////////// + //////////////////////////////////////////////////////// + //TODO: Clean up and make proper method + fileCouldDirUrl = linktag.href.split(linktag.href.split('/')[linktag.href.split('/').length-1])[0]; + // + if (cssData && cssData.content) { + tag.innerHTML = cssData.content.replace(/url\(()(.+?)\1\)/g, parseToNinjaUrl.bind(this)); + } else { + //Error: no data was loaded + } + // + function parseToNinjaUrl (prop) { + // + return prop.replace(/[^()\\""\\'']+/g, prefixWithNinjaUrl.bind(this)); + } // - //tag.innerHTML = cssData.content.replace(/url\(()(.+?)\1\)/g, detectUrl); - tag.innerHTML = cssData.content; + function prefixWithNinjaUrl (url) { + // + if (url !== 'url' && !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; + } + //////////////////////////////////////////////////////// + //////////////////////////////////////////////////////// + + + + + + // return tag; } -- 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/views/design.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/document/views') diff --git a/js/document/views/design.js b/js/document/views/design.js index 4f598305..6cce229c 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -49,7 +49,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { }, //////////////////////////////////////////////////////////////////// // - initiliaze: { + initialize: { value: function (parent) { //Creating iFrame for view this.iframe = document.createElement("iframe"); -- 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/views/design.js | 32 +++++++++++++++++++++++++++----- 1 file changed, 27 insertions(+), 5 deletions(-) (limited to 'js/document/views') diff --git a/js/document/views/design.js b/js/document/views/design.js index 6cce229c..8c6ace8e 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -65,7 +65,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { //////////////////////////////////////////////////////////////////// // render: { - value: function (callback) { + value: function (callback, template) {//TODO: Add support for templates //Storing callback for dispatch ready this._callback = callback; //Adding listener to know when template is loaded to then load user content @@ -116,6 +116,8 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { this.document.head.appendChild(this._headFragment.childNodes[i]); } } + //Garbage collection + this._headFragment = null; } }, //////////////////////////////////////////////////////////////////// @@ -129,13 +131,15 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]); //Getting style and link tags in document var stags = this.document.getElementsByTagName('style'), - ltags = this.document.getElementsByTagName('link'); + ltags = this.document.getElementsByTagName('link'), + scripttags = this.document.getElementsByTagName('script'), + i, n, webgldata; //Temporarily checking for disabled special case (we must enabled for Ninja to access styles) this.ninjaDisableAttribute(stags); this.ninjaDisableAttribute(ltags); //Looping through all link tags to reload into style tags if(ltags.length > 0) { - for (var i = 0; i < ltags.length; i++) { + for (i = 0; i < ltags.length; i++) { // if (ltags[i].href) { //TODO: Verify this works for tags in body as well (working in head) @@ -148,8 +152,26 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { } } } - - //TODO: Load webGL (blocking) + //Checking for webGL Data + for (var w in scripttags) { + // + webgldata = null; + // + if (scripttags[w].getAttribute) { + if (scripttags[w].getAttribute('data-ninja-webgl') !== null) { + //TODO: Add logic to handle more than one data tag + webgldata = JSON.parse((scripttags[w].innerHTML.replace("(", "")).replace(")", "")); + } + // + if (webgldata) { + for (n = 0; webgldata.data[n]; n++) { + webgldata.data[n] = unescape(webgldata.data[n]); + } + //this._templateDocument.webgl = webgldata.data; + this.model.glData = webgldata.data; + } + } + } //TODO: Load Montage Components (blocking) -- 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/views/design.js | 134 ++++++++++++++++---------------------------- 1 file changed, 49 insertions(+), 85 deletions(-) (limited to 'js/document/views') diff --git a/js/document/views/design.js b/js/document/views/design.js index 8c6ace8e..2b8ccb26 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -131,9 +131,8 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]); //Getting style and link tags in document var stags = this.document.getElementsByTagName('style'), - ltags = this.document.getElementsByTagName('link'), - scripttags = this.document.getElementsByTagName('script'), - i, n, webgldata; + ltags = this.document.getElementsByTagName('link'), i, + scripttags = this.document.getElementsByTagName('script'); //Temporarily checking for disabled special case (we must enabled for Ninja to access styles) this.ninjaDisableAttribute(stags); this.ninjaDisableAttribute(ltags); @@ -152,28 +151,16 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { } } } - //Checking for webGL Data - for (var w in scripttags) { - // - webgldata = null; - // - if (scripttags[w].getAttribute) { - if (scripttags[w].getAttribute('data-ninja-webgl') !== null) { - //TODO: Add logic to handle more than one data tag - webgldata = JSON.parse((scripttags[w].innerHTML.replace("(", "")).replace(")", "")); - } - // - if (webgldata) { - for (n = 0; webgldata.data[n]; n++) { - webgldata.data[n] = unescape(webgldata.data[n]); - } - //this._templateDocument.webgl = webgldata.data; - this.model.glData = webgldata.data; - } - } - } + //Checking and initializing webGL + if (scripttags.length > 0) { + this.initWebGl(scripttags); + } //Else there is not data to parse + + //TODO: Load Montage Components (blocking) + //this.initMontage(); + //Makign callback if specified if (this._callback) this._callback(); @@ -195,31 +182,28 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { } }, //////////////////////////////////////////////////////////////////// - // + //TODO: Move to url-parser helper class getStyleTagFromCssFile: { value: function (linktag) { // - var tag, cssUrl, fileUri, cssData, docRootUrl; + var tag, cssData, + //TODO: Remove usage of hack reference of URL + docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/')); //Creating style tag to load CSS content into tag = this.document.createElement('style'); tag.setAttribute('type', 'text/css'); - //TODO: Remove usage of hack reference of URL - docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/')); //Checking for location of href to load (special case for cross-domain) if (linktag.href.indexOf(this.application.ninja.coreIoApi.rootUrl) !== -1) { - //Getting file URI (not URL since we must load through I/O API) - cssUrl = linktag.href.split(this.application.ninja.coreIoApi.rootUrl)[1]; - fileUri = this.application.ninja.coreIoApi.cloudData.root+cssUrl; - //Loading data from CSS file - cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri}); + //Loading data from file + cssData = this.urlParser.loadLocalStyleSheet(linktag.href); //Setting properties of locally loaded styles - 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]); + tag.setAttribute('data-ninja-uri', cssData.fileUri); + tag.setAttribute('data-ninja-file-url', cssData.cssUrl); + tag.setAttribute('data-ninja-file-read-only', cssData.writable); + tag.setAttribute('data-ninja-file-name', cssData.cssUrl.split('/')[cssData.cssUrl.split('/').length-1]); } else { //Cross-domain content - cssData = this.application.ninja.coreIoApi.readExternalFile({url: linktag.href, binary: false}); + cssData = this.urlParser.loadExternalStyleSheet(linktag.href); //Setting properties of externally loaded styles tag.setAttribute('data-ninja-external-url', linktag.href); tag.setAttribute('data-ninja-file-read-only', "true"); @@ -235,58 +219,38 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { } } } - - - - - - - - - - - - //////////////////////////////////////////////////////// - //////////////////////////////////////////////////////// - //TODO: Clean up and make proper method - fileCouldDirUrl = linktag.href.split(linktag.href.split('/')[linktag.href.split('/').length-1])[0]; - // - if (cssData && cssData.content) { - tag.innerHTML = cssData.content.replace(/url\(()(.+?)\1\)/g, parseToNinjaUrl.bind(this)); - } else { - //Error: no data was loaded - } - // - function parseToNinjaUrl (prop) { - // - return prop.replace(/[^()\\""\\'']+/g, prefixWithNinjaUrl.bind(this)); - } - // - function prefixWithNinjaUrl (url) { - // - if (url !== 'url' && !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; - } - //////////////////////////////////////////////////////// - //////////////////////////////////////////////////////// - - - - - - - // + //Setting content from loaded data + if (cssData.content) tag.innerHTML = cssData.content; + //Returning