aboutsummaryrefslogtreecommitdiff
path: root/js/mediators/drag-drop-mediator.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/mediators/drag-drop-mediator.js')
-rwxr-xr-xjs/mediators/drag-drop-mediator.js189
1 files changed, 83 insertions, 106 deletions
diff --git a/js/mediators/drag-drop-mediator.js b/js/mediators/drag-drop-mediator.js
index bf22aed2..9d1b69a9 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,97 @@ 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 var xferString = e.dataTransfer.getData("text/plain");
75 if(xferString) { 65 if(xferString) {
76 // If the drop is a component, call the delegate with the top,left coordinates 66 // If the drop is a component, call the delegate with the top,left coordinates
77 if(xferString.indexOf("componentDrop") > -1) { 67 if(xferString.indexOf("componentDrop") > -1) {
78 if(this.dropDelegate && typeof this.dropDelegate === 'object') { 68 if(this.dropDelegate && typeof this.dropDelegate === 'object') {
79 this.dropDelegate.handleComponentDrop(this.baseX, this.baseY); 69 this.dropDelegate.handleComponentDrop(e.offsetX - this.application.ninja.stage.userContentLeft, e.offsetY - this.application.ninja.stage.userContentTop);
80 return; 70 return;
81 } 71 }
82 } 72 }
83
84 }
85
86 // Verify that browser supports FileReader API.
87 if (typeof(window.FileReader) === "undefined") {
88 alert("File API and FileReader APIs are not supported.");
89 // Exit function since there isn't anything else we can do.
90 return;
91 }
92
93 files = evt.dataTransfer.files;
94 len = files.length;
95
96 // Loop over all dragged files...
97 for (idx = 0; idx < len; idx++) {
98 file = files[idx];
99 // Only do anything if the current file is an image (or has an image mime-type.
100 if (file.type.match("^image/")) {
101 var reader = new FileReader();
102 // Create a LoadHandler to access each outer file var
103 reader.onload = this.createLoadHandler(file, this.baseX, this.baseY);
104
105 if(file.type.match("^image/svg\\+xml")) {// this is SVG
106 reader.readAsText(file);
107 } else{
108 reader.readAsDataURL(file);
109 }
110
111 }
112 }
113
114 return false;
115 }
116 },
117
118 createLoadHandler: {
119 value: function(file, baseX, baseY) {
120 return function(evt2) {
121 var domElem = null;
122
123 if(file.type.match("^image/svg\\+xml")){ // this is an SVG file
124 var tempElem = document.createElement("div");
125 tempElem.innerHTML = evt2.currentTarget.result;
126 domElem = tempElem.children[0];
127
128 NJUtils.makeElementModel(domElem, "SVG", "block");
129 } else { // treat as a regular image
130 domElem = NJUtils.makeNJElement("image", "image", "image");
131 domElem.src = evt2.currentTarget.result;
132 }
133
134
135 // Not sure we need an ID for the image
136 /*
137 // Use the Image filename if valid for the id
138 var filename = file.fileName.substr(0, file.fileName.lastIndexOf('.')) || file.fileName;
139 filename = filename.replace(/ /g,"_");
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 } 73 }
74 //
75 for (i=0; files[i]; i++) {
76 if (files[i].type.indexOf('image') !== -1) {
77 var reader = new FileReader(), file = reader.readAsArrayBuffer(files[i]);
78 reader.fileName = files[i].name, reader.fileType = files[i].type, reader.rootUrl = rootUrl, reader.rootUri = rootUri, reader.filePosition = position;
79 reader.onload = function (e) {
80 //
81 var url, uri, dir, save, counter, tempName, element, rules, fileName;
82 if (this.application.ninja.coreIoApi.directoryExists({uri: e.currentTarget.rootUri+'images'}).status === 204) {
83 uri = e.currentTarget.rootUri+'images';
84 url = e.currentTarget.rootUrl+'images';
85 } else if (this.application.ninja.coreIoApi.directoryExists({uri: e.currentTarget.rootUri+'img'}).status === 204) {
86 uri = e.currentTarget.rootUri+'img';
87 url = e.currentTarget.rootUrl+'img';
88 } else {
89 dir = this.application.ninja.coreIoApi.createDirectory({uri: e.currentTarget.rootUri+'images'});
90 if (dir.success && dir.status === 201) {
91 uri = e.currentTarget.rootUri+'images';
92 url = e.currentTarget.rootUrl+'images';
93 } else {
94 //TODO: HANDLE ERROR ON CREATING FOLDER
95 }
96 }
97 //
98 if (this.application.ninja.coreIoApi.fileExists({uri: uri+'/'+e.currentTarget.fileName}).status === 404) {
99 save = this.application.ninja.coreIoApi.createFile({uri: uri+'/'+e.currentTarget.fileName, contents: e.currentTarget.result, contentType: e.currentTarget.fileType});
100 fileName = e.currentTarget.fileName;
101 } else {
102 counter = 1;
103 tempName = e.currentTarget.fileName.split('.'+(e.currentTarget.fileName.split('.')[e.currentTarget.fileName.split('.').length-1]))[0];
104 tempName += '_'+counter+'.'+(e.currentTarget.fileName.split('.')[e.currentTarget.fileName.split('.').length-1]);
105 while (this.application.ninja.coreIoApi.fileExists({uri: uri+'/'+tempName}).status !== 404) {
106 counter++;
107 tempName = e.currentTarget.fileName.split('.'+(e.currentTarget.fileName.split('.')[e.currentTarget.fileName.split('.').length-1]))[0];
108 tempName += '_'+counter+'.'+(e.currentTarget.fileName.split('.')[e.currentTarget.fileName.split('.').length-1]);
109 }
110 save = this.application.ninja.coreIoApi.createFile({uri: uri+'/'+tempName, contents: e.currentTarget.result, contentType: e.currentTarget.fileType});
111 fileName = tempName;
112 }
113 if (save && save.success && save.status === 201) {
114 var self = this;
115 //
116 if (e.currentTarget.fileType.indexOf('svg') !== -1) {
117 element = NJUtils.makeNJElement('embed', 'SVG', 'block');//TODO: Verify this is proper
118 element.src = url+'/'+fileName;
119 element.type = 'image/svg+xml';
120 } else {
121 element = NJUtils.makeNJElement('image', 'image', 'image');
122 element.src = url+'/'+fileName;
123 }
124 //TODO: Remove temp fix for elements to redraw on drop
125
126 element.onload = function () {
127 self.application.ninja.elementMediator.addElements(element, rules);
128 };
129 //
130 rules = {
131 'position': 'absolute',
132 'top' : (parseInt(e.currentTarget.filePosition.y) - parseInt(this.application.ninja.stage.userContentTop)) + 'px',
133 'left' : (parseInt(e.currentTarget.filePosition.x) - parseInt(this.application.ninja.stage.userContentLeft)) + 'px',
134 '-webkit-transform-style' : 'preserve-3d',
135 '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
136 };
137 //
138 self.application.ninja.elementMediator.addElements(element, rules);
139 } else {
140 //TODO: HANDLE ERROR ON SAVING FILE TO BE ADDED AS ELEMENT
141 }
142 }.bind(this);
143 } else {
144 //TODO: NOT AN IMAGE, HANDLE SPECIAL CASE
145 }
146 }
147 //Not sure why return value should be, seemed as false to work
148 return false;
170 } 149 }
171 }