Split plugins into modules; Add keyvalue_dictionary

lib/mapp.mjs

@@ -24,7 +24,7 @@ import location from './location/_location.mjs'
 
 import Mapview from './mapview/_mapview.mjs'
 
-import * as plugins from './plugins.mjs'
+import plugins from './plugins/_plugins.mjs'
 
 hooks.parse();
 

lib/plugins/_plugins.mjs

@@ -0,0 +1,38 @@
+/**
+## mapp.plugins{}
+This module serves as a collection of plugin modules for the application.
+@module /plugins
+*/
+
+import { admin } from './admin.mjs'
+import { fullscreen } from './fullscreen.mjs'
+import { keyvalue_dictionary } from './keyvalue_dictionary.mjs'
+import { locator } from './locator.mjs'
+import { login } from './login.mjs'
+import { svg_templates } from './svg_templates.mjs'
+import { zoomBtn } from './zoomBtn.mjs'
+import { zoomToArea } from './zoomToArea.mjs'
+
+/**
+@typedef {Object} plugins
+@property {function} admin - The admin plugin module.
+@property {function} fullscreen - The fullscreen plugin module.
+@property {function} keyvalue_dictionary - The keyvalue_dictionary plugin module.
+@property {function} locator - The locator plugin module.
+@property {function} login - The login plugin module.
+@property {function} svg_templates - The svg_templates plugin module.
+@property {function} zoomBtn - The zoomBtn plugin module.
+@property {function} zoomToArea - The zoomToArea plugin module.
+*/
+const plugins = {
+  admin,
+  fullscreen,
+  keyvalue_dictionary,
+  locator,
+  login,
+  svg_templates,
+  zoomBtn,
+  zoomToArea
+}
+
+export default plugins

lib/plugins/admin.mjs

@@ -0,0 +1,28 @@
+/**
+### Admin Plugin
+@module /plugins/admin
+*/
+
+/**
+Adds an admin button to the map view if the user has admin privileges.
+@function admin
+@param {Object} plugin - The plugin configuration object.
+@param {Object} mapview - The mapview object.
+@returns {void}
+*/
+export function admin(plugin, mapview) {
+
+  const btnColumn = document.getElementById('mapButton');
+
+  // the btnColumn element only exist in the default mapp view.
+  if (!btnColumn) return;
+
+  // Append user admin link.
+  if (!mapp.user?.admin) return;
+
+  btnColumn.appendChild(mapp.utils.html.node`
+    <a
+      title=${mapp.dictionary.toolbar_admin}
+      href="${mapp.host + '/api/user/admin'}">
+      <div class="mask-icon supervisor-account">`);
+}

lib/plugins/fullscreen.mjs

@@ -0,0 +1,37 @@
+/**
+### Fullscreen Plugin
+@module /plugins/fullscreen
+ */
+
+/**
+Adds a fullscreen toggle button to the map view.
+@function fullscreen
+@param {Object} plugin - The plugin configuration object.
+@param {Object} mapview - The mapview object.
+@param {ol.Map} mapview.Map - The OpenLayers map object.
+@param {Object} mapview.layers - The layers object containing map layers.
+@returns {void}
+*/
+export function fullscreen(plugin, mapview) {
+  const btnColumn = document.getElementById('mapButton');
+
+  // The btnColumn element only exists in the default mapp view.
+  if (!btnColumn) return;
+
+  function toggleFullscreen(e) {
+    e.target.classList.toggle('active');
+    document.body.classList.toggle('fullscreen');
+    mapview.Map.updateSize();
+    Object.values(mapview.layers)
+      .forEach((layer) => layer.mbMap?.resize());
+  }
+
+  const btn = mapp.utils.html.node`
+    <button
+      class="mobile-display-none"
+      title=${mapp.dictionary.toolbar_fullscreen}
+      onclick=${toggleFullscreen}>
+      <div class="mask-icon map">`;
+
+  btnColumn.append(btn);
+}

lib/plugins/keyvalue_dictionary.mjs

@@ -0,0 +1,69 @@
+/**
+### Keyvalue Dictionary Plugin
+@module /plugins/keyvalue_dictionary
+*/
+
+/**
+Replaces key-value pairs in the mapview locale object with dictionary entries.
+@function keyvalue_dictionary
+@param {Array} keyvalue_dictionary - An array of dictionary entries.
+@param {Object} mapview - The mapview object.
+@param {Object} mapview.locale - The locale object of the mapview.
+@returns {void}
+ */
+export function keyvalue_dictionary(keyvalue_dictionary, mapview) {
+  if (!mapp.user.language) return;
+  if (!mapview.locale) return;
+  parseObject(mapview.locale, keyvalue_dictionary);
+}
+
+/**
+Checks if an item is an array or an object and recursively applies the parsing logic.
+@function isArrayObject
+@param {*} item - The item to check.
+@param {Array} dictionary - An array of dictionary entries.
+@returns {boolean} - Returns true if the item is an array or an object, false otherwise.
+ */
+function isArrayObject(item, dictionary) {
+  if (Array.isArray(item)) {
+    item.forEach(val => isArrayObject(val, dictionary));
+    return true;
+  }
+  if (item instanceof Object) {
+    parseObject(item, dictionary);
+    return true;
+  }
+}
+
+/**
+Parses an object and replaces its string values with dictionary entries.
+@function parseObject
+@param {Object} obj - The object to parse.
+@param {Array} dictionary - An array of dictionary entries.
+@returns {void}
+*/
+function parseObject(obj, dictionary) {
+  for (const [key, value] of Object.entries(obj)) {
+    if (isArrayObject(value, dictionary)) continue;
+    if (typeof value === 'string') replaceKeyValue(obj, key, value, dictionary);
+  }
+}
+
+/**
+Replaces a key-value pair in an object with a dictionary entry.
+@function replaceKeyValue
+@param {Object} obj - The object containing the key-value pair.
+@param {string} key - The key of the value to replace.
+@param {string} value - The value to replace.
+@param {Array} dictionary - An array of dictionary entries.
+@returns {void}
+ */
+function replaceKeyValue(obj, key, value, dictionary) {
+  // Find dictionary entry matching key and value.
+  const entry = dictionary
+    .filter(entry => entry.key === key)
+    .find(entry => entry.value === value);
+  if (!entry) return;
+  // Replace object key value with entry language lookup or default.
+  obj[key] = entry[mapp.user.language] || entry.default || value;
+}