Merge pull request #1590 from NatLibFi/issue1484-concept-page-copy-to-clipboard

Copy to clipboard functionality for concept page

Author: osma

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 {

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)

resource/translations/skosmos_en.po

@@ -879,3 +879,6 @@ msgstr "Information"
 
 msgid "Breadcrumbs"
 msgstr "Breadcrumbs"
+
+msgid "Copy to clipboard"
+msgstr "Copy to clipboard"

resource/translations/skosmos_fi.po

@@ -888,3 +888,6 @@ msgstr "Tietoja"
 
 msgid "Breadcrumbs"
 msgstr "Murupolut"
+
+msgid "Copy to clipboard"
+msgstr "Kopioi leikepöydälle"

resource/translations/skosmos_sv.po

@@ -887,3 +887,6 @@ msgstr "Information"
 
 msgid "Breadcrumbs"
 msgstr "Brödsmulor"
+
+msgid "Copy to clipboard"
+msgstr "Kopiera till urklipp"

src/view/concept-card.inc

@@ -30,10 +30,11 @@
       <div class="row" id="concept-heading">
         <div class="col-sm-4 px-0" id="concept-property-label">{{ "skos:prefLabel" | trans }}</div>
         <div class="col-sm-8" id="concept-label">
-          <h1 class="mb-0">{{ concept.label }}</h1>
-          <button class="btn btn-default copy-clipboard" type="button"
+          <h1 id="concept-preflabel"
+              class="mb-0 user-select-all">{{ concept.label }}</h1><button
+                  class="btn btn-default copy-clipboard px-1" type="button" id="copy-preflabel"
                   data-bs-toggle="tooltip" data-bs-placement="button" title="{{ 'Copy to clipboard' | trans }}">
-          <i class="fa-regular fa-copy"></i>
+            <i class="fa-regular fa-copy"></i>
           </button>
         </div>
       </div>
@@ -87,7 +88,14 @@
       {% endif %}
       <div class="row property prop-uri">
         <div class="col-sm-4 px-0 property-label"><h2>URI</h2></div>
-        <div class="col-sm-8" id="concept-uri"><a href="#">{{ concept.uri }}</a></div>
+        <div class="col-sm-8">
+          <span id="concept-uri"
+                class="user-select-all">{{ concept.uri }}</span><button
+                  class="btn btn-default copy-clipboard px-1" type="button" id="copy-uri"
+                  data-bs-toggle="tooltip" data-bs-placement="button" title="{{ 'Copy to clipboard' | trans }}">
+            <i class="fa-regular fa-copy"></i>
+          </button>
+        </div>
       </div>
       <div class="row property prop-download">
         <div class="col-sm-4 px-0 property-label">

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 = {
 <script src="resource/js/tab-alpha.js"></script>
 <script src="resource/js/tab-hierarchy.js"></script>
 <script src="resource/js/vocab-search.js"></script>
+
+<!-- Other (non-Vue) JS functionality -->
+<script src="resource/js/copy-to-clipboard.js"></script>

src/view/search-results.inc

@@ -103,7 +103,6 @@
   <li class="list-group-item px-0 py-1">
       <span class="uri-icon">URI</span>
       <span class="search-result-uri">{{ concept.uri }}</span>
-    <i class="fa-regular fa-copy"></i> <!-- no copy to clipboard functionality yet -->
   </li>
 {%~ endif ~%}
   </ul>

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)