content.vue 3.07 KB
Newer Older
schneider210's avatar
schneider210 committed
1
<template>
2
3
4
5
6
7
8
9
10
11
  <div>
    <div class="row sticky">
      <div>
        <q-btn
          class="q-mr-sm q-mb-sm cursor-pointer"
          flat
          round
          size="md"
          title="Increase Textsize"
          @click="increase()"
nwindis's avatar
nwindis committed
12
        >
nwindis's avatar
nwindis committed
13
14
15
16
          <q-icon
            :name="fasSearchPlus"
            size="sm"
            :color="$q.dark.isActive ? 'white' : 'accent'"
nwindis's avatar
nwindis committed
17
          />
18
        </q-btn>
19

20
21
22
23
24
25
        <q-btn
          class="q-mr-sm q-mb-sm cursor-pointer"
          flat
          round
          size="md"
          title="Decrease Textsize"
nwindis's avatar
nwindis committed
26
          :color="$q.dark.isActive ? 'white' : 'accent'"
27
          @click="decrease()"
nwindis's avatar
nwindis committed
28
        >
nwindis's avatar
nwindis committed
29
30
31
32
          <q-icon
            :name="fasSearchMinus"
            size="sm"
            :color="$q.dark.isActive ? 'white' : 'accent'"
nwindis's avatar
nwindis committed
33
          />
34
35
36
        </q-btn>
      </div>
    </div>
37

38
    <div class="row">
schneider210's avatar
schneider210 committed
39
      <!-- eslint-disable -- https://eslint.vuejs.org/rules/no-v-html.html -->
nwindis's avatar
nwindis committed
40
      <div
41
        :class="['scroll-panel', config.rtl ? 'rtl' : '']"
nwindis's avatar
nwindis committed
42
        :id="nodeid"
nwindis's avatar
nwindis committed
43
        ref="contentsize"
nwindis's avatar
nwindis committed
44
        v-html="content"
nwindis's avatar
nwindis committed
45
      />
46
47
    </div>
  </div>
schneider210's avatar
schneider210 committed
48
49
50
</template>

<script>
schneider210's avatar
schneider210 committed
51
52
import { fasSearchPlus, fasSearchMinus } from '@quasar/extras/fontawesome-v5';

schneider210's avatar
schneider210 committed
53
54
55
export default {
  name: 'Content',
  props: {
schneider210's avatar
schneider210 committed
56
57
58
59
    config: {
      type: Object,
      default: () => {},
    },
schneider210's avatar
schneider210 committed
60
61
62
63
64
65
66
67
68
69
70
71
    fontsize: {
      type: Number,
      default: () => 14,
    },
    manifests: {
      type: Array,
      default: () => [],
    },
    request: {
      type: Function,
      default: null,
    },
72
73
74
75
    transcription: {
      type: String,
      default: () => '',
    },
schneider210's avatar
schneider210 committed
76
77
78
79
  },
  data() {
    return {
      content: '',
80
      nodeid: '__text',
81
      sequenceindex: 0,
schneider210's avatar
schneider210 committed
82
83
    };
  },
84
85
86
87
88
  watch: {
    fontsize() {
      this.$refs.contentsize.style.fontSize = `${this.fontsize}px`;
    },
  },
nwindis's avatar
nwindis committed
89
90
91
92
  async created() {
    this.fasSearchPlus = fasSearchPlus;
    this.fasSearchMinus = fasSearchMinus;

93
    this.content = await this.request(this.transcription, 'text').then((data) => data);
nwindis's avatar
nwindis committed
94
95
96
97
98
99
  },
  mounted() {
    this.$refs.contentsize.style.fontSize = `${this.fontsize}px`;

    this.$root.$on('update-sequence-index', (index) => {
      if (this.manifests[index].support) {
100
        // this.manifests[index].support.map(this.getSupport);
nwindis's avatar
nwindis committed
101
102
103
      }
    });
  },
104
  methods: {
schneider210's avatar
schneider210 committed
105
106
107
108
109
    decrease() {
      const min = 8;
      let textsize = this.fontsize;

      textsize -= textsize > min ? 1 : 0;
110
      this.$root.$emit('update-fontsize', textsize);
schneider210's avatar
schneider210 committed
111
112
113
114
115
116
    },
    increase() {
      const max = 32;
      let textsize = this.fontsize;

      textsize += textsize < max ? 1 : 0;
117
      this.$root.$emit('update-fontsize', textsize);
schneider210's avatar
schneider210 committed
118
    },
119
120
121
122
123
124
125
126
127
128
129
130
131
132
    getSupport(obj) {
      if (obj.type === 'css') {
        this.request(obj.url, 'text')
          .then((data) => {
            const styleElement = document.createElement('style');

            styleElement.innerText = data.replace(
              /^|}|,/gm, (x) => x.concat('#', this.nodeid, ' '),
            );
            document.head.appendChild(styleElement);
          });
      }
    },
  },
schneider210's avatar
schneider210 committed
133
134
};
</script>
schneider210's avatar
schneider210 committed
135
136

<style lang="scss" scoped>
137
  .rtl {
schneider210's avatar
schneider210 committed
138
139
140
    direction: rtl;
  }
</style>