From 75fe4f36a6768d688792bc1925cfa4bfa508ac3e Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 22 May 2012 18:02:01 -0700 Subject: Adding redirect from app folder in templates This doesn't resolve the issue of XHR requests made in Montage. --- js/controllers/document-controller.js | 3 ++- js/document/views/design.js | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) (limited to 'js') diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js index d99fadbb..2eba556e 100755 --- a/js/controllers/document-controller.js +++ b/js/controllers/document-controller.js @@ -80,6 +80,8 @@ var DocumentController = exports.DocumentController = Montage.create(Component, return {redirectUrl: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+request.url.split(chrome.extension.getURL('js/document/templates/banner/'))[1]}; } else if (request.url.indexOf('js/document/templates/html') !== -1) { return {redirectUrl: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+request.url.split(chrome.extension.getURL('js/document/templates/html/'))[1]}; + } else if (request.url.indexOf('js/document/templates/app') !== -1) { + return {redirectUrl: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+request.url.split(chrome.extension.getURL('js/document/templates/app/'))[1]}; } else { //Error, not a valid folder } @@ -103,7 +105,6 @@ var DocumentController = exports.DocumentController = Montage.create(Component, }, //////////////////////////////////////////////////////////////////// - diff --git a/js/document/views/design.js b/js/document/views/design.js index b3887fdf..6da1b2e4 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -105,6 +105,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { // onTemplateLoad: { value: function (e) { + //console.log(this.iframe.contentWindow); this.application.ninja.documentController._hackRootFlag = true; //TODO: Add support to constructing URL with a base HREF var basetag = this.content.document.getElementsByTagName('base'); -- cgit v1.2.3 From 5914c5b2209c4b8daac4249bb76cda5c9314c4e6 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 24 May 2012 00:07:23 -0700 Subject: Cleaning up referencing to 'documentRoot' and '_document' Moved to reference new model in DOM architecture rework. This should not affect anything, just moving the references, and also the setting to the render methods in the design view. --- .../layout/bread-crumb.reel/bread-crumb.js | 4 +- js/controllers/document-controller.js | 2 +- js/controllers/selection-controller.js | 6 +- js/controllers/styles-controller.js | 36 +- js/document/_toDelete/html-document.js | 874 +++++++++++++++++++++ js/document/_toDelete/text-document.js | 198 +++++ js/document/document-html.js | 34 +- js/document/html-document.js | 874 --------------------- js/document/models/html.js | 5 + js/document/text-document.js | 198 ----- js/document/views/design.js | 8 + js/helper-classes/3D/draw-utils.js | 12 +- js/helper-classes/3D/snap-manager.js | 6 +- js/helper-classes/3D/view-utils.js | 44 +- js/mediators/element-mediator.js | 4 +- js/ninja.reel/ninja.js | 14 +- .../CSSPanel/CSSPanelBase.reel/CSSPanelBase.js | 2 +- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 6 +- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 4 +- .../components-panel.reel/components-panel.js | 4 +- js/panels/css-panel/styles-view-delegate.js | 2 +- js/panels/properties.reel/properties.js | 12 +- .../properties.reel/sections/custom.reel/custom.js | 2 +- .../sections/position-size.reel/position-size.js | 8 +- .../sections/three-d-view.reel/three-d-view.js | 2 +- js/stage/layout.js | 6 +- js/stage/stage.reel/stage.js | 28 +- js/stage/tool-handle.js | 4 +- js/tools/PanTool.js | 16 +- js/tools/Rotate3DToolBase.js | 12 +- js/tools/RotateStage3DTool.js | 8 +- js/tools/SelectionTool.js | 6 +- js/tools/Translate3DToolBase.js | 4 +- js/tools/ZoomTool.js | 2 +- js/tools/drawing-tool-base.js | 12 +- js/tools/modifier-tool-base.js | 8 +- 36 files changed, 1232 insertions(+), 1235 deletions(-) create mode 100755 js/document/_toDelete/html-document.js create mode 100755 js/document/_toDelete/text-document.js delete mode 100755 js/document/html-document.js delete mode 100755 js/document/text-document.js (limited to 'js') diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.js b/js/components/layout/bread-crumb.reel/bread-crumb.js index d2a6b1e4..2db775eb 100755 --- a/js/components/layout/bread-crumb.reel/bread-crumb.js +++ b/js/components/layout/bread-crumb.reel/bread-crumb.js @@ -23,7 +23,7 @@ exports.Breadcrumb = Montage.create(Component, { value: function(){ if(!this.application.ninja.documentController.activeDocument) { this.disabled = true; - this.application.ninja.currentSelectedContainer = (this.application.ninja.currentDocument ? this.application.ninja.currentDocument.documentRoot : null); + this.application.ninja.currentSelectedContainer = (this.application.ninja.currentDocument ? this.application.ninja.currentDocument.model.documentRoot : null); } } }, @@ -65,7 +65,7 @@ exports.Breadcrumb = Montage.create(Component, { parentNode = this.container; - while(parentNode !== this.application.ninja.currentDocument.documentRoot) { + while(parentNode !== this.application.ninja.currentDocument.model.documentRoot) { this.containerElements.unshift({"node": parentNode, "nodeUuid":parentNode.uuid, "label": parentNode.nodeName}); parentNode = parentNode.parentNode; } diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js index 4edcff48..f84e4da5 100755 --- a/js/controllers/document-controller.js +++ b/js/controllers/document-controller.js @@ -475,7 +475,7 @@ var DocumentController = exports.DocumentController = Montage.create(Component, this.activeDocument = doc; // Initialize the documentRoot styles - this.initializeRootStyles(doc.documentRoot); + this.initializeRootStyles(doc.model.documentRoot); // Flag to stop stylesheet dirty event this._hackInitialStyles = false; diff --git a/js/controllers/selection-controller.js b/js/controllers/selection-controller.js index 1092615a..7bef0db8 100755 --- a/js/controllers/selection-controller.js +++ b/js/controllers/selection-controller.js @@ -114,7 +114,7 @@ exports.SelectionController = Montage.create(Component, { value: function(event) { var selected = [], childNodes = [], self = this; - childNodes = this.application.ninja.currentDocument.documentRoot.childNodes; + childNodes = this.application.ninja.currentDocument.model.documentRoot.childNodes; childNodes = Array.prototype.slice.call(childNodes, 0); childNodes.forEach(function(item) { if(self.isNodeTraversable(item)) { @@ -256,10 +256,10 @@ exports.SelectionController = Montage.create(Component, { for(var i=0, uuid; this.application.ninja.selectedElements[i];i++) { // Check for multiple selection and excluding inner elements - if(item.parentNode && item.parentNode !== this.application.ninja.currentDocument.documentRoot) { + if(item.parentNode && item.parentNode !== this.application.ninja.currentDocument.model.documentRoot) { var outerElement = item.parentNode; - while(outerElement.parentNode && outerElement.parentNode !== this.application.ninja.currentDocument.documentRoot) { + while(outerElement.parentNode && outerElement.parentNode !== this.application.ninja.currentDocument.model.documentRoot) { outerElement = outerElement.parentNode; } diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index dcbe0eaf..04e87ba7 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js @@ -99,7 +99,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { // Setter will handle null case this.defaultStylesheet = this.getSheetFromElement(this.CONST.DEFAULT_SHEET_ID); - this.userStyleSheets = nj.toArray(document._document.styleSheets).filter(function(sheet) { + this.userStyleSheets = nj.toArray(document.model.views.design.document.styleSheets).filter(function(sheet) { return sheet !== this._stageStylesheet; }, this); @@ -132,7 +132,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { else if(this._activeDocument.model && this._activeDocument.model.views && this._activeDocument.model.views.design){ ///// Use the last stylesheet in the document as the default - var sheets = this._activeDocument._document.styleSheets, + var sheets = this._activeDocument.model.views.design.document.styleSheets, lastIndex = sheets.length-1; ///// If the only sheet is the stage stylesheet, this will be true @@ -887,7 +887,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { getAnimationRuleWithName : { value: function(name, document) { - var doc = document || this._activeDocument._document, + var doc = document || this._activeDocument.model.views.design.document, animRules = this.getDocumentAnimationRules(doc), rule, i; @@ -909,7 +909,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { getDocumentAnimationRules : { value: function(document) { - var sheets = (document) ? document.styleSheets : this._activeDocument._document.styleSheets, + var sheets = (document) ? document.styleSheets : this._activeDocument.model.views.design.document.styleSheets, rules = []; nj.toArray(sheets).forEach(function(sheet) { @@ -1272,7 +1272,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { createStylesheet : { value: function(id, document) { - var doc = document || this._activeDocument._document, + var doc = document || this._activeDocument.model.views.design.document, sheetElement, sheet; sheetElement = nj.make('style', { @@ -1329,7 +1329,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { getSheetFromElement : { value : function(element, context) { - var doc = context || this._activeDocument._document, + var doc = context || this._activeDocument.model.views.design.document, el = (typeof element === 'string') ? nj.$(element, doc) : element; if(el && el.sheet) { @@ -1572,7 +1572,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { getStyleTest : function() { var properties = ['background-position', 'width', 'height']; - var el = stylesController.activeDocument._document.getElementById('Div_1'); + var el = stylesController.activeDocument.model.views.design.document.getElementById('Div_1'); properties.forEach(function(prop) { console.log('Getting value for "' + prop + '": ' + stylesController.getElementStyle(el, prop, true)); @@ -1591,7 +1591,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { }); }, getMatchingRulesTest : function() { - var el = stylesController.activeDocument._document.getElementById('Div_1'), + var el = stylesController.activeDocument.model.views.design.document.getElementById('Div_1'), mRules; this.addRulesTest(); @@ -1606,7 +1606,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { ///// apply a new style using setElementStyle, and print out the new ///// value. - var el = stylesController.activeDocument._document.getElementById('Div_1'), + var el = stylesController.activeDocument.model.views.design.document.getElementById('Div_1'), bg; console.log('----- Set Element Style Test -----'); @@ -1631,14 +1631,14 @@ var stylesController = exports.StylesController = Montage.create(Component, { var rules = ['#UserContent div { background-color: blue }']; rules.forEach(function(rule) { stylesController.addRule(rule); }); - var el = stylesController.activeDocument._document.getElementById('Div_1'); + var el = stylesController.activeDocument.model.views.design.document.getElementById('Div_1'); stylesController.setElementStyle(el, 'color', 'red'); ///// the #Div_1 rule created by tag tool should have the color style }, setElementStyle3Test : function() { ///// First, draw a div onto the stage - var el = stylesController.activeDocument._document.getElementById('Div_1'); + var el = stylesController.activeDocument.model.views.design.document.getElementById('Div_1'); //// now add a multi-target rule overriding the bg color var rules = [ @@ -1655,14 +1655,14 @@ var stylesController = exports.StylesController = Montage.create(Component, { }, setGroupStyleTest : function() { ///// draw 2 divs on stage - var el1 = stylesController.activeDocument._document.getElementById('Div_1'); - var el2 = stylesController.activeDocument._document.getElementById('Div_2'); + var el1 = stylesController.activeDocument.model.views.design.document.getElementById('Div_1'); + var el2 = stylesController.activeDocument.model.views.design.document.getElementById('Div_2'); var dominantRule = stylesController.getDominantRuleForGroup([el1, el2], 'color'); }, setElementStylesTest : function() { ///// draw a div on stage - var el = stylesController.activeDocument._document.getElementById('Div_1'); + var el = stylesController.activeDocument.model.views.design.document.getElementById('Div_1'); mRules = stylesController.getMatchingRules(el, true); mRules.forEach(function(rule) { @@ -1681,7 +1681,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { console.log('----- Create Override Rule Test -----'); - var el = stylesController.activeDocument._document.getElementById('Div_1'), + var el = stylesController.activeDocument.model.views.design.document.getElementById('Div_1'), rule = stylesController.addRule('#UserContent div { background-color: blue }'), override; @@ -1693,7 +1693,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { }, deleteRulesTest : function() { // drag one div on stage - var el = stylesController.activeDocument._document.getElementById('Div_1'); + var el = stylesController.activeDocument.model.views.design.document.getElementById('Div_1'); this.addRulesTest(); mRules = stylesController.getMatchingRules(el, true); @@ -1705,8 +1705,8 @@ var stylesController = exports.StylesController = Montage.create(Component, { matchesElementsExclusivelyTest : function() { /// drag two divs on stage var rule = stylesController.addRule('#Div_1, #Div_3 { color:black; }'); - var el1 = stylesController.activeDocument._document.getElementById('Div_1'); - var el2 = stylesController.activeDocument._document.getElementById('Div_2'); + var el1 = stylesController.activeDocument.model.views.design.document.getElementById('Div_1'); + var el2 = stylesController.activeDocument.model.views.design.document.getElementById('Div_2'); console.log('Does rule match elements exclusively? ' + stylesController.matchesElementsExclusively(rule, [el1, el2])); } diff --git a/js/document/_toDelete/html-document.js b/js/document/_toDelete/html-document.js new file mode 100755 index 00000000..447d90e3 --- /dev/null +++ b/js/document/_toDelete/html-document.js @@ -0,0 +1,874 @@ +/* +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, + MaterialsModel = require("js/models/materials-model").MaterialsModel; +//////////////////////////////////////////////////////////////////////// +// +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) { + var matLib = MaterialsModel.exportMaterials(); + this._glData = [matLib]; + this.collectGLData(elt, this._glData ); + } else { + this._glData = null + } + // + return this._glData; + }, + set: function(value) { + var elt = this.documentRoot; + if (elt) + { + /* + // Use this code to test the runtime version of WebGL + var cvsDataMngr = Object.create(NinjaCvsRt.CanvasDataManager, {}); + cvsDataMngr.loadGLData(elt, value); + */ + + // /* + 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 ); + } + + 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.strokeStyle = "solid"; + //shapeModel.strokeStyleIndex + switch (root.geomType()) + { + case root.GEOM_TYPE_RECTANGLE: + elementModel.selection = "Rectangle"; + elementModel.pi = "RectanglePi"; + 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.innerRadius = root._innerRadius; + break; + + case root.GEOM_TYPE_LINE: + elementModel.selection = "Line"; + elementModel.pi = "LinePi"; + shapeModel.slope = root._slope; + break; + + case root.GEOM_TYPE_BRUSH_STROKE: + elementModel.selection = "BrushStroke"; + elementModel.pi = "BrushStrokePi"; + break; + + case root.GEOM_TYPE_CUBIC_BEZIER: + elementModel.selection = "Subpath"; + elementModel.pi = "SubpathPi"; + 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]; + + //TODO: Make public version of this.application.ninja.ioMediator.getNinjaPropUrlRedirect with dynamic ROOT + 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"); + NJUtils.makeElementModel(this.stageBG, "Stage", "stage"); + NJUtils.makeElementModel(this.iframe.contentWindow.document.getElementById("Viewport"), "Stage", "stage"); + + // Initialize the 3D properties + this.documentRoot.elementModel.props3D.init(this.documentRoot, true); + this.stageBG.elementModel.props3D.init(this.stageBG, true); + this.iframe.contentWindow.document.getElementById("Viewport").elementModel.props3D.init(this.iframe.contentWindow.document.getElementById("Viewport"), true); + + 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 + 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, mjs: this._userComponents, webgl: this.glData, styles: styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML}; + 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, mjs: this._userComponents, webgl: this.glData, css: css, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML}; + 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 + } + } + } +}); \ No newline at end of file diff --git a/js/document/_toDelete/text-document.js b/js/document/_toDelete/text-document.js new file mode 100755 index 00000000..2574b67c --- /dev/null +++ b/js/document/_toDelete/text-document.js @@ -0,0 +1,198 @@ +/* +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. + */ + +//BaseDocument Object for all files types and base class for HTML documents. + +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +var TextDocument = exports.TextDocument = Montage.create(Component, { + + + //TODO: Clean up, test + + + + + + //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// + //Taken from text-document, which shouldn't be needed + + // PRIVATE MEMBERS + _codeEditor: { + value: { + "editor": { value: null, enumerable: false } + + } + }, + + _editor: { value: null, enumerable: false }, + _hline: { value: null, enumerable: false }, + + _textArea: {value: null, enumerable: false }, + + _userDocument: {value: null, enumerable: false }, + + _source: { value: null, enumerable: false}, + + source: { + get: function() { return this._source;}, + set: function(value) { this._source = value;} + }, + + // PUBLIC MEMBERS + + _savedLeftScroll: {value:null}, + _savedTopScroll: {value:null}, + + //****************************************// + //PUBLIC API + + + // GETTERS / SETTERS + + savedLeftScroll:{ + get: function() { return this._savedLeftScroll; }, + set: function(value) { this._savedLeftScroll = value} + }, + + savedTopScroll:{ + get: function() { return this._savedTopScroll; }, + set: function(value) { this._savedTopScroll = value} + }, + + textArea: { + get: function() { return this._textArea; }, + set: function(value) { this._textArea = value; } + }, + editor: { + get: function() { return this._editor; }, + set: function(value) { this._editor = value} + }, + + hline: { + get: function() { return this._hline; }, + set: function(value) {this._hline = value; } + }, + + + //////////////////////////////////////////////////////////////////// + // + initialize: { + value: function(file, uuid, textArea, container, callback) { + // + this._userDocument = file; + // + this.init(file.name, file.uri, file.extension, container, uuid, callback); + // + this.currentView = "code"; + this.textArea = textArea; + } + }, + //////////////////////////////////////////////////////////////////// + // + save: { + enumerable: false, + value: function () { + //TODO: Improve sequence + this.editor.save(); + return {mode: this._userDocument.extension, document: this._userDocument, content: this.textArea.value}; + } + }, + //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// + + + + + + + + + + + /** Private Members **/ + _name: { value: null, enumerable: false }, + _uri: { value: null, enumerable: false }, + _documentType: { value: null, enumerable: false }, + _container: { value: null, enumerable: false }, + _uuid: { value: null, enumerable: false }, + _isActive: { value: true, enumerable: false }, + _needsSave: { value: false, enumarable: false }, + _callback: { value: null, enumerable: false }, + _currentView: { value: null, enumerable: false}, + + /** Getters/Setters **/ + name: { + get: function() { return this._name; }, + set: function(value) { this._name = value; } + }, + + uri: { + get: function() { return this._uri; }, + set: function(value) { this._uri = value; } + }, + + documentType: { + get: function() { return this._documentType; }, + set: function(value) { this._documentType = value; } + }, + + container: { + get: function() { return this._container; }, + set: function(value) { this._container = value; } + }, + + uuid: { + get: function() { return this._uuid; }, + set: function(value) { this._uuid = value; } + }, + + isActive: { + get: function() { return this._isActive; }, + set: function(value) { this._isActive = value; } + }, + + needsSave: { + get: function() { return this._needsSave; }, + set: function(value) { + this._needsSave = value; + } + }, + + callback: { + get: function() { return this._callback; }, + set: function(value) { this._callback = value; } + }, + + currentView: { + get: function() { return this._currentView; }, + set: function(value) { this._currentView = value } + }, + + /** Base Methods **/ + init: { + value: function(name, uri, type, container, uuid, callback) { + this.name = name; + this.uri = uri; + this.documentType = type; + this.container = container; + this.uuid = uuid; + this.callback = callback; + } + }, + + loadDocument: { + value: function() { + // Have the XHR here? + } + } +}); \ No newline at end of file diff --git a/js/document/document-html.js b/js/document/document-html.js index f92a425c..2375632c 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -6,10 +6,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot //////////////////////////////////////////////////////////////////////// // -var Montage = require("montage/core/core").Montage, - Component = require("montage/ui/component").Component, - HtmlDocumentModel = require("js/document/models/html").HtmlDocumentModel, - DesignDocumentView = require("js/document/views/design").DesignDocumentView; +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component, + HtmlDocumentModel = require("js/document/models/html").HtmlDocumentModel, + DesignDocumentView = require("js/document/views/design").DesignDocumentView; //////////////////////////////////////////////////////////////////////// // exports.HtmlDocument = Montage.create(Component, { @@ -32,16 +32,11 @@ exports.HtmlDocument = Montage.create(Component, { // _observer: { value: null - }, - //////////////////////////////////////////////////////////////////// - // - _document: { - value: null //TODO: Figure out if this will be needed, probably not }, //////////////////////////////////////////////////////////////////// // exclusionList: { - value: ["HTML", "BODY", "NINJA-CONTENT"] //TODO: Update to correct list + value: ["HTML", "BODY", "NINJA-CONTENT"] }, //////////////////////////////////////////////////////////////////// // @@ -72,7 +67,7 @@ exports.HtmlDocument = Montage.create(Component, { //Hiding iFrame, just initiliazing this.model.views.design.hide(); } else { - //ERROR: Design View not initilized + //ERROR: Design View not initialized } // if (view === 'design') { @@ -84,23 +79,12 @@ exports.HtmlDocument = Montage.create(Component, { this.model.views.design.show(); this.model.views.design.iframe.style.opacity = 0; this.model.views.design.content = this.model.file.content; - //TODO: Improve reference + //TODO: Improve reference (probably through binding values) this.model.views.design.model = this.model; - // - //TODO: Clean up + //Rendering design view, using observers to know when template is ready this.model.views.design.render(function () { - //TODO: Identify and remove usage of '_document' - this._document = this.model.views.design.document; - //TODO: Remove usage, seems as not needed - if (template && template.type === 'banner') { - this.documentRoot = this.model.views.design.document.body.getElementsByTagName('ninja-content')[0]; - } else { - this.documentRoot = this.model.views.design.document.body; - } //TODO: Why is this needed? - this._liveNodeList = this.documentRoot.getElementsByTagName('*'); - //Initiliazing document model - document.application.njUtils.makeElementModel(this.documentRoot, "Body", "body"); + this._liveNodeList = this.model.documentRoot.getElementsByTagName('*'); //Adding observer to know when template is ready this._observer = new WebKitMutationObserver(this.handleTemplateReady.bind(this)); this._observer.observe(this.model.views.design.document.head, {childList: true}); diff --git a/js/document/html-document.js b/js/document/html-document.js deleted file mode 100755 index 447d90e3..00000000 --- a/js/document/html-document.js +++ /dev/null @@ -1,874 +0,0 @@ -/* -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, - MaterialsModel = require("js/models/materials-model").MaterialsModel; -//////////////////////////////////////////////////////////////////////// -// -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 }, - _snapp