Merge branch 'main' into issue1514-search-bar-autocomplete

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;
@@ -734,16 +722,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 {
@@ -891,6 +889,15 @@ body {
     border-radius: 0;
   }
 
+ /* About page
+   *****************************************/
+  #about-content a {
+    font-size: 1.0em;
+    color: var(--vocab-link);
+    text-decoration: underline var(--secondary-medium-color) solid;
+    font-weight: 700;
+  }
+
   /* Footer
    *****************************************/
   #footer p {

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/about-info.inc

@@ -1,7 +1,8 @@
 {# This is the template for the about page. You can enter any html here and show different language versions by using the lang value in a twig conditional as demonstrated below. #}
 {% block content %}
+<div id="about-content">
   {% if request.lang == 'fi' %}
-    <h4>Tietoja sanastoselaimesta</h4>
+    <h2>Tietoja sanastoselaimesta</h2>
     <p>Skosmos on web-pohjainen sanasto ja ontologiaselain.</p>
     <a href="http://github.com/NatLibFi/Skosmos">Skosmos GitHub-repositorio</a>
   {% elseif request.lang == 'sv' %}
@@ -13,4 +14,5 @@
     <p>Skosmos is a web based open source ontology browser.</p>
     <a href="http://github.com/NatLibFi/Skosmos">Skosmos GitHub repository</a>
   {% endif %}
+</div>
 {% endblock %}

src/view/base-template.twig

@@ -18,15 +18,11 @@
 <link href="{{ ServiceCustomCss }}" media="screen, print" rel="stylesheet" type="text/css">
 {% endif %}
 {% for plugin, files in request.plugins.pluginsCSS %}{% for file in files %}<link href="{{ file }}" media="screen, print" rel="stylesheet" type="text/css">{% endfor %}{% endfor %}
-
 <title>{{ ServiceName }}{% block title %}{% endblock %}</title>
 </head>
 <body{% if request.vocabid == '' and request.page != 'feedback' and request.page != 'about' and request.page != 'search' %} class="bg-light frontpage-logo"{% else %} class="bg-medium vocab-{{ request.vocabid }}"{% endif %}>
-  <noscript>
-    <strong>We're sorry but Skosmos doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-  </noscript>
-  <a class="visually-hidden" id="skiptocontent" href="{{ request.langurl }}#maincontent">Skip to main</a>
   <header>
+    <a class="visually-hidden" id="skiptocontent" href="{{ request.langurl }}#maincontent">Skip to main</a>
     <div class="container-fluid bg-dark d-flex my-auto py-3 px-4 text-bg-dark">
       {% if request.vocabid == '' and request.page != 'about' and request.page != 'feedback' %}
         <span class="fs-6 py-3 text-light">Yhteishaku sanastoista v</span>
@@ -62,7 +58,6 @@
         {% endif %}
       </ul>
     </div>
-
     <div class="container-fluid bg-light py-4 px-4" id="headerbar">
       {% if request.vocabid == '' %}
         <div id="skosmos-logo">
@@ -82,6 +77,9 @@
   </header>
   <main id="main-container" class="{% if request.vocabid == '' or global_search %} frontpage{% elseif concept_uri != '' %} termpage{% elseif request.vocab != '' %} vocabpage{% if list_style %} {{ list_style }}{% endif %}{% endif %}">
     <div class="container">
+      <noscript>
+        <strong>We're sorry but Skosmos doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      </noscript>
       <div class="row" tabindex="-1">
       {% block content %}
       {% endblock %}

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",
@@ -76,3 +76,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/accessibility/axe-about.cy.js

@@ -4,7 +4,7 @@ import 'cypress-axe';
 /* If you want the test to be skipped, add a skip command after the describe part:
     - test enabled: describe('Check accessibility of ...
     - test to be skipped: describe.skip('Check accessibility of ... */
-describe.skip('Check accessibility of the about page', () => {
+describe('Check accessibility of the about page', () => {
   before(() => {
     cy.visit('/fi/about')
     cy.injectAxe()

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)