diff options
-rw-r--r-- | js/controllers/clipboard-controller.js | 146 |
1 files changed, 133 insertions, 13 deletions
diff --git a/js/controllers/clipboard-controller.js b/js/controllers/clipboard-controller.js index d26aaa80..b023d37c 100644 --- a/js/controllers/clipboard-controller.js +++ b/js/controllers/clipboard-controller.js | |||
@@ -7,7 +7,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
7 | //////////////////////////////////////////////////////////////////////// | 7 | //////////////////////////////////////////////////////////////////////// |
8 | // | 8 | // |
9 | var Montage = require("montage/core/core").Montage, | 9 | var Montage = require("montage/core/core").Montage, |
10 | Component = require("montage/ui/component").Component; | 10 | Component = require("montage/ui/component").Component, |
11 | NJUtils = require("js/lib/NJUtils").NJUtils; | ||
11 | 12 | ||
12 | var ClipboardController = exports.ClipboardController = Montage.create(Component, { | 13 | var ClipboardController = exports.ClipboardController = Montage.create(Component, { |
13 | hasTemplate: { | 14 | hasTemplate: { |
@@ -24,6 +25,7 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component | |||
24 | this.eventManager.addEventListener("executeCut", this, false); | 25 | this.eventManager.addEventListener("executeCut", this, false); |
25 | this.eventManager.addEventListener("executeCopy", this, false); | 26 | this.eventManager.addEventListener("executeCopy", this, false); |
26 | this.eventManager.addEventListener("executePaste", this, false); | 27 | this.eventManager.addEventListener("executePaste", this, false); |
28 | |||
27 | } | 29 | } |
28 | }, | 30 | }, |
29 | 31 | ||
@@ -59,45 +61,163 @@ var ClipboardController = exports.ClipboardController = Montage.create(Component | |||
59 | 61 | ||
60 | handleCopy:{ | 62 | handleCopy:{ |
61 | value:function(clipboardEvent){ | 63 | value:function(clipboardEvent){ |
62 | //depends on the clipboard event | 64 | var elem = null, computedStyles = null, originalStyleAttr = null, computedStylesStr = "", i=0, stylePropertyName=""; |
65 | if(this.application.ninja.documentController.activeDocument.currentView === "code") return; | ||
66 | |||
63 | if(this.application.ninja.selectedElements.length > 0){ | 67 | if(this.application.ninja.selectedElements.length > 0){ |
68 | //handling 1 selected element | ||
69 | |||
70 | elem = this.application.ninja.selectedElements[0]; | ||
71 | originalStyleAttr = elem.getAttribute("style");//preserve the current styles | ||
72 | elem.removeAttribute("style"); | ||
73 | |||
74 | //build the computed style attribute | ||
75 | computedStyles = elem.ownerDocument.defaultView.getComputedStyle(elem); | ||
76 | |||
77 | //todo: consider cleaning up the position data [or making posiiton:relative with 0,0] from the computed styles, | ||
78 | // so that the object is pasted onto expernal applicaitons [like gmail] with no offset | ||
79 | |||
80 | for (i = 0; i < computedStyles.length; i++) { | ||
81 | stylePropertyName = computedStyles[i]; | ||
82 | computedStylesStr = computedStylesStr + stylePropertyName + ":" + computedStyles.getPropertyValue(stylePropertyName) + ";"; | ||
83 | } | ||
84 | elem.setAttribute("style", computedStylesStr); | ||
85 | |||
86 | //set clipboard data | ||
64 | clipboardEvent.clipboardData.setData('text/html', ''+this.application.ninja.selectedElements[0].outerHTML);//copying first selected element for POC | 87 | clipboardEvent.clipboardData.setData('text/html', ''+this.application.ninja.selectedElements[0].outerHTML);//copying first selected element for POC |
88 | //clipboardEvent.clipboardData.setData('ninja', 'test');//works | ||
89 | |||
90 | elem.setAttribute("style", originalStyleAttr);//reset style after copying to clipboard | ||
91 | |||
92 | //end - handling 1 selected element | ||
65 | 93 | ||
66 | clipboardEvent.preventDefault(); | 94 | clipboardEvent.preventDefault(); |
67 | } | 95 | } |
68 | } | 96 | } |
69 | }, | 97 | }, |
70 | 98 | ||
71 | handleCut:{ | 99 | handlePaste:{ |
72 | value:function(clipboardEvent){ | 100 | value:function(clipboardEvent){ |
101 | if(this.application.ninja.documentController.activeDocument.currentView === "code") return; | ||
102 | |||
73 | var clipboardData = clipboardEvent.clipboardData, | 103 | var clipboardData = clipboardEvent.clipboardData, |
74 | htmlData = clipboardData.getData("text/html"), | 104 | htmlData = clipboardData.getData("text/html"), |
75 | textData = clipboardData.getData("text/plain"); | 105 | textData = clipboardData.getData("text/plain"); |
76 | 106 | ||
77 | console.log("$$$ handleCut ", textData); | 107 | this.pasteItems(htmlData, textData); |
78 | |||
79 | 108 | ||
80 | clipboardEvent.preventDefault(); | 109 | clipboardEvent.preventDefault(); |
81 | } | 110 | } |
82 | }, | 111 | }, |
83 | 112 | ||
84 | handlePaste:{ | 113 | pasteItems:{ |
85 | value:function(clipboardEvent){ | 114 | value: function(htmlData, textData){ |
86 | var clipboardData = clipboardEvent.clipboardData, | 115 | var data = null, i=0, |
87 | htmlData = clipboardData.getData("text/html"), | 116 | pasteDataObject=null, |
88 | textData = clipboardData.getData("text/plain"), | 117 | clipboardHelper=this.createClipboardHelper(), |
89 | data = null; | 118 | pastedElements = null, |
119 | node = null, | ||
120 | styles = null; | ||
90 | 121 | ||
91 | data = htmlData || textData; | 122 | data = htmlData || textData; |
92 | 123 | ||
93 | if(data){ | 124 | if(data){ |
94 | //hack - to avoid parsing html code now | 125 | //TODO: cleanse HTML |
126 | |||
127 | this.application.ninja.selectedElements.length = 0; | ||
128 | NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": true} ); | ||
129 | |||
130 | clipboardHelper.innerHTML = data;//add the copied html to generate the nodes | ||
131 | |||
132 | while(clipboardHelper.hasChildNodes()){ | ||
133 | if(clipboardHelper.lastChild.tagName !== "META") { | ||
134 | node = clipboardHelper.removeChild(clipboardHelper.lastChild); | ||
135 | |||
136 | node.removeAttribute("style");//remove the computed styles attribute which is placed only for pasting to external applications | ||
137 | |||
138 | //get class string while copying .... generate styles from class | ||
139 | styles = {"top":"100px", "left":"100px"};//get real stage center coordinates | ||
140 | this.pastePositioned(node, styles); | ||
141 | |||
142 | |||
143 | |||
144 | |||
145 | //this.pasteInPlace(temp);//does not work now | ||
146 | |||
95 | 147 | ||
96 | this.application.ninja.documentController.activeDocument.documentRoot.innerHTML = data + this.application.ninja.documentController.activeDocument.documentRoot.innerHTML; | 148 | // this.application.ninja.documentController.activeDocument.documentRoot.insertBefore(temp, this.application.ninja.documentController.activeDocument.documentRoot.firstChild); |
149 | // NJUtils.makeModelFromElement(temp); | ||
150 | // NJevent("elementAdded", temp); | ||
97 | 151 | ||
152 | } | ||
153 | else { | ||
154 | clipboardHelper.removeChild(clipboardHelper.lastChild);//remove unnecesary meta tag | ||
155 | } | ||
156 | } | ||
157 | |||
158 | this.application.ninja.documentController.activeDocument.needsSave = true; | ||
98 | } | 159 | } |
99 | 160 | ||
161 | } | ||
162 | }, | ||
163 | |||
164 | pastePositioned:{ | ||
165 | value: function(element, styles){// for now can wok for both in-place and centered paste | ||
166 | NJUtils.createModel(element); | ||
167 | this.application.ninja.elementMediator.addElements(element, styles); | ||
168 | } | ||
169 | }, | ||
170 | |||
171 | pasteInPlace:{ | ||
172 | value: function(element){ | ||
173 | NJUtils.createModel(element); | ||
174 | this.application.ninja.elementMediator.addElements(element, null);//does not work now | ||
175 | } | ||
176 | }, | ||
177 | |||
178 | handleCut:{ | ||
179 | value:function(clipboardEvent){ | ||
180 | var clipboardData = clipboardEvent.clipboardData, | ||
181 | htmlData = clipboardData.getData("text/html"), | ||
182 | textData = clipboardData.getData("text/plain"); | ||
183 | |||
184 | console.log("$$$ handleCut ", textData); | ||
185 | |||
186 | |||
100 | clipboardEvent.preventDefault(); | 187 | clipboardEvent.preventDefault(); |
101 | } | 188 | } |
189 | }, | ||
190 | |||
191 | samplePasteJson:{ | ||
192 | value:{ | ||
193 | "htmlString" : "<div></div>", | ||
194 | "styles": {"position": "absolute", | ||
195 | "top": "304px", | ||
196 | "left": "318px", | ||
197 | "width": "125px", | ||
198 | "height": "71px", | ||
199 | "background-image": "none", | ||
200 | "background-color": "#2EFF5B"} | ||
201 | |||
202 | } | ||
203 | }, | ||
204 | |||
205 | createClipboardHelper:{ | ||
206 | value:function(){ | ||
207 | var doc = this.application.ninja.currentDocument ? this.application.ninja.currentDocument._document : document, | ||
208 | clipboardHelper=doc.getElementById("clipboardHelper"); | ||
209 | //dynamically create editable div for execCommand->copy | ||
210 | if(!clipboardHelper){ | ||
211 | clipboardHelper = doc.createElement ("div"); | ||
212 | clipboardHelper.id = "clipboardHelper"; | ||
213 | //clipboardHelper.style.display="none"; | ||
214 | clipboardHelper.style.position = "absolute"; | ||
215 | clipboardHelper.style.right = "0px"; | ||
216 | clipboardHelper.style.top = "0px"; | ||
217 | |||
218 | document.body.appendChild (clipboardHelper); | ||
219 | } | ||
220 | return clipboardHelper; | ||
221 | } | ||
102 | } | 222 | } |
103 | }); \ No newline at end of file | 223 | }); \ No newline at end of file |