From 648ee61ae84216d0236e0dbc211addc13b2cfa3a Mon Sep 17 00:00:00 2001 From: Kris Kowal Date: Fri, 6 Jul 2012 11:52:06 -0700 Subject: Expand tabs --- js/document/views/base.js | 72 ++--- js/document/views/code.js | 18 +- js/document/views/design.js | 638 ++++++++++++++++++++++---------------------- 3 files changed, 364 insertions(+), 364 deletions(-) (limited to 'js/document/views') diff --git a/js/document/views/base.js b/js/document/views/base.js index e771702d..0f40ab47 100755 --- a/js/document/views/base.js +++ b/js/document/views/base.js @@ -30,63 +30,63 @@ POSSIBILITY OF SUCH DAMAGE. //////////////////////////////////////////////////////////////////////// // -var Montage = require("montage/core/core").Montage, - Component = require("montage/ui/component").Component, - UrlParser = require("js/document/helpers/url-parser").UrlParser; +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component, + UrlParser = require("js/document/helpers/url-parser").UrlParser; //////////////////////////////////////////////////////////////////////// -// +// exports.BaseDocumentView = Montage.create(Component, { - //////////////////////////////////////////////////////////////////// - // - hasTemplate: { + //////////////////////////////////////////////////////////////////// + // + hasTemplate: { value: false }, //////////////////////////////////////////////////////////////////// - // - urlParser: { + // + urlParser: { value: UrlParser }, - //////////////////////////////////////////////////////////////////// - // - _iframe: { + //////////////////////////////////////////////////////////////////// + // + _iframe: { value: null }, //////////////////////////////////////////////////////////////////// - //TODO: This should be renamed to better illustrate it's a container (iframe for design, div for code view) - iframe: { - get: function() {return this._iframe;}, + //TODO: This should be renamed to better illustrate it's a container (iframe for design, div for code view) + iframe: { + get: function() {return this._iframe;}, set: function(value) {this._iframe= value;} }, - //////////////////////////////////////////////////////////////////// - // - show: { + //////////////////////////////////////////////////////////////////// + // + show: { value: function (callback) { - if (this.iframe) { - this.iframe.style.display = 'block'; + if (this.iframe) { + this.iframe.style.display = 'block'; this.iframe.style.opacity = 1; - } else { - console.log('Error: View has no iframe to show!'); - } - // - if (callback) callback(); + } else { + console.log('Error: View has no iframe to show!'); + } + // + if (callback) callback(); } }, //////////////////////////////////////////////////////////////////// - // - hide: { + // + hide: { value: function (callback) { - if (this.iframe) { - this.iframe.style.display = 'none'; + if (this.iframe) { + this.iframe.style.display = 'none'; this.iframe.style.opacity = 0; - } else { - console.log('Error: View has no iframe to hide!'); - } - // - if (callback) callback(); + } else { + console.log('Error: View has no iframe to hide!'); + } + // + if (callback) callback(); } } - //////////////////////////////////////////////////////////////////// - //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// }); //////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////// diff --git a/js/document/views/code.js b/js/document/views/code.js index 7df7e1c6..6648b353 100755 --- a/js/document/views/code.js +++ b/js/document/views/code.js @@ -30,15 +30,15 @@ POSSIBILITY OF SUCH DAMAGE. //////////////////////////////////////////////////////////////////////// // -var Montage = require("montage/core/core").Montage, - Component = require("montage/ui/component").Component, - BaseDocumentView = require("js/document/views/base").BaseDocumentView; +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component, + BaseDocumentView = require("js/document/views/base").BaseDocumentView; //////////////////////////////////////////////////////////////////////// // exports.CodeDocumentView = Montage.create(BaseDocumentView, { - //////////////////////////////////////////////////////////////////// - // - hasTemplate: { + //////////////////////////////////////////////////////////////////// + // + hasTemplate: { value: false }, //////////////////////////////////////////////////////////////////// @@ -103,7 +103,7 @@ exports.CodeDocumentView = Montage.create(BaseDocumentView, { //Creates a new instance of a code editor initializeTextView: { value: function(file, textDocument) { - // + // var type; // switch(file.extension) { @@ -146,7 +146,7 @@ exports.CodeDocumentView = Montage.create(BaseDocumentView, { // show: { value: function (callback) { - // + // this.textViewContainer.style.display = "block"; // if (callback) callback(); @@ -156,7 +156,7 @@ exports.CodeDocumentView = Montage.create(BaseDocumentView, { // hide: { value: function (callback) { - // + // this.textViewContainer.style.display = "none"; // if (callback) callback(); diff --git a/js/document/views/design.js b/js/document/views/design.js index 44ed2c65..b92f7619 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -30,50 +30,50 @@ POSSIBILITY OF SUCH DAMAGE. //////////////////////////////////////////////////////////////////////// // -var Montage = require("montage/core/core").Montage, - BaseDocumentView = require("js/document/views/base").BaseDocumentView, +var Montage = require("montage/core/core").Montage, + BaseDocumentView = require("js/document/views/base").BaseDocumentView, ElementModel = require("js/models/element-model"); //////////////////////////////////////////////////////////////////////// -// +// exports.DesignDocumentView = Montage.create(BaseDocumentView, { - //////////////////////////////////////////////////////////////////// - // - hasTemplate: { + //////////////////////////////////////////////////////////////////// + // + hasTemplate: { value: false }, //////////////////////////////////////////////////////////////////// - // + // _callback: { - value: null + value: null }, //////////////////////////////////////////////////////////////////// - // + // _viewCallback: { value: null }, //////////////////////////////////////////////////////////////////// - // + // _template: { - value: null + value: null }, //////////////////////////////////////////////////////////////////// - // - _bodyFragment: { + // + _bodyFragment: { value: null }, //////////////////////////////////////////////////////////////////// - // - _headFragment: { + // + _headFragment: { value: null }, //////////////////////////////////////////////////////////////////// - // - _observer: { + // + _observer: { value: {head: null, body: null} }, //////////////////////////////////////////////////////////////////// - // - content: { + // + content: { value: null }, //////////////////////////////////////////////////////////////////// @@ -92,29 +92,29 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { value: null }, //////////////////////////////////////////////////////////////////// - // + // baseHref: { get: function() {return this._baseHref;}, set: function(value) {this._baseHref = value;} }, //////////////////////////////////////////////////////////////////// - // - _document: { + // + _document: { value: null }, //////////////////////////////////////////////////////////////////// - // + // document: { get: function() {return this._document;}, set: function(value) {this._document = value;} }, //////////////////////////////////////////////////////////////////// - // + // _documentRoot: { value: null }, //////////////////////////////////////////////////////////////////// - // + // documentRoot: { get: function() {return this._documentRoot;}, set: function(value) {this._documentRoot = value;} @@ -140,12 +140,12 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { }, //////////////////////////////////////////////////////////////////// // - initialize: { + initialize: { value: function (parent) { - //Creating iFrame for view - this.iframe = document.createElement("iframe"); - //Setting default styles - this.iframe.style.border = "none"; + //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%"; @@ -154,190 +154,190 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { } }, //////////////////////////////////////////////////////////////////// - // - render: { + // + render: { value: function (callback, template, viewCallback) { - //TODO: Remove, this is a temp patch for webRequest API gate - this.application.ninja.documentController.redirectRequests = false; - //Storing callback for dispatch ready - this._callback = callback; - this._template = template; + //TODO: Remove, this is a temp patch for webRequest API gate + this.application.ninja.documentController.redirectRequests = false; + //Storing callback for dispatch ready + this._callback = callback; + this._template = template; this._viewCallback = viewCallback; - //Adding listener to know when template is loaded to then load user content - this.iframe.addEventListener("load", this.onTemplateLoad.bind(this), false); - //TODO: Add source parameter and root (optional) - if (template && template.type === 'banner' && template.size) { - this.iframe.src = "js/document/templates/banner/index.html"; - } else { - this.iframe.src = "js/document/templates/html/index.html"; - } + //Adding listener to know when template is loaded to then load user content + this.iframe.addEventListener("load", this.onTemplateLoad.bind(this), false); + //TODO: Add source parameter and root (optional) + if (template && template.type === 'banner' && template.size) { + this.iframe.src = "js/document/templates/banner/index.html"; + } else { + this.iframe.src = "js/document/templates/html/index.html"; + } } }, //////////////////////////////////////////////////////////////////// - // + // onTemplateLoad: { value: function (e) { - //TODO: Remove, this is a temp patch for webRequest API gate - this.application.ninja.documentController.redirectRequests = true; - //TODO: Add support to constructing URL with a base HREF - var basetag = this.content.document.getElementsByTagName('base'); - //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 - for (var k in this.document.styleSheets) { - if (this.document.styleSheets[k].ownerNode && this.document.styleSheets[k].ownerNode.setAttribute) { - this.document.styleSheets[k].ownerNode.setAttribute('data-ninja-template', 'true'); - } + //TODO: Remove, this is a temp patch for webRequest API gate + this.application.ninja.documentController.redirectRequests = true; + //TODO: Add support to constructing URL with a base HREF + var basetag = this.content.document.getElementsByTagName('base'); + //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 + 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'); + } } //Checking for a base URL if (basetag.length) { - if (basetag[basetag.length-1].getAttribute && basetag[basetag.length-1].getAttribute('href')) { - //Setting base HREF in model - this.baseHref = basetag[basetag.length-1].getAttribute('href'); - } - } - //Checking to content to be template - if (this._template) { - if (this._template.type === 'banner') { - //Loading contents into a fragment - this._bodyFragment = this.document.createElement('body'); - //Listening for content to be ready - this._observer.body = new WebKitMutationObserver(this.insertBannerContent.bind(this)); - this._observer.body.observe(this._bodyFragment, {childList: true}); - //Inserting HTML and parsing URLs via mediator method - this._bodyFragment.innerHTML = ''+(this.content.body.replace(/\b(href|src)\s*=\s*"([^"]*)"/g, this.application.ninja.ioMediator.tmplt.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator.tmplt))).replace(/url\(([^"]*)(.+?)\1\)/g, this.application.ninja.ioMediator.tmplt.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator.tmplt)); - } - } else { - //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.tmplt.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator.tmplt))).replace(/url\(([^"]*)(.+?)\1\)/g, this.application.ninja.ioMediator.tmplt.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator.tmplt)); - //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.tmplt.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator.tmplt))).replace(/url\(([^"]*)(.+?)\1\)/g, this.application.ninja.ioMediator.tmplt.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator.tmplt)); - //Copying attributes to maintain same properties as the - for (var n in this.content.document.body.attributes) { - if (this.content.document.body.attributes[n].value) { - this.document.body.setAttribute(this.content.document.body.attributes[n].name, this.content.document.body.attributes[n].value); - } - } - //Copying attributes to maintain same properties as the - for (var m in this.content.document.head.attributes) { - if (this.content.document.head.attributes[m].value) { - this.document.head.setAttribute(this.content.document.head.attributes[m].name, this.content.document.head.attributes[m].value); - } - } - //Copying attributes to maintain same properties as the - var htmlTagMem = this.content.document.getElementsByTagName('html')[0], htmlTagDoc = this.document.getElementsByTagName('html')[0]; - for (var m in htmlTagMem.attributes) { - if (htmlTagMem.attributes[m].value) { - htmlTagDoc.setAttribute(htmlTagMem.attributes[m].name, htmlTagMem.attributes[m].value); - } - } - } + if (basetag[basetag.length-1].getAttribute && basetag[basetag.length-1].getAttribute('href')) { + //Setting base HREF in model + this.baseHref = basetag[basetag.length-1].getAttribute('href'); + } + } + //Checking to content to be template + if (this._template) { + if (this._template.type === 'banner') { + //Loading contents into a fragment + this._bodyFragment = this.document.createElement('body'); + //Listening for content to be ready + this._observer.body = new WebKitMutationObserver(this.insertBannerContent.bind(this)); + this._observer.body.observe(this._bodyFragment, {childList: true}); + //Inserting HTML and parsing URLs via mediator method + this._bodyFragment.innerHTML = ''+(this.content.body.replace(/\b(href|src)\s*=\s*"([^"]*)"/g, this.application.ninja.ioMediator.tmplt.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator.tmplt))).replace(/url\(([^"]*)(.+?)\1\)/g, this.application.ninja.ioMediator.tmplt.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator.tmplt)); + } + } else { + //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.tmplt.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator.tmplt))).replace(/url\(([^"]*)(.+?)\1\)/g, this.application.ninja.ioMediator.tmplt.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator.tmplt)); + //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.tmplt.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator.tmplt))).replace(/url\(([^"]*)(.+?)\1\)/g, this.application.ninja.ioMediator.tmplt.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator.tmplt)); + //Copying attributes to maintain same properties as the + for (var n in this.content.document.body.attributes) { + if (this.content.document.body.attributes[n].value) { + this.document.body.setAttribute(this.content.document.body.attributes[n].name, this.content.document.body.attributes[n].value); + } + } + //Copying attributes to maintain same properties as the + for (var m in this.content.document.head.attributes) { + if (this.content.document.head.attributes[m].value) { + this.document.head.setAttribute(this.content.document.head.attributes[m].name, this.content.document.head.attributes[m].value); + } + } + //Copying attributes to maintain same properties as the + var htmlTagMem = this.content.document.getElementsByTagName('html')[0], htmlTagDoc = this.document.getElementsByTagName('html')[0]; + for (var m in htmlTagMem.attributes) { + if (htmlTagMem.attributes[m].value) { + htmlTagDoc.setAttribute(htmlTagMem.attributes[m].name, htmlTagMem.attributes[m].value); + } + } + } } }, //////////////////////////////////////////////////////////////////// - // + // insertBannerContent: { - value: function (e) { - //Getting first element in DOM (assumes it's root) - //TODO: Ensure wrapper logic is proper - var wrapper = this._bodyFragment.getElementsByTagName('*')[1], - banner = this._bodyFragment.getElementsByTagName('*')[2], - ninjaBanner = this.document.body.getElementsByTagName('ninja-content')[0], - ninjaWrapper = this.document.body.getElementsByTagName('ninja-viewport')[0]; - //Copying attributes to maintain same properties as the banner wrapper - for (var n in wrapper.attributes) { - if (wrapper.attributes[n].value) { - ninjaWrapper.setAttribute(wrapper.attributes[n].name, wrapper.attributes[n].value); - } - } - //Copying attributes to maintain same properties as the banner content - for (var n in banner.attributes) { - if (banner.attributes[n].value) { - ninjaBanner.setAttribute(banner.attributes[n].name, banner.attributes[n].value); - } - } - //Adjusting margin per size of document - this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-viewport {overflow: visible !important;} ninja-content, ninja-viewport {width: ' + this._template.size.width + 'px; height: ' + this._template.size.height + 'px;}'; - //Setting content in template - ninjaBanner.innerHTML = banner.innerHTML; - //Garbage collection - this._bodyFragment = null; - //Calling standard method to finish opening document - this.bodyContentLoaded(null); - } + value: function (e) { + //Getting first element in DOM (assumes it's root) + //TODO: Ensure wrapper logic is proper + var wrapper = this._bodyFragment.getElementsByTagName('*')[1], + banner = this._bodyFragment.getElementsByTagName('*')[2], + ninjaBanner = this.document.body.getElementsByTagName('ninja-content')[0], + ninjaWrapper = this.document.body.getElementsByTagName('ninja-viewport')[0]; + //Copying attributes to maintain same properties as the banner wrapper + for (var n in wrapper.attributes) { + if (wrapper.attributes[n].value) { + ninjaWrapper.setAttribute(wrapper.attributes[n].name, wrapper.attributes[n].value); + } + } + //Copying attributes to maintain same properties as the banner content + for (var n in banner.attributes) { + if (banner.attributes[n].value) { + ninjaBanner.setAttribute(banner.attributes[n].name, banner.attributes[n].value); + } + } + //Adjusting margin per size of document + this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-viewport {overflow: visible !important;} ninja-content, ninja-viewport {width: ' + this._template.size.width + 'px; height: ' + this._template.size.height + 'px;}'; + //Setting content in template + ninjaBanner.innerHTML = banner.innerHTML; + //Garbage collection + this._bodyFragment = null; + //Calling standard method to finish opening document + this.bodyContentLoaded(null); + } }, //////////////////////////////////////////////////////////////////// - // + // 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]); - } - } - //Garbage collection - this._headFragment = null; - } + 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]); + } + } + //Garbage collection + this._headFragment = null; + } }, //////////////////////////////////////////////////////////////////// - // + // bodyContentLoaded: { - value: function (e) { - //Removing event, only needed on initial load - this._observer.body.disconnect(); - this._observer.body = null; - //Removing loading container (should be removed) - this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]); - //Getting style and link tags in document + value: function (e) { + //Removing event, only needed on initial load + this._observer.body.disconnect(); + this._observer.body = null; + //Removing loading container (should be removed) + this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]); + //Getting style and link tags in document var htags = this.document.getElementsByTagName('html'), bannerWrapper, userStyles, stags = this.document.getElementsByTagName('style'), - ltags = this.document.getElementsByTagName('link'), i, orgNodes, - scripttags = this.document.getElementsByTagName('script'), - videotags = this.document.getElementsByTagName('video'); - //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 (i = 0; i < ltags.length; i++) { - // - if (ltags[i].href) { - //Inseting