@vcmap/ui 6.0.0-rc.2 → 6.0.0-rc.5

package/src/application/VcsApp.vue

@@ -5,9 +5,15 @@
       :options="splashScreen"
       v-model="splashScreenRef"
     ></VcsSplashScreen>
-    <VcsNavbar />
+    <VcsNavbar v-if="!config.hideHeader" />
     <VcsContainer :attribution-action="attributionAction" />
-    <v-footer v-if="smAndUp" app absolute height="22" class="d-flex gc-1 pa-0">
+    <v-footer
+      v-if="showFooter"
+      app
+      absolute
+      :height="footerHeight"
+      class="d-flex gc-1 pa-0"
+    >
       <VcsPositionDisplay />
       <VcsTextPageFooter
         v-if="imprint"
@@ -57,18 +63,49 @@
   import VcsSettings from './VcsSettings.vue';
   import { WindowSlot } from '../manager/window/windowManager.js';
   import CollectionManager from '../manager/collectionManager/CollectionManager.vue';
-  import { defaultPrimaryColor } from '../vuePlugins/vuetify.js';
+  import { defaultPrimaryColor, useFontSize } from '../vuePlugins/vuetify.js';
   import VcsLegend from '../legend/VcsLegend.vue';
   import { getLegendEntries } from '../legend/legendHelper.js';
   import VcsAttributionsFooter from './VcsAttributionsFooter.vue';
   import VcsTextPageFooter from './VcsTextPageFooter.vue';
   import VcsSplashScreen from './VcsSplashScreen.vue';
-  import VcsCustomScreen from './VcsCustomScreen.vue';
+  import VcsTextPage from './VcsTextPage.vue';
   import VcsAttributions from './VcsAttributions.vue';
   import { getAttributions } from './attributionsHelper.js';
   import VcsDefaultLogoMobile from '../logo-mobile.svg';
   import VcsPositionDisplay from './VcsPositionDisplay.vue';
 
+  /**
+   * This helper checks the uiConfig and depending on the value will setup/teardown the providedSetupFunction
+   * @param {import("../vcsUiApp.js").default} app
+   * @param {(import("../vcsUiApp.js").default) => () => void} setupFunction
+   * @param {string} configOption parameter name of a uiConfig parameter, for example `app.uiConfig.config.hideContentTree`
+   * @returns {function():void} - cleanup function
+   */
+  export function setupUIConfigDependency(app, setupFunction, configOption) {
+    let destroyFunction = null;
+    function handler() {
+      if (!app.uiConfig.config[configOption] && !destroyFunction) {
+        destroyFunction = setupFunction(app);
+      } else if (app.uiConfig.config[configOption] && destroyFunction) {
+        destroyFunction();
+        destroyFunction = null;
+      }
+    }
+    handler();
+    const listeners = [
+      app.uiConfig.added.addEventListener(handler),
+      app.uiConfig.added.addEventListener(handler),
+    ];
+
+    return () => {
+      if (destroyFunction) {
+        destroyFunction();
+      }
+      listeners.forEach((cb) => cb());
+    };
+  }
+
   /**
    * You should call this function in the component providing the vcsUiApp to your
    * application in the components mounted hook. This will call VcsAppMounted on all plugins in the app
@@ -103,6 +140,7 @@
   /**
    * This helper function will add a map action button based on the default icons
    * to the apps NavbarManager. Furthermore, all maps on the app are synced for adding and removing.
+   * The buttons can be removed with the uiConfig hideMapButtons
    * @param {import("../vcsUiApp.js").default} app
    * @returns {function():void}
    */
@@ -225,8 +263,11 @@
       if (layersWithLegend < 1 && stylesWithLegend < 1) {
         app.navbarManager.remove('legend');
         app.windowManager.remove('legend');
+      } else {
+        addLegend();
       }
     };
