diff options
Diffstat (limited to 'js/mediators')
-rwxr-xr-x | js/mediators/drag-drop-mediator.js | 194 |
1 files changed, 79 insertions, 115 deletions
diff --git a/js/mediators/drag-drop-mediator.js b/js/mediators/drag-drop-mediator.js index bf22aed2..3a965be5 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,84 @@ 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 | //TODO: Remove temp fix for elements to redraw on drop | |
123 | if(file.type.match("^image/svg\\+xml")){ // this is an SVG file | 113 | element.onload = function () { |
124 | var tempElem = document.createElement("div"); | 114 | NJevent("elementAdding", {el: element, data: rules}); |
125 | tempElem.innerHTML = evt2.currentTarget.result; | 115 | } |
126 | domElem = tempElem.children[0]; | 116 | // |
127 | 117 | rules = { | |
128 | NJUtils.makeElementModel(domElem, "SVG", "block"); | 118 | 'position': 'absolute', |
129 | } else { // treat as a regular image | 119 | 'top' : (parseInt(e.currentTarget.filePosition.y) - parseInt(this.application.ninja.stage.userContentTop)) + 'px', |
130 | domElem = NJUtils.makeNJElement("image", "image", "image"); | 120 | 'left' : (parseInt(e.currentTarget.filePosition.x) - parseInt(this.application.ninja.stage.userContentLeft)) + 'px', |
131 | domElem.src = evt2.currentTarget.result; | 121 | '-webkit-transform-style' : 'preserve-3d', |
132 | } | 122 | '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' |
133 | 123 | }; | |
134 | 124 | // | |
135 | // Not sure we need an ID for the image | 125 | NJevent("elementAdding", {el: element, data: rules}); |
136 | /* | 126 | } else { |
137 | // Use the Image filename if valid for the id | 127 | //TODO: HANDLE ERROR ON SAVING FILE TO BE ADDED AS ELEMENT |
138 | var filename = file.fileName.substr(0, file.fileName.lastIndexOf('.')) || file.fileName; | 128 | } |
139 | filename = filename.replace(/ /g,"_"); | 129 | }.bind(this); |
140 | 130 | } else { | |
141 | 131 | //TODO: NOT AN IMAGE, HANDLE SPECIAL CASE | |
142 | if(this.isValidFilename(filename)) { | 132 | } |
143 | //domElem.id = filename; | 133 | } |
144 | } else { | 134 | //Not sure why return value should be, seemed as false to work |
145 | //domElem.id = DocumentControllerModule.DocumentController.CreateElementID(img.tagName); | 135 | return false; |
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 | } | 136 | } |
171 | } | 137 | } |
172 | |||
173 | |||
174 | }); | 138 | }); |