From 4504972c1f3b9bf1d02a4484a07a8a85cf9ccee2 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 8 May 2012 10:37:38 -0700 Subject: Adding Chrome Preview --- js/document/views/design.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/document/views/design.js') diff --git a/js/document/views/design.js b/js/document/views/design.js index b23ebe78..df6e9b53 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -230,7 +230,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { initWebGl: { value: function (scripttags) { // - var i, n, webgldata; + var n, webgldata; //Setting the iFrame property for reference in helper class this.model.webGlHelper.iframe = this.model.views.design.iframe; //Checking for webGL Data -- cgit v1.2.3 From a1e8540f5656e62db6a89f3af7829be6b259b7ed Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 8 May 2012 17:33:13 -0700 Subject: Adding SAVE for I/O Adding save functionality to new template. Need to implement user UI for prompts and also clean up... --- js/document/views/design.js | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'js/document/views/design.js') diff --git a/js/document/views/design.js b/js/document/views/design.js index df6e9b53..9ad088cb 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -100,6 +100,13 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { 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)); + //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); + } + } + //TODO: Add attribute copying for and } }, //////////////////////////////////////////////////////////////////// -- cgit v1.2.3 From 3811f72f8cd8caaa2d13fa695b918f25facb85c5 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Wed, 9 May 2012 16:28:13 -0700 Subject: Preliminary Montage Template Cleanup The template creator is currently not returning serializing code, but does clean the document. Need to investigate reason why, currently all components are removed on save. --- js/document/views/design.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'js/document/views/design.js') diff --git a/js/document/views/design.js b/js/document/views/design.js index 9ad088cb..765099e6 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -41,6 +41,11 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { content: { value: null }, + //////////////////////////////////////////////////////////////////// + //TODO: Remove usage + model: { + value: null + }, //////////////////////////////////////////////////////////////////// // document: { @@ -78,6 +83,8 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { // onTemplateLoad: { value: function (e) { + //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 @@ -88,6 +95,13 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { 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.model.baseHref = basetag[basetag.length-1].getAttribute('href'); + } + } //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 -- cgit v1.2.3 From fb7a3aa9ce0d9b99dca79cfb89951b5c51523250 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 10 May 2012 14:54:38 -0700 Subject: Adding partial close functionality --- js/document/views/design.js | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) (limited to 'js/document/views/design.js') diff --git a/js/document/views/design.js b/js/document/views/design.js index 765099e6..1a8f4986 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -289,6 +289,37 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { value: function(x, y) { return this.iframe.contentWindow.getElement(x,y); } + }, + //////////////////////////////////////////////////////////////////// + // + pauseVideos:{ + value:function(){ + var i, videos = this.document.getElementsByTagName("video"); + for(i = 0; i < videos.length; i++){ + if(!videos[i].paused) videos[i].pause(); + } + } + }, + //////////////////////////////////////////////////////////////////// + // + stopVideos:{ + value:function(){ + var i, videos = this.document.getElementsByTagName("video"); + for(i = 0; i < videos.length; i++){ + videos[i].src = ""; + } + } + }, + //////////////////////////////////////////////////////////////////// + // + pauseAndStopVideos:{ + value:function(){ + var i, videos = this.document.getElementsByTagName("video"); + for(i = 0; i < videos.length; i++){ + if(!videos[i].paused) videos[i].pause(); + videos[i].src = ""; + } + } } //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// -- cgit v1.2.3 From d75aff9e251f84a13c326668a5271b5852dcde53 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 10 May 2012 15:36:24 -0700 Subject: Adding webRequest API Adding webRequest API to handle local URLs intercepting. Should be a temp fix. --- js/document/views/design.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'js/document/views/design.js') diff --git a/js/document/views/design.js b/js/document/views/design.js index 1a8f4986..321f93e8 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -71,6 +71,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { // render: { value: function (callback, template) {//TODO: Add support for templates + this.application.ninja.documentController._hackRootFlag = false; //Storing callback for dispatch ready this._callback = callback; //Adding listener to know when template is loaded to then load user content @@ -83,6 +84,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { // onTemplateLoad: { value: function (e) { + this.application.ninja.documentController._hackRootFlag = true; //TODO: Add support to constructing URL with a base HREF var basetag = this.content.document.getElementsByTagName('base'); //Removing event -- cgit v1.2.3 From c87e538fdc337639bc4d54bb087dbf2b4f20297f Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Fri, 11 May 2012 14:41:20 -0700 Subject: Adding support for new templates This is supported for NEW and OPEN, SAVE is not supported yet by I/O. Saving works, but it will not be a banner template. --- js/document/views/design.js | 90 +++++++++++++++++++++++++++++++++++---------- 1 file changed, 71 insertions(+), 19 deletions(-) (limited to 'js/document/views/design.js') diff --git a/js/document/views/design.js b/js/document/views/design.js index 321f93e8..e838dd49 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -21,11 +21,21 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { _callback: { value: null }, + //////////////////////////////////////////////////////////////////// + // + _template: { + value: null + }, //////////////////////////////////////////////////////////////////// // _document: { value: null }, + //////////////////////////////////////////////////////////////////// + // + _bodyFragment: { + value: null + }, //////////////////////////////////////////////////////////////////// // _headFragment: { @@ -70,14 +80,20 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { //////////////////////////////////////////////////////////////////// // render: { - value: function (callback, template) {//TODO: Add support for templates + value: function (callback, template) { + //TODO: Remove, this is a temp patch for webRequest API gate this.application.ninja.documentController._hackRootFlag = false; //Storing callback for dispatch ready this._callback = callback; + this._template = template; //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) - this.iframe.src = "js/document/templates/montage-web/index.html"; + 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"; + } } }, //////////////////////////////////////////////////////////////////// @@ -104,27 +120,63 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { this.model.baseHref = basetag[basetag.length-1].getAttribute('href'); } } - //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)); - //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)); - //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); + //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.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator))).replace(/url\(([^"]*)(.+?)\1\)/g, this.application.ninja.ioMediator.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator)); + } + } 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.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)); + //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); + } } + //TODO: Add attribute copying for and } - //TODO: Add attribute copying for and } }, + //////////////////////////////////////////////////////////////////// + // + insertBannerContent: { + value: function (e) { + //Getting first element in DOM (assumes it's root) + var banner = this._bodyFragment.getElementsByTagName('*')[1], + ninjaBanner = this.document.body.getElementsByTagName('ninja-banner')[0]; + //Copying attributes to maintain same properties as the banner root + 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-banner {margin-top: -'+Math.floor(this._template.size.height/2)+'px; margin-left: -'+Math.floor(this._template.size.width/2)+'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: { -- cgit v1.2.3 From d114f222cb48a101ffdb1b88d43823ca16f2c7df Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Fri, 11 May 2012 15:15:33 -0700 Subject: Fixing overflow bug for banner templates Ensuring overflow is visible but saved as hidden. --- js/document/views/design.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/document/views/design.js') diff --git a/js/document/views/design.js b/js/document/views/design.js index e838dd49..16d1ac06 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -168,7 +168,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { } } //Adjusting margin per size of document - this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {margin-top: -'+Math.floor(this._template.size.height/2)+'px; margin-left: -'+Math.floor(this._template.size.width/2)+'px}'; + this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {overflow: visible !important; margin-top: -'+Math.floor(this._template.size.height/2)+'px; margin-left: -'+Math.floor(this._template.size.width/2)+'px}'; //Setting content in template ninjaBanner.innerHTML = banner.innerHTML; //Garbage collection -- cgit v1.2.3 From d68c1ea5163c67ada54ac24f1da69695cc8dfab5 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Fri, 11 May 2012 16:22:17 -0700 Subject: Fixing position issue Need to implement centering document. --- js/document/views/design.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'js/document/views/design.js') diff --git a/js/document/views/design.js b/js/document/views/design.js index 16d1ac06..bff65b7f 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -168,7 +168,8 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { } } //Adjusting margin per size of document - this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {overflow: visible !important; margin-top: -'+Math.floor(this._template.size.height/2)+'px; margin-left: -'+Math.floor(this._template.size.width/2)+'px}'; + //this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {overflow: visible !important; margin-top: -'+Math.floor(this._template.size.height/2)+'px; margin-left: -'+Math.floor(this._template.size.width/2)+'px}'; + this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {overflow: visible !important;}'; //Setting content in template ninjaBanner.innerHTML = banner.innerHTML; //Garbage collection -- cgit v1.2.3 From cfd3a44bb7aba54c15fab59eff39ecdffcb7ac11 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 14 May 2012 14:38:35 -0700 Subject: Viewport for banner templates so content doesn't push through "body". Signed-off-by: Nivesh Rajbhandari --- js/document/views/design.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/document/views/design.js') diff --git a/js/document/views/design.js b/js/document/views/design.js index bff65b7f..3378ad71 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -169,7 +169,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { } //Adjusting margin per size of document //this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {overflow: visible !important; margin-top: -'+Math.floor(this._template.size.height/2)+'px; margin-left: -'+Math.floor(this._template.size.width/2)+'px}'; - this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {overflow: visible !important;}'; + this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {overflow: visible !important;} ninja-banner, ninja-viewport {width: ' + this._template.size.width + 'px; height: ' + this._template.size.height + 'px;}'; //Setting content in template ninjaBanner.innerHTML = banner.innerHTML; //Garbage collection -- cgit v1.2.3 From 150b6eb2be526627d588a0cf7226ddad7a399b8f Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Mon, 14 May 2012 16:35:09 -0700 Subject: Fixing banner template Need to implement save, but this cover open and new. --- js/document/views/design.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'js/document/views/design.js') diff --git a/js/document/views/design.js b/js/document/views/design.js index 3378ad71..4c91ff39 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -159,8 +159,9 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { insertBannerContent: { value: function (e) { //Getting first element in DOM (assumes it's root) - var banner = this._bodyFragment.getElementsByTagName('*')[1], - ninjaBanner = this.document.body.getElementsByTagName('ninja-banner')[0]; + //TODO: Ensure wrapper logic is proper + var banner = this._bodyFragment.getElementsByTagName('*')[2], + ninjaBanner = this.document.body.getElementsByTagName('ninja-content')[0]; //Copying attributes to maintain same properties as the banner root for (var n in banner.attributes) { if (banner.attributes[n].value) { @@ -169,7 +170,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { } //Adjusting margin per size of document //this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {overflow: visible !important; margin-top: -'+Math.floor(this._template.size.height/2)+'px; margin-left: -'+Math.floor(this._template.size.width/2)+'px}'; - this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {overflow: visible !important;} ninja-banner, ninja-viewport {width: ' + this._template.size.width + 'px; height: ' + this._template.size.height + 'px;}'; + this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-content {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 -- cgit v1.2.3 From 77c0f0b369d431f6824906c91753b934f749c5d8 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 15 May 2012 11:15:27 -0700 Subject: Finalizing open for new banner templates Moving to implement save. --- js/document/views/design.js | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) (limited to 'js/document/views/design.js') diff --git a/js/document/views/design.js b/js/document/views/design.js index 4c91ff39..48c91aad 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -160,16 +160,23 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { value: function (e) { //Getting first element in DOM (assumes it's root) //TODO: Ensure wrapper logic is proper - var banner = this._bodyFragment.getElementsByTagName('*')[2], - ninjaBanner = this.document.body.getElementsByTagName('ninja-content')[0]; - //Copying attributes to maintain same properties as the banner root + 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-banner {overflow: visible !important; margin-top: -'+Math.floor(this._template.size.height/2)+'px; margin-left: -'+Math.floor(this._template.size.width/2)+'px}'; this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-content {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; @@ -204,7 +211,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { //Removing event, only needed on initial load this._observer.body.disconnect(); this._observer.body = null; - //Removing loading container + //Removing loading container (should be removed) this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]); //Getting style and link tags in document var stags = this.document.getElementsByTagName('style'), @@ -218,8 +225,12 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { for (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]); + //Inseting