@phila/layerboard 2.2.0 → 3.0.0-beta.1

package/src/components/TopicPanel.vue

@@ -1,264 +0,0 @@
-<template>
-  <div
-    id="topic-panel-container"
-    :class="topicPanelContainerClass"
-  >
-    <div
-      v-show="!!this.$config.layerFilter"
-      class="forms-header"
-    >
-      <!-- tags filter -->
-      <form
-        class="om-search-control-input-tags"
-        @submit.prevent="handleTagsFilterFormX"
-        @keydown="preventEnter"
-      >
-        <div class="input-group text-filter">
-          <span class="input-group-label input-font">Filter:</span>
-          <input
-            type="text"
-            class="input-type"
-            @keyup="handleTagsFilterFormKeyup"
-          >
-          <!-- placeholder="Filter datasets" -->
-          <div
-            v-if="this.$store.state.layers.inputTagsFilter != ''"
-            class="input-group-button"
-          >
-            <button class="om-search-control-button">
-              <i class="fa fa-times fa-lg" />
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-
-    <div
-      id="topics-container"
-      class="topics-container cell medium-cell-block-y"
-      :style="topicsContainerStyle"
-    >
-      <topic-component-group
-        :topic-components="appComponents"
-        @handle-topic-header-click="handleTopicHeaderClick"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-
-// import Checkbox from '@phila/vue-mapping/src/esri-leaflet/Checkbox.vue';
-// import Topic from '@phila/vue-comps/src/components/Topic.vue';
-import TopicComponentGroup from '@phila/vue-comps/src/components/TopicComponentGroup.vue';
-
-export default {
-  components: {
-    // Checkbox,
-    TopicComponentGroup,
-    // Topic,
-    // Checkbox: () => import(/* webpackChunkName: "lbmp_pvm_Checkbox" */'@phila/vue-mapping/src/esri-leaflet/Checkbox.vue'),
-  },
-  data() {
-    const data = {
-      topicsContainerStyle: {
-        'overflow-y': 'auto',
-        'height': '100px',
-        'min-height': '100px',
-      },
-    };
-    return data;
-  },
-  computed: {
-    windowDim() {
-      return this.$store.state.windowDimensions;
-    },
-    appComponents() {
-      if (this.$config.components) {
-        return this.$config.components;
-      }
-      // if no components, use a single 'checkbox-set'
-      return [{ type: 'checkbox-set' }];
-
-    },
-    fullScreenMapEnabled() {
-      return this.$store.state.fullScreenMapEnabled;
-    },
-    topicPanelContainerClass() {
-      if (this.fullScreenMapEnabled) {
-        return 'cell medium-1 small-order-2 medium-order-1';
-      } else if (this.windowDim.width >= 950) {
-        return 'cell medium-8 small-order-1 small-24 medium-order-2';
-      }
-      return 'cell medium-10 small-order-1 small-24 medium-order-2';
-
-    },
-    categories() {
-      return this.$store.state.map.categories;
-    },
-    selectedCategory() {
-      return this.$store.state.map.selectedCategory;
-    },
-    scale() {
-      return this.$store.state.map.scale;
-    },
-    inputLayerFilter() {
-      return this.$store.state.layers.inputLayerFilter;
-    },
-    inputTagsFilter() {
-      return this.$store.state.layers.inputTagsFilter;
-    },
-    windowSize() {
-      return this.$store.state.windowSize;
-    },
-  },
-  watch: {
-    windowDim(nextDim) {
-      this.handleWindowResize(nextDim);
-    },
-  },
-  methods: {
-    handleTopicHeaderClick(nextTopic) {
-      // console.log('TopicPanel handleTopicHeaderClick is running');
-      this.$controller.handleTopicHeaderClick(nextTopic);
-    },
-    handleLayerFilterFormKeyup(e) {
-      const input = e.target.value;
-      this.$store.commit('setInputLayerFilter', input);
-    },
-    handleLayerFilterFormX(e) {
-      e.target[0].value = '';
-      this.$store.commit('setInputLayerFilter', '');
-    },
-    handleTagsFilterFormKeyup(e) {
-      const input = e.target.value;
-      // if (input.length >= 3) {
-      this.$store.commit('setInputTagsFilter', input);
-      // } else {
-      // this.$store.commit('setInputLayerFilter', null);
-      // }
-    },
-    handleTagsFilterFormX(e) {
-      e.target[0].value = '';
-      this.$store.commit('setInputTagsFilter', '');
-    },
-    didSelectCategory(e) {
-      const selected = e.target.selectedIndex;
-      this.$store.commit('setSelectedCategory', this.categories[selected]);
-    },
-    preventEnter(e) {
-      if(e.keyCode === 13) {
-        e.preventDefault();
-      }
-    },
-    handleWindowResize(dim) {
-      // console.log('TopicPanel handleWindowResize, dim:', dim);
-      const windowHeight = window.innerHeight;
-      const siteHeaderHeightNum = parseInt(document.getElementsByClassName('site-header')[0].getBoundingClientRect().height);
-      const appFooterHeightNum = parseInt(document.getElementsByClassName('app-footer')[0].getBoundingClientRect().height);
-      const datasetsButtonHeightNum = parseInt(document.getElementsByClassName('datasets-button')[0].getBoundingClientRect().height);
-      const formsHeaderHeightNum = parseInt(document.getElementsByClassName('forms-header')[0].getBoundingClientRect().height);
-      // console.log('TopicPanel handleWindowResize is running, formsHeaderHeightNum:', formsHeaderHeightNum);
-      let topicsHeight = windowHeight - siteHeaderHeightNum - appFooterHeightNum - datasetsButtonHeightNum - formsHeaderHeightNum;
-      // console.log('topicsHeight:', topicsHeight);
-
-      // let topicsHeight = dim.height;
-
-      this.topicsContainerStyle.height = topicsHeight.toString() + 'px';
-      this.topicsContainerStyle['min-height'] = topicsHeight.toString() + 'px';
-      this.topicsContainerStyle['overflow-y'] = 'auto';
-    },
-  },
-};
-</script>
-
-<style scoped>
-  .forms-header {
-    padding: 5px;
-    /*this keeps the box shadow over the scrollable part of the panel*/
-    position: relative;
-    z-index: 1;
-    -webkit-box-shadow: 0px 5px 7px -2px rgba(0,0,0,0.18);
-    -moz-box-shadow: 0px 5px 7px -2px rgba(0,0,0,0.18);
-    box-shadow: 0px 5px 7px -2px rgba(0,0,0,0.18);
-  }
-
-  .input-type {
-    margin-bottom: 0px;
-  }
-
-  .input-select {
-    margin-bottom: 0px;
-  }
-
-  .input-group {
-    height: 40px !important;
-    margin-top: 6px;
-    margin-bottom: 6px;
-  }
-
-  .input-group-label {
-    border-right: 1px;
-    border-style: solid;
-    padding-left: 8px;
-    padding-right: 8px;
-    padding-top: 0px;
-    padding-bottom: 0px;
-    height: 20px !important;
-  }
-
-  .topics-container {
-    padding: 20px;
-    overflow-y: auto;
-  }
-
-  .topics-container {
-    /* height: calc(100vh - 220px); */
-    /* height: calc(100vh - 268px); */
-
-    /* height: calc(100vh - 218px); */
-
-    /* height: calc(100vh - 170px); */
-    height: calc(100vh - 110px);
-  }
-
-  /* @media screen and (max-width: 40em) { */
-  @media screen and (max-width: 750px) {
-    .topics-container {
-      /* height: calc(100vh - 256px); */
-
-      /* height: calc(100vh - 300px); */
-      height: calc(100vh - 140px);
-    }
-  }
-
-  .om-search-control-container {
-    border-radius: 2px;
-    box-shadow:0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);
-    margin-top: 10px;
-    margin-bottom: 10px;
-    width: inherit;
-  }
-
-  .om-search-control-button {
-    width: 40px;
-    background: #ccc;
-    float: right;
-  }
-
-  .om-search-control-input {
-    font-family: 'Montserrat', 'Tahoma', sans-serif;
-    font-size: 16px;
-  }
-
-  .om-search-control-input-tags {
-    font-family: 'Montserrat', 'Tahoma', sans-serif;
-    font-size: 16px;
-  }
-
-  .input-font {
-    font-family: 'Montserrat', 'Tahoma', sans-serif;
-    font-size: 16px;
-  }
-
-</style>

