Merge pull request #343 from gtt-project/dkastl/issue342

Improves font icon handling

Author: dkastl

app/views/redmine_gtt/hooks/_view_layouts_base_html_head.html.erb

@@ -1,7 +1 @@
-<%= tag.meta(
-  name: 'gtt-font-custom-icons',
-  content: asset_path('plugin_assets/redmine_gtt/custom-icons.woff2')) %>
-
-<%= tag.meta(
-  name: 'gtt-font-mdi-webfont',
-  content: asset_path('plugin_assets/redmine_gtt/materialdesignicons-webfont.woff2')) %>
+<% # Header hook %>

package.json

@@ -22,12 +22,12 @@
   "dependencies": {
     "@juggle/resize-observer": "^3.4.0",
     "@mdi/font": "^7.4.47",
-    "dompurify": "^3.2.2",
+    "dompurify": "^3.2.3",
     "fontfaceobserver": "^2.3.0",
     "geojson": "^0.5.0",
     "ol": "^10.3.1",
     "ol-ext": "^4.0.24",
-    "ol-mapbox-style": "^12.3.5"
+    "ol-mapbox-style": "^12.4.0"
   },
   "devDependencies": {
     "@types/dompurify": "^3.2.0",
@@ -38,7 +38,7 @@
     "@types/jqueryui": "^1.12.23",
     "@types/ol-ext": "npm:@siedlerchr/types-ol-ext",
     "css-loader": "^7.1.2",
-    "sass": "^1.82.0",
+    "sass": "^1.83.0",
     "sass-loader": "^16.0.4",
     "style-loader": "^4.0.0",
     "ts-loader": "^9.5.1",

src/styles/icons/custom/custom-icons-def.ts

@@ -8,37 +8,7 @@ const iconMappings: { [key: string]: any } = {
   'waste': '\uf104'
 };
 
-// Read the meta tag for custom-icons
-const customIconsMeta = document.querySelector('meta[name="gtt-font-custom-icons"]');
-const customIconsUrl = customIconsMeta ? customIconsMeta.getAttribute('content') : 'data:application/font-woff2;base64,'; // Provide a data URL for an empty font
-
-// Dynamically create the @font-face rule
-if (customIconsUrl) {
-  // Remove the existing @font-face rule
-  const styleSheets = document.styleSheets;
-  for (let i = 0; i < styleSheets.length; i++) {
-    const cssRules = styleSheets[i].cssRules || styleSheets[i].rules;
-    for (let j = 0; j < cssRules.length; j++) {
-      const rule = cssRules[j];
-      if (rule instanceof CSSFontFaceRule && rule.style.fontFamily === 'custom-icons') {
-        styleSheets[i].deleteRule(j);
-        break;
-      }
-    }
-  }
-
-  const style = document.createElement('style');
-  style.innerHTML = `
-    @font-face {
-      font-family: 'custom-icons';
-      font-style: normal;
-      font-weight: 400;
-      font-display: block;
-      src: url(${customIconsUrl}) format('woff2');
-    }
-  `;
-  document.head.appendChild(style);
-}
+const customIconsUrl = 'RAILS_ASSET_URL("custom-icons.woff2")';
 
 // Define the font face
 let customFont: FontFace;

src/styles/icons/custom/custom-icons.css renamed to src/styles/icons/custom/custom-icons.scss

@@ -1,9 +1,11 @@
+$custom-icons-path: 'RAILS_ASSET_URL("custom-icons.woff2")';
+
 @font-face {
   font-family: "custom-icons";
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("./custom-icons.woff2") format("woff2");
+  src: url(#{$custom-icons-path}) format("woff2");
 }
 
 .custom-icons {

src/styles/icons/material-design/material-design-def.ts

@@ -7300,13 +7300,11 @@ const iconMappings: { [key: string]: any } = {
   "zodiac-virgo": "\u{F0A88}",
 };
 
-// Read the meta tag for MDI webfont
-const mdiWebfontMeta = document.querySelector('meta[name="gtt-font-mdi-webfont"]');
-const mdiWebfontUrl = mdiWebfontMeta ? mdiWebfontMeta.getAttribute('content') : 'data:application/font-woff2;base64,'; // Provide a data URL for an empty font
+const mdiWebfontUrl = 'RAILS_ASSET_URL("materialdesignicons-webfont.woff2")';
 
 // Dynamically create the @font-face rule
 const style = document.createElement('style');
-style.type = 'text/css';
+// style.type = 'text/css';
 style.innerHTML = `
   @font-face {
     font-family: 'Material Design Icons';

src/styles/index.ts

@@ -8,14 +8,14 @@ import 'ol-ext/dist/ol-ext.min.css';
 import './scss/app.scss';
 
 // Import custom icons CSS file for adding custom icon designs in the application
-import './icons/custom/custom-icons.css';
+import './icons/custom/custom-icons.scss';
 
 // Import custom icons definition JS file to define icon names, sizes, and variations
 import './icons/custom/custom-icons-def';
 
 // Import Material Design icons filled style CSS for using a large collection of Google-designed icons
 // import '@material-design-icons/font/filled.css';
-import '@mdi/font/scss/materialdesignicons.scss';
+import '@mdi/font/css/materialdesignicons.css';
 
 // Import Material Design icons definition JS file to define icon names and variations
 import './icons/material-design/material-design-def';

webpack.config.js

@@ -3,9 +3,14 @@ const path = require('path');
 // Define loaders
 // Loaders for processing Sass files
 const sassLoaders = [
-  'style-loader', // Creates `style` nodes from JS strings
-  'css-loader', // Translates CSS into CommonJS
-  'sass-loader', // Compiles Sass to CSS
+  'style-loader',
+  {
+    loader: 'css-loader',
+    options: {
+      url: false, // Prevent css-loader from interpreting URLs
+    },
+  },
+  'sass-loader',
 ];
 
 // Loaders for processing CSS files

yarn.lock

@@ -616,13 +616,20 @@ detect-libc@^1.0.3:
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
   integrity sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==
 
-dompurify@*, dompurify@^3.2.2:
+dompurify@*:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.2.2.tgz#6c0518745e81686c74a684f5af1e5613e7cc0246"
   integrity sha512-YMM+erhdZ2nkZ4fTNRTSI94mb7VG7uVF5vj5Zde7tImgnhZE3R6YW/IACGIHb2ux+QkEXMhe591N+5jWOmL4Zw==
   optionalDependencies:
     "@types/trusted-types" "^2.0.7"
 
+dompurify@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.2.3.tgz#05dd2175225324daabfca6603055a09b2382a4cd"
+  integrity sha512-U1U5Hzc2MO0oW3DF+G9qYN0aT7atAou4AgI0XjWz061nyBPbdxkfdhfy5uMgGn6+oLFCfn44ZGbdDqCzVmlOWA==
+  optionalDependencies:
+    "@types/trusted-types" "^2.0.7"
+
 earcut@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/earcut/-/earcut-3.0.0.tgz#a8d5bf891224eaea8287201b5e787c6c0318af89"
@@ -960,10 +967,10 @@ ol-ext@^4.0.24:
   resolved "https://registry.yarnpkg.com/ol-ext/-/ol-ext-4.0.24.tgz#86f3bb662fc9932ee16481604b2cbce87d96d28f"
   integrity sha512-VEf1+mjvbe35mMsszVsugqcvWfeGcU8TwS+GgXm3nGYqiHR7CckX2DWmM9B94QCDnrJWKKXBicfInbkoe2xT7w==
 
-ol-mapbox-style@^12.3.5:
-  version "12.3.5"
-  resolved "https://registry.yarnpkg.com/ol-mapbox-style/-/ol-mapbox-style-12.3.5.tgz#8653890ce9f1ee2c0fc98cad6857bd0ca1e64628"
-  integrity sha512-1tdq+jpzJ7BuqCeRpNV5u90X369MXDbHKpPPt0BNpbzi+4UEJ2dJIrd3eFQV9VbqvZeEIioEjyK7qOqXsUZs8w==
+ol-mapbox-style@^12.4.0:
+  version "12.4.0"
+  resolved "https://registry.yarnpkg.com/ol-mapbox-style/-/ol-mapbox-style-12.4.0.tgz#775deb25994ae6fe36cb0748582712c9d61a698e"
+  integrity sha512-P8Jg9AXSG6FpUNrADejpwMG0HbmHTZOJQQocACzaDL0QrU4kzmCvj06xUIKhTxT5mtC413pCVAbyXJ4mx0XFnQ==
   dependencies:
     "@mapbox/mapbox-gl-style-spec" "^13.23.1"
     mapbox-to-css-font "^2.4.1"
@@ -1195,10 +1202,10 @@ sass-loader@^16.0.4:
   dependencies:
     neo-async "^2.6.2"
 
-sass@^1.82.0:
-  version "1.82.0"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.82.0.tgz#30da277af3d0fa6042e9ceabd0d984ed6d07df70"
-  integrity sha512-j4GMCTa8elGyN9A7x7bEglx0VgSpNUG4W4wNedQ33wSMdnkqQCT8HTwOaVSV4e6yQovcu/3Oc4coJP/l0xhL2Q==
+sass@^1.83.0:
+  version "1.83.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.83.0.tgz#e36842c0b88a94ed336fd16249b878a0541d536f"
+  integrity sha512-qsSxlayzoOjdvXMVLkzF84DJFc2HZEL/rFyGIKbbilYtAvlCxyuzUeff9LawTn4btVnLKg75Z8MMr1lxU1lfGw==
   dependencies:
     chokidar "^4.0.0"
     immutable "^5.0.2"