App.vue 9.92 KB
Newer Older
Mathias Goebel's avatar
Mathias Goebel committed
1
<template>
2
3
4
5
6
7
8
  <q-layout
    id="q-app"
    view="hHh Lpr fFf"
    class="app"
    style="height: 100vh;"
  >
    <q-header>
nwindis's avatar
nwindis committed
9
10
      <Header
        v-if="config.headers.all"
11
        :collectiontitle="collectiontitle"
12
        :config="config"
13
        :imageurl="imageurl"
14
        :item="item"
15
16
        :itemurls="itemurls"
        :manifests="manifests"
17
        :panels="panels"
18
      />
19
    </q-header>
20

21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
    <q-page-container class="root">
      <router-view
        :collection="collection"
        :config="config"
        :contenttypes="contentTypes"
        :contenturls="contenturls"
        :fontsize="fontsize"
        :imageurl="imageurl"
        :item="item"
        :labels="config.labels"
        :manifests="manifests"
        :panels="panels"
        :request="request"
        :tree="tree"
      />
    </q-page-container>
37

38
    <q-footer>
nwindis's avatar
DUMP    
nwindis committed
39
40
      <Footer
        :projectcolors="config.colors"
schneider210's avatar
schneider210 committed
41
        :standalone="config.standalone"
nwindis's avatar
nwindis committed
42
      />
43
44
    </q-footer>
  </q-layout>
Mathias Goebel's avatar
Mathias Goebel committed
45
46
47
</template>

<script>
schneider210's avatar
schneider210 committed
48
import { colors } from 'quasar';
schneider210's avatar
schneider210 committed
49
import Footer from '@/components/footer.vue';
50
import Header from '@/components/header.vue';
51
import Panels from '@/mixins/panels';
52

Mathias Goebel's avatar
Mathias Goebel committed
53
export default {
54
  name: 'TIDO',
55
56
  components: {
    Header,
57
    Footer,
58
  },
59
  mixins: [Panels],
60
61
62
  data() {
    return {
      collection: {},
63
      collectiontitle: '',
64
      config: {},
65
      contentTypes: [],
66
      contenturls: [],
schneider210's avatar
schneider210 committed
67
      fontsize: 14,
68
      imageurl: '',
69
      isCollection: false,
70
      item: {},
71
72
73
74
75
76
      itemurl: '',
      itemurls: [],
      manifests: [],
      tree: [],
    };
  },
nwindis's avatar
nwindis committed
77
78
79
80
81
  created() {
    this.getConfig();
    this.init();
    this.itemurls.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));

schneider210's avatar
schneider210 committed
82
83
    this.$q.dark.set('auto');

nwindis's avatar
nwindis committed
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
    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);
    });
  },