package/src/components/markers-mixin.js

@@ -1,58 +0,0 @@
-export default {
-  computed: {
-    // returns map markers as simple object with a geometry property, key,
-    // and optional properties for symbology
-    markers() {
-      const markers = [];
-      // geocoded address marker
-      const geocodeGeom = this.geocodeGeom;
-      if (geocodeGeom) {
-        const latlng = [ ...geocodeGeom.coordinates ].reverse();
-        const key = this.geocodeResult.properties.street_address;
-        const color = '#2176d2';
-        const markerType = 'geocode';
-        const icon = {
-          prefix: 'fas',
-          icon: 'map-marker-alt',
-          shadow: true,
-          size: 50,
-        };
-        const addressMarker = { latlng, key, color, markerType, icon };
-        markers.push(addressMarker);
-      }
-      return markers;
-    },
-    locationMarker() {
-      const latlngArray = [ this.$store.state.map.location.lat, this.$store.state.map.location.lng ];
-      const marker = {
-        latlng: latlngArray,
-        radius: 6,
-        fillColor: '#ff3f3f',
-        color: '#ff0000',
-        weight: 1,
-        opacity: 1,
-        fillOpacity: 1.0,
-      };
-      return marker;
-    },
-    clickMarker() {
-      const latlngArray = [ this.$store.state.map.clickMarkerLocation.lat, this.$store.state.map.clickMarkerLocation.lng ];
-      const marker = {
-        latlng: latlngArray,
-        radius: 6,
-        fillColor: '#ff3f3f',
-        color: '#ff0000',
-        weight: 1,
-        opacity: 1,
-        fillOpacity: 1.0,
-        icon: {
-          prefix: 'fas',
-          icon: 'map-marker-alt',
-          shadow: true,
-          size: 50,
-        },
-      };
-      return marker;
-    },
-  },
-};

