Skip to content

GitLab

Commit 590e284f authored by dindigala's avatar dindigala
Browse files

feat: implementation of bookmarking in default view

parent e48befd5
Pipeline #206466 passed with stages
in 3 minutes and 49 seconds
Hide whitespace changes
Inline Side-by-side
src/App.vue
View file @ 590e284f
......@@ -8,6 +8,7 @@
v-if="config['header_section'].show"
:collectiontitle="collectiontitle"
:config="config"
:default-view="defaultView"
:imageurl="imageurl"
:item="item"
:itemurls="itemurls"
......@@ -40,6 +41,7 @@
<script>
import { colors } from 'quasar';
import treestore from '@/stores/treestore.js';
import Header from '@/components/header.vue';
import Panels from '@/mixins/panels';
......@@ -64,10 +66,21 @@ export default {
item: {},
itemurl: '',
itemurls: [],
loaded: false,
manifests: [],
tree: [],
};
},
watch: {
'$route.query': {
handler: 'onItemUrlChange',
immediate: true,
},
manifests: {
handler: 'onItemUrlChange',
immediate: false,
},
},
created() {
this.getConfig();
this.init();
......@@ -101,16 +114,11 @@ export default {
*
* @param string url
*/
this.$root.$on('update-item', (url) => {
this.itemurl = url;
this.$router.push({ query: { itemurl: url } });
// NOTE: Set imageurl to an empty string. Otherwise, if there is no corresponding image,
// the "preceding" image according to the "preceding" item will be shown.
this.imageurl = '';
this.getItemData(url);
});
},
methods: {
defaultView() {
this.loaded = false;
},
/**
* get resources using JavaScript's native fetch api
* caller: *getCollection()*, *getItemData()*, *getManifest()*
......@@ -166,30 +174,36 @@ export default {
*
* @param string url
*/
getCollection(url) {
async getCollection(url) {
this.isCollection = true;
this.request(url)
.then((data) => {
this.collection = data;
this.collectiontitle = this.getLabel(data);
this.tree.push(
{
children: [],
handler: (node) => {
this.$root.$emit('update-tree-knots', node.label);
},
label: this.collectiontitle,
'label-key': this.collectiontitle,
selectable: false,
},
);
const data = await this.request(url);
if (Array.isArray(data.sequence)) {
data.sequence.forEach((seq) => this.getManifest(seq.id));
}
});
this.collection = data;
this.collectiontitle = this.getLabel(data);
this.tree.push(
{
children: [],
handler: (node) => {
this.$root.$emit('update-tree-knots', node.label);
},
label: this.collectiontitle,
'label-key': this.collectiontitle,
selectable: false,
},
);
if (Array.isArray(data.sequence)) {
const promises = [];
data.sequence.forEach((seq) => promises.push(this.getManifest(seq.id)));
await Promise.all(promises);
}
if (this.manifests?.[0]?.sequence?.[0]?.id && !this.$route.query.itemurl) {
this.loaded = false;
this.$router.push({ query: { itemurl: this.manifests?.[0]?.sequence?.[0]?.id } });
}
},
/**
* get config object (JSON) from index.html
......@@ -277,7 +291,7 @@ export default {
*
* @return array urls
*/
getItemUrls(sequence, label) {
getItemUrls(sequence) {
const urls = [];
sequence.forEach((item) => {
......@@ -292,11 +306,8 @@ export default {
if (this.itemurl === node.label) {
return;
}
// node.label === itemurl
// @param label === manifest label; passed by getManifest()
this.$root.$emit('update-item', node.label, this.getSequenceIndex(label));
this.$root.$emit('update-item-index', this.getItemIndex(node.label));
this.$root.$emit('update-sequence-index', this.getSequenceIndex(label));
this.loaded = false;
this.$router.push({ query: { itemurl: node.label } });
},
},
);
......@@ -323,40 +334,34 @@ export default {
*
* @param string url
*/
getManifest(url) {
this.request(url)
.then((data) => {
// if the entrypoint points to a single manifest, initialize the tree
if (this.isCollection === false) {
this.tree.push({ label: '', 'label-key': this.config.labels.manifest, children: [] });
}
async getManifest(url) {
const data = await this.request(url);
if (!Array.isArray(data.sequence)) {
data.sequence = [data.sequence];
}
// if the entrypoint points to a single manifest, initialize the tree
if (this.isCollection === false) {
this.tree.push({ label: '', 'label-key': this.config.labels.manifest, children: [] });
}
if (data.sequence[0] !== 'undefined') {
data.sequence.map((seq) => this.itemurls.push(seq.id));
}
this.manifests.push(data);
this.tree[0].children.push(
{
children: this.getItemUrls(data.sequence, data.label),
label: data.label,
'label-key': data.label,
handler: (node) => {
this.$root.$emit('update-tree-knots', node.label);
},
selectable: false,
},
);
// make sure that urls are set just once on init
if (!this.itemurl && data.sequence[0]) {
this.itemurl = data.sequence[0].id;
this.getItemData(data.sequence[0].id);
}
});
if (!Array.isArray(data.sequence)) {
data.sequence = [data.sequence];
}
if (data.sequence[0] !== 'undefined') {
data.sequence.map((seq) => this.itemurls.push(seq.id));
}
this.manifests.push(data);
this.tree[0].children.push(
{
children: this.getItemUrls(data.sequence, data.label),
label: data.label,
'label-key': data.label,
handler: (node) => {
this.$root.$emit('update-tree-knots', node.label);
},
selectable: false,
},
);
},
/**
* caller: *getItemUrls()*
......@@ -385,6 +390,45 @@ export default {
? this.getCollection(this.config.entrypoint)
: this.getManifest(this.config.entrypoint);
},
onItemUrlChange() {
if (this.loaded) {
return;
}
this.itemurl = this.$route.query.itemurl;
if (!this.itemurl) {
return;
}
const item = this.manifests.find((manifest) => manifest.sequence.find((manifestItem) => manifestItem.id === this.itemurl));
if (!item) {
return;
}
const { label } = item;
const seqIdx = this.getSequenceIndex(label);
treestore.updateselectedtreeitem(this.itemurl);
treestore.updatetreesequence(seqIdx);
this.$root.$emit('update-item', this.itemurl, seqIdx);
this.$root.$emit('update-item-index', this.getItemIndex(this.itemurl));
this.$root.$emit('update-sequence-index', seqIdx);
const treeDom = document.getElementById(this.itemurl);
if (treeDom) {
treeDom.scrollIntoView();
}
// NOTE: Set imageurl to an empty string. Otherwise, if there is no corresponding image,
// the "preceding" image according to the "preceding" item will be shown.
this.imageurl = '';
this.getItemData(this.itemurl);
this.loaded = true;
},
},
};
</script>
......
src/components/header.vue
View file @ 590e284f
......@@ -24,6 +24,7 @@
:itemurls="itemurls"
:labels="config.labels"
:manifests="manifests"
:default-view="defaultView"
/>
<q-space />
......@@ -63,6 +64,11 @@ export default {
Tools,
},
props: {
defaultView: {
type: Function,
default: () => {},
},
collectiontitle: {
type: String,
default: () => '',
......
src/components/navbar.vue
View file @ 590e284f
......@@ -43,6 +43,12 @@ import { fasArrowRight, fasArrowLeft, fasCheck } from '@quasar/extras/fontawesom
export default {
name: 'Navbar',
mixins: [Navigation],
props: {
defaultView: {
type: Function,
default: () => {},
},
},
created() {
this.fasArrowRight = fasArrowRight;
this.fasArrowLeft = fasArrowLeft;
......
src/components/tree.vue
View file @ 590e284f
......@@ -19,7 +19,10 @@
</template>
<template #default-header="prop">
<div class="row items-center">
<div
:id="prop.node['label']"
class="row items-center"
>
<div> {{ prop.node.labelSheet? $t(labels.item):'' }} {{ prop.node['label-key'] }}</div>
</div>
</template>
......@@ -68,10 +71,8 @@ export default {
this.expanded.push(this.manifests[finalSeqIdx].label);
this.$root.$on('update-item', (item, seqIdx) => {
this.$root.$on('update-item', (item) => {
this.selected = item;
treestore.updateselectedtreeitem(item);
treestore.updatetreesequence(seqIdx);
});
this.$root.$on('update-sequence-index', (index) => {
......
src/index.template.html
View file @ 590e284f
......@@ -31,7 +31,7 @@
-->
<script id="tido-config" type="application/json">
{
"entrypoint": "",
"entrypoint": "https://ahikar-dev.sub.uni-goettingen.de/api/textapi/ahikar/arabic-karshuni/collection.json",
"annotations": {
"show": true,
"types": [
......
src/mixins/navigation.js
View file @ 590e284f
......@@ -15,16 +15,20 @@ export default {
methods: {
toggleSheet(itemIndex) {
const link = this.itemurls[itemIndex];
const tree = document.getElementsByClassName('view-tree');
if (tree.length) {
window.location.hash = `selectedItem-${link}`;
tree[0].scrollBy(0, -80);
}
this.sequenceindex = this.computedsequenceindex;
this.updateItem(this.itemurls[itemIndex], this.sequenceindex);
this.updateSequenceIndex(this.sequenceindex);
this.defaultView();
this.$router.push({ query: { itemurl: link } });
// const tree = document.getElementsByClassName('view-tree');
//
// if (tree.length) {
// window.location.hash = `selectedItem-${link}`;
// tree[0].scrollBy(0, -80);
// }
//
// this.sequenceindex = this.computedsequenceindex;
// this.updateItem(this.itemurls[itemIndex], this.sequenceindex);
// this.updateSequenceIndex(this.sequenceindex);
},
updateItem() {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment