diff options
Diffstat (limited to 'js/clipboard/internal-ops/elements-clipboard-agent.js')
-rw-r--r-- | js/clipboard/internal-ops/elements-clipboard-agent.js | 364 |
1 files changed, 364 insertions, 0 deletions
diff --git a/js/clipboard/internal-ops/elements-clipboard-agent.js b/js/clipboard/internal-ops/elements-clipboard-agent.js new file mode 100644 index 00000000..cd8de46e --- /dev/null +++ b/js/clipboard/internal-ops/elements-clipboard-agent.js | |||
@@ -0,0 +1,364 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | //////////////////////////////////////////////////////////////////////// | ||
8 | // | ||
9 | |||
10 | var Montage = require("montage/core/core").Montage, | ||
11 | Component = require("montage/ui/component").Component, | ||
12 | ClipboardUtil = require("js/clipboard/util").ClipboardUtil, | ||
13 | World = require("js/lib/drawing/world").World; | ||
14 | |||
15 | var ElementsClipboardAgent = exports.ElementsClipboardAgent = Montage.create(Component, { | ||
16 | |||
17 | //count how many times pasted | ||
18 | //used to move multiple pastes of same copy | ||
19 | pasteCounter:{ | ||
20 | value: 0 | ||
21 | }, | ||
22 | |||
23 | copiedObjects:{ | ||
24 | value: {} | ||
25 | }, | ||
26 | |||
27 | copy:{ | ||
28 | value: function(clipboardEvent){ | ||
29 | var j=0, htmlToClipboard = "", ninjaClipboardObj = {}, textToClipboard = ""; | ||
30 | this.copiedObjects = {}; | ||
31 | this.pasteCounter = 0; | ||
32 | this.copiedObjects["copy"] = []; | ||
33 | |||
34 | if(clipboardEvent){ | ||
35 | for(j=0; j < this.application.ninja.selectedElements.length; j++){//copying from stage | ||
36 | this.copiedObjects.copy.push(this.application.ninja.selectedElements[j]); | ||
37 | |||
38 | if(this.application.ninja.selectedElements[j].tagName === "CANVAS"){ | ||
39 | if(!ninjaClipboardObj.canvas){ | ||
40 | ninjaClipboardObj.canvas = true; | ||
41 | } | ||
42 | }else{ | ||
43 | htmlToClipboard = htmlToClipboard + this.serializeHTMLElement(this.application.ninja.selectedElements[j]); | ||
44 | if(!ninjaClipboardObj.plainHtml){ | ||
45 | ninjaClipboardObj.plainHtml = true; | ||
46 | } | ||
47 | textToClipboard = textToClipboard + this.getText(this.application.ninja.selectedElements[j]) + " "; | ||
48 | } | ||
49 | |||
50 | } | ||
51 | //set clipboard data | ||
52 | clipboardEvent.clipboardData.setData('ninja', ''+ JSON.stringify(ninjaClipboardObj)); | ||
53 | clipboardEvent.clipboardData.setData('text/html', '<HTML><BODY>' + htmlToClipboard + '</BODY></HTML>'); | ||
54 | clipboardEvent.clipboardData.setData('text/plain', textToClipboard); | ||
55 | } | ||
56 | } | ||
57 | }, | ||
58 | |||
59 | cut:{ | ||
60 | value:function(clipboardEvent){ | ||
61 | var j=0, htmlToClipboard = "", ninjaClipboardObj = {}, textToClipboard = "", elObj = null; | ||
62 | this.copiedObjects = {}; this.pasteCounter = 0; | ||
63 | this.copiedObjects["cut"] = []; | ||
64 | |||
65 | if(clipboardEvent){ | ||
66 | for(j=0; j < this.application.ninja.selectedElements.length; j++){//copying from stage | ||
67 | elObj = {}; | ||
68 | elObj["outerhtml"] = this.application.ninja.selectedElements[j].outerHTML; | ||
69 | |||
70 | if(this.application.ninja.selectedElements[j].tagName === "CANVAS"){ | ||
71 | elObj["styles"] = this.getDominantStyles(this.application.ninja.selectedElements[j], true); | ||
72 | if(!ninjaClipboardObj.canvas){ | ||
73 | ninjaClipboardObj.canvas = true; | ||
74 | } | ||
75 | elObj["worldJson"] = this.application.ninja.selectedElements[j].elementModel.shapeModel ? this.application.ninja.selectedElements[j].elementModel.shapeModel.GLWorld.exportJSON(): null; | ||
76 | elObj["className"] = this.application.ninja.selectedElements[j].className; | ||
77 | }else{ | ||
78 | elObj["styles"] = this.getDominantStyles(this.application.ninja.selectedElements[j], false); | ||
79 | htmlToClipboard = htmlToClipboard + this.serializeHTMLElement(this.application.ninja.selectedElements[j]); | ||
80 | if(!ninjaClipboardObj.plainHtml){ | ||
81 | ninjaClipboardObj.plainHtml = true; | ||
82 | } | ||
83 | textToClipboard = textToClipboard + this.getText(this.application.ninja.selectedElements[j]) + " "; | ||
84 | } | ||
85 | this.copiedObjects.cut.push(elObj); | ||
86 | } | ||
87 | //set clipboard data | ||
88 | clipboardEvent.clipboardData.setData('ninja', ''+ JSON.stringify(ninjaClipboardObj)); | ||
89 | clipboardEvent.clipboardData.setData('text/html', '<HTML><BODY>' + htmlToClipboard + '</BODY></HTML>'); | ||
90 | clipboardEvent.clipboardData.setData('text/plain', textToClipboard); | ||
91 | |||
92 | } | ||
93 | |||
94 | this.application.ninja.elementMediator.removeElements(this.application.ninja.selectedElements); | ||
95 | |||
96 | clipboardEvent.preventDefault(); | ||
97 | } | ||
98 | }, | ||
99 | |||
100 | pasteInternal:{ | ||
101 | value:function(){ | ||
102 | if(this.copiedObjects.copy){ | ||
103 | try{ | ||
104 | this.pasteFromCopy(); | ||
105 | }catch(e){ | ||
106 | console.log(""+e.stack); | ||
107 | } | ||
108 | } | ||
109 | else if(this.copiedObjects.cut){ | ||
110 | try{ | ||
111 | this.pasteFromCut(); | ||
112 | }catch(e){ | ||
113 | console.log(""+e.stack); | ||
114 | } | ||
115 | } | ||
116 | |||
117 | } | ||
118 | }, | ||
119 | |||
120 | pasteFromCopy:{//todo: change to appropriate name | ||
121 | value:function(){ | ||
122 | var i=0, j=0, | ||
123 | pastedElements = [],//array of te pastes clones - for selection | ||
124 | node = null, | ||
125 | styles = null, | ||
126 | copiedElement = null; | ||
127 | |||
128 | this.pasteCounter++; | ||
129 | |||
130 | //TODO: cleanse HTML | ||
131 | |||
132 | for(j=0; j< this.copiedObjects.copy.length; j++){ | ||
133 | copiedElement = this.copiedObjects.copy[j]; | ||
134 | styles = null; | ||
135 | |||
136 | if (copiedElement.tagName === "CANVAS"){ | ||
137 | //clone copied canvas | ||
138 | var canvas = this.cloneCanvas(copiedElement); | ||
139 | pastedElements.push(canvas); | ||
140 | } | ||
141 | else { | ||
142 | node = copiedElement.cloneNode(true); | ||
143 | |||
144 | if(copiedElement.ownerDocument.defaultView.getComputedStyle(copiedElement).getPropertyValue("position") === "absolute"){ | ||
145 | styles = {}; | ||
146 | styles.top = this.application.ninja.elementMediator.getProperty(copiedElement, "top", parseInt); | ||
147 | styles.left = this.application.ninja.elementMediator.getProperty(copiedElement, "left", parseInt); | ||
148 | styles.position = "absolute"; | ||
149 | }else{ | ||
150 | styles = null; | ||
151 | } | ||
152 | this.pastePositioned(node, styles); | ||
153 | pastedElements.push(node); | ||
154 | } | ||
155 | |||
156 | } | ||
157 | |||
158 | NJevent("elementAdded", pastedElements); | ||
159 | |||
160 | this.application.ninja.currentDocument.model.needsSave = true; | ||
161 | } | ||
162 | }, | ||
163 | |||
164 | pasteFromCut:{ | ||
165 | value:function(){ | ||
166 | var i=0, j=0, | ||
167 | node = null, canvas = null, | ||
168 | styles=null, | ||
169 | pastedElements = [];//array of te pastes clones - for selection | ||
170 | |||
171 | this.pasteCounter++; | ||
172 | |||
173 | for(j=0; j< this.copiedObjects.cut.length; j++){ | ||
174 | node = ClipboardUtil.deserializeHtmlString(this.copiedObjects.cut[j].outerhtml)[0]; | ||
175 | |||
176 | if (node.tagName === "CANVAS"){ | ||
177 | //paste canvas | ||
178 | canvas = this.generateNewCanvas(this.copiedObjects.cut[j].outerhtml, this.copiedObjects.cut[j].styles, this.copiedObjects.cut[j].className, this.copiedObjects.cut[j].worldJson); | ||
179 | pastedElements.push(canvas); | ||
180 | node = null; | ||
181 | } | ||
182 | else if((node.nodeType === 3) || (node.tagName === "A")){//TextNode | ||
183 | |||
184 | node = null; | ||
185 | } | ||
186 | else { | ||
187 | this.pastePositioned(node, this.copiedObjects.cut[j].styles, false/*fromCopy*/); | ||
188 | pastedElements.push(node); | ||
189 | } | ||
190 | } | ||
191 | |||
192 | NJevent("elementAdded", pastedElements); | ||
193 | this.application.ninja.currentDocument.model.needsSave = true; | ||
194 | } | ||
195 | }, | ||
196 | |||
197 | |||
198 | serializeHTMLElement:{ | ||
199 | value: function(elem){ | ||
200 | var computedStyles = null, originalStyleAttr = null, computedStylesStr = "", i=0, stylePropertyName="", outerHtml = ""; | ||
201 | |||
202 | originalStyleAttr = elem.getAttribute("style");//preserve the current styles | ||
203 | elem.removeAttribute("style"); | ||
204 | |||
205 | //build the computed style attribute | ||
206 | computedStyles = elem.ownerDocument.defaultView.getComputedStyle(elem); | ||
207 | |||
208 | //todo: consider cleaning up the position data [or making position:relative with 0,0] from the computed styles, | ||
209 | // so that the object is pasted onto expernal applicaitons [like gmail] with no offset | ||
210 | |||