From a06f35182d45c540a51190fe6d3466c68319786c Mon Sep 17 00:00:00 2001 From: vinitS101 Date: Sat, 30 Mar 2019 05:00:39 +0530 Subject: [PATCH] copy_and_paste: Extract functions for div creation and removal. This moves div creation and removal code in the copy_handler function to separate functions for more reusability. --- static/js/copy_and_paste.js | 89 ++++++++++++++++++++----------------- 1 file changed, 47 insertions(+), 42 deletions(-) diff --git a/static/js/copy_and_paste.js b/static/js/copy_and_paste.js index 37dec686d2..f586ef48a3 100644 --- a/static/js/copy_and_paste.js +++ b/static/js/copy_and_paste.js @@ -43,6 +43,21 @@ function construct_recipient_header(message_row) { return $('

').append($('').text(message_header_content)); } +/* +The techniques we use in this code date back to +2013 and may be obsolete today (and may not have +been even the best workaround back then). + +https://github.com/zulip/zulip/commit/fc0b7c00f16316a554349f0ad58c6517ebdd7ac4 + +The idea is that we build a temp div, let jQuery process the +selection, then restore the selection on a zero-second timer back +to the original selection. + +Do not be afraid to change this code if you understand +how modern browsers deal with copy/paste. Just test +your changes carefully. +*/ function construct_copy_div(div, start_id, end_id) { var start_row = current_msg_list.get_row(start_id); var start_recipient_row = rows.get_message_recipient_row(start_row); @@ -73,6 +88,36 @@ function construct_copy_div(div, start_id, end_id) { } } +function select_div(div, selection) { + div.css({ + position: 'absolute', + left: '-99999px', + // Color and background is made according to "day mode" + // exclusively here because when copying the content + // into, say, Gmail compose box, the styles come along. + // This is done to avoid copying the content with dark + // background when using the app in night mode. + // We can avoid other custom styles since they are wrapped + // inside another parent such as `.message_content`. + color: '#333', + background: '#FFF', + }) + .attr('id', 'copytempdiv'); + $('body').append(div); + selection.selectAllChildren(div[0]); +} + +function remove_div(div, ranges, selection) { + window.setTimeout(function () { + selection = window.getSelection(); + selection.removeAllRanges(); + _.each(ranges, function (range) { + selection.addRange(range); + }); + $('#copytempdiv').remove(); + }, 0); +} + exports.copy_handler = function () { // This is the main handler for copying message content via // `ctrl+C` in Zulip (note that this is totally independent of the @@ -126,49 +171,9 @@ exports.copy_handler = function () { // Select div so that the browser will copy it // instead of copying the original selection - div.css({ - position: 'absolute', - left: '-99999px', - // Color and background is made according to "day mode" - // exclusively here because when copying the content - // into, say, Gmail compose box, the styles come along. - // This is done to avoid copying the content with dark - // background when using the app in night mode. - // We can avoid other custom styles since they are wrapped - // inside another parent such as `.message_content`. - color: '#333', - background: '#FFF', - }) - .attr('id', 'copytempdiv'); - $('body').append(div); - selection.selectAllChildren(div[0]); + select_div(div, selection); document.execCommand('copy'); - - /* - The techniques we use in this code date back to - 2013 and may be obsolete today (and may not have - been even the best workaround back then). - - https://github.com/zulip/zulip/commit/fc0b7c00f16316a554349f0ad58c6517ebdd7ac4 - - The idea is that we build a temp div, return from - this function, let jQuery process the selection, - then restore the selection on a zero-second timer - back to the original selection. - - Do not be afraid to change this code if you understand - how modern browsers deal with copy/paste. Just test - your changes carefully. - */ - - window.setTimeout(function () { - selection = window.getSelection(); - selection.removeAllRanges(); - _.each(ranges, function (range) { - selection.addRange(range); - }); - $('#copytempdiv').remove(); - }, 0); + remove_div(div, ranges, selection); }; exports.analyze_selection = function (selection) {