From 7a9e7ff2e113c95aada64cfccbc140fa77599d57 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 15 Mar 2012 01:08:14 -0700 Subject: Adding Temp drag-drop I/O support Added methods to get data from dropped file while document is opened and save as a file. Currently only supporting images and SVGs, no error handling, which will have to be done. --- js/mediators/drag-drop-mediator.js | 188 ++++++++++++++----------------------- 1 file changed, 73 insertions(+), 115 deletions(-) (limited to 'js/mediators') diff --git a/js/mediators/drag-drop-mediator.js b/js/mediators/drag-drop-mediator.js index bf22aed2..cc384704 100755 --- a/js/mediators/drag-drop-mediator.js +++ b/js/mediators/drag-drop-mediator.js @@ -13,17 +13,7 @@ exports.DragDropMediator = Montage.create(Component, { value: null, writable: true }, - - baseX: { - value: null, - writable: true - }, - - baseY: { - value: null, - writable: true - }, - + dropDelegate: { value: null }, @@ -65,110 +55,78 @@ exports.DragDropMediator = Montage.create(Component, { }, handleDropEvent: { - value: function(evt){ - var xferString, component, file, files, idx, len; - - this.baseX = evt.offsetX - this.application.ninja.stage.userContentLeft; - this.baseY = evt.offsetY - this.application.ninja.stage.userContentTop; - - xferString = evt.dataTransfer.getData("text/plain"); - if(xferString) { - // If the drop is a component, call the delegate with the top,left coordinates - if(xferString.indexOf("componentDrop") > -1) { - if(this.dropDelegate && typeof this.dropDelegate === 'object') { - this.dropDelegate.handleComponentDrop(this.baseX, this.baseY); - return; - } - } - - } - - // Verify that browser supports FileReader API. - if (typeof(window.FileReader) === "undefined") { - alert("File API and FileReader APIs are not supported."); - // Exit function since there isn't anything else we can do. - return; - } - - files = evt.dataTransfer.files; - len = files.length; - - // Loop over all dragged files... - for (idx = 0; idx < len; idx++) { - file = files[idx]; - // Only do anything if the current file is an image (or has an image mime-type. - if (file.type.match("^image/")) { - var reader = new FileReader(); - // Create a LoadHandler to access each outer file var - reader.onload = this.createLoadHandler(file, this.baseX, this.baseY); - - if(file.type.match("^image/svg\\+xml")) {// this is SVG - reader.readAsText(file); - } else{ - reader.readAsDataURL(file); - } - - } - } - - return false; - } - }, - - createLoadHandler: { - value: function(file, baseX, baseY) { - return function(evt2) { - var domElem = null; - - if(file.type.match("^image/svg\\+xml")){ // this is an SVG file - var tempElem = document.createElement("div"); - tempElem.innerHTML = evt2.currentTarget.result; - domElem = tempElem.children[0]; - - NJUtils.makeElementModel(domElem, "SVG", "block"); - } else { // treat as a regular image - domElem = NJUtils.makeNJElement("image", "image", "image"); - domElem.src = evt2.currentTarget.result; - } - - - // Not sure we need an ID for the image - /* - // Use the Image filename if valid for the id - var filename = file.fileName.substr(0, file.fileName.lastIndexOf('.')) || file.fileName; - filename = filename.replace(/ /g,"_"); - - - if(this.isValidFilename(filename)) { - //domElem.id = filename; - } else { - //domElem.id = DocumentControllerModule.DocumentController.CreateElementID(img.tagName); - } - */ - - var rules = { - 'position': 'absolute', - 'top' : baseY + 'px', - 'left' : baseX + 'px', - '-webkit-transform-style' : 'preserve-3d', - '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }; - - NJevent("elementAdding", {el: domElem, data:rules}); - }; - } - }, - - isValidFilename: { - value: function(id){ - if(id && id !== "") { - var regexID = /^([a-zA-Z])+([a-zA-Z0-9_\.\:\-])+/; - return(regexID.test(id)) - } else { - return false; - } + value: function(e){ + // + var i, files = e.dataTransfer.files, position = {x: e.offsetX, y: e.offsetY}, + rootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1])), + rootUri = this.application.ninja.documentController.documentHackReference.root; + // + for (i=0; files[i]; i++) { + if (files[i].type.indexOf('image') !== -1) { + var reader = new FileReader(), file = reader.readAsArrayBuffer(files[i]); + reader.fileName = files[i].name, reader.fileType = files[i].type, reader.rootUrl = rootUrl, reader.rootUri = rootUri, reader.filePosition = position; + reader.onload = function (e) { + // + var url, uri, dir, save, counter, tempName, element, rules, fileName; + if (this.application.ninja.coreIoApi.directoryExists({uri: e.currentTarget.rootUri+'images'}).status === 204) { + uri = e.currentTarget.rootUri+'images'; + url = e.currentTarget.rootUrl+'images'; + } else if (this.application.ninja.coreIoApi.directoryExists({uri: e.currentTarget.rootUri+'img'}).status === 204) { + uri = e.currentTarget.rootUri+'img'; + url = e.currentTarget.rootUrl+'img'; + } else { + dir = this.application.ninja.coreIoApi.createDirectory({uri: e.currentTarget.rootUri+'images'}); + if (dir.success && dir.status === 201) { + uri = e.currentTarget.rootUri+'images'; + url = e.currentTarget.rootUrl+'images'; + } else { + //TODO: HANDLE ERROR ON CREATING FOLDER + } + } + // + if (this.application.ninja.coreIoApi.fileExists({uri: uri+'/'+e.currentTarget.fileName}).status === 404) { + save = this.application.ninja.coreIoApi.createFile({uri: uri+'/'+e.currentTarget.fileName, contents: e.currentTarget.result, contentType: e.currentTarget.fileType}); + fileName = e.currentTarget.fileName; + } else { + counter = 1; + tempName = e.currentTarget.fileName.split('.'+(e.currentTarget.fileName.split('.')[e.currentTarget.fileName.split('.').length-1]))[0]; + tempName += '_'+counter+'.'+(e.currentTarget.fileName.split('.')[e.currentTarget.fileName.split('.').length-1]); + while (this.application.ninja.coreIoApi.fileExists({uri: uri+'/'+tempName}).status !== 404) { + counter++; + tempName = e.currentTarget.fileName.split('.'+(e.currentTarget.fileName.split('.')[e.currentTarget.fileName.split('.').length-1]))[0]; + tempName += '_'+counter+'.'+(e.currentTarget.fileName.split('.')[e.currentTarget.fileName.split('.').length-1]); + } + save = this.application.ninja.coreIoApi.createFile({uri: uri+'/'+tempName, contents: e.currentTarget.result, contentType: e.currentTarget.fileType}); + fileName = tempName; + } + if (save && save.success && save.status === 201) { + // + if (e.currentTarget.fileType.indexOf('svg') !== -1) { + element = NJUtils.makeNJElement('embed', 'SVG', 'block');//TODO: Verify this is proper + element.src = url+'/'+fileName; + element.type = 'image/svg+xml'; + } else { + element = NJUtils.makeNJElement('image', 'image', 'image'); + element.src = url+'/'+fileName; + } + // + rules = { + 'position': 'absolute', + 'top' : e.currentTarget.filePosition.y + 'px', + 'left' : e.currentTarget.filePosition.x + 'px' + }; + // + NJevent("elementAdding", {el: element, data: rules}); + } else { + //TODO: HANDLE ERROR ON SAVING FILE TO BE ADDED AS ELEMENT + } + }.bind(this); + } else { + //TODO: NOT AN IMAGE, HANDLE SPECIAL CASE + } + } + //Not sure why return value should be, seemed as false to work + return false; } } - - }); -- cgit v1.2.3 From eda07f5122cc552737fa6f647ef7f6721c4001b8 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 15 Mar 2012 20:16:25 -0700 Subject: Fixing offset bug for drag-and-drop --- js/mediators/drag-drop-mediator.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/mediators') diff --git a/js/mediators/drag-drop-mediator.js b/js/mediators/drag-drop-mediator.js index cc384704..c8e781a6 100755 --- a/js/mediators/drag-drop-mediator.js +++ b/js/mediators/drag-drop-mediator.js @@ -112,8 +112,8 @@ exports.DragDropMediator = Montage.create(Component, { // rules = { 'position': 'absolute', - 'top' : e.currentTarget.filePosition.y + 'px', - 'left' : e.currentTarget.filePosition.x + 'px' + 'top' : (parseInt(e.currentTarget.filePosition.y) - parseInt(this.application.ninja.stage.userContentTop)) + 'px', + 'left' : (parseInt(e.currentTarget.filePosition.x) - parseInt(this.application.ninja.stage.userContentLeft)) + 'px' }; // NJevent("elementAdding", {el: element, data: rules}); -- cgit v1.2.3 From a295375178659345e03517f7eb20c22364f4ca4a Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 15 Mar 2012 21:06:40 -0700 Subject: Temp fix for element dimensions (SVG) Added a temp fix to allow for a redraw of an SVG on load. --- js/mediators/drag-drop-mediator.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'js/mediators') diff --git a/js/mediators/drag-drop-mediator.js b/js/mediators/drag-drop-mediator.js index c8e781a6..9d5dd256 100755 --- a/js/mediators/drag-drop-mediator.js +++ b/js/mediators/drag-drop-mediator.js @@ -105,6 +105,10 @@ exports.DragDropMediator = Montage.create(Component, { element = NJUtils.makeNJElement('embed', 'SVG', 'block');//TODO: Verify this is proper element.src = url+'/'+fileName; element.type = 'image/svg+xml'; + //TODO: Remove temp fix for SVG redraw on drop + element.onload = function () { + NJevent("elementAdding", {el: element, data: rules}); + } } else { element = NJUtils.makeNJElement('image', 'image', 'image'); element.src = url+'/'+fileName; @@ -114,9 +118,9 @@ exports.DragDropMediator = Montage.create(Component, { 'position': 'absolute', 'top' : (parseInt(e.currentTarget.filePosition.y) - parseInt(this.application.ninja.stage.userContentTop)) + 'px', 'left' : (parseInt(e.currentTarget.filePosition.x) - parseInt(this.application.ninja.stage.userContentLeft)) + 'px' - }; - // - NJevent("elementAdding", {el: element, data: rules}); + }; + // + NJevent("elementAdding", {el: element, data: rules}); } else { //TODO: HANDLE ERROR ON SAVING FILE TO BE ADDED AS ELEMENT } -- cgit v1.2.3 From c9b03565de5e60b50d0e5f80e40169be1efe339e Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 15 Mar 2012 21:11:49 -0700 Subject: Temp fix applied to all elements This should be moved to 'makeNJElement' to account for the element to be loaded. --- js/mediators/drag-drop-mediator.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'js/mediators') diff --git a/js/mediators/drag-drop-mediator.js b/js/mediators/drag-drop-mediator.js index 9d5dd256..5fe61167 100755 --- a/js/mediators/drag-drop-mediator.js +++ b/js/mediators/drag-drop-mediator.js @@ -105,14 +105,14 @@ exports.DragDropMediator = Montage.create(Component, { element = NJUtils.makeNJElement('embed', 'SVG', 'block');//TODO: Verify this is proper element.src = url+'/'+fileName; element.type = 'image/svg+xml'; - //TODO: Remove temp fix for SVG redraw on drop - element.onload = function () { - NJevent("elementAdding", {el: element, data: rules}); - } } else { element = NJUtils.makeNJElement('image', 'image', 'image'); element.src = url+'/'+fileName; } + //TODO: Remove temp fix for elements to redraw on drop + element.onload = function () { + NJevent("elementAdding", {el: element, data: rules}); + } // rules = { 'position': 'absolute', -- cgit v1.2.3 From 8b6dc6097fbd974df5363a72756de649794363b6 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Fri, 16 Mar 2012 10:35:33 -0700 Subject: fixing the drag and drop images to the pasteboard Signed-off-by: Valerio Virgillito --- js/mediators/drag-drop-mediator.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'js/mediators') diff --git a/js/mediators/drag-drop-mediator.js b/js/mediators/drag-drop-mediator.js index 5fe61167..3a965be5 100755 --- a/js/mediators/drag-drop-mediator.js +++ b/js/mediators/drag-drop-mediator.js @@ -117,7 +117,9 @@ exports.DragDropMediator = Montage.create(Component, { rules = { 'position': 'absolute', 'top' : (parseInt(e.currentTarget.filePosition.y) - parseInt(this.application.ninja.stage.userContentTop)) + 'px', - 'left' : (parseInt(e.currentTarget.filePosition.x) - parseInt(this.application.ninja.stage.userContentLeft)) + 'px' + 'left' : (parseInt(e.currentTarget.filePosition.x) - parseInt(this.application.ninja.stage.userContentLeft)) + 'px', + '-webkit-transform-style' : 'preserve-3d', + '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' }; // NJevent("elementAdding", {el: element, data: rules}); -- cgit v1.2.3 From d1243d98d2f517055437cc67e963528771aa4c4b Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Fri, 16 Mar 2012 15:41:26 -0700 Subject: fixing the components drag and drop. Signed-off-by: Valerio Virgillito --- js/mediators/drag-drop-mediator.js | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'js/mediators') diff --git a/js/mediators/drag-drop-mediator.js b/js/mediators/drag-drop-mediator.js index 3a965be5..8663b06e 100755 --- a/js/mediators/drag-drop-mediator.js +++ b/js/mediators/drag-drop-mediator.js @@ -60,6 +60,17 @@ exports.DragDropMediator = Montage.create(Component, { var i, files = e.dataTransfer.files, position = {x: e.offsetX, y: e.offsetY}, rootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1])), rootUri = this.application.ninja.documentController.documentHackReference.root; + + var xferString = e.dataTransfer.getData("text/plain"); + if(xferString) { + // If the drop is a component, call the delegate with the top,left coordinates + if(xferString.indexOf("componentDrop") > -1) { + if(this.dropDelegate && typeof this.dropDelegate === 'object') { + this.dropDelegate.handleComponentDrop(e.offsetX - this.application.ninja.stage.userContentLeft, e.offsetY - this.application.ninja.stage.userContentTop); + return; + } + } + } // for (i=0; files[i]; i++) { if (files[i].type.indexOf('image') !== -1) { -- cgit v1.2.3