Merge pull request #81 from gtt-project/ftr/cleanup-fonts

Better font management

Author: sanak

lib/redmine_gtt/hooks/view_layouts_base_html_head_hook.rb

@@ -7,7 +7,6 @@ class ViewLayoutsBaseHtmlHeadHook < Redmine::Hook::ViewListener
       def view_layouts_base_html_head(context={})
         tags = [];
 
-        tags << stylesheet_link_tag("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css")
         tags << javascript_include_tag('main.js', :plugin => 'redmine_gtt')
         return tags.join("\n")
       end

package.json

@@ -20,6 +20,7 @@
   },
   "homepage": "https://github.com/gtt-project/redmine_gtt#readme",
   "dependencies": {
+    "font-awesome": "^4.7.0",
     "ol": "^6.5.0",
     "ol-ext": "^3.1.19"
   },

src/components/fontmaki-def.ts

@@ -1141,33 +1141,36 @@ export class GttClient {
 
   reloadFontSymbol() {
     if ('fonts' in document) {
-      (document as any).fonts.addEventListener('loadingdone', () => {
-        let loaded = false;
-        (document as any).fonts.forEach((font: any) => {
-          if (font.family === 'mcr-icons' || font.family === 'fontmaki') {
-            loaded = true
-          }
-        })
-        if (loaded) {
-          this.maps.forEach(m => {
-            const layers = m.getLayers()
-            layers.forEach(layer => {
-              if (layer instanceof VectorLayer &&
-                  layer.getKeys().indexOf("title") >= 0 &&
-                  layer.get("title") === "Features") {
-                const features = (layer as any).getSource().getFeatures()
-                const index = features.findIndex((feature: any) => {
-                  return feature.getGeometry().getType() === "Point"
-                })
-                if (index >= 0) {
-                  console.log("Reloading Features layer")
-                  layer.changed()
+      const symbolFonts: Array<String> = []
+      for (const font in FontSymbol.prototype.defs.fonts) {
+        symbolFonts.push(font)
+      }
+      if (symbolFonts.length > 0) {
+        (document as any).fonts.addEventListener('loadingdone', (e: any) => {
+          const fontIndex = e.fontfaces.findIndex((font: any) => {
+            return symbolFonts.indexOf(font.family) >= 0
+          })
+          if (fontIndex >= 0) {
+            this.maps.forEach(m => {
+              const layers = m.getLayers()
+              layers.forEach(layer => {
+                if (layer instanceof VectorLayer &&
+                    layer.getKeys().indexOf("title") >= 0 &&
+                    layer.get("title") === "Features") {
+                  const features = (layer as any).getSource().getFeatures()
+                  const pointIndex = features.findIndex((feature: any) => {
+                    return feature.getGeometry().getType() === "Point"
+                  })
+                  if (pointIndex >= 0) {
+                    console.log("Reloading Features layer")
+                    layer.changed()
+                  }
                 }
-              }
+              })
             })
-          })
-        }
-      })
+          }
+        })
+      }
     }
   }
 

src/components/gtt-client.ts

@@ -15,7 +15,7 @@ export const gtt_setting = ():void => {
           const selected = selectedValue === i
           element.append(new Option(i, i, selected, selected))
           if (selected) {
-            element.nextElementSibling.className = i
+            element.nextElementSibling.className = "fa " + i
           }
         }
       }
@@ -25,7 +25,7 @@ export const gtt_setting = ():void => {
     element.addEventListener('change', (ev) => {
       const currentTarget = ev.currentTarget as HTMLSelectElement
       const trackerId = currentTarget.id
-      document.querySelector(`#icon_${trackerId}`).className = currentTarget.value
+      document.querySelector(`#icon_${trackerId}`).className = "fa " + currentTarget.value
     })
   })
 }