diff --git a/cypress/e2e/swhids.cy.js b/cypress/e2e/swhids.cy.js index 96b39244521b2777e65446127962c3dfa07a2d49..67a328ecf2bb33a82912e37d97e6e1f50e4c0814 100644 --- a/cypress/e2e/swhids.cy.js +++ b/cypress/e2e/swhids.cy.js @@ -259,4 +259,34 @@ describe('SWHIDs Tests', function() { }); }); + it('should update copy buttons after clicking on them', function() { + cy.get('.ui-slideouttab-handle') + .click(); + + for (const td of testsData) { + cy.get(`a[href="#swhid-tab-${td.objectType}"]`) + .click(); + + cy.get(`#swhid-tab-${td.objectType}`) + .should('be.visible'); + + cy.get(`#swhid-tab-${td.objectType} .btn-swhid-copy`) + .should('contain.text', 'Copy identifier') + .should('not.contain.text', 'Copied!') + .click() + .should('have.text', 'Copied!') + .wait(1001) + .should('not.contain.text', 'Copied!') + .should('contain.text', 'Copy identifier'); + + cy.get(`#swhid-tab-${td.objectType} .btn-swhid-url-copy`) + .should('contain.text', 'Copy permalink') + .should('not.contain.text', 'Copied!') + .click() + .should('have.text', 'Copied!') + .wait(1001) + .should('not.contain.text', 'Copied!') + .should('contain.text', 'Copy permalink'); + } + }); }); diff --git a/swh/web/browse/assets/browse/swhid-utils.js b/swh/web/browse/assets/browse/swhid-utils.js index 3e22018fcdce7e866603c22b464eb4912374c616..95264cb589ad9e280a87885f00ed9d678d155ab2 100644 --- a/swh/web/browse/assets/browse/swhid-utils.js +++ b/swh/web/browse/assets/browse/swhid-utils.js @@ -96,11 +96,26 @@ function updateSWHIDsTabSize() { } $(document).ready(() => { + const toggleButtonText = (button, text) => { + const currentLabel = button.innerHTML; + + if (currentLabel === text) { + return; + } + + button.innerHTML = text; + setTimeout(function() { + button.innerHTML = currentLabel; + }, 1000); + }; + new ClipboardJS('.btn-swhid-copy', { text: trigger => { const swhId = $(trigger).closest('.swhid-ui').find('.swhid').text(); return swhId.replace(/;\n/g, ';'); } + }).on('success', function(e) { + toggleButtonText(e.trigger, 'Copied!'); }); new ClipboardJS('.btn-swhid-url-copy', { @@ -108,6 +123,8 @@ $(document).ready(() => { const swhIdUrl = $(trigger).closest('.swhid-ui').find('.swhid').attr('href'); return window.location.origin + swhIdUrl; } + }).on('success', function(e) { + toggleButtonText(e.trigger, 'Copied!'); }); // prevent automatic closing of SWHIDs tab during guided tour