/*
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,
CanvasDataManager = require("js/lib/rdge/runtime/CanvasDataManager").CanvasDataManager,
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");
this._glData = null;
if (elt)
{
var cdm = new CanvasDataManager();
this._glData = [];
cdm.collectGLData( elt, this._glData );
}
return this._glData;
},
set: function(value)
{
var elt = this.documentRoot;
if (elt)
{
// FOR JOSE: The following commented out lines are what the runtime
// version should execute.
// var loadForRuntime = true;
// if (loadForRuntime)
// {
// var cdm = new CanvasDataManager();
// cdm.loadGLData(elt, value );
// }
// else
{
var nWorlds= value.length;
for (var i=0; i= 0)
{
var endIndex = importStr.indexOf( "\n", startIndex );
if (endIndex > 0)
{
var id = importStr.substring( startIndex+4, endIndex );
if (id)
{
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();
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._strokeMaterial.dup();
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.dup();
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.dup();
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);
//Launching 'blank' tab for testing movie
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
}
},
////////////////////////////////////////////////////////////////////
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);
}
}
////////////////////////////////////////////////////////////////////
});