From f6e4436b024bddae92348fc975b5fd6c4595cb61 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Mon, 7 May 2012 11:07:45 -0700 Subject: copy/paste POC Signed-off-by: Ananya Sen Conflicts: js/ninja.reel/ninja.html Signed-off-by: Ananya Sen --- js/controllers/clipboard-controller.js | 151 +++++++++++++++++++++++++++++++++ js/data/menu-data.js | 9 +- js/ninja.reel/ninja.html | 17 ++-- manifest.json | 4 +- 4 files changed, 171 insertions(+), 10 deletions(-) create mode 100644 js/controllers/clipboard-controller.js 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 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +//////////////////////////////////////////////////////////////////////// +// +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +var ClipboardController = exports.ClipboardController = Montage.create(Component, { + hasTemplate: { + value: false + }, + + deserializedFromTemplate: { + value: function() { + document.body.addEventListener("copy", this, false); + document.body.addEventListener("cut", this, false); + document.body.addEventListener("paste", this, false); + + //ninja menu events + this.eventManager.addEventListener("executeCut", this, false); + this.eventManager.addEventListener("executeCopy", this, false); + this.eventManager.addEventListener("executePaste", this, false); + } + }, + + _copyFlag:{ + value:false + }, + + copyFlag:{ + get:function(){return this._copyFlag;}, + set:function(value){this._copyFlag = value;} + }, + + _newCopyFlag:{ + value:true + }, + + newCopyFlag:{ + get:function(){return this._newCopyFlag;}, + set:function(value){this._newCopyFlag = value;} + }, + + handleExecuteCopy:{ + value: function(){document.execCommand('copy',false,null);} + }, + + handleExecuteCut:{ + value: function(){document.execCommand('cut',false,null);} + }, + + handleExecutePaste:{ + value: function(){document.execCommand('paste',false,null);} + }, + + handleCopy:{ + value:function(clipboardEvent){ + //depends on the clipboard event + if(this.application.ninja.selectedElements.length > 0){ + clipboardEvent.clipboardData.setData('text/html', ''+this.application.ninja.selectedElements[0].outerHTML);//copying first selected element for POC + + clipboardEvent.preventDefault(); + } + } + }, + + handleCut:{ + value:function(clipboardEvent){ + var clipboardData = clipboardEvent.clipboardData, + htmlData = clipboardData.getData("text/html"), + textData = clipboardData.getData("text/plain"); + + console.log("$$$ handleCut ", textData); + + + clipboardEvent.preventDefault(); + clipboardEvent.stopPropagation(); + } + }, + + handlePaste:{ + value:function(clipboardEvent){ + var clipboardData = clipboardEvent.clipboardData, + htmlData = clipboardData.getData("text/html"), + textData = clipboardData.getData("text/plain"), + data = null; + + data = htmlData || textData; + + if(data){ + //hack - to avoid parsing html code now + + this.application.ninja.documentController.activeDocument.documentRoot.innerHTML = data + this.application.ninja.documentController.activeDocument.documentRoot.innerHTML; + + } + + clipboardEvent.preventDefault(); + } + }, + + /* + does not preserve the css class / html structure while copying + */ + copyUsingContenteditable:{ + value:function(){ + var clipboardHelper=document.getElementById("clipboardHelper"),copyElement = null, textData = ""; + if((this.copyFlag === true) ) { + if(!clipboardHelper) clipboardHelper.innerHTML = "";//clear + this.copyFlag = false; + return;//break infinite loop + } + + //dynamically create editable div for execCommand->copy + if(!clipboardHelper){ + clipboardHelper = document.createElement ("div"); + clipboardHelper.id = "clipboardHelper"; + // place outside the visible area + clipboardHelper.style.position = "absolute"; + clipboardHelper.style.left = "-10000px"; + clipboardHelper.style.top = "-10000px"; + clipboardHelper.setAttribute("contenteditable", "true"); + clipboardHelper.style.webkitUserSelect = "auto"; + +// clipboardHelper.style.width = "500px"; +// clipboardHelper.style.height = "125px"; +// clipboardHelper.style.overflow = "visible"; +// clipboardHelper.style.zIndex = "10000"; +// clipboardHelper.style.border = "1px solid red"; +// clipboardHelper.style.backgroundColor = "yellow"; + + document.body.appendChild (clipboardHelper); + } + + clipboardHelper.focus(); + //copy single selection for POC + if(this.application.ninja.selectedElements.length > 0){ + clipboardHelper.innerHTML = this.application.ninja.selectedElements[0].outerHTML; + } + //do selection + document.execCommand('selectAll',false,null); + this.copyFlag = true;//flag to prevent infinite loop + document.execCommand('copy',false,null); + + } + } + +}); \ 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, { { "displayText" : "Cut", "hasSubMenu" : false, - "enabled": false + "enabled": true, + "action": "executeCut" }, { "displayText" : "Copy", "hasSubMenu" : false, - "enabled": false + "enabled": true, + "action": "executeCopy" }, { "displayText" : "Paste", "hasSubMenu" : false, - "enabled": false + "enabled": true, + "action": "executePaste" } ] }, 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 @@ - +