diff options
-rw-r--r-- | js/clipboard/external-apps-clipboard-agent.js | 185 | ||||
-rw-r--r-- | js/clipboard/internal-ops/elements-clipboard-agent.js | 24 | ||||
-rw-r--r-- | js/controllers/clipboard-controller.js | 15 | ||||
-rwxr-xr-x | js/mediators/element-mediator.js | 6 |
4 files changed, 96 insertions, 134 deletions
diff --git a/js/clipboard/external-apps-clipboard-agent.js b/js/clipboard/external-apps-clipboard-agent.js index 6b9d8090..65410543 100644 --- a/js/clipboard/external-apps-clipboard-agent.js +++ b/js/clipboard/external-apps-clipboard-agent.js | |||
@@ -38,40 +38,52 @@ var Montage = require("montage/core/core").Montage, | |||
38 | 38 | ||
39 | var ExternalAppsClipboardAgent = exports.ExternalAppsClipboardAgent = Montage.create(Component, { | 39 | var ExternalAppsClipboardAgent = exports.ExternalAppsClipboardAgent = Montage.create(Component, { |
40 | 40 | ||
41 | //count how many times pasted | ||
42 | //used to move multiple pastes of same copy | ||
43 | pasteCounter:{ | ||
44 | value: 0 | ||
45 | }, | ||
46 | |||
41 | paste:{ | 47 | paste:{ |
42 | value: function(clipboardEvent){ | 48 | value: function(clipboardEvent){ |
43 | var clipboardData = clipboardEvent.clipboardData, | 49 | var clipboardData = clipboardEvent.clipboardData, |
44 | htmlData = clipboardData.getData("text/html"), | 50 | htmlData = clipboardData.getData("text/html"), |
45 | textData = clipboardData.getData("text/plain"), | 51 | textData = clipboardData.getData("text/plain"), |
46 | i=0, | 52 | i=0, |
47 | imageMime, imageData, imageElement; | 53 | imageMime, imageData, imageElement, isImage = false, imageItem; |
48 | 54 | ||
49 | //handle image blobs | 55 | if(clipboardData.items && (clipboardData.items.length > 0)){//handle image blobs |
50 | if(clipboardData.items && (clipboardData.items.length > 0)){ | ||
51 | for(i=0; i < clipboardData.items.length; i++ ){ | 56 | for(i=0; i < clipboardData.items.length; i++ ){ |
52 | if((clipboardData.items[i].kind === "file") && (clipboardData.items[i].type.indexOf("image") === 0)){//example type -> "image/png" | 57 | if((clipboardData.items[i].kind === "file") && (clipboardData.items[i].type.indexOf("image") === 0)){//example type -> "image/png" |
53 | imageMime = clipboardData.items[i].type; | 58 | isImage = true; |
54 | imageData = clipboardData.items[i].getAsFile(); | 59 | if(clipboardData.items[i].type === "image/png"){ |
55 | try{ | 60 | imageItem = clipboardData.items[i];//grab the png image from clipboard |
56 | imageElement = this.pasteImageBinary(imageData); | 61 | } |
57 | }catch(e){ | 62 | else if(i===0){ |
58 | console.log(""+e.stack); | 63 | imageItem = clipboardData.items[i]; |
59 | } | 64 | } |
60 | this.application.ninja.selectionController.selectElements(imageElement); | ||
61 | this.application.ninja.currentDocument.model.needsSave = true; | ||
62 | |||
63 | } | 65 | } |
64 | } | 66 | } |
65 | } | 67 | } |
66 | 68 | ||
67 | try{ | 69 | if(isImage && imageItem){ |
68 | if(!!htmlData || !!textData){ | 70 | imageMime = imageItem.type; |
69 | this.pasteHtml(htmlData, textData); | 71 | imageData = imageItem.getAsFile(); |
72 | try{ | ||
73 | imageElement = this.pasteImageBinary(imageData); | ||
74 | }catch(e){ | ||
75 | console.log(""+e.stack); | ||
70 | } | 76 | } |
71 | }catch(e){ | 77 | this.application.ninja.currentDocument.model.needsSave = true; |
72 | console.log(""+e.stack); | ||
73 | } | 78 | } |
74 | 79 | ||
80 | if(!isImage && (!!htmlData || !!textData)){ | ||
81 | try{ | ||
82 | this.doPasteHtml(htmlData, textData); | ||
83 | }catch(e){ | ||
84 | console.log(""+e.stack); | ||
85 | } | ||
86 | } | ||
75 | } | 87 | } |
76 | }, | 88 | }, |
77 | 89 | ||
@@ -108,16 +120,16 @@ var ExternalAppsClipboardAgent = exports.ExternalAppsClipboardAgent = Montage.cr | |||
108 | //Adding element once it is loaded | 120 | //Adding element once it is loaded |
109 | element.onload = function () { | 121 | element.onload = function () { |
110 | element.onload = null; | 122 | element.onload = null; |
111 | self.application.ninja.elementMediator.addElements(element, rules, true); | 123 | self.application.ninja.elementMediator.addElements(element, rules, true/*notify*/, false /*callAddDelegate*/); |
112 | }; | 124 | }; |
113 | //Setting rules of element | 125 | //Setting rules of element |
114 | rules = { | 126 | rules = { |
115 | 'position': 'absolute', | 127 | 'position': 'absolute', |
116 | 'top' : '100px', | 128 | 'top' : '0px', |
117 | 'left' : '100px' | 129 | 'left' : '0px' |
118 | }; | 130 | }; |
119 | // | 131 | // |
120 | self.application.ninja.elementMediator.addElements(element, rules, false); | 132 | self.application.ninja.elementMediator.addElements(element, rules, false/*notify*/, false /*callAddDelegate*/); |
121 | } else { | 133 | } else { |
122 | //HANDLE ERROR ON SAVING FILE TO BE ADDED AS ELEMENT | 134 | //HANDLE ERROR ON SAVING FILE TO BE ADDED AS ELEMENT |
123 | } | 135 | } |
@@ -126,119 +138,60 @@ var ExternalAppsClipboardAgent = exports.ExternalAppsClipboardAgent = Montage.cr | |||
126 | } | 138 | } |
127 | }, | 139 | }, |
128 | 140 | ||
129 | //paste from external applicaitons | 141 | doPasteHtml:{ |
130 | pasteHtml:{ | ||
131 | value: function(htmlData, textData){ | 142 | value: function(htmlData, textData){ |
132 | var i=0, j=0, | 143 | var divWrapper = null, data = null, theclass, height, width; |
133 | pasteDataObject=null, | ||
134 | pastedElements = [], | ||
135 | node = null, nodeList = null, | ||
136 | styles = null, | ||
137 | divWrapper = null, | ||
138 | spanWrapper = null, | ||
139 | metaEl = null, | ||
140 | self = this; | ||
141 | 144 | ||
142 | if(htmlData){ | 145 | htmlData = this.sanitize(htmlData); |
146 | textData = this.sanitize(textData); | ||
143 | 147 | ||
144 | //cleanse HTML | 148 | data = htmlData ? htmlData : textData; |
145 | |||
146 | htmlData.replace(/[<script]/g," "); | ||
147 | 149 | ||
150 | if (data && data.length) { | ||
151 | //deselect current selections | ||
148 | this.application.ninja.selectedElements.length = 0; | 152 | this.application.ninja.selectedElements.length = 0; |
149 | NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": true} ); | 153 | NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": true} ); |
150 | 154 | ||
151 | try{ | 155 | divWrapper = document.application.njUtils.make("div", null, this.application.ninja.currentDocument); |
152 | nodeList = ClipboardUtil.deserializeHtmlString(htmlData);//this removes html and body tags | 156 | this.application.ninja.elementMediator.addElements(divWrapper, {"height": "68px", |
153 | } | 157 | "left": "0px", |
154 | catch(e){ | 158 | "position": "absolute", |
155 | console.log(""+e.stack); | 159 | "top": "0px", |
156 | } | 160 | "width": "161px"}, false); |
157 | |||
158 | for(i=0; i < nodeList.length; i++){ | ||
159 | if(nodeList[i].tagName === "META") { | ||
160 | nodeList[i] = null; | ||
161 | } | ||
162 | else if (nodeList[i].tagName === "CANVAS"){ | ||
163 | //can't paste external canvas for lack of all metadata | ||
164 | nodeList[i] = null; | ||
165 | } | ||
166 | else if((nodeList[i].nodeType === 3) || (nodeList[i].tagName === "A")){ | ||
167 | node = nodeList[i].cloneNode(true); | ||
168 | |||
169 | divWrapper = document.application.njUtils.make("div", null, this.application.ninja.currentDocument); | ||
170 | spanWrapper = document.application.njUtils.make("span", null, this.application.ninja.currentDocument); | ||
171 | spanWrapper.appendChild(node); | ||
172 | divWrapper.appendChild(spanWrapper); | ||
173 | styles = {"position":"absolute", "top":"100px", "left":"100px"}; | ||
174 | 161 | ||
175 | this.pastePositioned(divWrapper, styles); | 162 | divWrapper.innerHTML = data; |
176 | |||
177 | nodeList[i] = null; | ||
178 | pastedElements.push(divWrapper); | ||
179 | |||
180 | }else if(nodeList[i].tagName === "SPAN"){ | ||
181 | node = nodeList[i].cloneNode(true); | ||
182 | |||
183 | divWrapper = document.application.njUtils.make("div", null, this.application.ninja.currentDocument); | ||
184 | divWrapper.appendChild(node); | ||
185 | styles = {"position":"absolute", "top":"100px", "left":"100px"}; | ||
186 | |||
187 | this.pastePositioned(divWrapper, styles); | ||
188 | |||
189 | nodeList[i] = null; | ||
190 | pastedElements.push(divWrapper); | ||
191 | } | ||
192 | else { | ||
193 | node = nodeList[i].cloneNode(true); | ||
194 | |||
195 | //get class string while copying .... generate styles from class | ||
196 | styles = {"position":"absolute", "top":"100px", "left":"100px"}; | ||
197 | |||
198 | this.pastePositioned(node, styles); | ||
199 | |||
200 | nodeList[i] = null; | ||
201 | pastedElements.push(node); | ||
202 | } | ||
203 | 163 | ||
164 | //hack to set the wrapper div's height and width as per the pasted content | ||
165 | theclass = divWrapper.getAttribute("class"); | ||
166 | //temporarily remove the class to find the computed styles for the pasted content | ||
167 | if(theclass){ | ||
168 | divWrapper.removeAttribute("class"); | ||
204 | } | 169 | } |
170 | height = divWrapper.ownerDocument.defaultView.getComputedStyle(divWrapper).getPropertyValue("height"); | ||
171 | width = divWrapper.ownerDocument.defaultView.getComputedStyle(divWrapper).getPropertyValue("width"); | ||
205 | 172 | ||
206 | nodeList = null; | 173 | divWrapper.setAttribute("class", theclass); |
207 |