diff options
author | Ananya Sen | 2012-05-07 11:07:45 -0700 |
---|---|---|
committer | Ananya Sen | 2012-05-07 11:07:45 -0700 |
commit | f6e4436b024bddae92348fc975b5fd6c4595cb61 (patch) | |
tree | ba6af0fb032513826dc476a5b9fedbbfe6037fc0 /js | |
parent | 526e423e4a2734c2b139af23911e912452a4443f (diff) | |
download | ninja-f6e4436b024bddae92348fc975b5fd6c4595cb61.tar.gz |
copy/paste POC
Signed-off-by: Ananya Sen <Ananya.Sen@motorola.com>
Conflicts:
js/ninja.reel/ninja.html
Signed-off-by: Ananya Sen <Ananya.Sen@motorola.com>
Diffstat (limited to 'js')
-rw-r--r-- | js/controllers/clipboard-controller.js | 151 | ||||
-rwxr-xr-x | js/data/menu-data.js | 9 | ||||
-rwxr-xr-x | js/ninja.reel/ninja.html | 17 |
3 files changed, 168 insertions, 9 deletions
diff --git a/js/controllers/clipboard-controller.js b/js/controllers/clipboard-controller.js new file mode 100644 index 00000000..b2e5a33b --- /dev/null +++ b/js/controllers/clipboard-controller.js | |||
@@ -0,0 +1,151 @@ | |||
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 | var Montage = require("montage/core/core").Montage, | ||
10 | Component = require("montage/ui/component").Component; | ||
11 | |||
12 | var ClipboardController = exports.ClipboardController = Montage.create(Component, { | ||
13 | hasTemplate: { | ||
14 | value: false | ||
15 | }, | ||
16 | |||
17 | deserializedFromTemplate: { | ||
18 | value: function() { | ||
19 | document.body.addEventListener("copy", this, false); | ||
20 | document.body.addEventListener("cut", this, false); | ||
21 | document.body.addEventListener("paste", this, false); | ||
22 | |||
23 | //ninja menu events | ||
24 | this.eventManager.addEventListener("executeCut", this, false); | ||
25 | this.eventManager.addEventListener("executeCopy", this, false); | ||
26 | this.eventManager.addEventListener("executePaste", this, false); | ||
27 | } | ||
28 | }, | ||
29 | |||
30 | _copyFlag:{ | ||
31 | value:false | ||
32 | }, | ||
33 | |||
34 | copyFlag:{ | ||
35 | get:function(){return this._copyFlag;}, | ||
36 | set:function(value){this._copyFlag = value;} | ||
37 | }, | ||
38 | |||
39 | _newCopyFlag:{ | ||
40 | value:true | ||
41 | }, | ||
42 | |||
43 | newCopyFlag:{ | ||
44 | get:function(){return this._newCopyFlag;}, | ||
45 | set:function(value){this._newCopyFlag = value;} | ||
46 | }, | ||
47 | |||
48 | handleExecuteCopy:{ | ||
49 | value: function(){document.execCommand('copy',false,null);} | ||
50 | }, | ||
51 | |||
52 | handleExecuteCut:{ | ||
53 | value: function(){document.execCommand('cut',false,null);} | ||
54 | }, | ||
55 | |||
56 | handleExecutePaste:{ | ||
57 | value: function(){document.execCommand('paste',false,null);} | ||
58 | }, | ||
59 | |||
60 | handleCopy:{ | ||
61 | value:function(clipboardEvent){ | ||
62 | //depends on the clipboard event | ||
63 | if(this.application.ninja.selectedElements.length > 0){ | ||
64 | clipboardEvent.clipboardData.setData('text/html', ''+this.application.ninja.selectedElements[0].outerHTML);//copying first selected element for POC | ||
65 | |||
66 | clipboardEvent.preventDefault(); | ||
67 | } | ||
68 | } | ||
69 | }, | ||
70 | |||
71 | handleCut:{ | ||
72 | value:function(clipboardEvent){ | ||
73 | var clipboardData = clipboardEvent.clipboardData, | ||
74 | htmlData = clipboardData.getData("text/html"), | ||
75 | textData = clipboardData.getData("text/plain"); | ||
76 | |||
77 | console.log("$$$ handleCut ", textData); | ||
78 | |||
79 | |||
80 | clipboardEvent.preventDefault(); | ||
81 | clipboardEvent.stopPropagation(); | ||
82 | } | ||
83 | }, | ||
84 | |||
85 | handlePaste:{ | ||
86 | value:function(clipboardEvent){ | ||
87 | var clipboardData = clipboardEvent.clipboardData, | ||
88 | htmlData = clipboardData.getData("text/html"), | ||
89 | textData = clipboardData.getData("text/plain"), | ||
90 | data = null; | ||
91 | |||
92 | data = htmlData || textData; | ||
93 | |||
94 | if(data){ | ||
95 | //hack - to avoid parsing html code now | ||
96 | |||
97 | this.application.ninja.documentController.activeDocument.documentRoot.innerHTML = data + this.application.ninja.documentController.activeDocument.documentRoot.innerHTML; | ||
98 | |||
99 | } | ||
100 | |||
101 | clipboardEvent.preventDefault(); | ||
102 | } | ||
103 | }, | ||
104 | |||
105 | /* | ||
106 | does not preserve the css class / html structure while copying | ||
107 | */ | ||
108 | copyUsingContenteditable:{ | ||
109 | value:function(){ | ||
110 | var clipboardHelper=document.getElementById("clipboardHelper"),copyElement = null, textData = ""; | ||
111 | if((this.copyFlag === true) ) { | ||
112 | if(!clipboardHelper) clipboardHelper.innerHTML = "";//clear | ||
113 | this.copyFlag = false; | ||
114 | return;//break infinite loop | ||
115 | } | ||
116 | |||
117 | //dynamically create editable div for execCommand->copy | ||
118 | if(!clipboardHelper){ | ||
119 | clipboardHelper = document.createElement ("div"); | ||
120 | clipboardHelper.id = "clipboardHelper"; | ||
121 | // place outside the visible area | ||
122 | clipboardHelper.style.position = "absolute"; | ||
123 | clipboardHelper.style.left = "-10000px"; | ||
124 | clipboardHelper.style.top = "-10000px"; | ||
125 | clipboardHelper.setAttribute("contenteditable", "true"); | ||
126 | clipboardHelper.style.webkitUserSelect = "auto"; | ||
127 | |||
128 | // clipboardHelper.style.width = "500px"; | ||
129 | // clipboardHelper.style.height = "125px"; | ||
130 | // clipboardHelper.style.overflow = "visible"; | ||
131 | // clipboardHelper.style.zIndex = "10000"; | ||
132 | // clipboardHelper.style.border = "1px solid red"; | ||
133 | // clipboardHelper.style.backgroundColor = "yellow"; | ||
134 | |||
135 | document.body.appendChild (clipboardHelper); | ||
136 | } | ||
137 | |||
138 | clipboardHelper.focus(); | ||
139 | //copy single selection for POC | ||
140 | if(this.application.ninja.selectedElements.length > 0){ | ||
141 | clipboardHelper.innerHTML = this.application.ninja.selectedElements[0].outerHTML; | ||
142 | } | ||
143 | //do selection | ||
144 | document.execCommand('selectAll',false,null); | ||
145 | this.copyFlag = true;//flag to prevent infinite loop | ||
146 | document.execCommand('copy',false,null); | ||
147 | |||
148 | } | ||
149 | } | ||
150 | |||
151 | }); \ No newline at end of file | ||
diff --git a/js/data/menu-data.js b/js/data/menu-data.js index 9e8bf945..e18fb5cf 100755 --- a/js/data/menu-data.js +++ b/js/data/menu-data.js | |||
@@ -173,17 +173,20 @@ exports.MenuData = Montage.create( Montage, { | |||
173 | { | 173 | { |
174 | "displayText" : "Cut", | 174 | "displayText" : "Cut", |
175 | "hasSubMenu" : false, | 175 | "hasSubMenu" : false, |
176 | "enabled": false | 176 | "enabled": true, |
177 | "action": "executeCut" | ||
177 | }, | 178 | }, |
178 | { | 179 | { |
179 | "displayText" : "Copy", | 180 | "displayText" : "Copy", |
180 | "hasSubMenu" : false, | 181 | "hasSubMenu" : false, |
181 | "enabled": false | 182 | "enabled": true, |
183 | "action": "executeCopy" | ||
182 | }, | 184 | }, |
183 | { | 185 | { |
184 | "displayText" : "Paste", | 186 | "displayText" : "Paste", |
185 | "hasSubMenu" : false, | 187 | "hasSubMenu" : false, |
186 | "enabled": false | 188 | "enabled": true, |
189 | "action": "executePaste" | ||
187 | } | 190 | } |
188 | ] | 191 | ] |
189 | }, | 192 | }, |
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index 52a6daa2..b955a4c9 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html | |||
@@ -1,4 +1,4 @@ | |||
1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> |
2 | 2 | ||
3 | <!-- <copyright> | 3 | <!-- <copyright> |
4 | This file contains proprietary software owned by Motorola Mobility, Inc. | 4 | This file contains proprietary software owned by Motorola Mobility, Inc. |
@@ -321,12 +321,16 @@ | |||
321 | "prototype": "js/controllers/code-editor-controller" | 321 | "prototype": "js/controllers/code-editor-controller" |
322 | }, | 322 | }, |
323 | 323 | ||
324 | "clipboardController": { | ||
325 | "prototype": "js/controllers/clipboard-controller[ClipboardController]" | ||
326 | }, | ||
327 | |||
324 | "owner": { | 328 | "owner": { |
325 | "prototype": "js/ninja.reel", | 329 | "prototype": "js/ninja.reel", |
326 | "properties": { | 330 | "properties": { |
327 | "element": {"#": "main"}, | 331 | "element": {"#": "main"}, |
328 | "rulerTop": {"#": "rulerTop"}, | 332 | "rulerTop": {"#": "rulerTop"}, |
329 | "rulerLeft": {"#": "rulerLeft"}, | 333 | "rulerLeft": {"#": "rulerLeft"}, |
330 | "appModel": {"@": "appModel"}, | 334 | "appModel": {"@": "appModel"}, |
331 | "toolsData": {"@": "toolsData1"}, | 335 | "toolsData": {"@": "toolsData1"}, |
332 | "toolsList": {"@": "toolsList1"}, | 336 | "toolsList": {"@": "toolsList1"}, |
@@ -340,10 +344,10 @@ | |||
340 | "popupManager": {"@": "popupManager1"}, | 344 | "popupManager": {"@": "popupManager1"}, |
341 | "colorController": {"@": "colorController1"}, | 345 | "colorController": {"@": "colorController1"}, |
342 | "stylesController": {"@": "stylesController"}, | 346 | "stylesController": {"@": "stylesController"}, |
343 | "presetsController": {"@": "presetsController"}, | 347 | "presetsController": {"@": "presetsController"}, |
344 | "filePickerController": {"@": "filePickerController"}, | 348 | "filePickerController": {"@": "filePickerController"}, |
345 | "newFileController": {"@": "newFileController"}, | 349 | "newFileController": {"@": "newFileController"}, |
346 | "coreIoApi": {"@": "coreIoApi1"}, | 350 | "coreIoApi": {"@": "coreIoApi1"},< |