From bda61efd9bbeeb97c34a082400a15a8e02998f6d Mon Sep 17 00:00:00 2001 From: George Gelashvili and Tira Odhner Date: Tue, 7 Mar 2017 15:12:55 -0500 Subject: [PATCH 3/6] Refactor copying text to clipboard into a separate file --- web/pgadmin/static/js/selection/clipboard.js | 61 ++++++++++++++++++ web/pgadmin/templates/base.html | 1 + .../sqleditor/templates/sqleditor/js/sqleditor.js | 74 +++------------------- 3 files changed, 71 insertions(+), 65 deletions(-) create mode 100644 web/pgadmin/static/js/selection/clipboard.js diff --git a/web/pgadmin/static/js/selection/clipboard.js b/web/pgadmin/static/js/selection/clipboard.js new file mode 100644 index 00000000..a1675908 --- /dev/null +++ b/web/pgadmin/static/js/selection/clipboard.js @@ -0,0 +1,61 @@ +define(['translate', 'alertify'], function (t, alertify) { + var clipboard = { + copyTextToClipboard: function (text) { + var textArea = document.createElement("textarea"); + + // + // *** This styling is an extra step which is likely not required. *** + // + // Why is it here? To ensure: + // 1. the element is able to have focus and selection. + // 2. if element was to flash render it has minimal visual impact. + // 3. less flakyness with selection and copying which **might** occur if + // the textarea element is not visible. + // + // The likelihood is the element won't even render, not even a flash, + // so some of these are just precautions. However in IE the element + // is visible whilst the popup box asking the user for permission for + // the web page to copy to the clipboard. + // + + // Place in top-left corner of screen regardless of scroll position. + textArea.style.position = 'fixed'; + textArea.style.top = 0; + textArea.style.left = 0; + + // Ensure it has a small width and height. Setting to 1px / 1em + // doesn't work as this gives a negative w/h on some browsers. + textArea.style.width = '2em'; + textArea.style.height = '2em'; + + // We don't need padding, reducing the size if it does flash render. + textArea.style.padding = 0; + + // Clean up any borders. + textArea.style.border = 'none'; + textArea.style.outline = 'none'; + textArea.style.boxShadow = 'none'; + + // Avoid flash of white box if rendered for any reason. + textArea.style.background = 'transparent'; + + + textArea.value = text; + + document.body.appendChild(textArea); + + textArea.select(); + + try { + document.execCommand('copy'); + } catch (err) { + alertify.alert( + t('Error'), + t('Oops, unable to copy to clipboard')); + } + + document.body.removeChild(textArea); + } + }; + return clipboard; +}); \ No newline at end of file diff --git a/web/pgadmin/templates/base.html b/web/pgadmin/templates/base.html index 32ccc5e0..487ed4c6 100755 --- a/web/pgadmin/templates/base.html +++ b/web/pgadmin/templates/base.html @@ -158,6 +158,7 @@ }, paths: { pgadmin: "{{ url_for('static', filename='js/pgadmin') }}", + selection: "{{ url_for('static', filename='js/selection') }}", 'pgadmin.alertifyjs': "{{ url_for('static', filename='js/alertify.pgadmin.defaults') }}", "pgadmin.backgrid": "{{ url_for('static', filename='js/backgrid.pgadmin') }}", 'pgadmin.backform': "{{ url_for('static', filename='js/backform.pgadmin') }}", diff --git a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js index a2ef0ac5..13af2846 100644 --- a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js +++ b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js @@ -1,8 +1,10 @@ define( [ 'jquery', 'underscore', 'underscore.string', 'alertify', 'pgadmin', - 'backbone', 'backgrid', 'codemirror', 'pgadmin.misc.explain', 'slickgrid', - 'bootstrap', 'pgadmin.browser', 'wcdocker', + 'backbone', 'backgrid', 'codemirror', 'pgadmin.misc.explain', + 'selection/clipboard', + + 'slickgrid', 'bootstrap', 'pgadmin.browser', 'wcdocker', 'codemirror/mode/sql/sql', 'codemirror/addon/selection/mark-selection', 'codemirror/addon/selection/active-line', 'codemirror/addon/fold/foldcode', 'codemirror/addon/fold/foldgutter', 'codemirror/addon/hint/show-hint', @@ -25,7 +27,7 @@ define( 'slickgrid/slick.grid' ], function( - $, _, S, alertify, pgAdmin, Backbone, Backgrid, CodeMirror, pgExplain + $, _, S, alertify, pgAdmin, Backbone, Backgrid, CodeMirror, pgExplain, clipboard ) { /* Return back, this has been called more than once */ if (pgAdmin.SqlEditor) @@ -806,8 +808,7 @@ define( } var grid = args.grid, column_info, column_values, value, - cell = args.cell, row = args.row, selected_rows, - self = this.editor.handler; + cell = args.cell, row = args.row; // Copy operation (Only when if there is no row selected) // When user press `Ctrl + c` on selected cell @@ -820,12 +821,12 @@ define( value = column_values[column_info.pos] || ''; // Copy this value to Clipboard if(value) - this.editor.handler.copyTextToClipboard(value); + clipboard.copyTextToClipboard(value); // Go to cell again grid.gotoCell(row, cell, false); } - }.bind(editor_data)); + }); // Listener function which will be called when user updates existing rows @@ -2998,63 +2999,6 @@ define( }); }, - // This function will copy the selected rows(s) in Clipboard. - copyTextToClipboard: function (text) { - var textArea = document.createElement("textarea"); - - // - // *** This styling is an extra step which is likely not required. *** - // - // Why is it here? To ensure: - // 1. the element is able to have focus and selection. - // 2. if element was to flash render it has minimal visual impact. - // 3. less flakyness with selection and copying which **might** occur if - // the textarea element is not visible. - // - // The likelihood is the element won't even render, not even a flash, - // so some of these are just precautions. However in IE the element - // is visible whilst the popup box asking the user for permission for - // the web page to copy to the clipboard. - // - - // Place in top-left corner of screen regardless of scroll position. - textArea.style.position = 'fixed'; - textArea.style.top = 0; - textArea.style.left = 0; - - // Ensure it has a small width and height. Setting to 1px / 1em - // doesn't work as this gives a negative w/h on some browsers. - textArea.style.width = '2em'; - textArea.style.height = '2em'; - - // We don't need padding, reducing the size if it does flash render. - textArea.style.padding = 0; - - // Clean up any borders. - textArea.style.border = 'none'; - textArea.style.outline = 'none'; - textArea.style.boxShadow = 'none'; - - // Avoid flash of white box if rendered for any reason. - textArea.style.background = 'transparent'; - - - textArea.value = text; - - document.body.appendChild(textArea); - - textArea.select(); - - try { - document.execCommand('copy'); - } catch (err) { - alertify.alert('{{ _('Error') }}', - '{{ _('Oops, unable to copy to clipboard') }}'); - } - - document.body.removeChild(textArea); - }, - // This function will copy the selected row. _copy_row: function() { var self = this, grid, data, rows, copied_text = ''; @@ -3094,7 +3038,7 @@ define( } // If there is something to set into clipboard if(copied_text) - self.copyTextToClipboard(copied_text); + clipboard.copyTextToClipboard(copied_text); }, // This function will paste the selected row. -- 2.12.0