From 2da05a4c71bfe9b136384d9e94fbfbef19f24550 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 27 Jun 2012 17:28:06 -0700 Subject: Performance fix for WebGL materials playing even when the dialog/file is no longer in view. Also pausing videos when switching documents. Signed-off-by: Nivesh Rajbhandari --- js/document/views/design.js | 29 +++++++++++++++++++++++++---- 1 file changed, 25 insertions(+), 4 deletions(-) (limited to 'js/document/views/design.js') diff --git a/js/document/views/design.js b/js/document/views/design.js index 6a60e1f9..5c7ba4fc 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -497,9 +497,11 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { // pauseVideos:{ value:function(){ - var i, videos = this.document.getElementsByTagName("video"); - for(i = 0; i < videos.length; i++){ - if(!videos[i].paused) videos[i].pause(); + if(this.document) { + var i, videos = this.document.getElementsByTagName("video"); + for(i = 0; i < videos.length; i++){ + if(!videos[i].paused) videos[i].pause(); + } } } }, @@ -523,9 +525,28 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { videos[i].src = ""; } } - } + }, //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// + toggleWebGlAnimation: { + value: function(show) { + if(this.document) { + var glCanvases = this.document.querySelectorAll('[data-RDGE-id]'), + glShapeModel; + if(glCanvases) { + for(var i = 0, len = glCanvases.length; i 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