/* 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, TextDocument = require("js/document/text-document").TextDocument, NJUtils = require("js/lib/NJUtils").NJUtils, GLWorld = require("js/lib/drawing/world").World; //////////////////////////////////////////////////////////////////////// // exports.HTMLDocument = Montage.create(TextDocument, { _selectionExclude: { value: null, enumerable: false }, _htmlTemplateUrl: { value: "js/document/templates/montage-html/index.html", enumerable: false}, _iframe: { value: null, enumerable: false }, _server: { value: null, enumerable: false }, _templateDocument: { value: null, enumerable: false }, _selectionModel: { value: [], enumerable: false }, _undoModel: { value: { "queue" : [], "position" : 0 }, enumerable: false}, _document: { value: null, enumerable: false }, _documentRoot: { value: null, enumerable: false }, _liveNodeList: { value: null, enumarable: false }, _stageBG: { value: null, enumerable: false }, _window: { value: null, enumerable: false }, _styles: { value: null, enumerable: false }, _stylesheets: { value: null, enumerable: false }, _stageStyleSheetId : { value: 'nj-stage-stylesheet', enumerable: false }, _userDocument: { value: null, enumerable: false }, _htmlSource: {value: "", enumerable: false}, _glData: {value: null, enumerable: false }, _userComponents: { value: {}, enumarable: false}, _elementCounter: { value: 1, enumerable: false }, _snapping : { value: true, enumerable: false }, _layoutMode: { value: "all", enumerable: false }, _draw3DGrid: { value: false, writable: true }, _swfObject: { value: false, enumerable: false }, _zoomFactor: { value: 100, enumerable: false }, cssLoadInterval: { value: null, enumerable: false }, _savedLeftScroll: {value:null}, _savedTopScroll: {value:null}, _codeViewDocument:{ writable: true, enumerable: true, value:null }, //drawUtils state _gridHorizontalSpacing: {value:0}, _gridVerticalSpacing: {value:0}, //end - drawUtils state _undoStack: { value: [] }, undoStack: { get: function() { return this._undoStack; }, set:function(value){ this._undoStack = value; } }, _redoStack: { value: [], enumerable: false }, redoStack: { get: function() { return this._redoStack; }, set:function(value){ this._redoStack = value; } }, // GETTERS / SETTERS codeViewDocument:{ get: function() { return this._codeViewDocument; }, set: function(value) { this._codeViewDocument = value} }, savedLeftScroll:{ get: function() { return this._savedLeftScroll; }, set: function(value) { this._savedLeftScroll = value} }, savedTopScroll:{ get: function() { return this._savedTopScroll; }, set: function(value) { this._savedTopScroll = value} }, gridHorizontalSpacing:{ get: function() { return this._gridHorizontalSpacing; }, set: function(value) { this._gridHorizontalSpacing = value} }, gridVerticalSpacing:{ get: function() { return this._gridVerticalSpacing; }, set: function(value) { this._gridVerticalSpacing = value} }, selectionExclude: { get: function() { return this._selectionExclude; }, set: function(value) { this._selectionExclude = value; } }, iframe: { get: function() { return this._iframe; }, set: function(value) { this._iframe = value; } }, server: { get: function() { return this._server; }, set: function(value) { this._server = value; } }, selectionModel: { get: function() { return this._selectionModel; }, set: function(value) { this._selectionModel = value; } }, undoModel: { get: function() { return this._undoModel; }, set: function(value) { this._undoModel.queue = value.queue; this._undoModel.position = value.position; } }, documentRoot: { get: function() { return this._documentRoot; }, set: function(value) { this._documentRoot = value; } }, stageBG: { get: function() { return this._stageBG; }, set: function(value) { this._stageBG = value; } }, elementCounter: { set: function(value) { this._elementCounter = value; }, get: function() { return this._elementCounter; } }, snapping: { get: function() { return this._snapping; }, set: function(value) { if(this._snapping !== value) { this._snapping = value; } } }, // TODO SEND THE EVENT --> Redraw the desired layout layoutMode: { get: function() { return this._layoutMode; }, set: function(mode) { this._layoutMode = mode; } }, draw3DGrid: { get: function() { return this._draw3DGrid; }, set: function(value) { if(this._draw3DGrid !== value) { this._draw3DGrid = value; } } }, userComponents: { get: function() { return this._userComponents; } }, // _drawUserComponentsOnOpen:{ // value:function(){ // for(var i in this._userComponentSet){ // console.log(this._userComponentSet[i].control) // this._userComponentSet[i].control.needsDraw = true; // } // } // }, glData: { get: function() { // var elt = this.iframe.contentWindow.document.getElementById("UserContent"); // if (elt) { this._glData = []; this.collectGLData(elt, this._glData ); } else { this._glData = null } // return this._glData; }, set: function(value) { var elt = this.documentRoot; if (elt) { var nWorlds= value.length; for (var i=0; i= 0) { var endIndex = importStr.indexOf( "\n", startIndex ); if (endIndex > 0) id = importStr.substring( startIndex+4, endIndex ); } } if (id != null) { var canvas = this.findCanvasWithID( id, elt ); if (canvas) { if (!canvas.elementModel) { NJUtils.makeElementModel(canvas, "Canvas", "shape", true); } if (canvas.elementModel) { if (canvas.elementModel.shapeModel.GLWorld) canvas.elementModel.shapeModel.GLWorld.clearTree(); if (jObj) { var useWebGL = jObj.webGL; var world = new GLWorld( canvas, useWebGL ); world.importJSON( jObj ); } else { var index = importStr.indexOf( "webGL: " ); var useWebGL = (index >= 0); var world = new GLWorld( canvas, useWebGL ); world.import( importStr ); } this.buildShapeModel( canvas.elementModel, world ); } } } // */ } } } }, buildShapeModel: { value: function( elementModel, world ) { var shapeModel = elementModel.shapeModel; shapeModel.shapeCount = 1; // for now... shapeModel.useWebGl = world._useWebGL; shapeModel.GLWorld = world; var root = world.getGeomRoot(); if (root) { shapeModel.GLGeomObj = root; shapeModel.strokeSize = root._strokeWidth; shapeModel.stroke = root._strokeColor.slice(); shapeModel.strokeMaterial = root._strikeMaterial ? root._strokeMaterial.dup() : null; shapeModel.strokeStyle = "solid"; //shapeModel.strokeStyleIndex //shapeModel.border //shapeModel.background switch (root.geomType()) { case root.GEOM_TYPE_RECTANGLE: elementModel.selection = "Rectangle"; elementModel.pi = "RectanglePi"; shapeModel.fill = root._fillColor.slice(); shapeModel.fillMaterial = root._fillMaterial ? root._fillMaterial.dup() : null; shapeModel.tlRadius = root._tlRadius; shapeModel.trRadius = root._trRadius; shapeModel.blRadius = root._blRadius; shapeModel.brRadius = root._brRadius; break; case root.GEOM_TYPE_CIRCLE: elementModel.selection = "Oval"; elementModel.pi = "OvalPi"; shapeModel.fill = root._fillColor.slice(); shapeModel.fillMaterial = root._fillMaterial ? root._fillMaterial.dup() : null; shapeModel.innerRadius = root._innerRadius; break; case root.GEOM_TYPE_LINE: elementModel.selection = "Line"; elementModel.pi = "LinePi"; shapeModel.slope = root._slope; break; default: console.log( "geometry type not supported for file I/O, " + root.geomType()); break; } } } }, zoomFactor: { get: function() { return this._zoomFactor; }, set: function(value) { this._zoomFactor = value; } }, /** * Add a reference to a component instance to the userComponents hash using the * element UUID */ setComponentInstance: { value: function(instance, el) { this.userComponents[el.uuid] = instance; } }, /** * Returns the component instance obj from the element */ getComponentFromElement: { value: function(el) { if(el) { if(el.uuid) return this.userComponents[el.uuid]; } else { return null; } } }, /** * search the DOM tree to find a canvas with the given id */ findCanvasWithID: { value: function( id, elt ) { var cid = elt.getAttribute( "data-RDGE-id" ); if (cid == id) return elt; if (elt.children) { var nKids = elt.children.length; for (var i=0; i 1) { //Checking all styleSheets in document for (var i in this._document.styleSheets) { //If rules are null, assuming cross-origin issue if(this._document.styleSheets[i].rules === null) { //TODO: Revisit URLs and URI creation logic, very hack right now var fileUri, cssUrl, cssData, query, prefixUrl, fileCouldDirUrl, docRootUrl; // docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/')); //TODO: Parse out relative URLs and map them to absolute if (this._document.styleSheets[i].href.indexOf(this.application.ninja.coreIoApi.rootUrl) !== -1) { // cssUrl = this._document.styleSheets[i].href.split(this.application.ninja.coreIoApi.rootUrl)[1]; fileUri = this.application.ninja.coreIoApi.cloudData.root+cssUrl; //TODO: Add error handling for reading file cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri}); // var tag = this.iframe.contentWindow.document.createElement('style'); tag.setAttribute('type', 'text/css'); tag.setAttribute('data-ninja-uri', fileUri); tag.setAttribute('data-ninja-file-url', cssUrl); tag.setAttribute('data-ninja-file-read-only', JSON.parse(this.application.ninja.coreIoApi.isFileWritable({uri: fileUri}).content).readOnly); tag.setAttribute('data-ninja-file-name', cssUrl.split('/')[cssUrl.split('/').length-1]); //Copying attributes to maintain same properties as the for (var n in this._document.styleSheets[i].ownerNode.attributes) { if (this._document.styleSheets[i].ownerNode.attributes[n].value && this._document.styleSheets[i].ownerNode.attributes[n].name !== 'disabled' && this._document.styleSheets[i].ownerNode.attributes[n].name !== 'disabled') { if (this._document.styleSheets[i].ownerNode.attributes[n].value.indexOf(docRootUrl) !== -1) { tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value.split(docRootUrl)[1]); } else { tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value); } } } // fileCouldDirUrl = this._document.styleSheets[i].href.split(this._document.styleSheets[i].href.split('/')[this._document.styleSheets[i].href.split('/').length-1])[0]; tag.innerHTML = cssData.content.replace(/url\(()(.+?)\1\)/g, detectUrl); function detectUrl (prop) { return prop.replace(/[^()\\""\\'']+/g, prefixUrl);; } function prefixUrl (url) { if (url !== 'url') { if (!url.match(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi)) { url = fileCouldDirUrl+url; } } return url; } //Looping through DOM to insert style tag at location of link element query = this._templateDocument.html.querySelectorAll(['link']); for (var j in query) { if (query[j].href === this._document.styleSheets[i].href) { //Disabling style sheet to reload via inserting in style tag query[j].setAttribute('disabled', 'true'); //Inserting tag this._templateDocument.head.insertBefore(tag, query[j]); } } } else { console.log('ERROR: Cross-Domain-Stylesheet detected, unable to load in Ninja'); //None local stylesheet, probably on a CDN (locked) var tag = this.iframe.contentWindow.document.createElement('style'); tag.setAttribute('type', 'text/css'); tag.setAttribute('data-ninja-external-url', this._document.styleSheets[i].href); tag.setAttribute('data-ninja-file-read-only', "true"); tag.setAttribute('data-ninja-file-name', this._document.styleSheets[i].href.split('/')[this._document.styleSheets[i].href.split('/').length-1]); //Copying attributes to maintain same properties as the for (var n in this._document.styleSheets[i].ownerNode.attributes) { if (this._document.styleSheets[i].ownerNode.attributes[n].value && this._document.styleSheets[i].ownerNode.attributes[n].name !== 'disabled' && this._document.styleSheets[i].ownerNode.attributes[n].name !== 'disabled') { if (this._document.styleSheets[i].ownerNode.attributes[n].value.indexOf(docRootUrl) !== -1) { tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value.split(docRootUrl)[1]); } else { tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value); } } } /* //TODO: Figure out cross-domain XHR issue, might need cloud to handle var xhr = new XMLHttpRequest(); xhr.open("GET", this._document.styleSheets[i].href, true); xhr.send(); // if (xhr.readyState === 4) { console.log(xhr); } //tag.innerHTML = xhr.responseText //xhr.response; */ //Temp rule so it's registered in the array tag.innerHTML = 'noRULEjustHACK{background: #000}'; //Disabling external style sheets query = this._templateDocument.html.querySelectorAll(['link']); for (var k in query) { if (query[k].href === this._document.styleSheets[i].href) { //TODO: Removed the temp insertion of the stylesheet //because it wasn't the proper way to do it //need to be handled via XHR with proxy in Cloud Sim //Disabling style sheet to reload via inserting in style tag //var tempCSS = query[k].cloneNode(true); //tempCSS.setAttribute('data-ninja-template', 'true'); query[k].setAttribute('disabled', 'true'); //this.iframe.contentWindow.document.head.appendChild(tempCSS); //Inserting tag this._templateDocument.head.insertBefore(tag, query[k]); } } } } } //////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////// //TODO: Check if this is needed this._stylesheets = this._document.styleSheets; //////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////// //TODO Finish this implementation once we start caching Core Elements // Assign a model to the UserContent and add the ViewPort reference to it. NJUtils.makeElementModel(this.documentRoot, "Stage", "stage"); //this.documentRoot.elementModel.viewPort = this.iframe.contentWindow.document.getElementById("Viewport"); NJUtils.makeElementModel(this.stageBG, "Stage", "stage"); NJUtils.makeElementModel(this.iframe.contentWindow.document.getElementById("Viewport"), "Stage", "stage"); for(i = 0; i < this._stylesheets.length; i++) { if(this._stylesheets[i].ownerNode.id === this._stageStyleSheetId) { this.documentRoot.elementModel.defaultRule = this._stylesheets[i]; break; } } //Temporary create properties for each rule we need to save the index of the rule var len = this.documentRoot.elementModel.defaultRule.cssRules.length; for(var j = 0; j < len; j++) { //console.log(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText); if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "*") { this.documentRoot.elementModel.transitionStopRule = this.documentRoot.elementModel.defaultRule.cssRules[j]; } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "body") { this.documentRoot.elementModel.body = this.documentRoot.elementModel.defaultRule.cssRules[j]; } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "#Viewport") { this.documentRoot.elementModel.viewPort = this.documentRoot.elementModel.defaultRule.cssRules[j]; } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === ".stageDimension") { this.documentRoot.elementModel.stageDimension = this.documentRoot.elementModel.defaultRule.cssRules[j]; } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === ".stageView") { this.documentRoot.elementModel.stageView = this.documentRoot.elementModel.defaultRule.cssRules[j]; } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "#stageBG") { this.documentRoot.elementModel.stageBackground = this.documentRoot.elementModel.defaultRule.cssRules[j]; } } this.callback(this); //Setting webGL data if (this._templateDocument.webgl) { this.glData = this._templateDocument.webgl; } } //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// }.bind(this), 1000); } }, //////////////////////////////////////////////////////////////////// // 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; } }, //////////////////////////////////////////////////////////////////// _setSWFObjectScript: { value: function() { if(!this._swfObject) { /* var swfObj = document.createElement("script"); swfObj.type = "text/javascript"; swfObj.src = "../../user-document-templates/external-libs/swf-object/swfobject.js"; swfObj.id = "swfObject"; var head= this._document.getElementsByTagName('head')[0]; head.appendChild(swfObj); this._swfObject = true; */ } } }, //////////////////////////////////////////////////////////////////// // livePreview: { enumerable: false, value: function () { //TODO: Add logic to handle save before preview this.application.ninja.documentController.handleExecuteSaveAll(null); //Temp check for webGL Hack if (this.application.ninja.documentController.activeDocument.glData.length && this.application.ninja.documentController.activeDocument.glData.length > 0) { setTimeout(function () {window.open(this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController._activeDocument.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]);}.bind(this), 3500); } else { window.open(this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController._activeDocument.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]); } //chrome.tabs.create({url: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController._activeDocument.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]}); } }, //////////////////////////////////////////////////////////////////// // save: { enumerable: false, value: function () { //TODO: Add code view logic and also styles for HTML if (this.currentView === 'design') { var styles = []; for (var k in this._document.styleSheets) { if (this._document.styleSheets[k].ownerNode && this._document.styleSheets[k].ownerNode.getAttribute) { if (this._document.styleSheets[k].ownerNode.getAttribute('ninjatemplate') === null) { styles.push(this._document.styleSheets[k]); } } } return {mode: 'html', document: this._userDocument, webgl: this.glData, styles: styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML}; } else if (this.currentView === "code"){ //TODO: Would this get call when we are in code of HTML? } else { //Error } } }, //////////////////////////////////////////////////////////////////// // saveAll: { enumerable: false, value: function () { //TODO: Add code view logic and also styles for HTML if (this.currentView === 'design') { var css = []; for (var k in this._document.styleSheets) { if (this._document.styleSheets[k].ownerNode && this._document.styleSheets[k].ownerNode.getAttribute) { if (this._document.styleSheets[k].ownerNode.getAttribute('ninjatemplate') === null) { css.push(this._document.styleSheets[k]); } } } return {mode: 'html', document: this._userDocument, webgl: this.glData, css: css, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML}; } else if (this.currentView === "code"){ //TODO: Would this get call when we are in code of HTML? } else { //Error } } }, //////////////////////////////////////////////////////////////////// saveAppState:{ enumerable: false, value: function () { this.savedLeftScroll = this.application.ninja.stage._iframeContainer.scrollLeft; this.savedTopScroll = this.application.ninja.stage._iframeContainer.scrollTop; this.gridHorizontalSpacing = this.application.ninja.stage.drawUtils.gridHorizontalSpacing; this.gridVerticalSpacing = this.application.ninja.stage.drawUtils.gridVerticalSpacing; if(typeof this.application.ninja.selectedElements !== 'undefined'){ this.selectionModel = this.application.ninja.selectedElements.slice(0); } this.draw3DGrid = this.application.ninja.appModel.show3dGrid; //persist a clone of history per document this.undoStack = this.application.ninja.undocontroller.undoQueue.slice(0); this.redoStack = this.application.ninja.undocontroller.redoQueue.slice(0); this.application.ninja.undocontroller.clearHistory();//clear history to give the next document a fresh start //pause videos on switching or closing the document, so that the browser does not keep downloading the media data this.pauseVideos(); } }, //////////////////////////////////////////////////////////////////// restoreAppState:{ enumerable: false, value: function () { this.application.ninja.stage.drawUtils.gridHorizontalSpacing = this.gridHorizontalSpacing; this.application.ninja.stage.drawUtils.gridVerticalSpacing = this.gridVerticalSpacing; if((this.savedLeftScroll !== null) && (this.savedTopScroll !== null)){ this.application.ninja.stage._iframeContainer.scrollLeft = this.savedLeftScroll; this.application.ninja.stage._iframeContainer.scrollTop = this.savedTopScroll; this.application.ninja.stage.handleScroll(); } this.application.ninja.currentSelectedContainer = this.documentRoot; if(this.selectionModel){ this.application.ninja.selectedElements = this.selectionModel.slice(0); } this.application.ninja.appModel.show3dGrid = this.draw3DGrid; this.application.ninja.undocontroller.undoQueue = this.undoStack.slice(0); this.application.ninja.undocontroller.redoQueue = this.redoStack.slice(0); } }, //////////////////////////////////////////////////////////////////// /** *pause videos on switching or closing the document, so that the browser does not keep downloading the media data */ pauseVideos:{ value:function(){ var videosArr = this.documentRoot.getElementsByTagName("video"), i=0; for(i=0;i