Wegue merge back items

This page describes briefly the items developed within the Geolicious project that are candidates for merging/integrating back into the meggsimum/wegue repo. Plus ideas for Architecture and Workflows based on those used in the NPLH Project.

They are divided as follows:

1. Architecture and Workflow: Architectural principles/Main Application structure
2. Components - Reusable single more or less standalone components (under src/components)
3. Bug fixes

1. Architecture and Workflow

Basically: how are developers going to use Wegue, what is needed in terms of structuring code, config and more.

Overall workflow

What is starting point for an app-developer:

• Fork/Clone Wegue Project ?
• Wegue as Git Submodule ?
• npm install wegue ?

And from there: ..

Config file location

https://github.com/meggsimum/wegue/issues/98 - this issue was basically solved

Application structure

This was more or less applied in NPLH project:

• keep Wegue src and src/components as-is
• all modifications and config, static files (e.g. icons) under app/
• main app structure files "shadowed" under app/-dir: WguApp, WguAppTemplate, AppHeader, AppFooter
• new and enhanced Components under app/components-dir: e.g. LayerList
• needed Webpack build config changes!

CLI for starter/template app

Support for Side Panels

Up to now type: win, but in NPLH project added panel/drawer support ("GMaps Style") using the Vuetify v-navigation-drawer component. Included is the concept of a ToggleGroup (via Vue-events) such that only 1 (or zero) side Side Panel is active. Summary:

• FeatureInfoPanel (replaces FeatureInfoWindow), LayerListPanel and RoutingPanel (search) are Side Panels in shared ToggleGroup
• new Module Type panel within Wegue arch
• panel: true indicates it is a Side Panel
• active property if Panel should be shown on initial load
• mobileActive: true do not be active on small screens, move button from toolbar to menu
• toggleGroup shared event group
• right show Panel on right of window (default false)

Example:

    "wgu-layerlist": {
      "target": "toolbar",
      "darkLayout": false,
      "panel": true,
      "active": true,
      "mobileActive": false,
      "right": false,
      "width": 360,
      "height": "100%",
      "toggleGroup": "side-panel-active",
      "options": {
        "hideCategories": true,
        "hideTags": false
      }
    },

Also shows that config should have common attributes direct and module-specific in options. These can be passed to the Vue component like:

<template>
  <v-navigation-drawer class="wgu-layer-list-panel"
      v-model="drawerOpen"
      :value="drawerOpen"
      :dark="dark"
      :right="right"
      :width="width"
      :height="height"
      hide-overlay
      disable-resize-watcher
      disable-route-watcher
      absolute
      stateless
  >

    <wgu-layerlist v-bind="options" />

  </v-navigation-drawer>
</template>

and script section is quite simple:

<script>
  import LayerList from './LayerList';
  import {WguEventBus} from '../../../src/WguEventBus';

  export default {
    name: 'wgu-layerlist-panel',
    components: {
      'wgu-layerlist': LayerList
    },
    props: {
      right: {type: Boolean, required: false, default: false},
      width: {type: Number, required: false, default: 360},
      height: {type: String, required: false, default: '100%'},
      dark: {type: Boolean, required: false, default: false},
      color: {type: String, required: false, default: 'red darken-3'},
      title: {type: String, required: false, default: 'Layers'},
      active: {type: Boolean, required: false, default: false},
      options: { type: Object, required: false, default: {} },
      toggleGroup: {type: String, required: false, default: undefined}
    },
    data () {
      return {
        moduleName: 'wgu-layerlist',
        drawerOpen: this.active
      }
    },
    mounted () {
      WguEventBus.$on('toggle-layerlist-panel', state => {
        this.drawerOpen = state === undefined ? !this.drawerOpen : state;
      });

      // When member of toggle group: close if any other panel active
      if (this.toggleGroup) {
        WguEventBus.$on(this.toggleGroup, ({ moduleName, state }) => {
          this.drawerOpen = moduleName === this.moduleName && state;
        });
      }
    }
  }
</script>

2. Components

The following components were new or enhanced.

New

i18N Language Switch

Permalink and Share Button

Print PDF (client-side)

Download GPX

(HERE) Routing?

Dynamic Layer list/loading

User Location on Map

Enhanced

Feature Info Window

LayerList

Header Content Support

Enhanced (SVG) Icon Styling support, dynamic construct of Pin Markers

Plus

Webfont support

tooltips Toolbar and Menu

3. Bug fixes

Several bug-fixes were made, though many in the NPLH (private) app repo.

1. theming: appeared very hard to go from dark to non dark Vuetify theme
2. Layerlist scroll bars at overflow