Refactor asset handling to support Redmine 6

Author: dkastl

init.rb

@@ -1,14 +1,12 @@
-# Global Hooks
-require File.expand_path('../lib/redmine_gtt/hooks/view_layouts_base_html_head_hook', __FILE__)
-require File.expand_path('../lib/redmine_gtt/view_hooks', __FILE__)
+require_relative 'lib/redmine_gtt/view_hooks'
 
 Redmine::Plugin.register :redmine_gtt do
   name 'Redmine GTT plugin'
   author 'Georepublic'
   author_url 'https://github.com/georepublic'
   url 'https://github.com/gtt-project/redmine_gtt'
   description 'Adds location-based task management and maps'
-  version '5.1.2'
+  version '6.0.0'
 
   requires_redmine :version_or_higher => '5.0.0'
 

lib/redmine_gtt/hooks/view_layouts_base_html_head_hook.rb

@@ -1,9 +1,11 @@
-# frozen_string_literal: true
-
 module RedmineGtt
   class ViewHooks < Redmine::Hook::ViewListener
+
+    include ActionView::Context
+
+    # Render partials in various views
     render_on :view_account_left_bottom,
-      partial: 'redmine_gtt/hooks/view_account_left_bottom'
+    partial: 'redmine_gtt/hooks/view_account_left_bottom'
 
     render_on :view_my_account,
       partial: 'redmine_gtt/hooks/view_my_account'
@@ -17,5 +19,45 @@ class ViewHooks < Redmine::Hook::ViewListener
     render_on :view_layouts_base_body_bottom,
       partial: 'redmine_gtt/hooks/view_layouts_base_body_bottom'
 
+    # Add meta tags to the HTML head to inform about available fonts with their URL including the digest
+    def view_layouts_base_html_head(context={})
+      tags = []
+      tags << tag.meta(:name => 'gtt-font-custom-icons', :content => asset_path('plugin_assets/redmine_gtt/custom-icons.woff2'))
+      tags << tag.meta(:name => 'gtt-font-mdi-webfont', :content => asset_path('plugin_assets/redmine_gtt/materialdesignicons-webfont.woff2'))
+      return tags.join("\n")
+    end
+
+    # Add JavaScript and data tags to the body bottom
+    def view_layouts_base_body_bottom(context={})
+      tags = [];
+
+      tags << javascript_include_tag('main', :plugin => 'redmine_gtt')
+
+      geocoder = {
+        enabled: false
+      }
+
+      if Setting.plugin_redmine_gtt['enable_geocoding_on_map'] == 'true'
+        geocoder = {
+          enabled: true,
+          provider: Setting.plugin_redmine_gtt['default_geocoder_provider'],
+          options: (JSON.parse(Setting.plugin_redmine_gtt['default_geocoder_options']) rescue {})
+        }
+      end
+
+      tags.push(tag.div :data => {
+        :lon => Setting.plugin_redmine_gtt['default_map_center_longitude'],
+        :lat => Setting.plugin_redmine_gtt['default_map_center_latitude'],
+        :zoom => Setting.plugin_redmine_gtt['default_map_zoom_level'],
+        :maxzoom => Setting.plugin_redmine_gtt['default_map_maxzoom_level'],
+        :vector_minzoom => Setting.plugin_redmine_gtt['vector_minzoom_level'],
+        :fit_maxzoom => Setting.plugin_redmine_gtt['default_map_fit_maxzoom_level'],
+        :geocoder => geocoder,
+        :plugin_settings => Setting.plugin_redmine_gtt.select{ |key, value| key.to_s.match(/^(?!default).+/) },
+        :i18n => l(:gtt_js).to_json.html_safe
+      }, :id => 'gtt-defaults', :style => 'display:none')
+
+      return tags.join("\n")
+    end
   end
 end

lib/redmine_gtt/view_hooks.rb

@@ -8,8 +8,27 @@ 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
+const style = document.createElement('style');
+style.type = 'text/css';
+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);
+
 // Define the font face
-let customFont = new FontFace('custom-icons', 'url(/plugin_assets/redmine_gtt/custom-icons.woff2)');
+let customFont: FontFace;
+customFont = new FontFace('custom-icons', `url(${customIconsUrl})`);
 
 // Load the font
 const fontPromise = customFont.load().then((font) => {

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

@@ -1,10 +1,10 @@
-@font-face {
+/* @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;

src/styles/icons/custom/custom-icons.css

@@ -7300,11 +7300,16 @@ 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
+
 // Define the font face
-let customFont = new FontFace('materialdesignicons', 'url(/plugin_assets/redmine_gtt/materialdesignicons-webfont.woff2)');
+let mdiFont: FontFace;
+mdiFont = new FontFace('materialdesignicons', `url(${mdiWebfontUrl})`);
 
 // Load the font
-const fontPromise = customFont.load().then((font) => {
+const fontPromise = mdiFont.load().then((font) => {
   // Add the loaded font to the document
   document.fonts.add(font);
 
@@ -7314,13 +7319,13 @@ const fontPromise = customFont.load().then((font) => {
       font: 'Material Design Icons',
       name: 'Material Design Icons',
       copyright: 'Apache-2.0',
-      prefix:  'mdi'
+      prefix: 'mdi',
     },
     iconMappings
   );
 
   // Create a FontFaceObserver instance
-  const observer = new FontFaceObserver('custom-icons');
+  const observer = new FontFaceObserver('materialdesignicons');
 
   // Use the observer to wait for the font to be loaded
   return observer.load();

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

@@ -16,7 +16,7 @@ const imageLoaders = {
   test: /\.(png|svg|jpg|jpeg|gif)$/i,
   type: 'asset/resource',
   generator: {
-    filename: '[name][ext]', // Keep the original file name and extension
+    filename: '../images/[name][ext]', // Keep the original file name and extension
   },
 };
 
@@ -25,7 +25,7 @@ const fontLoaders = {
   test: /\.(woff|woff2|eot|ttf|otf)$/i,
   type: 'asset/resource',
   generator: {
-    filename: '[name][ext]', // Keep the original file name and extension
+    filename: '../fonts/[name][ext]', // Keep the original file name and extension
   },
 };
 
@@ -55,7 +55,7 @@ module.exports = {
   },
   output: {
     filename: 'main.js',
-    path: path.resolve(__dirname, 'assets'),
+    path: path.resolve(__dirname, 'assets/javascripts'),
     assetModuleFilename: '[name].[ext]',
   },
 };