Contextmenu Cut/Copy/Paste (Without Clipboard )

  1. #1

    Contextmenu Cut/Copy/Paste (Without Clipboard )

    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).
    Attached Thumbnails Click image for larger version. 

Name:	contextmenu-sample.png 
Views:	162 
Size:	4.6 KB 
ID:	4904  
    Last edited by equiman; Oct 08, 2012 at 9:54 PM.
  2. #2
    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;
            }
        });
    });
    Last edited by equiman; Oct 09, 2012 at 6:35 PM. Reason: Don't need define session storage in global variables
  3. #3
    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.

Similar Threads

  1. copy paste from ms word
    By [WP]joju in forum 1.x Help
    Replies: 0
    Last Post: Aug 20, 2010, 7:30 AM
  2. [CLOSED] Gridpanel selected row Copy to clipboard
    By yobnet in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 26, 2010, 5:36 AM
  3. [CLOSED] Copy / Paste Like with GridPanel but not using Clipboard
    By ljcorreia in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 12, 2009, 8:12 AM

Tags for this Thread

Posting Permissions