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 +++++++++++++++++--------------------- js/document/helpers/url-parser.js | 24 +++++++++ js/document/models/base.js | 34 +++++++++++-- js/document/views/base.js | 53 +++++++++++++++++++- js/document/views/design.js | 49 +++++++++++++++++- 5 files changed, 200 insertions(+), 62 deletions(-) create mode 100755 js/document/helpers/url-parser.js (limited to 'js/document') 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; diff --git a/js/document/helpers/url-parser.js b/js/document/helpers/url-parser.js new file mode 100755 index 00000000..878c79e9 --- /dev/null +++ b/js/document/helpers/url-parser.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.UrlParser = Montage.create(Component, { + //////////////////////////////////////////////////////////////////// + // + hasTemplate: { + enumerable: false, + value: false + } + //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// +}); +//////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////// \ No newline at end of file diff --git a/js/document/models/base.js b/js/document/models/base.js index f237e793..f4dbbc0b 100755 --- a/js/document/models/base.js +++ b/js/document/models/base.js @@ -21,18 +21,26 @@ exports.BaseDocumentModel = Montage.create(Montage, { file: { value: null }, - + //////////////////////////////////////////////////////////////////// + // _name: { value: null }, - + //////////////////////////////////////////////////////////////////// + // _isActive: { value: null }, - + //////////////////////////////////////////////////////////////////// + // _needsSave: { value: null }, + //////////////////////////////////////////////////////////////////// + // + _currentView: { + value: null + }, //////////////////////////////////////////////////////////////////// // njdata: { @@ -42,6 +50,26 @@ exports.BaseDocumentModel = Montage.create(Montage, { // views: { value: null + }, + //////////////////////////////////////////////////////////////////// + // + save: { + value: null + }, + //////////////////////////////////////////////////////////////////// + // + saveAs: { + value: null + }, + //////////////////////////////////////////////////////////////////// + // + saveAll: { + value: null + }, + //////////////////////////////////////////////////////////////////// + // + close: { + value: null } //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// 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/document-html.js | 191 ++++++++++----------------- js/document/helpers/url-parser.js | 23 +++- js/document/models/base.js | 55 ++++++-- js/document/models/html.js | 1 - js/document/templates/montage-web/index.html | 1 - js/document/views/base.js | 15 +-- js/document/views/design.js | 72 ++++++++-- 7 files changed, 198 insertions(+), 160 deletions(-) (limited to 'js/document') 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; - } } }); //////////////////////////////////////////////////////////////////////// diff --git a/js/document/helpers/url-parser.js b/js/document/helpers/url-parser.js index 878c79e9..a1a7406a 100755 --- a/js/document/helpers/url-parser.js +++ b/js/document/helpers/url-parser.js @@ -14,8 +14,29 @@ exports.UrlParser = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // hasTemplate: { - enumerable: false, value: false + }, + //////////////////////////////////////////////////////////////////// + // + parseStyles: { + value: function (styles) { + // + } + }, + //////////////////////////////////////////////////////////////////// + // + loadLocalStyleSheet: { + value: function (path) { + // + } + } + , + //////////////////////////////////////////////////////////////////// + // + loadExternalStyleSheet: { + value: function (path) { + // + } } //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// diff --git a/js/document/models/base.js b/js/document/models/base.js index f4dbbc0b..3bb69f6b 100755 --- a/js/document/models/base.js +++ b/js/document/models/base.js @@ -6,36 +6,49 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot //////////////////////////////////////////////////////////////////////// // -var Montage = require("montage/core/core").Montage; +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; //////////////////////////////////////////////////////////////////////// // -exports.BaseDocumentModel = Montage.create(Montage, { +exports.BaseDocumentModel = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // hasTemplate: { - enumerable: false, value: false }, //////////////////////////////////////////////////////////////////// // - file: { + _file: { value: null }, - //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// // - _name: { - value: null + file: { + get: function() {return this._file;}, + set: function(value) {this._file = value;} }, //////////////////////////////////////////////////////////////////// // _isActive: { value: null + }, + //////////////////////////////////////////////////////////////////// + // + isActive: { + get: function() {return this._isActive;}, + set: function(value) {this._isActive = value;} }, //////////////////////////////////////////////////////////////////// // _needsSave: { value: null }, + //////////////////////////////////////////////////////////////////// + // + needsSave: { + get: function() {return this._needsSave;}, + set: function(value) {this._needsSave = value;} + }, //////////////////////////////////////////////////////////////////// // _currentView: { @@ -43,33 +56,49 @@ exports.BaseDocumentModel = Montage.create(Montage, { }, //////////////////////////////////////////////////////////////////// // - njdata: { - value: null + currentView: { + get: function() {return this._currentView;}, + set: function(value) {this._currentView = value;} }, //////////////////////////////////////////////////////////////////// // views: { value: null }, + //////////////////////////////////////////////////////////////////// + // + switchViewTo: { + value: function () { + // + } + }, //////////////////////////////////////////////////////////////////// // save: { - value: null + value: function () { + // + } }, //////////////////////////////////////////////////////////////////// // saveAs: { - value: null + value: function () { + // + } }, //////////////////////////////////////////////////////////////////// // saveAll: { - value: null + value: function () { + // + } }, //////////////////////////////////////////////////////////////////// // close: { - value: null + value: function () { + // + } } //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// diff --git a/js/document/models/html.js b/js/document/models/html.js index ff57454b..f45a0e21 100755 --- a/js/document/models/html.js +++ b/js/document/models/html.js @@ -14,7 +14,6 @@ exports.HtmlDocumentModel = Montage.create(BaseDocumentModel, { //////////////////////////////////////////////////////////////////// // hasTemplate: { - enumerable: false, value: false } //////////////////////////////////////////////////////////////////// diff --git a/js/document/templates/montage-web/index.html b/js/document/templates/montage-web/index.html index caebc8d0..696904b4 100755 --- a/js/document/templates/montage-web/index.html +++ b/js/document/templates/montage-web/index.html @@ -32,7 +32,6 @@ - \ No newline at end of file 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 d048006a619859359191cb396a05ec91a5b293ff Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 1 May 2012 15:36:38 -0700 Subject: Cleaning up template --- js/document/templates/montage-web/default_html.css | 28 ------------- js/document/templates/montage-web/index.html | 26 +++++++++++- js/document/templates/montage-web/main.js | 49 ++++++++++++++++++++++ .../templates/montage-web/main.reel/main.js | 49 ---------------------- 4 files changed, 73 insertions(+), 79 deletions(-) delete mode 100755 js/document/templates/montage-web/default_html.css create mode 100644 js/document/templates/montage-web/main.js delete mode 100644 js/document/templates/montage-web/main.reel/main.js (limited to 'js/document') diff --git a/js/document/templates/montage-web/default_html.css b/js/document/templates/montage-web/default_html.css deleted file mode 100755 index e62a20a9..00000000 --- a/js/document/templates/montage-web/default_html.css +++ /dev/null @@ -1,28 +0,0 @@ -/* -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. - */ - -* { - -webkit-transition-duration: 0s !important; - -webkit-animation-duration: 0s !important; - -webkit-animation-name: none !important; -} - -body { - margin: 0; - padding: 0; - - position: absolute; - -webkit-transform-style: preserve-3d; - -webkit-perspective: 1400px; -} - -.active-element-outline { - outline: #adff2f solid 2px; -} - -.nj-preset-transition { - -webkit-transition: all 450ms linear !important; -} \ No newline at end of file diff --git a/js/document/templates/montage-web/index.html b/js/document/templates/montage-web/index.html index 696904b4..67cfec86 100755 --- a/js/document/templates/montage-web/index.html +++ b/js/document/templates/montage-web/index.html @@ -10,8 +10,30 @@ Ninja Prototype + + @@ -24,7 +46,7 @@ diff --git a/js/document/templates/montage-web/main.js b/js/document/templates/montage-web/main.js new file mode 100644 index 00000000..d5ac88d5 --- /dev/null +++ b/js/document/templates/montage-web/main.js @@ -0,0 +1,49 @@ +/* + 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.Main = Montage.create(Component, { + + hasTemplate: { + value: false + }, + + /** + * Adding window hooks to callback into this object from Ninja. + */ + templateDidLoad: { + value: function(){ + var self = this; + window.addComponent = function(element, data, callback) { + var component; + + component = require.async(data.path) + .then(function(component) { + var componentRequire = component[data.name]; + var componentInstance = componentRequire.create(); + + componentInstance.element = element; + + componentInstance.needsDraw = true; + componentInstance.ownerComponent = self; + + callback(componentInstance, element); + }) + .end(); + + }; + + // Dispatch event when this template has loaded. + /* + var newEvent = document.createEvent( "CustomEvent" ); + newEvent.initCustomEvent( "userTemplateDidLoad", false, true ); + document.body.dispatchEvent( newEvent ); + */ + + } + } +}); \ No newline at end of file diff --git a/js/document/templates/montage-web/main.reel/main.js b/js/document/templates/montage-web/main.reel/main.js deleted file mode 100644 index d5ac88d5..00000000 --- a/js/document/templates/montage-web/main.reel/main.js +++ /dev/null @@ -1,49 +0,0 @@ -/* - 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.Main = Montage.create(Component, { - - hasTemplate: { - value: false - }, - - /** - * Adding window hooks to callback into this object from Ninja. - */ - templateDidLoad: { - value: function(){ - var self = this; - window.addComponent = function(element, data, callback) { - var component; - - component = require.async(data.path) - .then(function(component) { - var componentRequire = component[data.name]; - var componentInstance = componentRequire.create(); - - componentInstance.element = element; - - componentInstance.needsDraw = true; - componentInstance.ownerComponent = self; - - callback(componentInstance, element); - }) - .end(); - - }; - - // Dispatch event when this template has loaded. - /* - var newEvent = document.createEvent( "CustomEvent" ); - newEvent.initCustomEvent( "userTemplateDidLoad", false, true ); - document.body.dispatchEvent( newEvent ); - */ - - } - } -}); \ No newline at end of file -- 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') 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 ++++++++++++++++++++++++++++++-------------- js/document/views/design.js | 45 ++++++++++++++++++++------- 2 files changed, 85 insertions(+), 34 deletions(-) (limited to 'js/document') 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 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/document-html.js | 18 ++---------------- js/document/views/design.js | 38 +++++++++++++++++++++++++------------- 2 files changed, 27 insertions(+), 29 deletions(-) (limited to 'js/document') 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; - } - */ + } //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 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') 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/templates/montage-web/index.html | 4 ++++ js/document/views/design.js | 13 ++++++++++--- 2 files changed, 14 insertions(+), 3 deletions(-) (limited to 'js/document') diff --git a/js/document/templates/montage-web/index.html b/js/document/templates/montage-web/index.html index 67cfec86..1c6b6287 100755 --- a/js/document/templates/montage-web/index.html +++ b/js/document/templates/montage-web/index.html @@ -25,6 +25,10 @@ -webkit-transform-style: preserve-3d; -webkit-perspective: 1400px; } + + ninjaloadinghack { + display: none; + } .active-element-outline { outline: #adff2f solid 2px; 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 me