package/src/fa.js

@@ -1,15 +0,0 @@
-
-import * as faComps from '@phila/vue-comps/src/fa.js';
-import * as faMapping from '@phila/vue-mapping/src/fa.js';
-
-// Font Awesome Icons
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faSpinner } from '@fortawesome/free-solid-svg-icons/faSpinner';
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons/faInfoCircle';
-import { faCheckSquare } from '@fortawesome/free-solid-svg-icons/faCheckSquare';
-import { faFilter } from '@fortawesome/free-solid-svg-icons/faFilter';
-import { faSquare } from '@fortawesome/free-regular-svg-icons/faSquare';
-import { faCircle } from '@fortawesome/free-regular-svg-icons/faCircle';
-library.add(faSpinner, faInfoCircle, faCheckSquare, faFilter, faSquare, faCircle);
-
-export default library;

package/src/main.js

@@ -1,93 +0,0 @@
-/*
-.____                             ___.                          .___
-|    |   _____  ___.__. __________\_ |__   _________ _______  __| _/
-|    |   \__  \<   |  |/ __ \_  __ \ __ \ /  _ \__  \\_  __ \/ __ |
-|    |___ / __ \\___  \  ___/|  | \/ \_\ (  <_> ) __ \|  | \/ /_/ |
-|_______ (____  / ____|\___  >__|  |___  /\____(____  /__|  \____ |
-        \/    \/\/         \/          \/           \/           \/
-*/
-
-
-import Vue from 'vue';
-import axios from 'axios';
-import createStore from './store';
-import configMixin from './util/config-mixin';
-import App from './App.vue';
-import Layerboard from './components/Layerboard.vue';
-import mergeDeep from './util/merge-deep';
-
-import * as faAll from './fa.js';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-
-import controllerMixin from '@phila/vue-datafetch/src/controller.js';
-
-import Router from 'vue-router';
-
-import * as L from 'leaflet';
-import * as esri from 'esri-leaflet';
-L.esri = esri;
-import * as rend from 'esri-leaflet-renderers';
-L.esri.Renderers = rend;
-import 'esri-leaflet-legend/dist/esri-leaflet-legend-compat-src-edit.js';
-import 'Leaflet-PointInPolygon/wise-leaflet-pip.js';
-
-function initLayerboard(clientConfig, secondFile) {
-  const baseConfigUrl = clientConfig.baseConfig;
-
-  // get base config
-  return axios.get(baseConfigUrl).then(response => {
-    const data = response.data;
-    const baseConfigFn = eval(data);
-    const { gatekeeperKey } = clientConfig;
-    const baseConfig = baseConfigFn({ gatekeeperKey });
-
-    // deep merge base config and client config
-    let config = mergeDeep(baseConfig, clientConfig);
-    if (secondFile) {
-      config = mergeDeep(config, secondFile);
-    }
-
-    config.router.pattern = 'address-and-topic';
-
-    // make config accessible from each component via this.$config
-    Vue.use(configMixin, config);
-
-    // create store
-    const store = createStore(config);
-
-    Vue.use(Router);
-    let router = new Router({
-      mode: 'history',
-      routes: [
-        {
-          path: '/:address',
-          name: 'address-only',
-        },
-      ],
-    });
-
-    // mix in controller
-    Vue.use(controllerMixin, { config, store, router });
-
-    Vue.component('font-awesome-icon', FontAwesomeIcon);
-
-    const customComps = config.customComps || [];
-    // console.log('mapboard main.js, customComps:', customComps);
-    for (let key of Object.keys(customComps)) {
-      Vue.component(key, customComps[key]);
-    }
-
-    // mount main vue
-    const vm = new Vue({
-      el: config.el || '#layerboard',
-      render: (h) => h(App),
-      router,
-      store,
-    });
-
-  }, response => {
-    console.error('AXIOS ERROR loading base config');
-  });
-}
-
-export default initLayerboard;

