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 only | css =