feat(floating-menu): add floatingMenuItemsDefined hook

add floatingMenuItemsDefined hook that allows modifying the float menu items via plugin
GIScience · Aug 2, 2021 · 215f008 · 215f008
1 parent c73ded8
commit 215f008
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 33 deletions.
diff --git a/src/config-examples/hooks-example.js b/src/config-examples/hooks-example.js
@@ -403,4 +403,18 @@ appHooks.add('layerProvidersLoaded', (hookData) => {
   // hookData has the following structure = {tileProviders: Object, overlayerTileProviders: Object, context: Object}
   // Do something
 })
+
+appHooks.add('floatingMenuItemsDefined', (menuItems) => {
+  // menuItems is an array in which each item has following structure:
+  // {
+  //   id: String,
+  //   show: boolean,
+  //   href: String (optional),
+  //   title: String,
+  //   text: String,
+  //   icon: String (corresponding to a valid material design icon),
+  //   target: String (like '_blank')
+  // }
+  return menuItems
+})
 */
diff --git a/src/fragments/sidebar/components/top-menu/components/floating-menu/FloatingMenu.vue b/src/fragments/sidebar/components/top-menu/components/floating-menu/FloatingMenu.vue
@@ -1,43 +1,23 @@
 <template>
-  <v-menu class="info-menu" :open-on-hover="openOnHover" :open-on-click="!openOnHover" nudge-top="10" offset-y>
+  <v-menu v-if="menuItemsReady" class="info-menu" :open-on-hover="openOnHover" :open-on-click="!openOnHover" nudge-top="10" offset-y>
     <v-btn class="no-padding pl2 pr2" flat slot="activator" @click="menuClicked"
       v-smart-tooltip="{show: showSettingsTooltip, text: $t('floatingTopMenu.settingsTooltip'), position: 'bottom', dark: true, showOnce: true, name: 'settingsTooltip'}">
       <v-icon>{{showSettings ? 'more_vert' : 'info'}}</v-icon>
     </v-btn>
     <v-list>
-      <v-list-tile v-if="showSettings">
-        <v-btn class="floating-item" flat @click="eventBus.$emit('showSettingsModal')">
-          <v-icon :title="$t('floatingTopMenu.openSettings')" left color="dark">settings</v-icon>
-          <template>{{$t('floatingTopMenu.openSettings')}}</template>
-        </v-btn>
-      </v-list-tile>
-      <v-list-tile>
-        <v-btn class="floating-item" @click="eventBus.$emit('showAboutModal')" :title="$t('floatingTopMenu.openSettings')" flat>
-          <v-icon :title="$t('floatingTopMenu.showAbout')" left>info</v-icon>
-          <template>{{$t('floatingTopMenu.about')}}</template>
-        </v-btn>
-      </v-list-tile>
-      <v-list-tile>
-        <v-btn class="floating-item" target="_blank" :href="constants.links.ors"
-          :title="$t('floatingTopMenu.openrouteserviceAPI')" flat>
-          <v-icon left>code</v-icon>
-          <template>{{$t('floatingTopMenu.openrouteserviceAPI')}}</template>
-        </v-btn>
-      </v-list-tile>
-      <v-list-tile>
-        <v-btn class="floating-item" target="_blank" :href="constants.links.disaster"
-          :title="$t('floatingTopMenu.openrouteserviceForDisasters')" flat>
-          <v-icon left>healing</v-icon>
-          <template>{{$t('floatingTopMenu.openrouteserviceForDisasters')}}</template>
+
+    <template v-for="(item, index) in menuItems">
+     <v-list-tile :key="index" v-if="item.show">
+        <v-btn flat v-if="item.emitEvent" class="floating-item" @click="eventBus.$emit(item.emitEvent)">
+          <v-icon :title="item.title" left color="dark">{{item.icon}}</v-icon>
+          <template>{{item.title}}</template>
         </v-btn>
-      </v-list-tile>
-      <v-list-tile>
-        <v-btn class="floating-item" target="_blank" :href="constants.links.askOrs"
-          :title="$t('floatingTopMenu.askOpenrouteservice')" flat>
-          <v-icon left>help</v-icon>
-          <template>{{$t('floatingTopMenu.askOpenrouteservice')}}</template>
+        <v-btn v-else flat class="floating-item" :target="item.blank" :href="item.href">
+          <v-icon :title="item.title" left color="dark">{{item.icon}}</v-icon>
+          <template>{{item.title}}</template>
         </v-btn>
       </v-list-tile>
+    </template>
     </v-list>
   </v-menu>
 </template>

diff --git a/src/fragments/sidebar/components/top-menu/components/floating-menu/floating-menu.css b/src/fragments/sidebar/components/top-menu/components/floating-menu/floating-menu.css
@@ -8,4 +8,5 @@
 
 .floating-item {
   text-transform: none;
+  text-align: left;
 }
diff --git a/src/fragments/sidebar/components/top-menu/components/floating-menu/floating-menu.js b/src/fragments/sidebar/components/top-menu/components/floating-menu/floating-menu.js
@@ -1,3 +1,4 @@
+import constants from '@/resources/constants'
 export default {
   props: {
     openOnHover: {
@@ -11,18 +12,83 @@ export default {
   },
   data () {
     return {
-      settingsTooltipClicked: false
+      settingsTooltipClicked: false,
+      ready: false
     }
   },
   computed: {
     showSettingsTooltip () {
       let show = this.showSettings && !this.settingsTooltipClicked && this.$store.getters.isSidebarVisible
       return show
+    },
+    menuItemsReady () {
+      return this.ready
+    },
+    menuItems () {
+      let items = [
+        {
+          id: 'settings',
+          show: this.showSettings,
+          emitEvent: 'showSettingsModal',
+          title: this.$t('floatingTopMenu.openSettings'),
+          text: this.$t('floatingTopMenu.openSettings'),
+          icon: 'settings',
+        },
+        {
+          id: 'about',
+          show: true,
+          emitEvent: 'showAboutModal',
+          title: this.$t('floatingTopMenu.about'),
+          text: this.$t('floatingTopMenu.showAbout'),
+          icon: 'info'
+        },
+        {
+          id: 'openrouteserviceAPI',
+          show: true,
+          href: constants.links.ors,
+          title: this.$t('floatingTopMenu.openrouteserviceAPI'),
+          text: this.$t('floatingTopMenu.openrouteserviceAPI'),
+          icon: 'code'
+        },
+        {
+          id: 'openrouteserviceForDisasters',
+          show: true,
+          href: constants.links.disaster,
+          title: this.$t('floatingTopMenu.openrouteserviceForDisasters'),
+          text: this.$t('floatingTopMenu.openrouteserviceForDisasters'),
+          icon: 'healing',
+          target: '_blank'
+        },
+        {
+          id: 'askOpenrouteservice',
+          show: true,
+          href: constants.links.askOrs,
+          title: this.$t('floatingTopMenu.askOpenrouteservice'),
+          text: this.$t('floatingTopMenu.askOpenrouteservice'),
+          icon: 'help',
+          target: '_blank'
+        }
+      ]
+      items = this.$root.appHooks.run('floatingMenuItemsDefined', items)
+      return items
     }
   },
   methods: {
     menuClicked () {
       this.settingsTooltipClicked = true
+    },
+    setReadyStatus () {
+      let context = this
+      setTimeout(() => {
+        if (context.$root.appHooks) {
+          context.ready = true
+        } else {
+          context.setReadyStatus()
+        }
+      }, 100)
     }
-  }
+  },
+  created() {
+    this.setReadyStatus()
+  },
 }