diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css index 11bdfc72f..fda786a1f 100644 --- a/resource/css/skosmos.css +++ b/resource/css/skosmos.css @@ -85,13 +85,6 @@ body { margin: 0 5px; } - #main-container.termpage .fa-copy { - color: var(--vocab-text); - font-size: 30px; - position: relative; - bottom: -3px; - } - #main-container.searchpage .fa-arrow-right, #main-container.searchpage-multi-vocab .fa-arrow-right { color: var(--vocab-text); font-size: 12px; @@ -105,11 +98,6 @@ body { text-align: center; } - #main-container.searchpage .fa-copy, #main-container.searchpage-multi-vocab .fa-copy { - position: relative; - bottom: 5px; - } - .fa-magnifying-glass { color: var(--search-button-text); font-size: 22px; @@ -703,16 +691,26 @@ body { } #concept-label h1 { - float: left; + display: inline; } - .copy-clipboard { - border: none; - font-size: 20px; + #copy-preflabel { + color: var(--vocab-text); + font-size: 30px; + position: relative; + bottom: 10px; + left: 5px; } - .copy-clipboard:active, .copy-clipboard:focus, .copy-clipboard:active:focus { - border: none; + #copy-uri { + color: var(--vocab-text); + position: relative; + bottom: 4px; + } + + .copy-clipboard:focus { + border: 1px solid var(--vocab-text); + border-radius: 3px; } .property ul, .property li { diff --git a/resource/js/copy-to-clipboard.js b/resource/js/copy-to-clipboard.js new file mode 100644 index 000000000..e666ec9f7 --- /dev/null +++ b/resource/js/copy-to-clipboard.js @@ -0,0 +1,30 @@ +// function for copying the content from a specific element (by id) to the clipboard +function copyToClipboard (id) { + const copyElem = document.getElementById(id) + const sel = window.getSelection() + const range = document.createRange() + range.selectNodeContents(copyElem) + sel.removeAllRanges() + sel.addRange(range) + + navigator.clipboard.writeText(copyElem.innerText).catch((err) => + console.error('Failed to copy text to clipboard: ', err)) +} + +function registerCopyToClipboardEvents () { + const copyPrefElem = document.getElementById('copy-preflabel') + if (copyPrefElem) { + copyPrefElem.addEventListener('click', () => copyToClipboard('concept-preflabel')) + } + + const copyUriElem = document.getElementById('copy-uri') + if (copyUriElem) { + copyUriElem.addEventListener('click', () => copyToClipboard('concept-uri')) + } +} + +// register the copyToClipboard function as event an handler for the copy buttons +registerCopyToClipboardEvents() + +// re-register the event handlers after partial page loads +document.addEventListener('loadConceptPage', registerCopyToClipboardEvents) diff --git a/resource/translations/skosmos_en.po b/resource/translations/skosmos_en.po index 27ec9f661..b546794a7 100644 --- a/resource/translations/skosmos_en.po +++ b/resource/translations/skosmos_en.po @@ -879,3 +879,6 @@ msgstr "Information" msgid "Breadcrumbs" msgstr "Breadcrumbs" + +msgid "Copy to clipboard" +msgstr "Copy to clipboard" diff --git a/resource/translations/skosmos_fi.po b/resource/translations/skosmos_fi.po index f35146357..b8840bebd 100644 --- a/resource/translations/skosmos_fi.po +++ b/resource/translations/skosmos_fi.po @@ -888,3 +888,6 @@ msgstr "Tietoja" msgid "Breadcrumbs" msgstr "Murupolut" + +msgid "Copy to clipboard" +msgstr "Kopioi leikepöydälle" diff --git a/resource/translations/skosmos_sv.po b/resource/translations/skosmos_sv.po index 86c6f55d5..77befd524 100644 --- a/resource/translations/skosmos_sv.po +++ b/resource/translations/skosmos_sv.po @@ -887,3 +887,6 @@ msgstr "Information" msgid "Breadcrumbs" msgstr "Brödsmulor" + +msgid "Copy to clipboard" +msgstr "Kopiera till urklipp" diff --git a/src/view/concept-card.inc b/src/view/concept-card.inc index e5c63d355..79029c766 100644 --- a/src/view/concept-card.inc +++ b/src/view/concept-card.inc @@ -30,10 +30,11 @@
{{ "skos:prefLabel" | trans }}
-

{{ concept.label }}

-
@@ -87,7 +88,14 @@ {% endif %}

URI

-
{{ concept.uri }}
+
+ {{ concept.uri }} +
diff --git a/src/view/scripts.inc b/src/view/scripts.inc index e13951fc7..deeac7cee 100644 --- a/src/view/scripts.inc +++ b/src/view/scripts.inc @@ -24,7 +24,7 @@ const SKOSMOS = { {%- if request.plugins.callbacks ~%} "pluginCallbacks": [{% for function in request.plugins.callbacks %}{% if not loop.first %}, {% endif %}"{{ function }}"{% endfor %}], {%- endif ~%} - "language_strings" :{ "fi": { "fi": "suomi", + "language_strings": { "fi": { "fi": "suomi", "en": "englanti", "se": "pohjoissaame", "sv": "ruotsi", @@ -73,3 +73,6 @@ const SKOSMOS = { + + + diff --git a/src/view/search-results.inc b/src/view/search-results.inc index 3be138dc2..3d7e4faa2 100644 --- a/src/view/search-results.inc +++ b/src/view/search-results.inc @@ -103,7 +103,6 @@
  • URI {{ concept.uri }} -
    • {%~ endif ~%} diff --git a/tests/cypress/template/concept.cy.js b/tests/cypress/template/concept.cy.js index 7d54bf0d3..573c45b56 100644 --- a/tests/cypress/template/concept.cy.js +++ b/tests/cypress/template/concept.cy.js @@ -95,6 +95,18 @@ describe('Concept page', () => { // check the concept prefLabel cy.get('#concept-heading h1').invoke('text').should('equal', 'music research') }) + it('concept preflabel can be copied to clipboard', () => { + cy.visit('/yso/en/page/p21685') // go to "music research" concept page + + // click the copy to clipboard button next to the prefLabel + cy.get('#copy-preflabel').click() + + // check that the clipboard now contains "music research" + // NOTE: This test may fail when running Cypress interactively in a browser. + // The reason is browser security policies for accessing the clipboard. + // If that happens, make sure the browser window has focus and re-run the test. + cy.window().its('navigator.clipboard').invoke('readText').then((result) => {}).should('equal', 'music research'); + }) it('contains concept type', () => { cy.visit('/yso/en/page/p21685') // go to "music research" concept page @@ -219,6 +231,18 @@ describe('Concept page', () => { // check the broader concept cy.get('#concept-uri').invoke('text').should('equal', 'http://www.yso.fi/onto/yso/p21685') }) + it('concept URI can be copied to clipboard', () => { + cy.visit('/yso/en/page/p21685') // go to "music research" concept page + + // click the copy to clipboard button next to the URI + cy.get('#copy-uri').click() + + // check that the clipboard now contains "http://www.yso.fi/onto/yso/p21685" + // NOTE: This test may fail when running Cypress interactively in a browser. + // The reason is browser security policies for accessing the clipboard. + // If that happens, make sure the browser window has focus and re-run the test. + cy.window().its('navigator.clipboard').invoke('readText').then((result) => {}).should('equal', 'http://www.yso.fi/onto/yso/p21685'); + }) it('contains created & modified times (English)', () => { cy.visit('/yso/en/page/p21685') // go to "music research" concept page (English)