Skip to content

Commit

Permalink
Fix alpabetical view style and add highlight to open concept link
Browse files Browse the repository at this point in the history
  • Loading branch information
@UnniKohonen
UnniKohonen committed Nov 21, 2023
1 parent b4e41b4 commit d9b4b11
Show file tree
Hide file tree
Showing 4 changed files with 148 additions and 63 deletions.
60 changes: 44 additions & 16 deletions resource/css/skosmos.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,12 @@
--feedback-form-button-bg: var(--dark-color);
--sidebar-search-bg: var(--dark-color);
--sidebar-search-text: var(--white-color);
--sidebar-tab-inactive-bg: var(--light-color);
--sidebar-tab-inactive-text: var(--dark-color);
--sidebar-tab-active-bg: var(--dark-color);
--sidebar-tab-active-text: var(--white-color);
--sidebar-scrollbar-bg: var(--light-color);
--sidebar-scrollbar-thumb: var(--secondary-medium-color);
--vocab-bg: var(--white-color);
--vocab-table-border: var(--medium-color);
--vocab-link: var(--secondary-dark-color);
Expand Down Expand Up @@ -70,6 +76,7 @@ body {
#main-container.vocabpage .fa-arrow-right, #main-container.termpage .fa-arrow-right {
color: var(--vocab-text);
font-size: 12px;
margin: 0 5px;
}

#main-container.termpage .fa-copy {
Expand Down Expand Up @@ -377,12 +384,25 @@ body {
}

/*** Sidebar termpage & vocabpage ***/
#main-container.vocabpage #sidebar .nav-item, #main-container.termpage #sidebar .nav-item {
#main-container.vocabpage #sidebar-col, #main-container.termpage #sidebar-col {
background-color: var(--vocab-bg);
background-clip: content-box, padding-box;
}

#main-container.vocabpage #sidebar, #main-container.termpage #sidebar {
background-color: var(--vocab-bg);
}

#main-container.vocabpage #sidebar .nav, #main-container.termpage #sidebar .nav {
background-color: var(--sidebar-tab-inactive-bg);
}

#main-container.vocabpage #sidebar .nav-link, #main-container.termpage #sidebar .nav-link {
color: var(--sidebar-tab-inactive-text) !important;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: none;
}

Expand All @@ -407,45 +427,50 @@ body {
border-radius: 0 !important;
margin: 0 !important;
transition: none;
width: 35px;
}

#main-container.vocabpage #sidebar .page-link, #main-container.termpage #sidebar .page-link {
display: flex;
align-content: center;
text-align: center;
}

/* Not sure what these should be, probably something though */
#main-container.vocabpage #sidebar .page-link:hover, #main-container.vocabpage #sidebar .page-link:active, #main-container.vocabpage #sidebar .page-link:focus
/* what to do with these */
#main-container.vocabpage #sidebar .page-link:hover, #main-container.vocabpage #sidebar .page-link:active, #main-container.vocabpage #sidebar .page-link:focus,
#main-container.termpage #sidebar .page-link:hover, #main-container.termpage #sidebar .page-link:active, #main-container.termpage #sidebar .page-link:focus {
background-color: var(--sidebar-tab-active-bg);
color: var(--sidebar-tab-active-text);
box-shadow: none;
}

#alpha-list {
.sidebar-list {
padding: 2rem 1rem;
overflow: hidden;
overflow-y: scroll;
scrollbar-color: var(--sidebar-scrollbar-thumb) var(--sidebar-scrollbar-bg);
height: 600px; /*remove*/
max-height: 1000px; /* needs to be changed */
}

#alpha-list::-webkit-scrollbar {
.sidebar-list::-webkit-scrollbar {
background: var(--sidebar-scrollbar-bg);
}

#alpha-list::-webkit-scrollbar-thumb {
.sidebar-list::-webkit-scrollbar-thumb {
background: var(--sidebar-scrollbar-thumb);
}

#alpha-list li {
.sidebar-list li {
border: none;
border-radius: none;
}

#alpha-list .list-group-item.selected a {
color: var(--vocab-text);
font-size: 18px;
.sidebar-list a {
font-weight: bold !important;
}

#tab-hierarchy {
background-color: var(--sidebar-tab-active-bg);
color: var(--sidebar-tab-active-text);
.sidebar-list .list-group-item a.selected {
color: var(--vocab-text) !important;
font-weight: bold !important;
}

/*** sidebar serachpage ***/
Expand Down Expand Up @@ -698,12 +723,14 @@ body {
#alphabetical-menu > .list-group > .list-group-item {
border: none !important;
}

