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(-) 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