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/base.js | 3 +++ js/document/views/design.js | 29 +++++++++++++++++++++++++---- 2 files changed, 28 insertions(+), 4 deletions(-) (limited to 'js/document') diff --git a/js/document/views/base.js b/js/document/views/base.js index d13dce1a..89759195 100755 --- a/js/document/views/base.js +++ b/js/document/views/base.js @@ -40,6 +40,7 @@ exports.BaseDocumentView = Montage.create(Component, { if (this.iframe) { this.iframe.style.display = 'block'; this.iframe.style.opacity = 1; + this.toggleWebGlAnimation(true); } else { console.log('Error: View has no iframe to show!'); } @@ -54,6 +55,8 @@ exports.BaseDocumentView = Montage.create(Component, { if (this.iframe) { this.iframe.style.display = 'none'; this.iframe.style.opacity = 0; + this.pauseVideos(); + this.toggleWebGlAnimation(false); } else { console.log('Error: View has no iframe to hide!'); } 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= 0) { - endIndex = importStr.indexOf("\n", startIndex); - if (endIndex > 0) id = importStr.substring(startIndex+4, endIndex); - } + startIndex = importStr.indexOf("id: "); + if (startIndex >= 0) { + endIndex = importStr.indexOf("\n", startIndex); + if (endIndex > 0) id = importStr.substring(startIndex+4, endIndex); + } } - } - // - if (id != null) { - // - canvas = this.findCanvasWithID(id, elt); - // - if (canvas) { - // - if (canvas.elementModel) { - if (canvas.elementModel.shapeModel.GLWorld) { - canvas.elementModel.shapeModel.GLWorld.clearTree(); - } - // - if (jObj) { - useWebGL = jObj.webGL; - world = new GLWorld(canvas, useWebGL); - world.importJSON(jObj); - } - // - this.buildShapeModel(canvas.elementModel, world); - } - } - } - } - } - } + } + // + if (id != null) { + // + canvas = this.findCanvasWithID(id, elt); + // + if (canvas) { + // + if (canvas.elementModel) { + if (canvas.elementModel.shapeModel.GLWorld) { + canvas.elementModel.shapeModel.GLWorld.clearTree(); + } + // + if (jObj) { + useWebGL = jObj.webGL; + world = new GLWorld(canvas, useWebGL); + world.importJSON(jObj); + } + // + this.buildShapeModel(canvas.elementModel, world); + } + } + } + } + } + } }, //////////////////////////////////////////////////////////////////// - // + // findCanvasWithID: { - value: function(id, elt) { - // - var i, child, nKids, foundElt, cid = elt.getAttribute("data-RDGE-id"); - // - if (cid == id) return elt; - // - if (elt.children) { - nKids = elt.children.length; - for (i=0; i 0) { - template.file.content.document.head.innerHTML = montageTemplate._document.head.innerHTML.replace(regexRootUrl, ''); - template.file.content.document.body.innerHTML = montageTemplate._document.body.innerHTML.replace(regexRootUrl, ''); - // - mJsSerialization = montageTemplate._ownerSerialization; + template.file.content.document.head.innerHTML = montageTemplate._document.head.innerHTML.replace(regexRootUrl, ''); + template.file.content.document.body.innerHTML = montageTemplate._document.body.innerHTML.replace(regexRootUrl, ''); + // + mJsSerialization = montageTemplate._ownerSerialization; } else { - template.file.content.document.head.innerHTML = template.head.innerHTML.replace(regexRootUrl, ''); - template.file.content.document.body.innerHTML = template.body.innerHTML.replace(regexRootUrl, ''); + template.file.content.document.head.innerHTML = template.head.innerHTML.replace(regexRootUrl, ''); + template.file.content.document.body.innerHTML = template.body.innerHTML.replace(regexRootUrl, ''); } //Removes all attributes from node function wipeAttributes (node) { - for (var f in node.attributes) { - node.removeAttribute(node.attributes[f].name); - } + for (var f in node.attributes) { + node.removeAttribute(node.attributes[f].name); + } } //Copying attributes to maintain same properties as the wipeAttributes(template.file.content.document.body); - for (var n in template.body.attributes) { - if (template.body.attributes[n].value) { - template.file.content.document.body.setAttribute(template.body.attributes[n].name, template.body.attributes[n].value); - } - } - // + for (var n in template.body.attributes) { + if (template.body.attributes[n].value) { + template.file.content.document.body.setAttribute(template.body.attributes[n].name, template.body.attributes[n].value); + } + } + // if(template.template) { // // TODO - Need to handle banner and animation templates. @@ -201,53 +201,53 @@ exports.TemplateDocumentMediator = Montage.create(Component, { } } - wipeAttributes(template.file.content.document.head); + wipeAttributes(template.file.content.document.head); //Copying attributes to maintain same properties as the - for (var m in template.document.head.attributes) { - if (template.document.head.attributes[m].value) { - template.file.content.document.head.setAttribute(template.document.head.attributes[m].name, template.document.head.attributes[m].value); - } - } + for (var m in template.document.head.attributes) { + if (template.document.head.attributes[m].value) { + template.file.content.document.head.setAttribute(template.document.head.attributes[m].name, template.document.head.attributes[m].value); + } + } //Copying attributes to maintain same properties as the - var htmlTagMem = template.document.getElementsByTagName('html')[0], htmlTagDoc = template.file.content.document.getElementsByTagName('html')[0]; - wipeAttributes(htmlTagDoc); - // - for (var m in htmlTagMem.attributes) { - if (htmlTagMem.attributes[m].value) { - if (htmlTagMem.attributes[m].value.replace(/montage-app-bootstrapping/gi, '').length>0) { - htmlTagDoc.setAttribute(htmlTagMem.attributes[m].name, htmlTagMem.attributes[m].value.replace(/ montage-app-bootstrapping/gi, '')); - } - } - } - // - if (htmlTagMem && htmlTagMem.getAttribute('data-ninja-style') !== null) { - htmlTagDoc.setAttribute('style', htmlTagMem.getAttribute('data-ninja-style')); - htmlTagDoc.removeAttribute('data-ninja-style'); - } else if (htmlTagMem && htmlTagMem.getAttribute('data-ninja-style') === null) { - htmlTagDoc.removeAttribute('style'); - htmlTagDoc.removeAttribute('data-ninja-style'); - } + var htmlTagMem = template.document.getElementsByTagName('html')[0], htmlTagDoc = template.file.content.document.getElementsByTagName('html')[0]; + wipeAttributes(htmlTagDoc); + // + for (var m in htmlTagMem.attributes) { + if (htmlTagMem.attributes[m].value) { + if (htmlTagMem.attributes[m].value.replace(/montage-app-bootstrapping/gi, '').length>0) { + htmlTagDoc.setAttribute(htmlTagMem.attributes[m].name, htmlTagMem.attributes[m].value.replace(/ montage-app-bootstrapping/gi, '')); + } + } + } + // + if (htmlTagMem && htmlTagMem.getAttribute('data-ninja-style') !== null) { + htmlTagDoc.setAttribute('style', htmlTagMem.getAttribute('data-ninja-style')); + htmlTagDoc.removeAttribute('data-ninja-style'); + } else if (htmlTagMem && htmlTagMem.getAttribute('data-ninja-style') === null) { + htmlTagDoc.removeAttribute('style'); + htmlTagDoc.removeAttribute('data-ninja-style'); + } //Getting list of current nodes (Ninja DOM) presentNodes = template.file.content.document.getElementsByTagName('*'); //Looping through nodes to determine origin and removing if not inserted by Ninja for (var n in presentNodes) { - // - if (presentNodes[n].getAttribute && presentNodes[n].getAttribute('data-ninja-node') === null) { - toremovetags.push(presentNodes[n]); - } else if (presentNodes[n].getAttribute && presentNodes[n].getAttribute('data-ninja-node') !== null) { - //Removing attribute - presentNodes[n].removeAttribute('data-ninja-node'); - } - } + // + if (presentNodes[n].getAttribute && presentNodes[n].getAttribute('data-ninja-node') === null) { + toremovetags.push(presentNodes[n]); + } else if (presentNodes[n].getAttribute && presentNodes[n].getAttribute('data-ninja-node') !== null) { + //Removing attribute + presentNodes[n].removeAttribute('data-ninja-node'); + } + } //Getting all CSS (style or link) tags var styletags = template.file.content.document.getElementsByTagName('style'), - linktags = template.file.content.document.getElementsByTagName('link'), - njtemplatetags = template.file.content.document.querySelectorAll('[data-ninja-template]'); - - //Adding to tags to be removed form template - for (var f in njtemplatetags) { - if (njtemplatetags[f].getAttribute) toremovetags.push(njtemplatetags[f]); - } + linktags = template.file.content.document.getElementsByTagName('link'), + njtemplatetags = template.file.content.document.querySelectorAll('[data-ninja-template]'); + + //Adding to tags to be removed form template + for (var f in njtemplatetags) { + if (njtemplatetags[f].getAttribute) toremovetags.push(njtemplatetags[f]); + } //Getting styles tags to be removed from document if (styletags.length) { for (var j = 0; j < styletags.length; j++) { @@ -308,7 +308,7 @@ exports.TemplateDocumentMediator = Montage.create(Component, { if (template.styles) { //Getting all style tags var styleCounter = 0, - docStyles = template.file.content.document.getElementsByTagName('style'); + docStyles = template.file.content.document.getElementsByTagName('style'); //Looping through all style tags for (var i in template.styles) { if (template.styles[i].ownerNode) { @@ -328,8 +328,8 @@ exports.TemplateDocumentMediator = Montage.create(Component, { } else if (template.css) { //Getting all style and link tags var styleCounter = 0, - docStyles = template.file.content.document.getElementsByTagName('style'), - docLinks = template.file.content.document.getElementsByTagName('link'); + docStyles = template.file.content.document.getElementsByTagName('style'), + docLinks = template.file.content.document.getElementsByTagName('link'); //Removing Ninja Data Attributes for (var n in docLinks) { if (docLinks[n].attributes) { @@ -373,10 +373,10 @@ exports.TemplateDocumentMediator = Montage.create(Component, { var cleanedCss, - dirtyCss = this.getCssFromRules(template.css[i].cssRules), - fileUrl = template.css[i].ownerNode.getAttribute('data-ninja-file-url'), - fileRootUrl = this.application.ninja.coreIoApi.rootUrl + fileUrl.split(fileUrl.split('/')[fileUrl.split('/').length - 1])[0], - cleanedCss = dirtyCss.replace(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi, parseNinjaUrl.bind(this)); + dirtyCss = this.getCssFromRules(template.css[i].cssRules), + fileUrl = template.css[i].ownerNode.getAttribute('data-ninja-file-url'), + fileRootUrl = this.application.ninja.coreIoApi.rootUrl + fileUrl.split(fileUrl.split('/')[fileUrl.split('/').length - 1])[0], + cleanedCss = dirtyCss.replace(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi, parseNinjaUrl.bind(this)); function parseNinjaUrl(url) { if (url.indexOf(this.application.ninja.coreIoApi.rootUrl) !== -1) { @@ -420,28 +420,28 @@ exports.TemplateDocumentMediator = Montage.create(Component, { // var webgltag, webgllibtag, webglrdgetag, mjstag, mjslibtag, matchingtags = [], - scripts = template.file.content.document.getElementsByTagName('script'), - libsobserver = {montage: false, canvas: false, montageCopied: null, canvasCopied: null, callback: libCopyCallback, dispatched: false}; + scripts = template.file.content.document.getElementsByTagName('script'), + libsobserver = {montage: false, canvas: false, montageCopied: null, canvasCopied: null, callback: libCopyCallback, dispatched: false}; //TODO: Clean up, this is messy if (mJsSerialization) libsobserver.montage = true; if (template.webgl && template.webgl.length > 1) libsobserver.canvas = true; // for (var i in scripts) { - if (scripts[i].getAttribute) { - if (scripts[i].getAttribute('data-ninja-canvas') !== null) {//TODO: Use querySelectorAll - matchingtags.push(scripts[i]); + if (scripts[i].getAttribute) { + if (scripts[i].getAttribute('data-ninja-canvas') !== null) {//TODO: Use querySelectorAll + matchingtags.push(scripts[i]); } if (scripts[i].getAttribute('data-ninja-canvas-lib') !== null) { webgllibtag = scripts[i]; // TODO: Add logic to delete unneccesary tags } if (scripts[i].getAttribute('data-ninja-canvas-rdge') !== null) { - webglrdgetag = scripts[i]; // TODO: Add logic to delete unneccesary tags + webglrdgetag = scripts[i]; // TODO: Add logic to delete unneccesary tags } if (scripts[i].getAttribute('type') === 'text/montage-serialization') { mjstag = scripts[i]; // TODO: Add logic to delete unneccesary tags } if (scripts[i].getAttribute('data-mjs-lib') !== null) { - mjslibtag = scripts[i]; // TODO: Add logic to delete unneccesary tags + mjslibtag = scripts[i]; // TODO: Add logic to delete unneccesary tags } } } @@ -458,23 +458,23 @@ exports.TemplateDocumentMediator = Montage.create(Component, { // if (cvsDataDir && !matchingtags.length && !webgllibtag) { - if (template.libs.canvasId) { - libsobserver.canvasId = template.libs.canvasId; - } else { - libsobserver.canvasId = ClassUuid.generate(); - } - - //Creating data directory, will include materials at a later time - fileCvsDir = cvsDataDir+template.file.name.split('.'+template.file.extension)[0]+'_'+libsobserver.canvasId; - - if (!this._getUserDirectory(fileCvsDir)) { - //TODO: create proper logic not to overwrite files - console.log('error'); - } - - fileCvsDir += '/'; + if (template.libs.canvasId) { + libsobserver.canvasId = template.libs.canvasId; + } else { + libsobserver.canvasId = ClassUuid.generate(); + } + + //Creating data directory, will include materials at a later time + fileCvsDir = cvsDataDir+template.file.name.split('.'+template.file.extension)[0]+'_'+libsobserver.canvasId; + + if (!this._getUserDirectory(fileCvsDir)) { + //TODO: create proper logic not to overwrite files + console.log('error'); + } + + fileCvsDir += '/'; } else if (webgllibtag && webgllibtag.getAttribute && webgllibtag.getAttribute('data-ninja-canvas-json') !== null) { - fileOrgDataSrc = template.file.root+webgllibtag.getAttribute('data-ninja-canvas-json'); + fileOrgDataSrc = template.file.root+webgllibtag.getAttribute('data-ninja-canvas-json'); } //Copy webGL library if needed for (var i in this.application.ninja.coreIoApi.ninjaLibrary.libs) { @@ -503,9 +503,9 @@ exports.TemplateDocumentMediator = Montage.create(Component, { webglrdgetag.setAttribute('src', rdgeDirName + '/rdge-compiled.js'); webglrdgetag.setAttribute('data-ninja-canvas-rdge', 'true'); if (ninjaWrapper) { - template.file.content.document.body.getElementsByTagName('ninja-content')[0].appendChild(webglrdgetag); + template.file.content.document.body.getElementsByTagName('ninja-content')[0].appendChild(webglrdgetag); } else { - template.file.content.document.head.appendChild(webglrdgetag); + template.file.content.document.head.appendChild(webglrdgetag); } } // @@ -515,9 +515,9 @@ exports.TemplateDocumentMediator = Montage.create(Component, { webgllibtag.setAttribute('src', rdgeDirName + '/canvas-runtime.js'); webgllibtag.setAttribute('data-ninja-canvas-lib', 'true'); if (ninjaWrapper) { - template.file.content.document.body.getElementsByTagName('ninja-content')[0].appendChild(webgllibtag); + template.file.content.document.body.getElementsByTagName('ninja-content')[0].appendChild(webgllibtag); } else { - template.file.content.document.head.appendChild(webgllibtag); + template.file.content.document.head.appendChild(webgllibtag); } } // @@ -525,10 +525,10 @@ exports.TemplateDocumentMediat