/*** Sidebar ***/
/*
#sidebar > div > .nav-tabs > .nav-item {
border: none !important;
border-image: none !important;
transition: none;
}
/*** Sidebar ***/
#sidebar .nav-item {
background-color: var(--light-color);
}
Expand Down Expand Up @@ -749,6 +776,7 @@ body {
margin: 0 !important;
transition: none;
}
*/
tr > td {
color: var(--dark-color);
}
Expand Down
103 changes: 72 additions & 31 deletions resource/js/tab-alpha.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ const tabAlphaApp = Vue.createApp({
return {
indexLetters: [],
indexConcepts: [],
selectedLetter: ''
selectedConcept: '',
loadingLetters: false,
loadingConcepts: false
}
},
provide () {
Expand All @@ -18,39 +20,55 @@ const tabAlphaApp = Vue.createApp({
},
mounted () {
// 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('#alphabetical > a').classList.contains('active')) {
this.loadLetters()
}
},
methods: {
loadLetters () {
// 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 => {
return data.json()
})
.then(data => {
this.indexLetters = data.indexLetters
this.loadConcepts(this.indexLetters[0])
})
handleClickAlphabeticalEvent () {
// only load index the first time the page is opened or if selected concept has changed
if (this.indexLetters.length === 0 || this.selectedConcept !== SKOSMOS.uri) {
this.selectedConcept = ''
this.indexLetters = []
this.indexConcepts = []
this.loadLetters()
}
},
loadLetters () {
this.loadingLetters = true
fetch('rest/v1/' + SKOSMOS.vocab + '/index/?lang=' + SKOSMOS.lang)
.then(data => {
return data.json()
})
.then(data => {
this.indexLetters = data.indexLetters
this.loadingLetters = false
this.loadConcepts(this.indexLetters[0])
})
},
loadConcepts (letter) {
this.selectedLetter = letter
fetch('rest/v1/' + SKOSMOS.vocab + '/index/' + this.selectedLetter + '?lang=' + SKOSMOS.lang + '&limit=50')
this.loadingConcepts = true
fetch('rest/v1/' + SKOSMOS.vocab + '/index/' + letter + '?lang=' + SKOSMOS.lang + '&limit=50')
.then(data => {
return data.json()
})
.then(data => {
this.indexConcepts = data.indexConcepts
this.loadingConcepts = false
})
}
},
template: `
<div v-click-tab-alphabetical="loadLetters">
<tab-alpha :index-letters="indexLetters" :index-concepts="indexConcepts" v-if="indexLetters" @load-concepts="loadConcepts($event)"></tab-alpha>
<div v-click-tab-alphabetical="handleClickAlphabeticalEvent">
<tab-alpha
:index-letters="indexLetters"
:index-concepts="indexConcepts"
:selected-concept="selectedConcept"
:loading-letters="loadingLetters"
:loading-concepts="loadingConcepts"
@load-concepts="loadConcepts($event)"
@select-concept="selectedConcept = $event"
></tab-alpha>
</div>
`
})
Expand All @@ -69,28 +87,51 @@ tabAlphaApp.directive('click-tab-alphabetical', {
})

tabAlphaApp.component('tab-alpha', {
props: ['indexLetters', 'indexConcepts'],
emits: ['loadConcepts'],
props: ['indexLetters', 'indexConcepts', 'selectedConcept', 'loadingLetters', 'loadingConcepts'],
emits: ['loadConcepts', 'selectConcept'],
inject: ['partialPageLoad', 'getConceptURL'],
methods: {
loadConcepts (event, letter) {
event.preventDefault()
this.$emit('loadConcepts', letter)
},
loadConcept (event, uri) {
partialPageLoad(event, getConceptURL(uri))
this.$emit('selectConcept', uri)
}
},
template: `
<ul class="pagination">
<li v-for="letter in indexLetters" class="page-item">
<a class="page-link" href="#" @click="loadConcepts($event, letter)" style="background-color: darkblue;">{{ letter }}</a>
</li>
</ul>
<ul class="list-group" id="alpha-list">
<li v-for="concept in indexConcepts" class="list-group-item py-1">
<template v-if="concept.altLabel">{{ concept.altLabel }} -> </template>
<a :href="getConceptURL(concept.uri)" @click="partialPageLoad($event, getConceptURL(concept.uri))">{{ concept.prefLabel }}</a>
</li>
</ul>
<template v-if="loadingLetters">
<div>
Loading...
</div>
</template>
<template v-else>
<ul class="pagination" v-if="indexLetters.length !== 0">
<li v-for="letter in indexLetters" class="page-item">
<a class="page-link" href="#" @click="loadConcepts($event, letter)">{{ letter }}</a>
</li>
</ul>
</template>
<template v-if="loadingConcepts">
<div>
Loading...
</div>
</template>
<template v-else>
<ul class="list-group sidebar-list" v-if="indexConcepts.length !== 0">
<li v-for="concept in indexConcepts" class="list-group-item py-1 px-2">
<template v-if="concept.altLabel">
<span class="fst-italic">{{ concept.altLabel }}</span>
<i class="fa-solid fa-arrow-right"></i>
</template>
<a :class="{ 'selected': selectedConcept === concept.uri }"
:href="getConceptURL(concept.uri)" @click="loadConcept($event, concept.uri)"
>{{ concept.prefLabel }}</a>
</li>
</ul>
</template>
`
})

