Handle copy clipboard disabled

This commit is contained in:
Johann-S 2017-08-03 16:11:23 +02:00
parent ee444186e9
commit e0abfb5cf7
2 changed files with 54 additions and 37 deletions

View File

@ -18,6 +18,21 @@ if (storage.has('referrer')) {
window.referrer = 'external'; window.referrer = 'external';
} }
const allowedCopy = () => {
const support = !!document.queryCommandSupported;
return support ? document.queryCommandSupported('copy') : false;
}
const copyToClipboard = (value) => {
const aux = document.createElement('input');
aux.setAttribute('value', value);
document.body.appendChild(aux);
aux.select();
const result = document.execCommand('copy');
document.body.removeChild(aux);
return result;
}
$(document).ready(function() { $(document).ready(function() {
$('#file-upload').change(onUpload); $('#file-upload').change(onUpload);
@ -57,7 +72,7 @@ $(document).ready(function() {
$('body').on('dragover', allowDrop).on('drop', onUpload); $('body').on('dragover', allowDrop).on('drop', onUpload);
// reset copy button // reset copy button
const $copyBtn = $('#copy-btn'); const $copyBtn = $('#copy-btn');
$copyBtn.attr('disabled', false); $copyBtn.attr('disabled', !allowedCopy());
$('#link').attr('disabled', false); $('#link').attr('disabled', false);
$copyBtn.attr('data-l10n-id', 'copyUrlFormButton'); $copyBtn.attr('data-l10n-id', 'copyUrlFormButton');
@ -75,35 +90,34 @@ $(document).ready(function() {
// copy link to clipboard // copy link to clipboard
$copyBtn.click(() => { $copyBtn.click(() => {
// record copied event from success screen if (allowedCopy() && copyToClipboard($('#link').attr('value'))) {
sendEvent('sender', 'copied', { // record copied event from success screen
cd4: 'success-screen' sendEvent('sender', 'copied', {
}); cd4: 'success-screen'
const aux = document.createElement('input'); });
aux.setAttribute('value', $('#link').attr('value'));
document.body.appendChild(aux); //disable button for 3s
aux.select(); $copyBtn.attr('disabled', true);
document.execCommand('copy'); $('#link').attr('disabled', true);
document.body.removeChild(aux); $copyBtn.html(
//disable button for 3s '<img src="/resources/check-16.svg" class="icon-check"></img>'
$copyBtn.attr('disabled', true); );
$('#link').attr('disabled', true); window.setTimeout(() => {
$copyBtn.html( $copyBtn.attr('disabled', false);
'<img src="/resources/check-16.svg" class="icon-check"></img>' $('#link').attr('disabled', false);
); $copyBtn.attr('data-l10n-id', 'copyUrlFormButton');
window.setTimeout(() => { }, 3000);
$copyBtn.attr('disabled', false); }
$('#link').attr('disabled', false);
$copyBtn.attr('data-l10n-id', 'copyUrlFormButton');
}, 3000);
}); });
$('.upload-window').on('dragover', () => { const $uploadWindow = $('.upload-window');
$('.upload-window').addClass('ondrag'); $uploadWindow.on('dragover', () => {
}); $uploadWindow.addClass('ondrag');
$('.upload-window').on('dragleave', () => { })
$('.upload-window').removeClass('ondrag'); .on('dragleave', () => {
$uploadWindow.removeClass('ondrag');
}); });
//initiate progress bar //initiate progress bar
$('#ul-progress').circleProgress({ $('#ul-progress').circleProgress({
value: 0.0, value: 0.0,
@ -130,14 +144,14 @@ $(document).ready(function() {
let file = ''; let file = '';
if (event.type === 'drop') { if (event.type === 'drop') {
if (!event.originalEvent.dataTransfer.files[0]) { if (!event.originalEvent.dataTransfer.files[0]) {
$('.upload-window').removeClass('ondrag'); $uploadWindow.removeClass('ondrag');
return; return;
} }
if ( if (
event.originalEvent.dataTransfer.files.length > 1 || event.originalEvent.dataTransfer.files.length > 1 ||
event.originalEvent.dataTransfer.files[0].size === 0 event.originalEvent.dataTransfer.files[0].size === 0
) { ) {
$('.upload-window').removeClass('ondrag'); $uploadWindow.removeClass('ondrag');
document.l10n.formatValue('uploadPageMultipleFilesAlert').then(str => { document.l10n.formatValue('uploadPageMultipleFilesAlert').then(str => {
alert(str); alert(str);
}); });
@ -343,8 +357,10 @@ $(document).ready(function() {
const $copyIcon = $('<img>', { const $copyIcon = $('<img>', {
src: '/resources/copy-16.svg', src: '/resources/copy-16.svg',
class: 'icon-copy', class: 'icon-copy',
'data-l10n-id': 'copyUrlHover' 'data-l10n-id': 'copyUrlHover',
disabled: !allowedCopy()
}); });
const expiry = document.createElement('td'); const expiry = document.createElement('td');
const del = document.createElement('td'); const del = document.createElement('td');
const $delIcon = $('<img>', { const $delIcon = $('<img>', {
@ -380,17 +396,12 @@ $(document).ready(function() {
link.style.color = '#0A8DFF'; link.style.color = '#0A8DFF';
//copy link to clipboard when icon clicked //copy link to clipboard when icon clicked
$copyIcon.click(function() { $copyIcon.on('click', function() {
// record copied event from upload list // record copied event from upload list
sendEvent('sender', 'copied', { sendEvent('sender', 'copied', {
cd4: 'upload-list' cd4: 'upload-list'
}); });
const aux = document.createElement('input'); copyToClipboard(url);
aux.setAttribute('value', url);
document.body.appendChild(aux);
aux.select();
document.execCommand('copy');
document.body.removeChild(aux);
document.l10n.formatValue('copiedUrl').then(translated => { document.l10n.formatValue('copiedUrl').then(translated => {
link.innerHTML = translated; link.innerHTML = translated;
}); });

View File

@ -272,6 +272,11 @@ tbody {
cursor: pointer; cursor: pointer;
} }
.icon-copy[disabled="disabled"] {
pointer-events: none;
opacity: 0.3;
}
/* Popup container */ /* Popup container */
.popup { .popup {
position: absolute; position: absolute;
@ -504,6 +509,7 @@ tbody {
background: #05a700; background: #05a700;
border: 1px solid #05a700; border: 1px solid #05a700;
cursor: auto; cursor: auto;
opacity: 0.3;
} }
#delete-file { #delete-file {