+    handleLegend();
 
     const listeners = [
       app.layers.added.addEventListener((layer) => {
@@ -244,6 +285,8 @@
     ];
 
     return () => {
+      app.navbarManager.remove('legend');
+      app.windowManager.remove('legend');
       destroy();
       legendDestroy();
       listeners.forEach((cb) => cb());
@@ -257,7 +300,7 @@
    */
   function setupCustomScreen(app) {
     function setupCustomScreenAction() {
-      const { customScreen } = app.uiConfig.config.value;
+      const { customScreen } = app.uiConfig.config;
       const { action: customScreenAction, destroy: customScreenDestroy } =
         createToggleAction(
           {
@@ -267,7 +310,7 @@
           },
           {
             id: 'customScreenId',
-            component: VcsCustomScreen,
+            component: VcsTextPage,
             state: {
               headerIcon: customScreen.icon,
               headerTitle: customScreen.name,
@@ -295,7 +338,7 @@
     }
     let customScreen;
     const stopCustomScreenWatcher = watch(
-      () => app.uiConfig.config.value.customScreen,
+      () => app.uiConfig.config.customScreen,
       (newCustomScreen) => {
         if (app.navbarManager.has('customScreenToggle')) {
           app.navbarManager.remove('customScreenToggle');
@@ -321,37 +364,51 @@
    */
   function setupSplashScreen(app, splashScreenRef) {
     function setupSplashScreenAction() {
-      const { splashScreen } = app.uiConfig.config.value;
-      const splashScreenAction = {
-        name: splashScreen.name || 'components.splashScreen.name',
-        icon: splashScreen.icon || 'mdi-alert-box',
-        title: splashScreen.title,
-        callback() {
-          splashScreenRef.value = !splashScreenRef.value;
-        },
-      };
-      app.navbarManager.add(
-        {
-          id: 'splashScreenToggle',
-          action: splashScreenAction,
-        },
-        vcsAppSymbol,
-        ButtonLocation.MENU,
-      );
+      const { splashScreen } = app.uiConfig.config;
+      if (splashScreen) {
+        splashScreenRef.value = true;
+      }
+      if (splashScreen && splashScreen.menuEntry) {
+        const splashScreenAction = {
+          name: splashScreen.name || 'components.splashScreen.name',
+          icon: splashScreen.icon || 'mdi-alert-box',
+          title: splashScreen.title,
+          callback() {
+            splashScreenRef.value = !splashScreenRef.value;
+          },
+        };
+        app.navbarManager.add(
+          {
+            id: 'splashScreenToggle',
+            action: splashScreenAction,
+          },
+          vcsAppSymbol,
+          ButtonLocation.MENU,
+        );
+      }
     }
-
-    return watch(
-      () => app.uiConfig.config.value.splashScreen,
-      (newSplashScreen) => {
+    setupSplashScreenAction();
+    const removeAddedListener = app.uiConfig.added.addEventListener((item) => {
+      if (item.name === 'splashScreen') {
         if (app.navbarManager.has('splashScreenToggle')) {
           app.navbarManager.remove('splashScreenToggle');
         }
-        if (newSplashScreen && newSplashScreen.menuEntry) {
-          setupSplashScreenAction();
+        setupSplashScreenAction();
+      }
+    });
+    const removeRemovedListener = app.uiConfig.removed.addEventListener(
+      (item) => {
+        if (item.name === 'splashScreen') {
+          if (app.navbarManager.has('splashScreenToggle')) {
+            app.navbarManager.remove('splashScreenToggle');
+          }
         }
       },
-      { immediate: true },
     );
+    return () => {
+      removeAddedListener();
+      removeRemovedListener();
+    };
   }
   /**
    * This helper function will add a settings action button to the apps NavbarManager MENU location.
@@ -359,6 +416,7 @@
    * @returns {function():void}
    */
   export function setupSettingsWindow(app) {
+    const settingsWindowId = 'vcsSettings';
     const { action: settingsAction, destroy: settingsDestroy } =
       createToggleAction(
         {
@@ -367,7 +425,7 @@
           title: 'settings.tooltip',
         },
         {
-          id: 'settingsId',
+          id: settingsWindowId,
           component: VcsSettings,
           state: { headerIcon: 'mdi-cog', headerTitle: 'settings.title' },
           slot: WindowSlot.DYNAMIC_RIGHT,
@@ -377,13 +435,15 @@
       );
     app.navbarManager.add(
       {
-        id: 'settingsToggle',
+        id: settingsWindowId,
         action: settingsAction,
       },
       vcsAppSymbol,
       ButtonLocation.MENU,
     );
     return () => {
+      app.navbarManager.remove(settingsWindowId);
+      app.windowManager.remove(settingsWindowId);
       settingsDestroy();
     };
   }
@@ -411,6 +471,11 @@
     );
   }
 
+  /**
+   * @type {string}
+   */
+  export const categoryManagerWindowId = 'category-manager';
+
   /**
    * This helper function will add a category manager button to the navbar. The category Manager
    * will only be shown if there is at least one category under management in the categoryManager.
@@ -418,15 +483,14 @@
    * @returns {function():void}
    */
   export function setupCategoryManagerWindow(app) {
-    const id = 'category-manager';
     const { action: categoryManagerAction, destroy } = createToggleAction(
       {
-        name: id,
+        name: categoryManagerWindowId,
         icon: '$vcsComponents',
         title: 'categoryManager.tooltip',
       },
       {
-        id,
+        id: categoryManagerWindowId,
         state: {
           headerTitle: 'categoryManager.title',
           headerIcon: '$vcsComponents',
@@ -452,9 +516,9 @@
      * @param {import("../manager/collectionManager/collectionComponentClass.js").default} collectionComponent
      */
     function handleAdded(collectionComponent) {
-      if (!app.navbarManager.has(id)) {
+      if (!app.navbarManager.has(categoryManagerWindowId)) {
         app.navbarManager.add(
-          { id, action: categoryManagerAction },
+          { id: categoryManagerWindowId, action: categoryManagerAction },
           vcsAppSymbol,
           ButtonLocation.CONTENT,
         );
@@ -463,7 +527,7 @@
         collectionComponent.id,
         collectionComponent.collection.added.addEventListener((item) => {
           if (
-            !app.windowManager.has(id) &&
+            !app.windowManager.has(categoryManagerWindowId) &&
             item[moduleIdSymbol] === app.dynamicModuleId
           ) {
             categoryManagerAction.hasUpdate = true;
@@ -482,8 +546,8 @@
       collectionListeners.delete(collectionComponent.id);
 
       if (!app.categoryManager.componentIds.length) {
-        app.windowManager.remove(id);
-        app.navbarManager.remove(id);
+        app.windowManager.remove(categoryManagerWindowId);
+        app.navbarManager.remove(categoryManagerWindowId);
         categoryManagerAction.hasUpdate = false;
       }
     }
@@ -500,13 +564,15 @@
 
     const windowListener = app.windowManager.added.addEventListener(
       (windowComponent) => {
-        if (windowComponent.id === id) {
+        if (windowComponent.id === categoryManagerWindowId) {
           categoryManagerAction.hasUpdate = false;
         }
       },
     );
 
     return () => {
+      app.windowManager.remove(categoryManagerWindowId);
+      app.navbarManager.remove(categoryManagerWindowId);
       destroy();
       addedListener();
       removedListener();
@@ -651,14 +717,30 @@
       /** @type {import("../vcsUiApp.js").default} */
       const app = getVcsAppById(props.appId);
       provide('vcsApp', app);
-      const mapNavbarListener = setupMapNavbar(app);
-      const legendDestroy = setupLegendWindow(app);
-      const settingsDestroy = setupSettingsWindow(app);
+      const mapNavbarListener = setupUIConfigDependency(
+        app,
+        setupMapNavbar,
+        'hideMapButtons',
+      );
+      const legendDestroy = setupUIConfigDependency(
+        app,
+        setupLegendWindow,
+        'hideLegend',
+      );
+      const settingsDestroy = setupUIConfigDependency(
+        app,
+        setupSettingsWindow,
+        'hideSettings',
+      );
       const stopCustomScreen = setupCustomScreen(app);
       const splashScreenRef = ref(true);
       const stopSplashScreen = setupSplashScreen(app, splashScreenRef);
       setupHelpButton(app);
-      const destroyComponentsWindow = setupCategoryManagerWindow(app);
+      const destroyMyWorkspace = setupUIConfigDependency(
+        app,
+        setupCategoryManagerWindow,
+        'hideMyWorkspace',
+      );
       const destroyThemingListener = setupUiConfigTheming(app);
       const destroyDisplayQualityListener = setupUiConfigDisplayQuality(app);
       const { attributionEntries, attributionAction, destroyAttributions } =
@@ -678,45 +760,53 @@
         settingsDestroy();
         stopCustomScreen();
         stopSplashScreen();
-        destroyComponentsWindow();
+        destroyMyWorkspace();
         destroyThemingListener();
-        destroyAttributions();
         destroyDisplayQualityListener();
+        destroyAttributions();
       });
 
       const { smAndUp } = useDisplay();
+      const fontSize = useFontSize();
+      const footerHeight = computed(() => {
+        return Math.ceil(fontSize.value * 1.65);
+      });
 
       return {
-        smAndUp,
+        config: app.uiConfig.config,
+        showFooter: computed(() => {
+          return !app.uiConfig.config.hideFooter && smAndUp.value;
+        }),
+        footerHeight,
         mobileLogo: computed(
           () =>
-            app.uiConfig.config.value.mobileLogo ??
-            app.uiConfig.config.value.logo ??
+            app.uiConfig.config.mobileLogo ??
+            app.uiConfig.config.logo ??
             VcsDefaultLogoMobile,
         ),
         imprint: computed(() => {
-          if (app.uiConfig.config.value.imprint) {
+          if (app.uiConfig.config.imprint) {
             return {
               title: 'footer.imprint.title',
               tooltip: 'footer.imprint.tooltip',
-              ...app.uiConfig.config.value.imprint,
+              ...app.uiConfig.config.imprint,
             };
           }
           return undefined;
         }),
         dataProtection: computed(() => {
-          if (app.uiConfig.config.value.dataProtection) {
+          if (app.uiConfig.config.dataProtection) {
             return {
               title: 'footer.dataProtection.title',
               tooltip: 'footer.dataProtection.tooltip',
-              ...app.uiConfig.config.value.dataProtection,
+              ...app.uiConfig.config.dataProtection,
             };
           }
           return undefined;
         }),
         splashScreenRef,
         splashScreen: computed(() => {
-          if (app.uiConfig.config.value.splashScreen) {
+          if (app.uiConfig.config.splashScreen) {
             return {
               title: 'components.splashScreen.name',
               tooltip: 'components.splashScreen.tooltip',
@@ -724,7 +814,7 @@
                 width: '800px',
                 height: '400px',
               },
-              ...app.uiConfig.config.value.splashScreen,
+              ...app.uiConfig.config.splashScreen,
             };
           }
           return undefined;