Merge branch 'feature/#176-text-fonts' into 'develop'

feature/#176: Enable TIDO to display font provided by support object

See merge request !190

src/components/annotations/annotations.vue

@@ -21,6 +21,7 @@
 
     <AnnotationList
       v-if="currentAnnotations.length"
+      class="custom-font"
       :configured-annotations="currentAnnotations"
       :get-icon="getIcon"
       :status-check="statusCheck"

src/components/content.vue

@@ -53,12 +53,14 @@
       </q-btn>
     </div>
 
-    <!-- eslint-disable -- https://eslint.vuejs.org/rules/no-v-html.html -->
-    <div
-      :class="['item-content', config.rtl ? 'rtl' : '']"
-      ref="contentsize"
-      v-html="content"
-    />
+    <div class="custom-font item-content">
+      <!-- eslint-disable -- https://eslint.vuejs.org/rules/no-v-html.html -->
+      <div
+        :class="{'rtl': config.rtl}"
+        ref="contentsize"
+        v-html="content"
+      />
+    </div>
   </div>
 </template>
 
@@ -122,7 +124,7 @@ export default {
       const data = await this.request(url, 'text');
 
       if (this.supportType) {
-        this.getSupport(this.manifests[0].support);
+        await this.getSupport(this.manifests[0].support);
       }
 
       this.content = data;
@@ -167,19 +169,45 @@ export default {
 
       this.$root.$emit('update-fontsize', textsize);
     },
-    getSupport(support) {
+    async getSupport(support) {
+      const promises = [];
+
       support.forEach((s) => {
-        this.request(s.url, 'text')
-          .then(() => {
-            const supportUrl = document.createElement('link');
+        const hasElement = document.getElementById(s.url);
 
-            if (s.type === 'css') supportUrl.setAttribute('rel', 'stylesheet');
+        if (!hasElement) {
+          if (s.type === 'font') {
+            promises.push(this.loadFont(s.url));
+          } else {
+            const supportUrl = document.createElement('link');
 
+            supportUrl.setAttribute('rel', 'stylesheet');
+            supportUrl.setAttribute('type', 'text/css');
             supportUrl.setAttribute('href', s.url);
+            supportUrl.setAttribute('id', s.url);
 
             document.head.appendChild(supportUrl);
-          });
+          }
+        }
       });
+
+      await Promise.all(promises);
+    },
+    async loadFont(url) {
+      let style = 'normal';
+      let weight = 'normal';
+
+      if (url.endsWith('italic.woff')) {
+        style = 'italic';
+      }
+      if (url.endsWith('bold.woff')) {
+        weight = 700; // https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight
+      }
+
+      const fontFace = new FontFace('tido', `url(${url})`, { style, weight }); // 'tido' or any family name to represent fonts
+      const loadedFont = await fontFace.load();
+
+      document.fonts.add(loadedFont);
     },
   },
 };

src/css/global.scss

@@ -19,3 +19,8 @@
   outline: none;
   width: 100%;
 }
+
+.custom-font,
+.custom-font * {
+  font-family: 'tido';
+}

src/index.template.html

@@ -31,7 +31,7 @@
     -->
     <script id="tido-config" type="application/json">
     {
-			"entrypoint": "",
+			"entrypoint": "https://ahikar-dev.sub.uni-goettingen.de/api/textapi/ahikar/syriac/collection.json",
       "annotations": {
         "show": true,
         "types": [