Expand Down
40 changes: 29 additions & 11 deletions resource/js/tab-hierarchy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ const tabHierApp = Vue.createApp({
data () {
return {
hierarchy: [],
loading: false
loading: false,
selectedConcept: ''
}
},
provide () {
Expand Down Expand Up @@ -121,6 +122,7 @@ const tabHierApp = Vue.createApp({
}

this.loading = false
this.selectedConcept = SKOSMOS.uri
console.log(this.hierarchy)
})
},
Expand All @@ -143,9 +145,14 @@ const tabHierApp = Vue.createApp({
},
template: `
<div v-click-tab-hierarchy="handleClickHierarchyEvent">
<ul v-if="!loading">
<ul class="list-group sidebar-list" v-if="!loading">
<template v-for="c in hierarchy">
<tab-hier :concept="c" @load-children="loadChildren($event)"></tab-hier>
<tab-hier
:concept="c"
:selectedConcept="selectedConcept"
@load-children="loadChildren($event)"
@select-concept="selectedConcept = $event"
></tab-hier>
</template>
</ul>
<template v-else>Loading...</template><!-- Add a spinner or equivalent -->
Expand All @@ -166,8 +173,8 @@ tabHierApp.directive('click-tab-hierarchy', {
})

tabHierApp.component('tab-hier', {
props: ['concept'],
emits: ['loadChildren'],
props: ['concept', 'selectedConcept'],
emits: ['loadChildren', 'selectConcept'],
inject: ['partialPageLoad', 'getConceptURL'],
methods: {
handleClickOpenEvent (concept) {
Expand All @@ -177,23 +184,34 @@ tabHierApp.component('tab-hier', {
handleClickConceptEvent (event, concept) {
concept.isOpen = true
this.$emit('loadChildren', concept)
this.$emit('selectConcept', concept.uri)
this.partialPageLoad(event, this.getConceptURL(concept.uri))
},
loadChildrenRecursive (concept) {
this.$emit('loadChildren', concept)
},
selectConceptRecursive (concept) {
this.$emit('selectConcept', concept)
}
},
template: `
<li>
<li class="list-group-item">
<div>
<button v-if="concept.hasChildren" @click="handleClickOpenEvent(concept)"></button>
<a :href="getConceptURL(concept.uri)" @click="handleClickConceptEvent($event, concept)">
{{ concept.label }}
</a>
<a
:class="{ 'selected': selectedConcept === concept.uri }"
:href="getConceptURL(concept.uri)"
@click="handleClickConceptEvent($event, concept)"
>{{ concept.label }}</a>
</div>
<ul v-if="concept.children.length !== 0 && concept.isOpen">
<ul class="list-group" v-if="concept.children.length !== 0 && concept.isOpen">
<template v-for="c in concept.children">
<tab-hier :concept="c" @load-children="loadChildrenRecursive($event)"></tab-hier>
<tab-hier
:concept="c"
:selectedConcept="selectedConcept"
@load-children="loadChildrenRecursive($event)"
@select-concept="selectConceptRecursive($event)"
></tab-hier>
</template>
</ul>
</li>
Expand Down
8 changes: 3 additions & 5 deletions src/view/sidebar.inc
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="col-md-4">
<div class="bg-light" id="sidebar">
<div class="col-md-4" id="sidebar-col">
<div id="sidebar">
{% block sidebar %}
<div class="sidebar-buttons">
<h2 class="visually-hidden">{{'Sidebar listing: list and traverse vocabulary contents by a criterion' | trans}}</h2>
Expand Down Expand Up @@ -33,9 +33,7 @@
{# 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>
<div class="tab-pane{% if active_class %} active{% endif %}" id="tab-{{ view }}" role="tabpanel"></div>
{% endfor %}
</div>

Expand Down

0 comments on commit d9b4b11

Please sign in to comment.