Commit ecbade11 authored by schneider210's avatar schneider210
Browse files

wip: qtree

parent 9e1e171b
Pipeline #131720 passed with stages
in 6 minutes and 3 seconds
......@@ -1206,9 +1206,9 @@
"dev": true
},
"@quasar/app": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/@quasar/app/-/app-1.7.0.tgz",
"integrity": "sha512-1cL6Cdyz8gsdOmbByqIutDcdN8l+3mn6sZxNfKWAYMAl0Z3ub/kWFKkvghtAQha8T5unNb7izg40ij5zKBWvzg==",
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/@quasar/app/-/app-1.7.1.tgz",
"integrity": "sha512-ZfyV0Ppzmh9lGvbbGVNgr79MoUxQPVpKLkr5uiwtWtEjS3tlcd4u9reQvXFSU+uOhZu7kzwkzn8dGjb+FsRlQQ==",
"dev": true,
"requires": {
"@quasar/babel-preset-app": "1.1.9",
......@@ -1451,9 +1451,9 @@
}
},
"@types/express-serve-static-core": {
"version": "4.17.4",
"resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.4.tgz",
"integrity": "sha512-dPs6CaRWxsfHbYDVU51VjEJaUJEcli4UI0fFMT4oWmgCvHj+j7oIxz5MLHVL0Rv++N004c21ylJNdWQvPkkb5w==",
"version": "4.17.5",
"resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.5.tgz",
"integrity": "sha512-578YH5Lt88AKoADy0b2jQGwJtrBxezXtVe/MBqWXKZpqx91SnC0pVkVCcxcytz3lWW+cHBYDi3Ysh0WXc+rAYw==",
"dev": true,
"requires": {
"@types/node": "*",
......@@ -2702,16 +2702,6 @@
"integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
"dev": true
},
"bindings": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
"integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
"dev": true,
"optional": true,
"requires": {
"file-uri-to-path": "1.0.0"
}
},
"bl": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/bl/-/bl-4.0.2.tgz",
......@@ -3021,9 +3011,9 @@
}
},
"buffer": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.5.0.tgz",
"integrity": "sha512-9FTEDjLjwoAkEwyMGDjYJQN2gfRgOKBKRfiglhvibGbpeeU/pQn1bJxQqm32OD/AIeEuHxU9roxXxg34Byp/Ww==",
"version": "5.6.0",
"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.6.0.tgz",
"integrity": "sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==",
"dev": true,
"requires": {
"base64-js": "^1.0.2",
......@@ -5996,13 +5986,6 @@
"schema-utils": "^2.5.0"
}
},
"file-uri-to-path": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
"integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
"dev": true,
"optional": true
},
"filesize": {
"version": "3.6.1",
"resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
......@@ -10961,9 +10944,9 @@
"dev": true
},
"quasar": {
"version": "1.9.14",
"resolved": "https://registry.npmjs.org/quasar/-/quasar-1.9.14.tgz",
"integrity": "sha512-1ELBXtkoW6KALpYfel+s4ovvPwn7tILtP95NjGgD9znVbuY2gShONkku4ZGkEYKLoQY3yOgIGKd8CIjbjz2DxA=="
"version": "1.9.15",
"resolved": "https://registry.npmjs.org/quasar/-/quasar-1.9.15.tgz",
"integrity": "sha512-1StU62FSiZtPd0jrbQZoTBRzZ+dQZXhmTxx0DXfm4OKmsn9628VIN32jBBSPsPnuHa+rvTlqzMYo/I5oPoUcxw=="
},
"query-string": {
"version": "4.3.4",
......@@ -13312,9 +13295,9 @@
"dev": true
},
"uglify-js": {
"version": "3.9.0",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.9.0.tgz",
"integrity": "sha512-j5wNQBWaql8gr06dOUrfaohHlscboQZ9B8sNsoK5o4sBjm7Ht9dxSbrMXyktQpA16Acaij8AcoozteaPYZON0g==",
"version": "3.9.1",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.9.1.tgz",
"integrity": "sha512-JUPoL1jHsc9fOjVFHdQIhqEEJsQvfKDjlubcCilu8U26uZ73qOg8VsN8O1jbuei44ZPlwL7kmbAdM4tzaUvqnA==",
"dev": true,
"requires": {
"commander": "~2.20.3"
......@@ -14031,7 +14014,6 @@
"dev": true,
"optional": true,
"requires": {
"bindings": "^1.5.0",
"nan": "^2.12.1",
"node-pre-gyp": "*"
},
......@@ -15176,7 +15158,6 @@
"dev": true,
"optional": true,
"requires": {
"bindings": "^1.5.0",
"nan": "^2.12.1",
"node-pre-gyp": "*"
},
......@@ -16634,9 +16615,9 @@
}
},
"yargs-parser": {
"version": "18.1.2",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.2.tgz",
"integrity": "sha512-hlIPNR3IzC1YuL1c2UwwDKpXlNFBqD1Fswwh1khz5+d8Cq/8yc/Mn0i+rQXduu8hcrFKvO7Eryk+09NecTQAAQ==",
"version": "18.1.3",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
"integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
"dev": true,
"requires": {
"camelcase": "^5.0.0",
......
......@@ -18,10 +18,10 @@
"dependencies": {
"@quasar/extras": "^1.6.4",
"openseadragon": "^2.4.2",
"quasar": "^1.9.14"
"quasar": "^1.9.15"
},
"devDependencies": {
"@quasar/app": "^1.7.0",
"@quasar/app": "^1.7.1",
"autoprefixer": "^9.7.6",
"babel-eslint": "^10.0.1",
"eslint": "^6.8.0",
......
......@@ -11,11 +11,8 @@
<q-page-container>
<MainView
:collection="collection"
:depth="0"
:imageurl="imageurl"
:itemurl="itemurl"
:itemurls="itemurls"
:label="label"
:manifests="manifests"
:request="request"
:tree="tree"
......@@ -62,8 +59,10 @@ export default {
this.collection = data;
this.label = this.getLabel(data);
this.tree.push({ label: this.label, children: [] });
if (Array.isArray(data.sequence)) {
data.sequence.map((seq) => this.getManifest(seq.id));
data.sequence.map((seq, seqidx) => this.getManifest(seq.id, seqidx));
}
});
},
......@@ -76,29 +75,64 @@ export default {
this.imageurl = data.image && data.image.id ? data.image.id : '';
});
},
getItemurls(sequence, seqidx) {
const urls = [];
if (Array.isArray(sequence)) {
sequence.forEach((obj) => {
urls.push(
{
label: obj.id,
handler: (node) => {
if (this.itemurl !== node.label) {
this.$root.$emit('update-item', node.label);
}
let idx = 0;
this.itemurls.forEach((item, index) => {
if (item === node.label) {
idx = index;
}
});
this.$root.$emit('update-item-index', idx);
this.$root.$emit('update-metadata', seqidx);
this.$root.$emit('update-sequence-index', seqidx);
},
},
);
});
} else {
urls.push({ label: sequence.id });
}
return urls;
},
getLabel(data) {
if (Object.keys(this.collection).length) {
return data.title && data.title[0].title ? data.title[0].title : data.label;
}
return 'Manifest';
},
getManifest(url) {
getManifest(url, seqidx) {
this.request(url)
.then((data) => {
this.manifests.push(data);
this.tree.push({ label: data.label, nodes: data.sequence });
if (!this.label) {
this.label = this.getLabel(data);
}
this.tree[0].children.push(
{ label: data.label, children: this.getItemurls(data.sequence, seqidx) },
);
if (Array.isArray(data.sequence) && data.sequence[0] !== 'undefined') {
data.sequence.map((seq) => this.itemurls.push(seq.id));
}
// make sure that urls are set just once on init
if (!this.itemurl && data.sequence[0] !== 'undefined') {
if (!this.itemurl) {
this.itemurl = data.sequence[0].id;
this.getImageUrl(this.itemurl);
}
if (!this.label) {
this.label = this.getLabel(data);
}
});
},
init() {
......
<template>
<div class="q-pa-md q-gutter-sm">
<q-tree
:expanded.sync="expanded"
:icon="fasCaretRight"
:nodes="tree"
node-key="label"
>
</q-tree>
</div>
</template>
<script>
import { fasCaretRight } from '@quasar/extras/fontawesome-v5';
export default {
name: 'Treeview',
props: {
manifests: Array,
tree: Array,
},
data() {
return {
expanded: ['The Story and Proverbs of Ahikar the Wise'],
};
},
created() {
this.fasCaretRight = fasCaretRight;
},
mounted() {
this.$root.$on('update-tree-nodes', (index) => {
this.expanded.push(this.manifests[index].label);
});
},
};
</script>
<template>
<nav class="tree">
<button v-if="depth === 0"
:class="[
'tree__nav-item',
'tree__nav-item--1',
'tree__button',
clicked ? 'tree__button--active' : ''
]"
@click="clicked = !clicked;"
>
<div class="tree__icon">
<q-icon size="40px" :name="fasCaretRight" />
</div>
<div class="tree__text">{{ label }}</div>
</button>
<ul v-else class="tree__item-list">
<li>
<button v-if="tree !== undefined"
:class="[
'tree__nav-item',
'tree__nav-item--2',
'tree__button',
clicked ? 'tree__button--active' : ''
]"
@click="clicked = !clicked;"
>
<div :class="['tree__icon', clicked ? 'tree__icon--active' : '']">
<q-icon size="40px" :name="fasCaretRight" />
</div>
<div class="tree__text tree__text--2">{{ label }}</div>
</button>
<div v-else>
<ul class="tree-data-item__list">
<li class="tree__data-item" v-html="dataItem"></li>
</ul>
</div>
</li>
</ul>
<div v-if="clicked">
<div
v-for="(node, key) in tree" :key="key"
@click="
url = node.label ? itemurl : node.id;
updateItem(url);
updateItemIndex(itemindex);
updateMetadata(sequenceindex);
updateSequenceIndex(sequenceindex);"
>
<Treeview
:depth="depth + 1"
:itemurl="itemurl"
:itemurls="itemurls"
:label="node.label ? node.label : node.id"
:manifests="manifests"
:tree="node.nodes"
/>
</div>
</div>
</nav>
</template>
<script>
import {
fasCaretRight,
fasAngleRight,
fasAngleDoubleRight,
} from '@quasar/extras/fontawesome-v5';
export default {
name: 'Treeview',
props: {
depth: Number,
itemurl: String,
itemurls: Array,
label: String,
manifests: Array,
tree: [Array, Object],
},
data() {
return {
clicked: false,
url: '',
};
},
methods: {
updateItem() {
if (this.itemurl === this.url) {
return;
}
this.$root.$emit('update-item', this.url);
},
updateItemIndex() {
this.$root.$emit('update-item-index', this.itemindex);
},
updateMetadata() {
this.$root.$emit('update-metadata', this.sequenceindex);
},
updateSequenceIndex() {
this.$root.$emit('update-sequence-index', this.sequenceindex);
},
},
computed: {
isactive() {
// should not compare with label, rather use _something_ else.
return this.itemurl === this.label;
},
dataItem() {
if (this.isactive) {
return `<q-icon class="q-pb-sm" size="40px" :name="fasAngleDoubleRight" />
<span class="tree__data-item--active">${this.label}</span>`;
}
return `<button class="item-with-icon">
<q-icon class="q-pb-sm" size="40px" :name="fasAngleRight" />
<span>${this.label}</span>
</button>`;
},
itemindex() {
let idx = 0;
this.itemurls.forEach((item, index) => {
if (item === this.url) {
idx = index;
}
});
return idx;
},
sequencecount() {
return this.manifests.length;
},
itemspersequence() {
const itemcount = [];
for (let ctr = 0; ctr < this.sequencecount; ctr += 1) {
itemcount[ctr] = this.manifests[ctr].sequence.length;
}
return itemcount;
},
sequenceindex() {
const itemcount = this.itemspersequence;
let itemidx = 0;
let sequenceidx = 0;
for (let ctr = 0; ctr < this.sequencecount; ctr += 1) {
itemidx += itemcount[ctr];
if (itemidx <= this.itemindex) {
sequenceidx += 1;
}
}
return sequenceidx;
},
},
created() {
this.fasAngleRight = fasAngleRight;
this.fasAngleDoubleRight = fasAngleDoubleRight;
this.fasCaretRight = fasCaretRight;
},
mounted() {
this.clicked = this.depth === 0;
this.$root.$on('update-tree-nodes', (index) => {
if (this.$parent.tree && this.$parent.tree[index] && this.tree !== 'undefined') {
this.clicked = this.$parent.tree[index].label === this.label;
}
});
},
};
</script>
<template>
<q-page>
<q-splitter v-model="splitterone" :limits="[0, 100]">
<template v-if="panels.treeview" v-slot:before>
<template v-show="panels.treeview" v-slot:before>
<Toolbar heading="Treeview" />
<q-separator />
<Treeview
:depth="depth"
:itemurl="itemurl"
:itemurls="itemurls"
:label="label"
:manifests="manifests"
:tree="tree"
>
......@@ -18,7 +14,7 @@
<template v-slot:after>
<q-splitter v-model="splittertwo" :limits="[0, 100]">
<template v-if="panels.text" v-slot:before>
<template v-show="panels.text" v-slot:before>
<Toolbar heading="Text" />
<q-separator />
......@@ -32,7 +28,7 @@
<template v-slot:after>
<q-splitter v-model="splitterthree" :limits="[0, 100]">
<template v-if="panels.image && imageurl" v-slot:before>
<template v-show="panels.image && imageurl" v-slot:before>
<Toolbar heading="Image" />
<q-separator />
......@@ -43,11 +39,11 @@
</OpenSeadragon>
</template>
<template v-if="panels.metadata && manifests.length" v-slot:after>
<template v-show="panels.metadata" v-slot:after>
<Toolbar heading="Metadata" />
<q-separator />
<Metadata
<Metadata v-if="manifests.length"
:collection="collection"
:manifests="manifests"
>
......@@ -66,11 +62,10 @@ import Content from '@/components/content.vue';
import Metadata from '@/components/metadata.vue';
import OpenSeadragon from '@/components/openseadragon.vue';
import Toolbar from '@/components/quasar-toolbar.vue';
// import Treeview from '@/components/treeview.vue';
import Treeview from '@/components/quasar-tree.vue';
export default {
name: 'TwinView',
name: 'MainView',
components: {
Content,
Metadata,
......@@ -80,11 +75,8 @@ export default {
},
props: {
collection: Object,
depth: Number,
imageurl: String,
itemurl: String,
itemurls: Array,
label: String,
manifests: Array,
request: Function,
tree: Array,
......
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