package/src/store.js

@@ -1,229 +0,0 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-import isMobileDevice from './util/is-mobile-device';
-import pvdStore from '@phila/vue-datafetch/src/store.js';
-import pvmStore from '@phila/vue-mapping/src/store.js';
-import pvcStore from '@phila/vue-comps/src/store.js';
-import mergeDeep from './util/merge-deep';
-
-// when you load vuex from a script tag this seems to happen automatically
-Vue.use(Vuex);
-
-// function createStore(config, bennyEndpoints, bennyRepresentation) {
-function createStore(config) { //}, bennyEndpoints, bennyRepresentation) {
-  // const modals = pvdStore.createModals(config);
-  const sources = pvdStore.createSources(config);
-
-  const initialState = {
-    sources,
-    isMobileOrTablet: isMobileDevice(),
-    fullScreen: {
-      mapOnly: false,
-      topicsOnly: false,
-    },
-    fullScreenMapEnabled: false,
-    bennyEndpoints: {},
-    layers: {
-      defaultLayers: [],
-      layerUrls: {},
-      inputLayerFilter: '',
-      inputTagsFilter: '',
-    },
-    map: {
-      tiledLayers: [],
-      mode: 'identifyFeatures',
-      scale: null,
-      webMap: null,
-      webMapUrlLayer: null,
-      webMapActiveLayers: [],
-      webMapDisplayedLayers: [],
-      webMapLayersAndRest: [],
-      intersectingFeatures: [],
-      popupCoords: null,
-      selectedPopupLayer: null,
-      categories: [],
-      selectedCategory: '',
-      clickMarkerLocation: {
-        lat: null,
-        lng: null,
-      },
-    },
-    candidates: [],
-    addressEntered: null,
-    didToggleTopicsOn: false,
-    shouldShowTopics: true,
-    shouldShowMap: true,
-    windowDimensions: {
-      height: 0,
-      width: 0,
-    },
-    // windowWidth: 0,
-    route: null,
-    modals: {
-      keys: config.modals,
-      open: '',
-    },
-  };
-
-  if (config.map) {
-    if (config.map.initialImagery) {
-      initialState.map.imagery = config.map.initialImagery;
-    }
-    if (config.map.overlaySelectControl) {
-      if (config.map.overlaySelectControl.initialSelection) {
-        initialState.map.selectedOverlay = config.map.overlaySelectControl.initialSelection;
-      }
-    }
-  }
-
-  const lb = {
-    state: initialState,
-    getters: {},
-    mutations: {
-      setTiledLayers(state, payload) {
-        state.map.tiledLayers = payload;
-      },
-      setClickMarkerLocation(state, payload) {
-        state.map.clickMarkerLocation = payload;
-      },
-      setMapMode(state, payload) {
-        state.map.mode = payload;
-      },
-      setIsMobileOrTablet(state, payload) {
-        state.isMobileOrTablet = payload;
-      },
-      setMapOnly(state, payload) {
-        state.fullScreen.mapOnly = payload;
-      },
-      setTopicsOnly(state, payload) {
-        state.fullScreen.topicsOnly = payload;
-      },
-      setFullScreenMapEnabled(state, payload) {
-        state.fullScreenMapEnabled = payload;
-      },
-      setCategories(state, payload) {
-        state.map.categories = payload;
-      },
-      setSelectedCategory(state, payload) {
-        state.map.selectedCategory = payload;
-      },
-      setSelectedPopupLayer(state, payload) {
-        state.map.selectedPopupLayer = payload;
-      },
-      setIntersectingFeatures(state, payload) {
-        state.map.intersectingFeatures = payload;
-      },
-      setPopupCoords(state, payload) {
-        state.map.popupCoords = payload;
-      },
-      setBennyEndpoints(state, payload) {
-        state.bennyEndpoints = payload;
-      },
-      // setLocation(state, payload) {
-      //   state.map.location.lat = payload.lat;
-      //   state.map.location.lng = payload.lng;
-      // },
-      setWatchPositionOn(state, payload) {
-        state.map.watchPositionOn = payload;
-      },
-      setDefaultLayers(state, payload) {
-        state.layers.defaultLayers = payload;
-      },
-      setLayerUrls(state, payload) {
-        state.layers.layerUrls = payload;
-      },
-      setInputLayerFilter(state, payload) {
-        state.layers.inputLayerFilter = payload;
-      },
-      setInputTagsFilter(state, payload) {
-        state.layers.inputTagsFilter = payload;
-      },
-      setMap(state, payload) {
-        state.map.map = payload.map;
-      },
-      setWebMap(state, payload) {
-        state.map.webMap = payload;
-      },
-      setWebMapUrlLayer(state, payload) {
-        state.map.webMapUrlLayer = payload;
-      },
-      setWebMapActiveLayers(state, payload) {
-        state.map.webMapActiveLayers = payload;
-      },
-      setWebMapDisplayedLayers(state, payload) {
-        state.map.webMapDisplayedLayers = payload;
-      },
-      setWebMapLayersAndRest(state, payload) {
-        state.map.webMapLayersAndRest = payload;
-      },
-      setWebMapLayersOpacity(state, payload) {
-        // console.log('SETWEBMAPLAYERSOPACITY IS RUNNING', payload);
-        // let opa = state.map.webMapLayersAndRest.filter(layer => layer.layerName === payload.layerName)[0].opacity
-        // console.log('OPACITY BEFORE', state.map.webMapLayersAndRest.filter(layer => layer.title === payload.layerName)[0].opacity);
-        state.map.webMapLayersAndRest.filter(layer => layer.title === payload.layerName)[0].opacity = payload.opa;
-        // console.log('OPACITY AFTER', state.map.webMapLayersAndRest.filter(layer => layer.title === payload.layerName)[0].opacity);
-        //   return currentLayer[0];
-        // console.log('SETWEBMAPLAYERSOPACITY FINISHED RUNNING');
-      },
-      setLegend(state, payload) {
-        // console.log('METHOD layerboard store setLegend is running, payload:', payload);
-        state.map.webMapLayersAndRest.filter(layer => layer.title === payload.layerName)[0].legend = payload.legend;
-      },
-      setMapScale(state, payload) {
-        state.map.scale = payload;
-      },
-      // setBasemap(state, payload) {
-      //   state.map.basemap = payload;
-      // },
-      setDidToggleTopicsOn(state, payload) {
-        state.didToggleTopicsOn = payload;
-      },
-      setShouldShowTopics(state, payload) {
-        state.shouldShowTopics = payload;
-      },
-      setShouldShowMap(state, payload) {
-        state.shouldShowMap = payload;
-      },
-      setWindowDimensions(state, payload) {
-        state.windowDimensions = payload;
-      },
-      // setWindowWidth(state, payload) {
-      //   state.windowWidth = payload;
-      // },
-      setRoute(state, payload) {
-        state.route = payload;
-      },
-      // setDidToggleModal(state, name) {
-      //   // console.log('setDidToggleModal, name:', name, 'open:', open);
-      //   // console.log('setDidToggleModal, name:', name);
-      //   // state.modals[name].open = open === null ? !state.modals[name].open : open
-      //   state.modals.open = name;
-      // },
-      setCandidates(state, payload) {
-        state.candidates = payload;
-      },
-      setAddressEntered(state, payload) {
-        state.addressEntered = payload;
-      },
-    },
-  };
-
-  // let mergeStore = mergeDeep(lb, pvdStore.store);
-  let mergeStore = mergeDeep(pvcStore, pvdStore.store);
-  mergeStore = mergeDeep(mergeStore, pvmStore);
-  mergeStore = mergeDeep(mergeStore, lb);
-
-  // reset the map center and zoom based on the config
-  mergeStore.state.map.center = config.map.center;
-  mergeStore.state.map.zoom = config.map.zoom;
-  mergeStore.state.pictometry.map.center = config.map.center;
-  mergeStore.state.pictometry.map.zoom = config.map.zoom;
-
-  return new Vuex.Store({
-    state: mergeStore.state,
-    getters: mergeStore.getters,
-    mutations: mergeStore.mutations,
-  });
-}
-
-export default createStore;

package/src/util/config-mixin.js

@@ -1,10 +0,0 @@
-// shout out to airyland
-// https://github.com/airyland/vue-config/blob/master/index.js
-
-export default (Vue, config) => {
-  Vue.mixin({
-    created() {
-      this.$config = config;
-    },
-  });
-};

package/src/util/is-mobile-device.js

@@ -1,11 +0,0 @@
-export default function () {
-  const mobileOrTabletRegexA = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i;
-  const mobileOrTabletRegexB = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i;
-
-  // get the user agent and test against both regex patterns
-  const userAgent = (navigator.userAgent || navigator.vendor || window.opera || '');
-  const isMobileOrTablet = (mobileOrTabletRegexA.test(userAgent) ||
-                            mobileOrTabletRegexB.test(userAgent.substr(0,4)));
-
-  return isMobileOrTablet;
-}