Skip to content

Commit

Permalink
Update sidebar twig template
Browse files Browse the repository at this point in the history
  • Loading branch information
@UnniKohonen
UnniKohonen committed Aug 30, 2023
1 parent 2cdbacf commit b72a828
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 148 deletions.
16 changes: 8 additions & 8 deletions resource/js/tab-alpha.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ const tabAlphaApp = Vue.createApp({
}
},
mounted () {
// load alphabetical index if aplha tab is active when the page is first opened (otherwise only load the index when the tab is clicked)
// load alphabetical index if alphabetical tab is active when the page is first opened (otherwise only load the index when the tab is clicked)
// this should probably be done differently
if (document.querySelector('#alpha > a').classList.contains('active')) {
if (document.querySelector('#alphabetical > a').classList.contains('active')) {
this.loadLetters()
}
},
methods: {
loadLetters () {
// only load index the first time the page is opened or the alpha tab is clicked
// only load index the first time the page is opened or the alphabetical tab is clicked
if (this.indexLetters.length === 0) {
fetch('rest/v1/' + SKOSMOS.vocab + '/index/?lang=' + SKOSMOS.lang)
.then(data => {
Expand All @@ -44,22 +44,22 @@ const tabAlphaApp = Vue.createApp({
}
},
template: `
<div v-click-tab-alpha="loadLetters">
<div v-click-tab-alphabetical="loadLetters">
<tab-alpha :index-letters="indexLetters" :index-concepts="indexConcepts" v-if="indexLetters" @load-concepts="loadConcepts($event)"></tab-alpha>
</div>
`
})

/* Custom directive used to add an event listener on clicks on an element outside of this component */
tabAlphaApp.directive('click-tab-alpha', {
tabAlphaApp.directive('click-tab-alphabetical', {
beforeMount: (el, binding) => {
el.clickTabEvent = event => {
binding.value() // calling the method given as the attribute value (loadLetters)
}
document.querySelector('#alpha').addEventListener('click', el.clickTabEvent) // registering an event listener on clicks on the alpha nav-item element
document.querySelector('#alphabetical').addEventListener('click', el.clickTabEvent) // registering an event listener on clicks on the alphabetical nav-item element
},
unmounted: el => {
document.querySelector('#alpha').removeEventListener('click', el.clickTabEvent)
document.querySelector('#alphabetical').removeEventListener('click', el.clickTabEvent)
}
})

Expand Down Expand Up @@ -182,4 +182,4 @@ tabAlphaApp.component('tab-alpha', {
`
})

tabAlphaApp.mount('#tab-alpha')
tabAlphaApp.mount('#tab-alphabetical')
164 changes: 25 additions & 139 deletions src/view/sidebar.inc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,151 +2,37 @@
<div class="bg-light" id="sidebar">
{% block sidebar %}
<div class="sidebar-buttons">
{% set sidebarHeading = request.page != 'search' ? "Sidebar listing: list and traverse vocabulary contents by a criterion" : "Sidebar listing: vocabulary search options" %}
<h2 class="visually-hidden">{{ sidebarHeading }}</h2>
<ul class="nav nav-tabs-no-style">
{% if request.page != 'search' %}
{% set css_class = ['nav-link'] %}
{% if request.vocab.config.showAlphabeticalIndex %}
<h3 class="visually-hidden">List vocabulary concepts alphabetically</h3>
{% if search_results|length != 1 or (term and search_results|length == 1) %}{% set css_class = css_class|merge(['bg-dark','text-light','active']) %}{% endif %}
<li id="alpha" class="nav-item">
<a class="{{ css_class|join(' ') }}" href="{{ request.vocabid }}/{{ request.lang }}{% if request.contentLang != request.lang %}?clang={{ request.contentLang }}{% endif %}#tab-alpha" role="tab" data-bs-toggle="tab">{% if vocab.config.showChangeList and vocab.config.groupClassURI %}A-Z{% else %}Alpha-nav{% endif %}</a>
</li>
{% endif %}
{% set css_class = ['nav-link'] %}
{% set disabledHierarchy = not vocab.config.showHierarchy and not search_results|length == 1 %}
{% if disabledHierarchy %}
{% set css_class = css_class|merge(['skosmos-tooltip-wrapper', 'skosmos-tooltip', 't-bottom']) %}
{% endif %}
<h3 class="visually-hidden">List vocabulary concepts hierarchically</h3>
{% if search_results|length == 1 and not term %}{% set css_class = css_class|merge(['active']) %}{% endif %}
<li id="hierarchy{%- if disabledHierarchy %}-disabled{% endif -%}" class="nav-item">
<a class="{{ css_class|join(' ') }}" href="{{ request.vocabid }}/{{ request.lang }}{% if request.contentLang != request.lang %}?clang={{ request.contentLang }}{% endif %}#tab-hierarchy" id="hier-trigger"
{% if disabledHierarchy%} data-title="hierarchy-disabled-help"{% endif %} role="tab" data-bs-toggle="tab"
>Hier-nav
</a>
</li>
{% set css_class = ['nav-link'] %}
{% if vocab.config.groupClassURI %}
<h3 class="visually-hidden">List vocabulary concepts and groupings hierarchically</h3>
<li id="groups" class="nav-item">
<a class="{{ css_class|join(' ') }}" href="{{ request.vocabid }}/{{ request.lang }}{% if request.contentLang != request.lang %}?clang={{ request.contentLang }}{% endif %}#tab-groups" role="tab" data-bs-toggle="tab">Group-nav</a>
</li>
{% endif %}
{% if vocab.config.showChangeList %}
{% if active_tab == 'new' %}{% set css_class = css_class|merge(['active']) %}{% endif %}
{% if vocab.config.showDeprecatedChanges %}
<h3 class="visually-hidden">List vocabulary concepts by newest additions including removed</h3>
<li id="changes" class="nav-item">
<a class="{{ css_class|join(' ') }}" href="{{ request.vocabid }}/{{ request.lang }}{% if request.contentLang != request.lang %}?clang={{ request.contentLang }}{% endif %}#tab-changes" role="tab" data-bs-toggle="tab">Changes-and-deprecations-nav</a>
</li>
{% else %}
<h3 class="visually-hidden">List vocabulary concepts by newest additions</h3>
{% set css_class = ['nav-link'] %}
{% if active_tab == 'new' %}{% set css_class = css_class|merge(['active']) %}{% endif %}
<li id="changes" class="nav-item">
<a class="{{ css_class|join(' ') }}" href="{{ request.vocabid }}/{{ request.lang }}{% if request.contentLang != request.lang %}?clang={{ request.contentLang }}{% endif %}#tab-changes" role="tab" data-bs-toggle="tab">Changes-nav</a>
</li>
{% endif %}
{% endif %}
{% else %}
<h3 class="visually-hidden">Search options tab</h3>
<li id="limit" class="nav-item"><p>Search options</p></li>
{% endif %}
</ul>
</div>
<h2 class="visually-hidden">Sidebar listing: list and traverse vocabulary contents by a criterion</h2> {# Should be changed for translation #}

<ul class="nav nav-tabs-no-style nav-justified" id="sidebar-tabs" role="tablist">
{% for view in vocab.config.sidebarViews %}
<h3 class="visually-hidden">{{ view }}</h3> {# Should be changed for translation #}
{# active_class is used to set initial active tab and disabled_class is used to disable hierarchy tab #}
{# On vocab page active tab is set to defaultSidebarView, on concept page active tab is set to defaultConceptSidebarView #}
{% set active_class = (request.page == 'vocab' and view == vocab.config.defaultSidebarView) or (request.page == 'page' and view == vocab.config.defaultConceptSidebarView) %}
{# Hierarchy tab is disabled on vocab page if showTopConcepts is set to false #}
{% set disabled_class = request.page == 'vocab' and view == 'hierarchy' and not (vocab.config.showTopConcepts) %}
<li id="{{ view }}" class="nav-item">
<a class="nav-link{% if active_class %} active{% elseif disabled_class %} disabled{% endif %}" role="tab" data-bs-toggle="tab" href="#tab-{{ view }}" aria-controls="tab-{{ view }}">
{{ view }} {# Should be changed for translation #}
</a>
</li>
{% endfor %}
</ul>

<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab-alpha">
</div>
<div role="tabpanel" class="tab-pane" id="tab-hierarchy">
<p>bbb</p>
</div>
<div role="tabpanel" class="tab-pane" id="tab-groups">
<p>ccc</p>
</div>
<div role="tabpanel" class="tab-pane" id="tab-changes">
<p>ddd</p>
</div>
</div>


{% if request.page != 'search' %}
<h4 class="visually-hidden">Listing vocabulary concepts alphabetically</h4>
{% endif %}
<div class="sidebar-grey {% if alpha_results %} sidebar-grey-alpha{% elseif search_results|length == 1 and not term %} concept-hierarchy{% endif %}">
<div class="container" id="alphabetical-menu">
{% if alpha_results %}
{% set previous = '' %}
<ul id="alpha-list" class="list-group side-navi">
{% for key,value in alpha_results %}
{% if all_letters == true %}
{% set alpha = (value.altLabel ?? value.prefLabel)|upper|first %}
{% if alpha != previous %}
<li class="list-group-item text-decoration-none alphabet-header" name="{{ alpha }}">
<h5 class="visually-hidden">{{ alpha | lower }}</h5>
<h5 aria-hidden=true>{{ alpha }}</h5>
</li>
{% set previous = alpha %}
{% endif %}
{% endif %}
<li class="list-group-item text-decoration-none">
{% if value.altLabel %}
{% set prefLabelAltogether = value.prefLabel ~ (value.qualifier ? ' (' ~ value.qualifier ~ ')' : "") %}
<span aria-hidden=true><span class="replaced">{{ value.altLabel }}</span> &rarr;</span>
<a href="{{ value.uri | link_url(vocab,request.lang,'page',request.contentLang) }}"><span class="visually-hidden">{{ value.altLabel}} Prefer using {{ prefLabelAltogether}}</span><span aria-hidden=true>{{prefLabelAltogether}}</span></a>
{% else %}
<a href="{{ value.uri | link_url(vocab,request.lang,'page',request.contentLang) }}">{{ value.prefLabel }}{% if value.qualifier %} ({{ value.qualifier }}){% endif %}</a>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</div>
{% if request.page == 'search' %}
<h4 class="visually-hidden">Limit search</h4>
<form class="search-options">
{% set conceptSchemes = vocab.conceptSchemes %}
{% if conceptSchemes|length > 1 %}
<div class="input-group">
<label for="scheme-limit" class="versal form-label">By scheme</label>
<select id="scheme-limit" value="{{ limit-scheme }}" class="form-control multiselect" multiple="multiple">
{% for uri,scheme in conceptSchemes %}
<option value="{{ uri }}">{% if scheme.prefLabel %}{{ scheme.prefLabel }}{% elseif scheme.label %}{{ scheme.label }}{% elseif scheme.title %}{{ scheme.title }}{% else %}{{ uri }}{% endif %}</option>
{% endfor %}
</select>
</div>
{% endif %}
{% if types|length > 1 %}
<div class="input-group">
<label for="type-limit" class="versal form-label">By type</label>
<select id="type-limit" value="{{ limit-type }}" class="form-control multiselect" multiple="multiple">
{% for uri,type in types %}
<option value="{{ uri }}">{% if type.label %}{{ type.label }}{% else %}{{ uri }}{% endif %}</option>
{% endfor %}
</select>
</div>
{% endif %}
{% if vocab.config.groupClassURI %}
<div class="input-group">
<label for="group-limit" class="versal form-label">By group</label>
<select id="group-limit" value="{{ limit-group }}" class="form-control multiselect">
<option></option>
{% for uri,group in group_index %}
<option value="{{ group.uri }}">{{ group.prefLabel }}</option>
{% endfor %}
</select>
</div>
{% endif %}
<div class="input-group">
<label for="parent-limit" class="versal form-label">By parent</label><input type="text" id="parent-limit" class="form-control" value="{{ limit_parent }}">
<div class="tab-content">
{% for view in vocab.config.sidebarViews %}
{# active_class is used to set initial active tab #}
{# On vocab page active tab is set to defaultSidebarView, on concept page active tab is set to defaultConceptSidebarView #}
{% set active_class = (request.page == 'vocab' and view == vocab.config.defaultSidebarView) or (request.page == 'page' and view == vocab.config.defaultConceptSidebarView) %}
<div class="tab-pane{% if active_class %} active {% endif %}" id="tab-{{ view }}" role="tabpanel">
{{ view }} {# should be removed #}
</div>
<button type="submit" class="btn btn-default">Limit search</button>
</form>
{% endif %}
{% endfor %}
</div>

{% endblock %}
</div>
</div>
2 changes: 1 addition & 1 deletion tests/VocabularyConfigTest.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ public function testGetDefaultConceptSidebarView()
}

/**
* @covers VocabularyConfig::getDefaultConcpetSidebarView
* @covers VocabularyConfig::getDefaultConceptSidebarView
*/
public function testGetDefaultConceptSidebarViewWhenNotSet()
{
Expand Down

0 comments on commit b72a828

Please sign in to comment.