119
  methods: {
schneider210's avatar
schneider210 committed
120
121
122
123
124
125
126
127
128
129
    /**
      * get resources using JavaScript's native fetch api
      * caller: *getCollection()*, *getItemData()*, *getManifest()*
      *         *@/components/content.vue::getSupport()*, *@/components/content.vue::created-hook*
      *
      * @param string url
      * @param string responsetype
      *
      * @return promise data
      */
130
131
132
133
134
135
    async request(url, responsetype = 'json') {
      const response = await fetch(url);
      const data = await (responsetype === 'text' ? response.text() : response.json());

      return data;
    },
schneider210's avatar
schneider210 committed
136
137
138
139
140
141
142
143
    /**
      * get collection data according to 'entrypoint'
      * (number of requests equal the number of manifests contained within a collection)
      * initialize the tree's root node
      * caller: *init()*
      *
      * @param string url
      */
144
    getCollection(url) {
145
146
      this.isCollection = true;

147
148
149
      this.request(url)
        .then((data) => {
          this.collection = data;
150
          this.collectiontitle = this.getLabel(data);
151

152
153
154
155
156
157
          this.tree.push(
            {
              children: [],
              handler: (node) => {
                this.$root.$emit('update-tree-knots', node.label);
              },
158
159
              label: this.collectiontitle,
              'label-key': this.collectiontitle,
160
161
162
              selectable: false,
            },
          );
163
164
165
166
167
168

          if (Array.isArray(data.sequence)) {
            data.sequence.forEach((seq) => this.getManifest(seq.id));
          }
        });
    },
schneider210's avatar
schneider210 committed
169
170
171
172
    /**
      * get config object (JSON) from index.html
      * caller: *created-hook*
      */
173
    getConfig() {
174
      this.config = JSON.parse(document.getElementById('tido-config').text);
175
    },
176
    /**
177
      * filter all urls that match either of the MIME types "application/xhtml+xml" and "text/html"
178
179
180
181
182
183
      * caller: *getItemData()*
      *
      * @param string array
      *
      * @return array
      */
184
185
186
187
    getContentUrl(content) {
      const urls = [];

      if (Array.isArray(content) && content.length) {
188
189
        this.contentTypes = [];

190
191
192
        content.forEach((c) => {
          if (c.type.match(/(application\/xhtml\+xml|text\/html)/)) {
            urls.push(c.url);
193
194

            this.contentTypes.push(c.type.split('type=')[1]);
195
196
197
198
          }
        });
      }
      return urls;
199
    },
schneider210's avatar
schneider210 committed
200
201
202
203
204
205
    /**
      * fetch all data provided on 'item level'
      * caller: *mounted-hook*, *getManifest()*
      *
      * @param string url
      */
206
    getItemData(url) {
207
208
      this.request(url)
        .then((data) => {
209
          this.item = data;
210

211
          this.contenturls = this.getContentUrl(data.content);
212
          this.imageurl = data.image.id || '';
213
214
        });
    },
schneider210's avatar
schneider210 committed
215
216
217
218
219
220
221
    /**
      * caller: *getItemUrls()*
      *
      * @param string nodelabel
      *
      * @return number idx
      */
222
223
224
225
226
227
228
229
230
    getItemIndex(nodelabel) {
      let idx = 0;
      this.itemurls.forEach((item, index) => {
        if (item === nodelabel) {
          idx = index;
        }
      });
      return idx;
    },
231
232
233
234
235
236
237
238
239
240
241
    /**
      * extract the 'label part' of the itemurl
      * caller: *getItemUrls()*
      *
      * @param string itemurl
      *
      * @return string 'label part'
      */
    getItemLabel(itemurl) {
      return itemurl.replace(/.*-(.*)\/latest.*$/, '$1');
    },
schneider210's avatar
schneider210 committed
242
243
244
245
246
247
248
249
250
    /**
      * get all itemurls hosted by each manifest's sequence to populate the aprropriate tree node
      * caller: *getManifest()*
      *
      * @param array sequence
      * @param string label
      *
      * @return array urls
      */
251
252
    getItemUrls(sequence, label) {
      const urls = [];
253

254
255
      sequence.forEach((item) => {
        const itemLabel = this.getItemLabel(item.id);
256

257
258
        urls.push(
          {
259
260
            label: item.id,
            'label-key': `${this.config.labels.item} ${itemLabel}`,
261
262
263
264
            handler: (node) => {
              if (this.itemurl === node.label) {
                return;
              }
schneider210's avatar
schneider210 committed
265
266
267
              // node.label === itemurl
              // @param label === manifest label; passed by getManifest()
              this.$root.$emit('update-item', node.label, this.getSequenceIndex(label));
268
              this.$root.$emit('update-item-index', this.getItemIndex(node.label));
269
              this.$root.$emit('update-sequence-index', this.getSequenceIndex(label));
270
271
272
273
274
275
            },
          },
        );
      });
      return urls;
    },
schneider210's avatar
schneider210 committed
276
277
278
279
280
281
282
283
    /**
      * get the collection label, if provided; otherwise get the manifest label
      * caller: *getCollection()*, *getManifest()*
      *
      * @param object data
      *
      * @return string 'label'
      */
284
285
286
287
288
289
    getLabel(data) {
      if (Object.keys(this.collection).length) {
        return data.title && data.title[0].title ? data.title[0].title : data.label;
      }
      return data.label ? data.label : 'Manifest <small>(No label available)</small>';
    },
schneider210's avatar
schneider210 committed
290
291
292
293
294
295
    /**
      * get all the data provided on 'manifest level'
      * caller: *init()*, *getCollection()*
      *
      * @param string url
      */
296
297
298
    getManifest(url) {
      this.request(url)
        .then((data) => {
299
300
301
302
303
          // if the entrypoint points to a single manifest, initialize the tree
          if (this.isCollection === false) {
            this.tree.push({ label: '', 'label-key': this.config.labels.manifest, children: [] });
          }

304
305
306
307
308
309
310
311
312
313
          if (!Array.isArray(data.sequence)) {
            data.sequence = [data.sequence];
          }

          if (data.sequence[0] !== 'undefined') {
            data.sequence.map((seq) => this.itemurls.push(seq.id));
          }
          this.manifests.push(data);

          this.tree[0].children.push(
314
315
            {
              children: this.getItemUrls(data.sequence, data.label),
316
317
318
319
320
321
              label: data.label,
              'label-key': data.label,
              handler: (node) => {
                this.$root.$emit('update-tree-knots', node.label);
              },
              selectable: false,
322
            },
323
324
325
326
          );
          // make sure that urls are set just once on init
          if (!this.itemurl && data.sequence[0]) {
            this.itemurl = data.sequence[0].id;
327
            this.getItemData(data.sequence[0].id);
328
329
330
          }
        });
    },
schneider210's avatar
schneider210 committed
331
332
333
334
335
336
337
    /**
      * caller: *getItemUrls()*
      *
      * @param string label
      *
      * @return number index
      */
338
    getSequenceIndex(label) {
339
340
      let index = 0;
      this.manifests.forEach((manifest, idx) => {
341
        if (manifest.label === label) {
342
343
344
345
346
          index = idx;
        }
      });
      return index;
    },
schneider210's avatar
schneider210 committed
347
348
349
350
351
352
    /**
      * decide whether to start with a collection or a single manifest
      * caller: *created-hook*
      *
      * @return function getCollection() | getManifest()
      */
353
354
355
356
357
358
359
    init() {
      return this.config.entrypoint.match(/collection.json\s?$/)
        ? this.getCollection(this.config.entrypoint)
        : this.getManifest(this.config.entrypoint);
    },
  },

Mathias Goebel's avatar
Mathias Goebel committed
360
361
};
</script>
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377

<style scoped>
.app {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}

.root {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}
</style>