Merge pull request #1586 from NatLibFi/issue1484-concept-page-breadcr…

…umbs

Breadcrumbs on concept page

resource/css/skosmos.css

@@ -634,6 +634,7 @@ body {
   }
 
   #concept-heading {
+    margin-top: 2rem;
     padding-bottom: 4rem;
   }
 
@@ -673,6 +674,29 @@ body {
   }
 
   /*** Main content termpage ***/
+  nav#concept-breadcrumbs ol {
+    list-style: none;
+    padding-left: 0;
+    margin-bottom: 0.5rem;
+  }
+
+  nav#concept-breadcrumbs li, nav#concept-breadcrumbs li.collapse.show {
+    display: inline;
+  }
+
+  nav#concept-breadcrumbs li.collapse, nav#concept-breadcrumbs li:has(a[aria-expanded="true"]) {
+    display: none;
+  }
+
+  nav#concept-breadcrumbs li.breadcrumb + li::before {
+    content: "> ";
+  }
+
+  nav#concept-breadcrumbs .breadcrumb-current {
+    color: black;
+    font-weight: normal;
+  }
+
   #concept-property-label {
     align-self: start;
     padding-top: 1.25rem;

resource/translations/skosmos_en.po

@@ -876,3 +876,6 @@ msgstr "Code that uniquely identifies a concept within a concept scheme."
 
 msgid "Information"
 msgstr "Information"
+
+msgid "Breadcrumbs"
+msgstr "Breadcrumbs"

resource/translations/skosmos_fi.po

@@ -885,3 +885,6 @@ msgstr "Tunniste, joka yksilöi käsitteen sanaston sisällä."
 
 msgid "Information"
 msgstr "Tietoja"
+
+msgid "Breadcrumbs"
+msgstr "Murupolut"

resource/translations/skosmos_sv.po

@@ -884,3 +884,6 @@ msgstr "Kod som unikt identifierar ett begrepp i en vokabulär."
 
 msgid "Information"
 msgstr "Information"
+
+msgid "Breadcrumbs"
+msgstr "Brödsmulor"

src/controller/WebController.php

@@ -199,8 +199,8 @@ public function invokeVocabularyConcept(Request $request)
             'concept_uri' => $uri,
             'languages' => $this->languages,
             'explicit_langcodes' => $langcodes,
-            'bread_crumbs' => $crumbs['breadcrumbs'],
-            'combined' => $crumbs['combined'],
+            'visible_breadcrumbs' => $crumbs['breadcrumbs'],
+            'hidden_breadcrumbs' => $crumbs['combined'],
             'request' => $request,
             'plugin_params' => $pluginParameters,
             'custom_labels' => $customLabels)

src/view/concept-card.inc

@@ -1,7 +1,31 @@
 <div class="col-md-8 ps-3">
   <div class="pt-3" id="main-content">
 
-    <div class="main-content-section p-5">
+    <div class="main-content-section px-5 py-4">
+
+      {% if visible_breadcrumbs and visible_breadcrumbs[0]|length > 1 %}
+      <nav class="row" id="concept-breadcrumbs" aria-label='{{ "Breadcrumbs" | trans }}'>
+        {% for path in visible_breadcrumbs %}
+        {% set path_idx = loop.index0 %}
+        <ol>
+          {% for crumb in path %}
+            {% if crumb.hiddenLabel %}
+              <li class="breadcrumb-toggle"><a href=".breadcrumb-collapse" data-bs-target=".breadcrumb-collapse" data-bs-toggle="collapse" role="button" aria-expanded="false">...</a></li>
+              {% for hiddenCrumb in hidden_breadcrumbs[path_idx] %}
+              <li class="breadcrumb collapse multi-collapse breadcrumb-collapse"><a href="{{ hiddenCrumb.uri|link_url(vocab,request.lang,'page',request.contentLang) }}">{{ hiddenCrumb.hiddenLabel }}</a></li>
+              {% endfor %}
+            {% else %}
+              <li class="breadcrumb"><a
+                  {% if loop.last %}aria-current="page" class="breadcrumb-current"
+                  {% else %}href="{{ crumb.uri|link_url(vocab,request.lang,'page',request.contentLang) }}"
+                  {% endif %}
+                  >{{ crumb.prefLabel }}</a></li>
+            {% endif %}
+          {% endfor %}
+        </ol>
+        {% endfor %}
+      </nav>
+      {% endif %}
 
       <div class="row" id="concept-heading">
         <div class="col-sm-4 px-0" id="concept-property-label">{{ "skos:prefLabel" | trans }}</div>

