Commit ded963be authored by nwindis's avatar nwindis
Browse files

Merge branch 'bugfix/fix-eslint-issues' into 'develop'

fix-eslint-issues

See merge request subugoe/emo/Qviewer!93
parents 5e990bca 6629ef32
Pipeline #155290 passed with stages
in 3 minutes and 36 seconds
<template>
<div id="q-app">
<q-layout view="hHh lpr fFf">
<Header v-if="config.headers.all"
<Header
v-if="config.headers.all"
:collectiontitle="collectiontitle"
:config="config"
:imageurl="imageurl"
......@@ -32,7 +33,7 @@
<Footer
:standalone="config.standalone"
:projectcolors="config.colors"
/>
/>
</q-layout>
</div>
</template>
......@@ -69,6 +70,47 @@ export default {
tree: [],
};
},
created() {
this.getConfig();
this.init();
this.$q.dark.set('auto');
this.itemurls.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
if (this.config.colors.primary && this.config.colors.secondary && this.config.colors.accent) {
colors.setBrand('primary', this.config.colors.primary);
colors.setBrand('secondary', this.config.colors.secondary);
colors.setBrand('accent', this.config.colors.accent);
}
},
mounted() {
/**
* listen to fontsize change (user interaction). emitted in @/components/content.vue
* in- or rather decrease fontsize of the text by 1px
* default fontsize: 14px
*
* @param number fontsize
*/
this.$root.$on('update-fontsize', (fontsize) => {
this.fontsize = fontsize;
});
this.$root.$on('panels-position', (newPanels) => {
this.panels = newPanels;
});
/**
* listen to item change (user interaction).
* emitted in: *getItemurls*; handler for tree nodes. fired on user interaction
*
* @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: {
/**
* get resources using JavaScript's native fetch api
......@@ -301,46 +343,6 @@ export default {
: this.getManifest(this.config.entrypoint);
},
},
created() {
this.getConfig();
this.init();
this.$q.dark.set('auto');
this.itemurls.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
if (this.config.colors.primary && this.config.colors.secondary && this.config.colors.accent) {
colors.setBrand('primary', this.config.colors.primary);
colors.setBrand('secondary', this.config.colors.secondary);
colors.setBrand('accent', this.config.colors.accent);
}
},
mounted() {
/**
* listen to fontsize change (user interaction). emitted in @/components/content.vue
* in- or rather decrease fontsize of the text by 1px
* default fontsize: 14px
*
* @param number fontsize
*/
this.$root.$on('update-fontsize', (fontsize) => {
this.fontsize = fontsize;
});
this.$root.$on('panels-position', (newPanels) => {
this.panels = newPanels;
});
/**
* listen to item change (user interaction).
* emitted in: *getItemurls*; handler for tree nodes. fired on user interaction
*
* @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);
});
},
};
</script>
<template>
<div>
<q-list>
<q-item v-for="anno in Object.entries(annotations)" :key="anno.id">
<q-item
v-for="anno in Object.entries(annotations)"
:key="anno.id"
>
<q-item-section>
<q-item-label overline class="text-uppercase">{{ anno[0] }}</q-item-label>
<q-item-label
overline
class="text-uppercase"
>
{{ anno[0] }}
</q-item-label>
<q-item-label>{{ anno[1] }}</q-item-label>
</q-item-section>
</q-item>
......@@ -18,15 +26,9 @@ export default {
annotations: Object,
},
data() {
return {
};
},
methods: {
},
mounted() {
return {};
},
mounted() {},
methods: {},
};
</script>
......@@ -3,7 +3,7 @@
<q-btn
flat
title="Change color"
>
>
<q-icon
:name="fasPalette"
size="xs"
......@@ -12,28 +12,28 @@
anchor="center middle"
fit
self="center middle"
>
>
<q-list>
<q-item
v-close-popup
clickable
@click="() => changeColorsTo('default')"
v-close-popup
>
>
<q-item-section>Default</q-item-section>
</q-item>
<q-item
v-if="projectcolors.primary && projectcolors.secondary && projectcolors.accent"
v-close-popup
clickable
@click="() => changeColorsTo('emo')"
v-close-popup
v-if="projectcolors.primary && projectcolors.secondary && projectcolors.accent"
>
>
<q-item-section>EMo</q-item-section>
</q-item>
<q-item
v-close-popup
clickable
@click="() => changeColorsTo('unicorn')"
v-close-popup
>
>
<q-item-section>Unicorn</q-item-section>
</q-item>
</q-list>
......@@ -48,12 +48,15 @@ import { fasPalette } from '@quasar/extras/fontawesome-v5';
export default {
name: 'Color',
props: {
projectcolors: {
type: Object,
required: true,
},
},
created() {
this.fasPalette = fasPalette;
},
props: {
projectcolors: Object,
},
methods: {
changeColorsTo(color) {
if (color === 'default') {
......
......@@ -9,12 +9,12 @@
size="md"
title="Increase Textsize"
@click="increase()"
>
>
<q-icon
:name="fasSearchPlus"
size="sm"
:color="$q.dark.isActive ? 'white' : 'accent'"
/>
/>
</q-btn>
<q-btn
......@@ -25,23 +25,23 @@
title="Decrease Textsize"
:color="$q.dark.isActive ? 'white' : 'accent'"
@click="decrease()"
>
>
<q-icon
:name="fasSearchMinus"
size="sm"
:color="$q.dark.isActive ? 'white' : 'accent'"
/>
/>
</q-btn>
</div>
</div>
<div class="row">
<div
class="scroll-panel"
ref="contentsize"
:id="nodeid"
ref="contentsize"
class="scroll-panel"
v-html="content"
/>
/>
</div>
</div>
</template>
......@@ -69,6 +69,21 @@ export default {
this.$refs.contentsize.style.fontSize = `${this.fontsize}px`;
},
},
async created() {
this.fasSearchPlus = fasSearchPlus;
this.fasSearchMinus = fasSearchMinus;
this.content = await this.request(this.contenturl, 'text').then((data) => data);
},
mounted() {
this.$refs.contentsize.style.fontSize = `${this.fontsize}px`;
this.$root.$on('update-sequence-index', (index) => {
if (this.manifests[index].support) {
this.manifests[index].support.map(this.getSupport);
}
});
},
methods: {
decrease() {
const min = 8;
......@@ -98,20 +113,5 @@ export default {
}
},
},
async created() {
this.fasSearchPlus = fasSearchPlus;
this.fasSearchMinus = fasSearchMinus;
this.content = await this.request(this.contenturl, 'text').then((data) => data);
},
mounted() {
this.$refs.contentsize.style.fontSize = `${this.fontsize}px`;
this.$root.$on('update-sequence-index', (index) => {
if (this.manifests[index].support) {
this.manifests[index].support.map(this.getSupport);
}
});
},
};
</script>
......@@ -4,7 +4,7 @@
reveal
class="row justify-start items-center"
:class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'"
>
>
<Language v-if="standalone" />
<Color :projectcolors="projectcolors" />
<Softwareinfo />
......
......@@ -2,9 +2,10 @@
<q-header
elevated
:class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'"
>
>
<div class="bar row justify-between items-center">
<Infobar v-if="config.headers.info && manifests.length"
<Infobar
v-if="config.headers.info && manifests.length"
class="col-xs-12 q-pl-md"
:collectiontitle="collectiontitle"
:itemlabel="itemlabel"
......@@ -13,7 +14,8 @@
</div>
<div class="bar row q-px-md justify-sm-between">
<Navbar v-if="config.headers.navigation"
<Navbar
v-if="config.headers.navigation"
class="
col
col-md-4
......@@ -27,7 +29,8 @@
:manifests="manifests"
/>
<ToggleIndex v-if="config.headers.toggle"
<ToggleIndex
v-if="config.headers.toggle"
class="
col
col-md-auto
......
......@@ -10,7 +10,7 @@
size="sm"
:color="$q.dark.isActive ? 'white' : 'accent'"
:name="fasChevronRight"
/>
/>
<span>Sheet {{ itemlabel }}</span>
</h2>
</div>
......
......@@ -3,7 +3,7 @@
<q-btn
flat
title="Change language"
>
>
<q-icon
:name="fasLanguage"
size="md"
......@@ -13,13 +13,19 @@
anchor="center middle"
fit
self="center middle"
>
>
<q-list>
<q-item clickable v-close-popup>
<q-item
v-close-popup
clickable
>
<q-item-section>DE</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item
v-close-popup
clickable
>
<q-item-section>{{ lang }}</q-item-section>
</q-item>
</q-list>
......
......@@ -3,12 +3,19 @@
<!-- Collection-->
<q-list v-if="Object.keys(collection).length && config.meta.collection.all">
<q-item>
<q-item-section class="text-h6 caps">Collection</q-item-section>
<q-item-section class="text-h6 caps">
Collection
</q-item-section>
</q-item>
<q-item v-if="config.meta.collection.title">
<q-item-section>
<q-item-label overline class="text-uppercase">Title:</q-item-label>
<q-item-label
overline
class="text-uppercase"
>
Title:
</q-item-label>
<q-item-label>
{{ collection.title ? collection.title[0].title : '' }}
</q-item-label>
......@@ -17,23 +24,37 @@
<q-item v-if="config.meta.collection.collector">
<q-item-section>
<q-item-label overline class="text-uppercase">Collector:</q-item-label>
<q-item-label
overline
class="text-uppercase"
>
Collector:
</q-item-label>
<q-item-label>
{{ collection.collector && collection.collector.name ? collection.collector.name : '' }}
</q-item-label>
</q-item-label>
</q-item-section>
</q-item>
<q-item v-if="config.meta.collection.description">
<q-item-section>
<q-item-label overline class="text-uppercase">Description:</q-item-label>
<q-item-label
overline
class="text-uppercase"
>
Description:
</q-item-label>
<q-item-label>
{{ collection.description }}
</q-item-label>
</q-item-section>
</q-item>
<q-separator v-if="showSeparator(config.meta.collection.all)" inset class="q-mt-md q-mb-sm" />
<q-separator
v-if="showSeparator(config.meta.collection.all)"
inset
class="q-mt-md q-mb-sm"
/>
</q-list>
<!-- Manifest-->
......@@ -46,41 +67,70 @@
<q-item v-if="config.meta.manifest.label">
<q-item-section>
<q-item-label overline class="text-uppercase">Label:</q-item-label>
<q-item-label
overline
class="text-uppercase"
>
Label:
</q-item-label>
<q-item-label>{{ title }}</q-item-label>
</q-item-section>
</q-item>
<q-item v-if="config.meta.manifest.creation">
<q-item-section>
<q-item-label overline class="text-uppercase">Year of creation:</q-item-label>
<q-item-label
overline
class="text-uppercase"
>
Year of creation:
</q-item-label>
<q-item-label>{{ date }}</q-item-label>
</q-item-section>
</q-item>
<q-item v-if="config.meta.manifest.editor">
<q-item-section>
<q-item-label overline class="text-uppercase">Editor:</q-item-label>
<q-item-label
overline
class="text-uppercase"
>
Editor:
</q-item-label>
<q-item-label>{{ editor }}</q-item-label>
</q-item-section>
</q-item>
<q-item v-if="config.meta.manifest.location">
<q-item-section>
<q-item-label overline class="text-uppercase">Current location:</q-item-label>
<q-item-label
overline
class="text-uppercase"
>
Current location:
</q-item-label>
<q-item-label>{{ location }}</q-item-label>
</q-item-section>
</q-item>
<q-item v-if="config.meta.manifest.origin">
<q-item-section>
<q-item-label overline class="text-uppercase">Origin:</q-item-label>
<q-item-label
overline
class="text-uppercase"
>
Origin:
</q-item-label>
<q-item-label>{{ origin }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
<q-separator v-if="showSeparator(config.meta.manifest.all)" inset class="q-mt-md q-mb-sm" />
<q-separator
v-if="showSeparator(config.meta.manifest.all)"
inset
class="q-mt-md q-mb-sm"
/>
<!-- Item-->
<q-list v-if="config.meta.item.all">
......@@ -92,14 +142,24 @@
<q-item v-if="config.meta.item.label">
<q-item-section>
<q-item-label overline class="text-uppercase">Label:</q-item-label>
<q-item-label
overline
class="text-uppercase"
>
Label:
</q-item-label>
<q-item-label>{{ itemlabel }}</q-item-label>
</q-item-section>
</q-item>
<q-item v-if="config.meta.item.language">
<q-item-section>
<q-item-label overline class="text-uppercase">Language:</q-item-label>
<q-item-label
overline
class="text-uppercase"
>
Language:
</q-item-label>
<q-item-label>{{ language }}</q-item-label>
</q-item-section>
</q-item>
......@@ -124,11 +184,6 @@ export default {
sequenceindex: 0,
};
},
methods: {
showSeparator(showme) {
return showme === true;
},
},
computed: {
date() {
return this.manifests[this.sequenceindex]['x-date'];
......@@ -170,5 +225,10 @@ export default {
});
});
},
methods: {
showSeparator(showme) {
return showme === true;
},
},
};
</script>
......@@ -6,8 +6,7 @@
:color="$q.dark.isActive ? 'grey-1 text-grey-10' : 'accent'"
:disabled="itemindex <= 0"
@click="toggleSheet(--itemindex)"
>
>
<q-icon
class="q-pr-sm"
:name="fasArrowLeft"
......@@ -23,7 +22,7 @@
:color="$q.dark.isActive ? 'grey-1 text-grey-10' : 'accent'"
:disabled="itemindex >= itemurls.length - 1"
@click="toggleSheet(++itemindex)"
>
>
{{ captionnext }}
<q-icon
......
......@@ -2,15 +2,19 @@
<figure id="openseadragon">
<nav class="sticky">
<q-btn
v-for="(btn, idx) in buttons" :key="idx"
v-for="(btn, idx) in buttons"
:id="btn.id"
:key="idx"
class="q-mr-sm q-mb-sm"
flat
round
size="md"
:color="$q.dark.isActive ? 'white' : 'accent'"
:id="btn.id"
>
<q-icon size="sm" :name="btn.svg" />
>
<q-icon
size="sm"
:name="btn.svg"
/>
</q-btn>
</nav>
</figure>
......
<template>
<div class="col-xs-auto">
<q-btn
flat
label=""
title="Project Info"
@click="infobox = true"
>
<q-icon size="xs" :name="fasInfoCircle" />