Feature/#17 text panel zoom

src/App.vue

@@ -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>

src/components/content.vue

 <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>

src/components/openseadragon.vue

@@ -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"

src/views/quasar-mainview.vue

@@ -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,