PDA

View Full Version : Contextmenu Cut/Copy/Paste (Without Clipboard )



equiman
Oct 08, 2012, 9:42 PM
I found this solutions, without using Clipboard (because i found a lot of cross browser compatibility problems).
Maybe you can take advantage of HTML5 using localStorage or sesionStorage. In my case is enough only with global variable definition.

CSS

.icon-cut { background-image : url(../Resources/icons/cut_red.png) !important; }
.icon-copy { background-image : url(../Resources/icons/page_copy.png) !important; }
.icon-paste { background-image : url(../Resources/icons/page_paste.png) !important; }

I'm blocked second mouse button. And is only activated when take action over input textbox.



// Global Variables
var clipBoard = null;
var selectedValue = '';
var startValue = '';
var endValue = '';

// Menu contextual copy/cut/paste
Ext.onReady(function () {
Ext.get(window.document).on('contextmenu', function (e) {
if (e.target.type == 'text') {
e.stopEvent();
clipBoard = e.target;
// Activate or Desactivate Options
if ((clipBoard.selectionEnd - clipBoard.selectionStart) == 0) {
ccpMenu.items.map.cut.setDisabled(true);
ccpMenu.items.map.copy.setDisabled(true);
}
else {
ccpMenu.items.map.cut.setDisabled(false);
ccpMenu.items.map.copy.setDisabled(false);
}

if (selectedValue.length <= 0) {
ccpMenu.items.map.paste.setDisabled(true);
}
else {
ccpMenu.items.map.paste.setDisabled(false);
}

// Show Contextmenu
ccpMenu.showAt(e.getXY());
}
else {
e.preventDefault();
return false;
}
});
});

Contextmenu creation:


// Contextmenu definition Cut + Copy + Paste
var ccpMenu = new Ext.menu.Menu({
id: 'ccpMenu',
allowOtherMenus: false,
autoWidth: true,
autoHeight: true,
items: [
{
id: 'cut',
text: 'Cut',
listeners: { 'click': function () {
selectedValue = clipBoard.value.substr(clipBoard.selectionStart, clipBoard.selectionEnd - clipBoard.selectionStart);
startValue = clipBoard.value.substr(0, clipBoard.selectionStart);
endValue = clipBoard.value.substr(clipBoard.selectionEnd, clipBoard.value.length);
document.getElementById(clipBoard.name).value = startValue + endValue;
}
},
iconCls: 'icon-cut'
},
{
id: 'Copy',
text: LocalizedScript.General_AceleradorTeclado_Copiar,
listeners: { 'click': function () {
selectedValue = clipBoard.value.substr(clipBoard.selectionStart, clipBoard.selectionEnd - clipBoard.selectionStart);
}
},
iconCls: 'icon-copy'
},
{
id: 'paste',
text: 'Paste',
listeners: { 'click': function () {
startValue = clipBoard.value.substr(0, clipBoard.selectionStart);
endValue = clipBoard.value.substr(clipBoard.selectionEnd, clipBoard.value.length);
document.getElementById(clipBoard.name).value = startValue + selectedValue + endValue;
}
},
iconCls: 'icon-paste'
}
]
});

Improves and recommendation are welcome. Hope this help other.

Add a sample image (in Spanish).

equiman
Oct 08, 2012, 10:16 PM
It is sessionStorage Version:


// Global Variables
var clipBoard = null;
var startValue = '';
var endValue = '';

// Context menu Cut + Copy + Paste
var ccpMenu = new Ext.menu.Menu({
id: 'ccpMenu',
allowOtherMenus: false,
autoWidth: true,
autoHeight: true,
items: [
{
id: 'cut',
text: 'Cut',
listeners: { 'click': function () {
sessionStorage.setItem('selectedValue', selectedValue = clipBoard.value.substr(clipBoard.selectionStart, clipBoard.selectionEnd - clipBoard.selectionStart));
startValue = clipBoard.value.substr(0, clipBoard.selectionStart);
endValue = clipBoard.value.substr(clipBoard.selectionEnd, clipBoard.value.length);
document.getElementById(clipBoard.name).value = startValue + endValue;
}
},
iconCls: 'icon-cut'
},
{
id: 'copy',
text: 'Copy',
listeners: { 'click': function () {
sessionStorage.setItem('selectedValue', clipBoard.value.substr(clipBoard.selectionStart, clipBoard.selectionEnd - clipBoard.selectionStart));
}
},
iconCls: 'icon-copy'
},
{
id: 'paste',
text: 'Paste',
listeners: { 'click': function () {
startValue = clipBoard.value.substr(0, clipBoard.selectionStart);
endValue = clipBoard.value.substr(clipBoard.selectionEnd, clipBoard.value.length);
document.getElementById(clipBoard.name).value = startValue + sessionStorage.getItem('selectedValue') +endValue;
}
},
iconCls: 'icon-paste'
}
]
});


// Show context menu
Ext.onReady(function () {
Ext.get(window.document).on('contextmenu', function (e) {
if (e.target.type == 'text') {
e.stopEvent();
clipBoard = e.target;
// Activate or Deactivate Options
if ((clipBoard.selectionEnd - clipBoard.selectionStart) == 0) {
ccpMenu.items.map.cut.setDisabled(true);
ccpMenu.items.map.copy.setDisabled(true);
}
else {
ccpMenu.items.map.cut.setDisabled(false);
ccpMenu.items.map.copy.setDisabled(false);
}

if (sessionStorage.length > 0) {
if (sessionStorage.getItem('selectedValue').length <= 0) {
ccpMenu.items.map.paste.setDisabled(true);
}
else {
ccpMenu.items.map.paste.setDisabled(false);
}
}
else {
ccpMenu.items.map.paste.setDisabled(true);
}

// Show Contextmenu
ccpMenu.showAt(e.getXY());
}
else {
e.preventDefault();
return false;
}
});
});

Daniil
Nov 14, 2012, 1:16 PM
Hi @equiman,

Thank you for sharing! It looks very good.

Do you need any help from us?

Maybe, we have missed any your threads which you are unable to solve yet.