tests/cypress/template/concept.cy.js

@@ -1,4 +1,91 @@
 describe('Concept page', () => {
+  it("doesn't contain breadcrumbs for top concepts", () => {
+    cy.visit('/yso/en/page/p4762') // go to "objects" concept page
+
+    // check that there are no breadcrumbs on the page
+    cy.get('#concept-breadcrumbs').should('not.exist')
+  })
+  it("contains unshortened breadcrumbs (up to 5 levels)", () => {
+    cy.visit('/yso/en/page/p7347') // go to "ancient castles" concept page
+
+    // check that there are breadcrumbs on the page
+    cy.get('#concept-breadcrumbs').should('exist')
+
+    // check that there is no expand link for breadcrumbs
+    cy.get('.breadcrumb-toggle').should('not.exist')
+
+    // check that there are 5 breadcrumb links
+    cy.get('#concept-breadcrumbs ol').find('li').should('have.length', 5)
+
+    // check the first breadcrumb
+    cy.get('#concept-breadcrumbs ol li').first().invoke('text').should('equal', 'properties')
+
+    // check the last breadcrumb
+    cy.get('#concept-breadcrumbs ol li').last().invoke('text').should('equal', 'ancient castles')
+    cy.get('#concept-breadcrumbs ol li a').last().should('have.class', 'breadcrumb-current')
+  })
+  it("contains shortened breadcrumbs (more than 5 levels)", () => {
+    cy.visit('/yso/en/page/p1265') // go to "archaeology" concept page
+
+    // check that there are breadcrumbs on the page
+    cy.get('#concept-breadcrumbs').should('exist')
+
+    // check that there is an expand link for breadcrumbs
+    cy.get('.breadcrumb-toggle').should('exist')
+
+    // check that there are 8 breadcrumb links
+    cy.get('#concept-breadcrumbs ol').find('li').should('have.length', 8)
+
+    // check that there are 2 hidden breadcrumb links
+    cy.get('#concept-breadcrumbs ol').find('li.collapse').should('have.length', 2)
+
+    // check that there are no breadcrumb links currently shown
+    cy.get('#concept-breadcrumbs ol').find('li.show').should('have.length', 0)
+
+    // check the first breadcrumb (expand link)
+    cy.get('#concept-breadcrumbs ol li').first().invoke('text').should('equal', '...')
+
+    // check the last breadcrumb
+    cy.get('#concept-breadcrumbs ol li').last().invoke('text').should('equal', 'archaeology')
+    cy.get('#concept-breadcrumbs ol li a').last().should('have.class', 'breadcrumb-current')
+
+    // click the expand link
+    cy.get('#concept-breadcrumbs ol li').first().click()
+
+    // check that there are 2 breadcrumb links currently shown
+    cy.get('#concept-breadcrumbs ol').find('li.show').should('have.length', 2)
+  })
+  it("contains shortened breadcrumbs (two different paths)", () => {
+    cy.visit('/yso/en/page/p38289') // go to "music archaeology" concept page
+
+    // check that there are breadcrumbs on the page
+    cy.get('#concept-breadcrumbs').should('exist')
+
+    // check that there are 2 sets of breadcrumbs
+    cy.get('#concept-breadcrumbs').find('ol').should('have.length', 2)
+
+    // check that there are 2 expand links for breadcrumbs
+    cy.get('#concept-breadcrumbs').find('.breadcrumb-toggle').should('have.length', 2)
+
+    // check that there are 4 hidden breadcrumb links
+    cy.get('#concept-breadcrumbs ol').find('li.collapse').should('have.length', 4)
+
+    // check that there are no breadcrumb links currently shown
+    cy.get('#concept-breadcrumbs ol').find('li.show').should('have.length', 0)
+
+    // check the first breadcrumb (expand link)
+    cy.get('#concept-breadcrumbs ol li').first().invoke('text').should('equal', '...')
+
+    // check the last breadcrumb
+    cy.get('#concept-breadcrumbs ol li').last().invoke('text').should('equal', 'music archaeology')
+    cy.get('#concept-breadcrumbs ol li a').last().should('have.class', 'breadcrumb-current')
+
+    // click the expand link
+    cy.get('#concept-breadcrumbs ol li').first().click()
+
+    // check that there are 2 breadcrumb links currently shown
+    cy.get('#concept-breadcrumbs ol').find('li.show').should('have.length', 4)
+  })
   it('contains concept preflabel', () => {
     cy.visit('/yso/en/page/p21685') // go to "music research" concept page