Merge pull request #186 from gtt-project/ftr/custom-icons

Support custom icons

Author: dkastl

src/components/gtt-setting.ts

@@ -11,11 +11,24 @@ export const gtt_setting = ():void => {
       const wrapper = $('<div>', {
         text: ''
       })
-      $('<i>', {
-        class: "ui-icons material-icons",
-        title: item.label,
-        text: item.value
-      }).prependTo(wrapper)
+      const style = item.optgroup.toLowerCase().split(' ').join('-')
+      switch (style) {
+        case 'material-icons':
+          $('<i>', {
+            class: 'ui-icons ' + style,
+            title: item.label,
+            text: item.value
+          }).prependTo(wrapper)
+          break;
+
+        default:
+          $('<i>', {
+            class: 'ui-icons ' + style + ' icon-' + item.value,
+            title: item.label,
+            text: ''
+          }).prependTo(wrapper)
+          break;
+      }
       return li.append(wrapper).appendTo(ul)
     }
   });
@@ -25,44 +38,58 @@ export const gtt_setting = ():void => {
     const selectedValue = element.value
     if (element.length === 1 && selectedValue !== "") {
       element.remove(0)
-      element.append(new Option("", "", false, false))
+      // element.append(new Option("", "", false, false))
     }
     for (let font in FontSymbol.prototype.defs.fonts) {
+      const optgroup = document.createElement('optgroup')
+      optgroup.label = FontSymbol.prototype.defs.fonts[font].name
       for (let i in glyph) {
         if (glyph[i].font == font) {
           const selected = selectedValue === i
           const words = i.split('_')
           const text = words.map((word) => {
             return word[0].toUpperCase() + word.substring(1)
-          }).join(" ")
-          element.append(new Option(text, i, selected, selected))
+          }).join(' ')
+          optgroup.appendChild(new Option(text, i, selected, selected))
           if (selected) {
-            element.nextElementSibling.className = "material-icons"
-            element.nextElementSibling.textContent = i
+            const style = font.toLowerCase().split(' ').join('-')
+            switch (style) {
+              case 'material-icons':
+                element.nextElementSibling.className = style
+                element.nextElementSibling.textContent = i
+                break;
+
+              default:
+                element.nextElementSibling.className = style + ' icon-' + i
+                element.nextElementSibling.textContent = ''
+                break;
+            }
           }
         }
       }
+      element.append(optgroup)
     }
 
     // Apply better Selector styling with jQuery UI (available in Redmine)
     $(element)
       .selectmenu({
         change: function(event: any, data: any) {
-          console.log(data.item.value)
-          document.querySelector(`#icon_${element.id}`).textContent = data.item.value
+          const style = data.item.optgroup.toLowerCase().split(' ').join('-')
+          switch (style) {
+            case 'material-icons':
+              document.querySelector(`#icon_${element.id}`).className = style
+              document.querySelector(`#icon_${element.id}`).textContent = data.item.value
+              break;
+
+            default:
+              document.querySelector(`#icon_${element.id}`).className = style + ' icon-' + data.item.value
+              document.querySelector(`#icon_${element.id}`).textContent = ''
+              break;
+          }
         }
       })
       .selectmenu('menuWidget')
       .addClass('select-overflow')
       .addClass('ui-menu-icons customicons')
   })
-
-  // document.querySelectorAll("[id^='settings_tracker_']").forEach((element: HTMLSelectElement) => {
-  //   element.addEventListener('change', (ev) => {
-  //     const currentTarget = ev.currentTarget as HTMLSelectElement
-  //     const trackerId = currentTarget.id
-  //     document.querySelector(`#icon_${trackerId}`).className = "material-icons"
-  //     document.querySelector(`#icon_${trackerId}`).textContent = currentTarget.value
-  //   })
-  // })
 }

src/index.ts

@@ -2,10 +2,14 @@ import 'ol/ol.css'
 import 'ol-ext/dist/ol-ext.min.css'
 import './stylesheets/app.scss'
 
+// Custom Icons
+import './stylesheets/custom-icons.css'
+import './stylesheets/CustomIconsDef.js'
+
 // Material Design Icons
 // https://github.com/marella/material-design-icons/tree/main/font#readme
 import '@material-design-icons/font/filled.css'
-import './fonts/MaterialDesignDef.js'
+import './stylesheets/MaterialDesignDef.js'
 
 import { GttClient } from './components/gtt-client'
 import { gtt_setting } from './components/gtt-setting'

src/stylesheets/CustomIconsDef.js

@@ -0,0 +1,15 @@
+import ol_style_FontSymbol from 'ol-ext/style/FontSymbol'
+
+ol_style_FontSymbol.addDefs(
+{	"font":"custom-icons",
+	"name":"Custom Icons",
+	"copyright":"Apache-2.0",
+	"prefix": "gtt"
+},
+{ "lobsta": "\uf101",
+  "park_bench": "\uf102",
+  "road": "\uf103",
+  "waste": "\uf104"
+});
+
+export default ol_style_FontSymbol

src/fonts/MaterialDesignDef.js renamed to src/stylesheets/MaterialDesignDef.js

@@ -0,0 +1,48 @@
+@font-face {
+  font-family: "custom-icons";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url("./custom-icons.woff2") format("woff2");
+}
+
+.custom-icons {
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "liga";
+}
+
+i[class^="icon-"]:before, i[class*=" icon-"]:before {
+  font-family: custom-icons !important;
+  font-style: normal;
+  font-weight: normal !important;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-lobsta:before {
+  content: "\f101";
+}
+.icon-park_bench:before {
+  content: "\f102";
+}
+.icon-road:before {
+  content: "\f103";
+}
+.icon-waste:before {
+  content: "\f104";
+}