Nefarious Plastic Mannequins

    @visual-framework/vf-location-nearest

    1.0.0 • Public • Published

    Nearest Location component

    npm version

    About

    From a list of lat and long, this will use the browser geolcation API to select the nearest. It also provides a manual selection fallback and override.

    Usage

    This component is purely JavaScript and relies on other components to provide UI and to consume the detected region.

    This is an early version, some future improvements to be considered:

    • Callback to observe detected locations to be used in other components
    • Allowing "or" matches for content data-vf-js-location-nearest-activation-target="locationOne, locationTwo"
    • Enabling the default while we wait for geodetection
    • "Saving" a user's location when using the override

    JS

    You should import this component in ./components/vf-component-rollup/scripts.js or your other JS process:

    import { vfLocationNearest } from 'vf-location-nearest/vf-location-nearest';
    // Or import directly
    // import { vfLocationNearest } from '../components/raw/vf-location-nearest/vf-location-nearest.js';
     
    // Configure an object of your locations to detect
    // You should do this in your central JS (scripts.js) as appropriate
    let vfLocationNearestLocations = {
      // supply a default in case of geodetect failures
      default: {
        name: "Heidelberg",
        latlon: "49.40768, 8.69079" // lat then lon
      },
      barcelona: {
        name: "Barcelona",
        latlon: "0.40768, 0.69079"
      },
      ...
      }
    }
    // Bootstrap location detection
    vfLocationNearest(vfLocationNearestLocations);

    JS Data attributes

    All are optional

    • data-vf-js-location-nearest-name element will receive the name of the current location
    • data-vf-js-location-nearest-override-widget element will be populated with an override widget (vf-form select list)
    • data-vf-js-location-nearest-activation-target="{locationId}" will receive clicks on location change. This is a simple method to activate diverse elements.

    Install

    This repository is distributed with [npm][https://www.npmjs.com/]. After [installing npm][https://www.npmjs.com/get-npm] and yarn, you can install vf-location-nearest with this command.

    $ yarn add --dev @visual-framework/vf-location-nearest
    

    Help

    Install

    npm i @visual-framework/[email protected]

    Version

    1.0.0

    License

    Apache 2.0

    Unpacked Size

    25.9 kB

    Total Files

    12

    Last publish

    Collaborators

    • khawkins98
    • sturobsonembl