diff options
Diffstat (limited to 'js/mediators/drag-drop-mediator.js')
-rwxr-xr-x | js/mediators/drag-drop-mediator.js | 187 |
1 files changed, 81 insertions, 106 deletions
diff --git a/js/mediators/drag-drop-mediator.js b/js/mediators/drag-drop-mediator.js index bf22aed2..8663b06e 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,95 @@ 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 | // | ||
115 | if (e.currentTarget.fileType.indexOf('svg') !== -1) { | ||
116 | element = NJUtils.makeNJElement('embed', 'SVG', 'block');//TODO: Verify this is proper | ||
117 | element.src = url+'/'+fileName; | ||
118 | element.type = 'image/svg+xml'; | ||
119 | } else { | ||
120 | element = NJUtils.makeNJElement('image', 'image', 'image'); | ||
121 | element.src = url+'/'+fileName; | ||
122 | } | ||
123 | //TODO: Remove temp fix for elements to redraw on drop | ||
124 | element.onload = function () { | ||
125 | NJevent("elementAdding", {el: element, data: rules}); | ||
126 | } | ||
127 | // | ||
128 | rules = { | ||
129 | 'position': 'absolute', | ||
130 | 'top' : (parseInt(e.currentTarget.filePosition.y) - parseInt(this.application.ninja.stage.userContentTop)) + 'px', | ||
131 | 'left' : (parseInt(e.currentTarget.filePosition.x) - parseInt(this.application.ninja.stage.userContentLeft)) + 'px', | ||
132 | '-webkit-transform-style' : 'preserve-3d', | ||
133 | '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' | ||
134 | }; | ||
135 | // | ||
136 | NJevent("elementAdding", {el: element, data: rules}); | ||
137 | } else { | ||
138 | //TODO: HANDLE ERROR ON SAVING FILE TO BE ADDED AS ELEMENT | ||
139 | } | ||
140 | }.bind(this); | ||
141 | } else { | ||
142 | //TODO: NOT AN IMAGE, HANDLE SPECIAL CASE | ||
143 | } | ||
144 | } | ||
145 | //Not sure why return value should be, seemed as false to work | ||
146 | return false; | ||
170 | } | 147 | } |
171 | } | 148 | } |
172 | |||
173 | |||
174 | }); | 149 | }); |