aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnanya Sen2012-05-11 12:24:26 -0700
committerAnanya Sen2012-05-11 12:24:26 -0700
commite503f067e8f4eb2477fb516ae00ffc6a297fc2a0 (patch)
tree9423d69a59591865af79a7d1edc7a3e693acca6e
parent810ba02f337d3b772ef4595452a97aeb8a140944 (diff)
downloadninja-e503f067e8f4eb2477fb516ae00ffc6a297fc2a0.tar.gz
Prototype of copy and pasting basic html elements.
Also provides ability to paste ninja elements to external applications, and to paste html content from external applications to Ninja. Signed-off-by: Ananya Sen <Ananya.Sen@motorola.com>
-rw-r--r--js/controllers/clipboard-controller.js146
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//
9var Montage = require("montage/core/core").Montage, 9var 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
12var ClipboardController = exports.ClipboardController = Montage.create(Component, { 13var 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