aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJose Antonio Marquez2012-03-15 01:08:14 -0700
committerJose Antonio Marquez2012-03-15 01:08:14 -0700
commit7a9e7ff2e113c95aada64cfccbc140fa77599d57 (patch)
treea30dd34220a5aefe346bf41ab0b4db87e470877e
parent089534a80c64226bf7d124ab9147afce386fdb5c (diff)
downloadninja-7a9e7ff2e113c95aada64cfccbc140fa77599d57.tar.gz
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.
-rwxr-xr-xjs/mediators/drag-drop-mediator.js188
1 files 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, {
13 value: null, 13 value: null,
14 writable: true 14 writable: true
15 }, 15 },
16 16
17 baseX: {
18 value: null,
19 writable: true
20 },
21
22 baseY: {
23 value: null,
24 writable: true
25 },
26
27 dropDelegate: { 17 dropDelegate: {
28 value: null 18 value: null
29 }, 19 },
@@ -65,110 +55,78 @@ exports.DragDropMediator = Montage.create(Component, {
65 }, 55 },
66 56
67 handleDropEvent: { 57 handleDropEvent: {
68 value: function(evt){ 58 value: function(e){
69 var xferString, component, file, files, idx, len; 59 //
70 60 var i, files = e.dataTransfer.files, position = {x: e.offsetX, y: e.offsetY},
71 this.baseX = evt.offsetX - this.application.ninja.stage.userContentLeft; 61 rootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1])),
72 this.baseY = evt.offsetY - this.application.ninja.stage.userContentTop; 62 rootUri = this.application.ninja.documentController.documentHackReference.root;
73 63 //
74 xferString = evt.dataTransfer.getData("text/plain"); 64 for (i=0; files[i]; i++) {
75 if(xferString) { 65 if (files[i].type.indexOf('image') !== -1) {
76 // If the drop is a component, call the delegate with the top,left coordinates 66 var reader = new FileReader(), file = reader.readAsArrayBuffer(files[i]);
77 if(xferString.indexOf("componentDrop") > -1) { 67 reader.fileName = files[i].name, reader.fileType = files[i].type, reader.rootUrl = rootUrl, reader.rootUri = rootUri, reader.filePosition = position;
78 if(this.dropDelegate && typeof this.dropDelegate === 'object') { 68 reader.onload = function (e) {
79 this.dropDelegate.handleComponentDrop(this.baseX, this.baseY); 69 //
80 return; 70 var url, uri, dir, save, counter, tempName, element, rules, fileName;
81 } 71 if (this.application.ninja.coreIoApi.directoryExists({uri: e.currentTarget.rootUri+'images'}).status === 204) {
82 } 72 uri = e.currentTarget.rootUri+'images';
83 73 url = e.currentTarget.rootUrl+'images';
84 } 74 } else if (this.application.ninja.coreIoApi.directoryExists({uri: e.currentTarget.rootUri+'img'}).status === 204) {
85 75 uri = e.currentTarget.rootUri+'img';
86 // Verify that browser supports FileReader API. 76 url = e.currentTarget.rootUrl+'img';
87 if (typeof(window.FileReader) === "undefined") { 77 } else {
88 alert("File API and FileReader APIs are not supported."); 78 dir = this.application.ninja.coreIoApi.createDirectory({uri: e.currentTarget.rootUri+'images'});
89 // Exit function since there isn't anything else we can do. 79 if (dir.success && dir.status === 201) {
90 return; 80 uri = e.currentTarget.rootUri+'images';
91 } 81 url = e.currentTarget.rootUrl+'images';
92 82 } else {
93 files = evt.dataTransfer.files; 83 //TODO: HANDLE ERROR ON CREATING FOLDER
94 len = files.length; 84 }
95 85 }
96 // Loop over all dragged files... 86 //
97 for (idx = 0; idx < len; idx++) { 87 if (this.application.ninja.coreIoApi.fileExists({uri: uri+'/'+e.currentTarget.fileName}).status === 404) {
98 file = files[idx]; 88 save = this.application.ninja.coreIoApi.createFile({uri: uri+'/'+e.currentTarget.fileName, contents: e.currentTarget.result, contentType: e.currentTarget.fileType});
99 // Only do anything if the current file is an image (or has an image mime-type. 89 fileName = e.currentTarget.fileName;
100 if (file.type.match("^image/")) { 90 } else {
101 var reader = new FileReader(); 91 counter = 1;
102 // Create a LoadHandler to access each outer file var 92 tempName = e.currentTarget.fileName.split('.'+(e.currentTarget.fileName.split('.')[e.currentTarget.fileName.split('.').length-1]))[0];
103 reader.onload = this.createLoadHandler(file, this.baseX, this.baseY); 93 tempName += '_'+counter+'.'+(e.currentTarget.fileName.split('.')[e.currentTarget.fileName.split('.').length-1]);
104 94 while (this.application.ninja.coreIoApi.fileExists({uri: uri+'/'+tempName}).status !== 404) {
105 if(file.type.match("^image/svg\\+xml")) {// this is SVG 95 counter++;
106 reader.readAsText(file); 96 tempName = e.currentTarget.fileName.split('.'+(e.currentTarget.fileName.split('.')[e.currentTarget.fileName.split('.').length-1]))[0];
107 } else{ 97 tempName += '_'+counter+'.'+(e.currentTarget.fileName.split('.')[e.currentTarget.fileName.split('.').length-1]);
108 reader.readAsDataURL(file); 98 }
109 } 99 save = this.application.ninja.coreIoApi.createFile({uri: uri+'/'+tempName, contents: e.currentTarget.result, contentType: e.currentTarget.fileType});
110 100 fileName = tempName;
111 } 101 }
112 } 102 if (save && save.success && save.status === 201) {
113 103 //
114 return false; 104 if (e.currentTarget.fileType.indexOf('svg') !== -1) {
115 } 105 element = NJUtils.makeNJElement('embed', 'SVG', 'block');//TODO: Verify this is proper
116 }, 106 element.src = url+'/'+fileName;
117 107 element.type = 'image/svg+xml';
118 createLoadHandler: { 108 } else {
119 value: function(file, baseX, baseY) { 109 element = NJUtils.makeNJElement('image', 'image', 'image');
120 return function(evt2) { 110 element.src = url+'/'+fileName;
121 var domElem = null; 111 }
122 112 //
123 if(file.type.match("^image/svg\\+xml")){ // this is an SVG file 113 rules = {
124 var tempElem = document.createElement("div"); 114 'position': 'absolute',
125 tempElem.innerHTML = evt2.currentTarget.result; 115 'top' : e.currentTarget.filePosition.y + 'px',
126 domElem = tempElem.children[0]; 116 'left' : e.currentTarget.filePosition.x + 'px'
127 117 };
128 NJUtils.makeElementModel(domElem, "SVG", "block"); 118 //
129 } else { // treat as a regular image 119 NJevent("elementAdding", {el: element, data: rules});
130 domElem = NJUtils.makeNJElement("image", "image", "image"); 120 } else {
131 domElem.src = evt2.currentTarget.result; 121 //TODO: HANDLE ERROR ON SAVING FILE TO BE ADDED AS ELEMENT
132 } 122 }
133 123 }.bind(this);
134 124 } else {
135 // Not sure we need an ID for the image 125 //TODO: NOT AN IMAGE, HANDLE SPECIAL CASE
136 /* 126 }
137 // Use the Image filename if valid for the id 127 }
138 var filename = file.fileName.substr(0, file.fileName.lastIndexOf('.')) || file.fileName; 128 //Not sure why return value should be, seemed as false to work
139 filename = filename.replace(/ /g,"_"); 129 return false;
140
141
142 if(this.isValidFilename(filename)) {
143 //domElem.id = filename;
144 } else {
145 //domElem.id = DocumentControllerModule.DocumentController.CreateElementID(img.tagName);
146 }
147 */
148
149 var rules = {
150 'position': 'absolute',
151 'top' : baseY + 'px',
152 'left' : baseX + 'px',
153 '-webkit-transform-style' : 'preserve-3d',
154 '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
155 };
156
157 NJevent("elementAdding", {el: domElem, data:rules});
158 };
159 }
160 },
161
162 isValidFilename: {
163 value: function(id){
164 if(id && id !== "") {
165 var regexID = /^([a-zA-Z])+([a-zA-Z0-9_\.\:\-])+/;
166 return(regexID.test(id))
167 } else {
168 return false;
169 }
170 } 130 }
171 } 131 }
172
173
174}); 132});