Commit ecaf999d authored by schneider210's avatar schneider210
Browse files

Merge branch 'feature/#17-text-panel-zoom' into 'develop'

Feature/#17 text panel zoom

See merge request subugoe/emo/Qviewer!12
parents c3f87d0d 809e75c7
Pipeline #138350 passed with stages
in 2 minutes and 11 seconds
......@@ -15,6 +15,7 @@
:collection="collection"
:config="config"
:contenturl="contenturl"
:fontsize="fontsize"
:imageurl="imageurl"
:language="itemlanguage"
:manifests="manifests"
......@@ -47,6 +48,7 @@ export default {
collectiontitle: '',
contenturl: '',
config: {},
fontsize: 14,
imageurl: '',
itemlanguage: '',
itemurl: '',
......@@ -194,6 +196,9 @@ export default {
this.$root.$on('update-panel-status', (status) => {
this.status = status;
});
this.$root.$on('change-fontsize', (fontsize) => {
this.fontsize = fontsize;
});
},
};
</script>
<template>
<div :id="nodeid" v-html="content"></div>
<div style="margin: 16px;">
<q-btn
class="q-mr-sm q-mb-sm cursor-pointer"
color="grey-8"
round
flat
size="md"
>
<q-icon
size="sm"
:name="fasSearchPlus"
title="Increase"
@click="increase()"
/>
</q-btn>
<q-btn
class="q-mr-sm q-mb-sm cursor-pointer"
color="grey-8"
round
flat
size="md"
>
<q-icon
size="sm"
:name="fasSearchMinus"
title="Decrease"
@click="decrease()"
/>
</q-btn>
<div class="content" :style="`font-size: ${fontsize}px`" :id="nodeid" v-html="content"></div>
</div>
</template>
<script>
import { fasSearchPlus, fasSearchMinus } from '@quasar/extras/fontawesome-v5';
export default {
name: 'Content',
props: {
contenturl: String,
fontsize: Number,
manifests: Array,
request: Function,
},
......@@ -18,6 +52,20 @@ export default {
};
},
methods: {
decrease() {
const min = 8;
let textsize = this.fontsize;
textsize -= textsize > min ? 1 : 0;
this.$root.$emit('change-fontsize', textsize);
},
increase() {
const max = 32;
let textsize = this.fontsize;
textsize += textsize < max ? 1 : 0;
this.$root.$emit('change-fontsize', textsize);
},
getSupport(obj) {
if (obj.type === 'css') {
this.request(obj.url, 'text')
......@@ -33,6 +81,9 @@ export default {
},
},
async created() {
this.fasSearchPlus = fasSearchPlus;
this.fasSearchMinus = fasSearchMinus;
this.content = await this.request(this.contenturl, 'text').then((data) => data);
},
mounted() {
......@@ -46,7 +97,7 @@ export default {
</script>
<style scoped>
div {
.content {
margin: 16px;
}
</style>
......@@ -5,7 +5,6 @@
v-for="(btn, idx) in buttons" :key="idx"
class="q-mr-sm q-mb-sm"
color="grey-8"
style="background: #FFFFFF"
round
flat
size="md"
......
......@@ -21,6 +21,7 @@
<Content
:key="contenturl"
:contenturl="contenturl"
:fontsize="fontsize"
:manifests="manifests"
:request="request"
>
......@@ -81,6 +82,7 @@ export default {
collection: Object,
config: Object,
contenturl: String,
fontsize: Number,
imageurl: String,
language: String,
manifests: 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