From bb9adf8a3162a5bbed5a4a8f0d63deeb75f76e61 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 5 Mar 2012 22:27:19 -0800 Subject: removing repetition from the panel container and using a static list of panels. - Fixing the bugs associated with the repetition of component and PI problems. Signed-off-by: Valerio Virgillito --- js/data/panels-data.js | 25 --- js/ninja.reel/ninja.html | 2 +- .../ComponentsPanelBase.js | 2 +- js/panels/Panel.reel/Panel.js | 101 ++++++----- js/panels/PanelContainer.reel/PanelContainer.html | 110 ++++++++++++ js/panels/PanelContainer.reel/PanelContainer.js | 193 +++++++++++++++++++++ .../PanelContainer.reel/PanelContainer.html | 146 ---------------- .../PanelContainer.reel/PanelContainer.js | 180 ------------------- 8 files changed, 366 insertions(+), 393 deletions(-) create mode 100755 js/panels/PanelContainer.reel/PanelContainer.html create mode 100755 js/panels/PanelContainer.reel/PanelContainer.js delete mode 100755 js/panels/PanelContainer/PanelContainer.reel/PanelContainer.html delete mode 100755 js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js (limited to 'js') diff --git a/js/data/panels-data.js b/js/data/panels-data.js index aa5057a2..2422f5e7 100644 --- a/js/data/panels-data.js +++ b/js/data/panels-data.js @@ -19,7 +19,6 @@ exports.PanelsData = Montage.create(Montage, { scrollable: false, collapsed: false, open: true, - contentComponent: null, modulePath: "js/panels/Color/colorpanelbase.reel", moduleName: "ColorPanelBase" }, @@ -32,7 +31,6 @@ exports.PanelsData = Montage.create(Montage, { scrollable: true, collapsed: false, open: true, - contentComponent: null, modulePath: "js/panels/properties.reel", moduleName: "Properties" }, @@ -45,7 +43,6 @@ exports.PanelsData = Montage.create(Montage, { collapsed: true, scrollable: true, open: true, - contentComponent: null, modulePath: "js/panels/Materials/materials-library-panel.reel", moduleName: "MaterialsLibraryPanel" }, @@ -58,7 +55,6 @@ exports.PanelsData = Montage.create(Montage, { scrollable: true, collapsed: true, open: true, - contentComponent: null, modulePath: "js/panels/Components/ComponentsPanelBase.reel", moduleName: "ComponentsPanelBase" }, @@ -71,7 +67,6 @@ exports.PanelsData = Montage.create(Montage, { // scrollable: true, // collapsed: false, // open: true, -// content: null, // modulePath: "js/panels/Project/projectpanelbase.reel", // moduleName: "ProjectPanelBase" // }, @@ -84,7 +79,6 @@ exports.PanelsData = Montage.create(Montage, { scrollable: true, collapsed: true, open: true, - contentComponent: null, modulePath: "js/panels/CSSPanel/CSSPanelBase.reel", moduleName: "CSSPanelBase" }, @@ -97,7 +91,6 @@ exports.PanelsData = Montage.create(Montage, { collapsed: true, scrollable: true, open: true, - contentComponent: null, modulePath: "js/panels/presets/content.reel", moduleName: "content" } @@ -118,24 +111,6 @@ exports.PanelsData = Montage.create(Montage, { this._panelOrder = val; } } - - - panels: { - get: function() { - var filtered = this._panels.filter(function(item) { - return item.open; - }); - - filtered.sort(function(a,b) { - a.name - }); - - return filtered; - }, - set : function() { - - } - } */ }); \ No newline at end of file diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index 112f844e..430b8aa0 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html @@ -167,7 +167,7 @@ }, "panelContainer": { - "module": "js/panels/PanelContainer/PanelContainer.reel", + "module": "js/panels/PanelContainer.reel", "name": "PanelContainer", "properties": { "element": {"#": "rightPanelContent"}, diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js index b4eec771..b6bee37d 100755 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js @@ -118,7 +118,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component didCreate: { value: function() { // Setup the drop delegate - this.application.ninja.dragDropMediator.dropDelegate = this; +// this.application.ninja.dragDropMediator.dropDelegate = this; // Loop through the component and load the JSON data for them this._loadComponents(); } diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js index e0bf3f18..be03d019 100755 --- a/js/panels/Panel.reel/Panel.js +++ b/js/panels/Panel.reel/Panel.js @@ -9,31 +9,52 @@ var Component = require("montage/ui/component").Component; exports.Panel = Montage.create(Component, { - name: { value: "Panel" }, - collapsedHeight: {value: 26}, - _collapsed: {value: false}, - _height: { value: 200 }, - minHeight: {value: 200 }, - maxHeight: { value: null}, - flexible: {value: true}, - _locked: { value: false}, - isResizing: {value: false }, - resizer: {value: null }, - modulePath: {value: null}, - moduleName: {value: null}, - _contentComponent: {value: null}, - - contentComponent: { - get: function() { - return this._contentComponent; - }, - set: function(val) { - if (val !== null && val !== this._contentComponent) { - this.panelContent.content = val; - this.panelContent.needsDraw = true; - this._contentComponent = val; - } - } + name: { + value: "Panel" + }, + + _collapsed: { + value: false + }, + + _height: { + value: 200 + }, + + minHeight: { + value: 200 + }, + + maxHeight: { + value: null + }, + + flexible: { + value: true + }, + + _locked: { + value: false + }, + + isResizing: { + value: false + }, + + _resizedHeight: { + value: 0 + }, + + resizer: { + value: null + }, + + modulePath: { + value: null + }, + + moduleName: { + value: null }, collapsed: { @@ -63,10 +84,6 @@ exports.Panel = Montage.create(Component, { } }, - _resizedHeight: { - value: 0 - }, - locked: { get: function() { return this._locked; @@ -94,17 +111,21 @@ exports.Panel = Montage.create(Component, { prepareForDraw: { value: function() { - //TODO: This line should not be here this line hits each time a panel is loaded. Will Need to move to instance call; - this.application.ninja.colorController.colorView = this.application.ninja.colorController.colorPanelBase.create(); - var myContent; - var that = this; - - myContent = require.async(this.modulePath) - .then(function(panelContent) { - var componentRequire = panelContent[that.moduleName]; - that.contentComponent = componentRequire.create(); - }) - .end(); + if(this.name === "Color") { + this.application.ninja.colorController.colorView = this.application.ninja.colorController.colorPanelBase.create(); + } + + if(this.modulePath && this.moduleName) { + console.log("load content"); + // Load the slot content + var that = this; + require.async(this.modulePath) + .then(function(panelContent) { + var componentRequire = panelContent[that.moduleName]; + that.panelContent.content = componentRequire.create(); + }) + .end(); + } } }, diff --git a/js/panels/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer.reel/PanelContainer.html new file mode 100755 index 00000000..251e86e4 --- /dev/null +++ b/js/panels/PanelContainer.reel/PanelContainer.html @@ -0,0 +1,110 @@ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js new file mode 100755 index 00000000..51bd2df9 --- /dev/null +++ b/js/panels/PanelContainer.reel/PanelContainer.js @@ -0,0 +1,193 @@ +/* +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. + */ + +/* +Panel Container - A container for other panels +*/ +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +exports.PanelContainer = Montage.create(Component, { + + panelData: { + value: null + }, + + // This will hold the current loaded panels. + panels: { + value: [] + }, + + currentPanelState: { + value: {} + }, + + templateDidLoad: { + value: function() { + + var pLen, storedData; + + // Loop through the panels to add to the repetition and get the saved state + pLen = this.panelData.panels.length; + + // Get the saved panel state + storedData = this.application.localStorage.getItem("panels"); + + for(var i = 0; i < pLen; i++) { + + var p = this.panelData.panels[i]; + + this['panel_'+i].name = p.name; + this['panel_'+i].height = p.height; + this['panel_'+i].minHeight= p.minHeight; + this['panel_'+i].maxHeight = p.maxHeight; + this['panel_'+i].flexible = p.flexible; + this['panel_'+i].modulePath = p.modulePath; + this['panel_'+i].moduleName = p.moduleName; + + this.currentPanelState[p.name] = {}; + this.currentPanelState.version = "1.0"; + + if(storedData && storedData[p.name]) { + this['panel_'+i].collapsed = storedData[p.name].collapsed; + } + + this.currentPanelState[p.name].collapsed = this['panel_'+i].collapsed; + + // Check if current panel is open when feature is enabled + this.panels.push(p); + } + + this.application.localStorage.setItem("panels", this.currentPanelState); + + + } + }, + + prepareForDraw: { + value: function() { + window.addEventListener("resize", this, false); + } + }, + + handlePanelResizing: { + value: function(e) { + this._setPanelsSizes(e.target); + } + }, + + handleResize: { + value: function(e) { + this._setPanelsSizes(null); + } + }, + + handleDropped: { + value: function(e) { + var draggedIndex, droppedIndex = 0; + for(var i = 0; i< this.repeater.childComponents.length; i++ ) { + if (this.repeater.childComponents[i] === e._event.draggedComponent) { + draggedIndex = i; + } + + if (this.repeater.childComponents[i] === e._event.droppedComponent) { + droppedIndex = i; + } + } + + var panelRemoved = this.panelController.content.splice(draggedIndex,1); + this.panelController.content.splice(droppedIndex,0, panelRemoved[0]); + //console.log(draggedIndex, droppedIndex); + this._setPanelsSizes(null); + } + }, + + _setPanelsSizes: { + value: function(panelActivated) { + var len = this.panels.length, setLocked = true; + + for(var i = 0; i < len; i++) { + if(this['panel_'+i] === panelActivated || panelActivated === null) { + setLocked = false; + } + + this['panel_'+i].locked = setLocked; + this['panel_'+i].needsDraw = true; + } + } + }, + + _redrawPanels: { + value: function(panelActivated, unlockPanels) { + var maxHeight = this.element.offsetHeight, setLocked = true; + var len = this.panels.length; + + if(unlockPanels === true) { + setLocked = false; + } + + var childrensMinHeights = ((len - 1) * 26) + panelActivated.minHeight; + + for(var i = 0; i < len; i++) { + var obj = this['panel_'+i]; + + if(obj === panelActivated) { + setLocked = false; + } else if(obj.collapsed) { + //Collapsed Ignore the rest of the code + } else { + if (setLocked) { + if((maxHeight - childrensMinHeights) - obj.height > 0 ) { + childrensMinHeights += obj.height - 26; + } else { + this.currentPanelState[obj.name].collapsed = obj.collapsed = true; + this.application.localStorage.setItem("panels", this.currentPanelState); + } + } else { + if ((maxHeight - childrensMinHeights) - obj.minHeight > 0 ) { + childrensMinHeights += obj.minHeight - 26; + } else { + this.currentPanelState[obj.name].collapsed = obj.collapsed = true; + this.application.localStorage.setItem("panels", this.currentPanelState); + } + } + } + obj.locked = setLocked; + } + } + }, + + handleAction: { + value: function(e) { + var unlockPanels = true; + var afterPanel = false; + var panelName = e.target.parentComponent.name; + switch(e.target.identifier) { + case "btnCollapse": + this.currentPanelState[e.target.parentComponent.name].collapsed = e.target.parentComponent.collapsed; + this.application.localStorage.setItem("panels", this.currentPanelState); + this._setPanelsSizes(e.target.parentComponent); + this._redrawPanels(e.target.parentComponent, unlockPanels); + break; + case "btnClose": + this.panelController.content.forEach(function(obj) { + if(afterPanel) { + if(obj.flexible) { + unlockPanels = false; + } + } + if (obj.name === panelName) { + afterPanel = true; + this.panelController.removeObjects(obj); + } + }); + this._redrawPanels(e.target.parentComponent, unlockPanels); + break; + } + } + } + +}); \ No newline at end of file diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.html deleted file mode 100755 index 76f6b9c4..00000000 --- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.html +++ /dev/null @@ -1,146 +0,0 @@ - - - - - - - - - -
-
-
-
-
- - \ No newline at end of file diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js deleted file mode 100755 index 3a141b05..00000000 --- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js +++ /dev/null @@ -1,180 +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. - */ - -/* -Panel Container - A container for other panels -*/ -var Montage = require("montage/core/core").Montage; -var Component = require("montage/ui/component").Component; - -exports.PanelContainer = Montage.create(Component, { - - panelData: { - value: null - }, - - panels: { - value: [] - }, - - panelController: { - value: null - }, - - currentPanelState: { - value: {} - }, - - templateDidLoad: { - value: function() { - var pLen, storedData; - - // Loop through the panels to add to the repetition and get the saved state - pLen = this.panelData.panels.length; - - // Get the saved panel state - storedData = this.application.localStorage.getItem("panels"); - - for(var i = 0; i < pLen; i++) { - - var p = this.panelData.panels[i]; - - this.currentPanelState[p.name] = {}; - this.currentPanelState.version = "1.0"; - - if(storedData && storedData[p.name]) { - p.collapsed = storedData[p.name].collapsed; - } - - this.currentPanelState[p.name].collapsed = p.collapsed; - - this.panels.push(p); - } - - this.application.localStorage.setItem("panels", this.currentPanelState); - } - }, - - prepareForDraw: { - value: function() { - window.addEventListener("resize", this, false); - } - }, - - handlePanelResizing: { - value: function(e) { - this._setPanelsSizes(e.target); - } - }, - - handleResize: { - value: function(e) { - this._setPanelsSizes(null); - } - }, - - handleDropped: { - value: function(e) { - var draggedIndex, droppedIndex = 0; - for(var i = 0; i< this.repeater.childComponents.length; i++ ) { - if (this.repeater.childComponents[i] === e._event.draggedComponent) { - draggedIndex = i; - } - - if (this.repeater.childComponents[i] === e._event.droppedComponent) { - droppedIndex = i; - } - } - - var panelRemoved = this.panelController.content.splice(draggedIndex,1); - this.panelController.content.splice(droppedIndex,0, panelRemoved[0]); - //console.log(draggedIndex, droppedIndex); - this._setPanelsSizes(null); - } - }, - - _setPanelsSizes: { - value: function(panelActivated) { - var setLocked = true; - this.repeater.childComponents.forEach(function(obj) { - if (obj === panelActivated || panelActivated === null) { - setLocked = false; - } - - obj.locked = setLocked; - obj.needsDraw = true; - }); - } - }, - - _redrawPanels: { - value: function(panelActivated, unlockPanels) { - var maxHeight = this.element.offsetHeight; - var setLocked = true; - if(unlockPanels === true) { - setLocked = false; - } - - var childrensMinHeights = ((this.repeater.childComponents.length - 1) * 26) + panelActivated.minHeight; - - this.repeater.childComponents.forEach(function(obj) { - if(obj === panelActivated) { - setLocked = false; - } else if(obj.collapsed) { - //Collapsed Ignore the rest of the code - } else { - if (setLocked) { - if((maxHeight - childrensMinHeights) - obj.height > 0 ) { - childrensMinHeights += obj.height - 26; - } else { - this.currentPanelState[obj.name].collapsed = obj.collapsed = true; - this.application.localStorage.setItem("panels", this.currentPanelState); - } - } else { - if ((maxHeight - childrensMinHeights) - obj.minHeight > 0 ) { - childrensMinHeights += obj.minHeight - 26; - } else { - this.currentPanelState[obj.name].collapsed = obj.collapsed = true; - this.application.localStorage.setItem("panels", this.currentPanelState); - } - } - } - obj.locked = setLocked; - }, this); - } - }, - - handleAction: { - value: function(e) { - var unlockPanels = true; - var afterPanel = false; - var panelName = e.target.parentComponent.name; - switch(e.target.identifier) { - case "btnCollapse": - this.currentPanelState[e.target.parentComponent.name].collapsed = e.target.parentComponent.collapsed; - this.application.localStorage.setItem("panels", this.currentPanelState); - this._setPanelsSizes(e.target.parentComponent); - this._redrawPanels(e.target.parentComponent, unlockPanels); - break; - case "btnClose": - this.panelController.content.forEach(function(obj) { - if(afterPanel) { - if(obj.flexible) { - unlockPanels = false; - } - } - if (obj.name === panelName) { - afterPanel = true; - this.panelController.removeObjects(obj); - } - }); - this._redrawPanels(e.target.parentComponent, unlockPanels); - break; - } - } - } - -}); \ No newline at end of file -- cgit v1.2.3 From 4c16cf1d8085c70e1ed8fb2098954311bc22f81f Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 5 Mar 2012 22:33:51 -0800 Subject: remove console log Signed-off-by: Valerio Virgillito --- js/panels/Panel.reel/Panel.js | 1 - 1 file changed, 1 deletion(-) (limited to 'js') diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js index be03d019..2b308258 100755 --- a/js/panels/Panel.reel/Panel.js +++ b/js/panels/Panel.reel/Panel.js @@ -116,7 +116,6 @@ exports.Panel = Montage.create(Component, { } if(this.modulePath && this.moduleName) { - console.log("load content"); // Load the slot content var that = this; require.async(this.modulePath) -- cgit v1.2.3 From 4e35725e6c9044c37bef28b8c8d36f4b5c89bfd9 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 5 Mar 2012 23:18:31 -0800 Subject: Adding drag and drop Signed-off-by: Valerio Virgillito --- js/panels/PanelContainer.reel/PanelContainer.js | 22 +++++++++++++--------- js/panels/drag-drop-composer.js | 2 +- 2 files changed, 14 insertions(+), 10 deletions(-) (limited to 'js') diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js index 51bd2df9..dd720bd3 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer.reel/PanelContainer.js @@ -58,7 +58,7 @@ exports.PanelContainer = Montage.create(Component, { this.currentPanelState[p.name].collapsed = this['panel_'+i].collapsed; // Check if current panel is open when feature is enabled - this.panels.push(p); + this.panels.push(this['panel_'+i]); } this.application.localStorage.setItem("panels", this.currentPanelState); @@ -87,20 +87,24 @@ exports.PanelContainer = Montage.create(Component, { handleDropped: { value: function(e) { - var draggedIndex, droppedIndex = 0; - for(var i = 0; i< this.repeater.childComponents.length; i++ ) { - if (this.repeater.childComponents[i] === e._event.draggedComponent) { - draggedIndex = i; + var draggedIndex, droppedIndex = 0, len = this.panels.length; + +// console.log(e._event.draggedComponent); + for(var i = 0; i < len; i++) { + if(this.panels[i].name === e._event.draggedComponent.name) { + draggedIndex = i; // Actual component being dragged } - if (this.repeater.childComponents[i] === e._event.droppedComponent) { + if(this.panels[i].name === e._target.name) { droppedIndex = i; } } - var panelRemoved = this.panelController.content.splice(draggedIndex,1); - this.panelController.content.splice(droppedIndex,0, panelRemoved[0]); - //console.log(draggedIndex, droppedIndex); + if(draggedIndex !== droppedIndex) { + // switch panels + this.panels[droppedIndex].element.parentNode.insertBefore(this.panels[draggedIndex].element, this.panels[droppedIndex].element); + } + this._setPanelsSizes(null); } }, diff --git a/js/panels/drag-drop-composer.js b/js/panels/drag-drop-composer.js index e09f601d..b36c8334 100644 --- a/js/panels/drag-drop-composer.js +++ b/js/panels/drag-drop-composer.js @@ -10,7 +10,7 @@ var Composer = require("montage/ui/composer/composer").Composer; exports.DragDropComposer = Montage.create(Composer, { draggable: { - value: false // TODO: Turning this off until color Panel bug fixes are in + value: true }, droppable: { -- cgit v1.2.3 From 1cd89d4d06e3a8f2c221628b19cf26a2c69f5d3f Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 6 Mar 2012 11:24:25 -0800 Subject: Fixing WebGL not available bug --- js/document/html-document.js | 6 ++++-- js/mediators/io-mediator.js | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) (limited to 'js') diff --git a/js/document/html-document.js b/js/document/html-document.js index 5d507476..536fca47 100755 --- a/js/document/html-document.js +++ b/js/document/html-document.js @@ -668,7 +668,8 @@ exports.HTMLDocument = Montage.create(TextDocument, { } } } - return {mode: 'html', document: this._userDocument, 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}; + return {mode: 'html', document: this._userDocument, 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 { @@ -691,7 +692,8 @@ exports.HTMLDocument = Montage.create(TextDocument, { } } } - return {mode: 'html', document: this._userDocument, 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}; + return {mode: 'html', document: this._userDocument, 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 { diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js index e763c67c..65218526 100644 --- a/js/mediators/io-mediator.js +++ b/js/mediators/io-mediator.js @@ -150,7 +150,7 @@ exports.IoMediator = Montage.create(Component, { switch (file.mode) { case 'html': //Copy webGL library if needed - if (file.webgl.length > 0) { + if (file.webgl && file.webgl.length > 0) { for (var i in this.application.ninja.coreIoApi.ninjaLibrary.libs) { //Checking for RDGE library to be available if (this.application.ninja.coreIoApi.ninjaLibrary.libs[i].name === 'RDGE') { @@ -308,7 +308,7 @@ exports.IoMediator = Montage.create(Component, { } } //Checking for webGL elements in document - if (template.webgl.length) { + if (template.webgl && template.webgl.length) { // var json, matchingtags = [], webgltag, scripts = template.document.content.document.getElementsByTagName('script'); // -- cgit v1.2.3 From c2805e03c84b6e598556fd06d1ede7aaeea7ce9c Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 6 Mar 2012 16:17:54 -0800 Subject: Squashed commit FileIO-Build-Candidate into Master Fixing issues with HTML and CSS URLs. Adjusted RegEx logic. Also code a mirror update and undo/redo changes were merged into this request. Signed-off-by: Valerio Virgillito --- js/controllers/document-controller.js | 9 +- js/controllers/selection-controller.js | 12 +- js/controllers/undo-controller.js | 17 +- js/document/html-document.js | 181 +++++++++++++++++---- .../picker-navigator.reel/picker-navigator.js | 6 +- js/mediators/io-mediator.js | 163 +++++++++++++++---- 6 files changed, 307 insertions(+), 81 deletions(-) (limited to 'js') diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js index 64ff2c7e..194496a6 100755 --- a/js/controllers/document-controller.js +++ b/js/controllers/document-controller.js @@ -76,11 +76,14 @@ var DocumentController = exports.DocumentController = Montage.create(Component, // handleWebRequest: { value: function (request) { - if (this._hackRootFlag && request.url.indexOf('js/document/templates/montage-html') !== -1) { + //TODO: Check if frameId is proper + if (this._hackRootFlag && request.parentFrameId !== -1) { //TODO: Optimize creating string - return {redirectUrl: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+request.url.split('/')[request.url.split('/').length-1]}; - } + //console.log(this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1], request.url); + //return {redirectUrl: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+request.url.split('/')[request.url.split('/').length-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/montage-html/'))[1]}; } + } }, //////////////////////////////////////////////////////////////////// // diff --git a/js/controllers/selection-controller.js b/js/controllers/selection-controller.js index c4623d3f..75968d4a 100755 --- a/js/controllers/selection-controller.js +++ b/js/controllers/selection-controller.js @@ -76,7 +76,7 @@ exports.SelectionController = Montage.create(Component, { this.application.ninja.selectedElements = currentSelectionArray; - NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": this._isDocument} ); + NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": this._isDocument}); @@ -92,12 +92,14 @@ exports.SelectionController = Montage.create(Component, { handleSwitchDocument: { value: function() { this._selectedItems = this.application.ninja.selectedElements.slice(0); - if(this._selectedItems.length === 0 ){ + if(this._selectedItems.length === 0) { this._isDocument = true; - }else{ + } else { this._isDocument = false; } - NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": this._isDocument} ); + NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": this._isDocument}); + + this._selectionContainer = this.application.ninja.currentSelectedContainer; } }, @@ -137,7 +139,7 @@ exports.SelectionController = Montage.create(Component, { value: function(event) { this.application.ninja.selectedElements = []; this._isDocument = true; - NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": this._isDocument} ); + NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": this._isDocument}); } }, diff --git a/js/controllers/undo-controller.js b/js/controllers/undo-controller.js index 926803d3..19cfb6e6 100755 --- a/js/controllers/undo-controller.js +++ b/js/controllers/undo-controller.js @@ -71,22 +71,28 @@ exports.UndoController = Montage.create( Component, { /** * Undo Queue */ - _undoQueue: { value: [] }, + _undoQueue: { value: []}, undoQueue: { get: function() { return this._undoQueue; + }, + set: function(value){ + this._undoQueue = value; } }, /** * Redo Queue */ - _redoQueue: { value: [], enumerable: false }, + _redoQueue: { value: [], enumerable: false}, redoQueue: { get: function() { return this._redoQueue; + }, + set: function(value){ + this._redoQueue = value; } }, @@ -202,5 +208,12 @@ exports.UndoController = Montage.create( Component, { this.redoQueue.splice(0, this.redoQueue.length); //this.redoQueue = []; } + }, + + clearHistory:{ + value: function(){ + this.undoQueue.length = 0; + this.redoQueue.length = 0; + } } }); \ No newline at end of file diff --git a/js/document/html-document.js b/js/document/html-document.js index 536fca47..80930af2 100755 --- a/js/document/html-document.js +++ b/js/document/html-document.js @@ -59,6 +59,27 @@ exports.HTMLDocument = Montage.create(TextDocument, { _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 @@ -387,10 +408,66 @@ exports.HTMLDocument = Montage.create(TextDocument, { // if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {}; //Inserting user's document into template - this._templateDocument.head.innerHTML = this._userDocument.content.head; - this._templateDocument.body.innerHTML = this._userDocument.content.body; - //TODO: Use querySelectorAll - var scripttags = this._templateDocument.html.getElementsByTagName('script'), webgldata; + + + + + + + + + + //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + + //TODO: Clean up and make public method to prepend properties with Ninja URL + this._templateDocument.head.innerHTML = (this._userDocument.content.head.replace(/\b(href|src)\s*=\s*"([^"]*)"/g, ninjaUrlRedirect.bind(this))).replace(/url\(([^"]*)(.+?)\1\)/g, ninjaUrlRedirect.bind(this)); + this._templateDocument.body.innerHTML = (this._userDocument.content.body.replace(/\b(href|src)\s*=\s*"([^"]*)"/g, ninjaUrlRedirect.bind(this))).replace(/url\(([^"]*)(.+?)\1\)/g, ninjaUrlRedirect.bind(this)); + // + //var docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/')); + // + function ninjaUrlRedirect (prop) { + //Checking for property value to not contain a full direct URL + if (!prop.match(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi)) { + //Checking for attributes and type of source + if (prop.indexOf('href') !== -1 || prop.indexOf('src') !== -1) { //From HTML attribute + // + prop = prop.replace(/"([^"]*)"/gi, ninjaUrlPrepend.bind(this)); + } else if (prop.indexOf('url') !== -1) { //From CSS property + //TODO: Add functionality + var docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/')); + prop = prop.replace(/[^()\\""\\'']+/g, test); + function test (s) { + if (s !== 'url') { + s = docRootUrl + s; + } + return s; + } + } + } + return prop; + } + // + function ninjaUrlPrepend (url) { + var docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/')); + return '"'+docRootUrl+url.replace(/\"/gi, '')+'"'; + } + + //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + + + + + + + + + + + var scripttags = this._templateDocument.html.getElementsByTagName('script'), webgldata; //TODO: Use querySelectorAll // for (var w in scripttags) { if (scripttags[w].getAttribute) { @@ -464,16 +541,18 @@ exports.HTMLDocument = Montage.create(TextDocument, { //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, tag, query; - if (this._document.styleSheets[i].href.indexOf('js/document/templates/montage-html') !== -1) { - //Getting the url of the CSS file - cssUrl = this._document.styleSheets[i].href.split('js/document/templates/montage-html')[1]; - //Creating the URI of the file (this is wrong should not be splitting cssUrl) - fileUri = this.application.ninja.coreIoApi.cloudData.root+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+cssUrl.split('/')[1]; - //Loading the data from the file + 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}); - //Creating tag with file content - tag = this.iframe.contentWindow.document.createElement('style'); + // + 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); @@ -481,11 +560,18 @@ exports.HTMLDocument = Montage.create(TextDocument, { 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') { - tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value); + 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); + } } } - tag.innerHTML = cssData.content; + // + fileCouldDirUrl = this._document.styleSheets[i].href.split(this._document.styleSheets[i].href.split('/')[this._document.styleSheets[i].href.split('/').length-1])[0]; + prefixUrl = 'url('+fileCouldDirUrl; //This should be re-written with better RegEx + tag.innerHTML = cssData.content.replace(/url\(/gi, prefixUrl); //Looping through DOM to insert style tag at location of link element query = this._templateDocument.html.querySelectorAll(['link']); for (var j in query) { @@ -498,15 +584,28 @@ exports.HTMLDocument = Montage.create(TextDocument, { } } else { console.log('ERROR: Cross-Domain-Stylesheet detected, unable to load in Ninja'); - /* -//None local stylesheet, probably on a CDN (locked) - tag = this.iframe.contentWindow.document.createElement('style'); + //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 + + + + /* +//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(); @@ -514,21 +613,24 @@ exports.HTMLDocument = Montage.create(TextDocument, { if (xhr.readyState === 4) { console.log(xhr); } +*/ //tag.innerHTML = xhr.responseText //xhr.response; - + tag.innerHTML = 'noRULEjustHACK{background: #000}' //Currently no external styles will load if unable to load via XHR request //Disabling external style sheets query = this._templateDocument.html.querySelectorAll(['link']); - for (var j in query) { - if (query[j].href === this._document.styleSheets[i].href) { + for (var k in query) { + if (query[k].href === this._document.styleSheets[i].href) { //Disabling style sheet to reload via inserting in style tag - query[j].setAttribute('disabled', 'true'); + 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[j]); + this._templateDocument.head.insertBefore(tag, query[k]); } } -*/ } } } @@ -717,6 +819,11 @@ exports.HTMLDocument = Montage.create(TextDocument, { } 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 } }, @@ -726,20 +833,24 @@ exports.HTMLDocument = Montage.create(TextDocument, { value: function () { this.application.ninja.stage.drawUtils.gridHorizontalSpacing = this.gridHorizontalSpacing; this.application.ninja.stage.drawUtils.gridVerticalSpacing = this.gridVerticalSpacing; - - if((typeof this.selectionModel !== 'undefined') && (this.selectionModel !== null)){ - this.application.ninja.selectedElements = this.selectionModel.slice(0); - } - - if((this.savedLeftScroll!== null) && (this.savedTopScroll !== null)){ + + if((this.savedLeftScroll !== null) && (this.savedTopScroll !== null)){ this.application.ninja.stage._iframeContainer.scrollLeft = this.savedLeftScroll; - this.application.ninja.stage._scrollLeft = this.savedLeftScroll; this.application.ninja.stage._iframeContainer.scrollTop = this.savedTopScroll; - this.application.ninja.stage._scrollLeft = 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.stage.handleScroll(); 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); + + } } //////////////////////////////////////////////////////////////////// diff --git a/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.js b/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.js index 428e7bab..3d99ae4d 100644 --- a/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.js +++ b/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.js @@ -861,12 +861,12 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { var dataStore = window.sessionStorage; try { if(this.pickerModel.pickerMode === "write"){ - dataStore.setItem('lastSavedFolderURI',escape(""+this.currentURI)); + dataStore.setItem('lastSavedFolderURI', encodeURI(""+this.currentURI)); } else if(this.pickerModel.inFileMode === true){ - dataStore.setItem('lastOpenedFolderURI_fileSelection',escape(""+this.currentURI)); + dataStore.setItem('lastOpenedFolderURI_fileSelection',encodeURI(""+this.currentURI)); }else if(this.pickerModel.inFileMode === false){ - dataStore.setItem('lastOpenedFolderURI_folderSelection',escape(""+this.currentURI)); + dataStore.setItem('lastOpenedFolderURI_folderSelection',encodeURI(""+this.currentURI)); } } catch(e){ diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js index 65218526..097f5975 100644 --- a/js/mediators/io-mediator.js +++ b/js/mediators/io-mediator.js @@ -41,9 +41,12 @@ exports.IoMediator = Montage.create(Component, { }, //////////////////////////////////////////////////////////////////// // - appTemplatesUrl: { + getAppTemplatesUrlRegEx: { enumerable: false, - value: new RegExp(chrome.extension.getURL('js/document/templates/montage-html/'), 'gi') + value: function () { + var regex = new RegExp(chrome.extension.getURL('js/document/templates/montage-html').replace(/\//gi, '\\\/'), 'gi'); + return regex; + } }, //////////////////////////////////////////////////////////////////// // @@ -210,35 +213,51 @@ exports.IoMediator = Montage.create(Component, { parseNinjaTemplateToHtml: { enumerable: false, value: function (template) { + var regexRootUrl, rootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1])); + regexRootUrl = new RegExp(rootUrl.replace(/\//gi, '\\\/'), 'gi'); //Injecting head and body into old document - template.document.content.document.body.innerHTML = template.body; - template.document.content.document.head.innerHTML = template.head; + template.document.content.document.head.innerHTML = template.head.replace(regexRootUrl, ''); + template.document.content.document.body.innerHTML = template.body.replace(regexRootUrl, ''); //Getting all CSS (style or link) tags var styletags = template.document.content.document.getElementsByTagName('style'), - linktags = template.document.content.document.getElementsByTagName('link'); - //Looping through link tags and removing file recreated elements - for (var j in styletags) { - if (styletags[j].getAttribute) { - if(styletags[j].getAttribute('data-ninja-uri') !== null && !styletags[j].getAttribute('data-ninja-template')) {//TODO: Use querySelectorAll - try { - //Checking head first - template.document.content.document.head.removeChild(styletags[j]); - } catch (e) { - try { - //Checking body if not in head - template.document.content.document.body.removeChild(styletags[j]); - } catch (e) { - //Error, not found! - } + linktags = template.document.content.document.getElementsByTagName('link'), + toremovetags = []; + //Getting styles tags to be removed from document + if (styletags.length) { + for (var j=0; j