Visual Framework
Visual Framework
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.
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:
data-vf-js-location-nearest-activation-target="locationOne, locationTwo"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);
All are optional
data-vf-js-location-nearest-name element will receive the name of the current locationdata-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.Your detected city is: loading
Elements tagged with data-vf-js-location-nearest-activation-target="{locationId}" will receive clicks on location change. This is a simple method to activate diverse elements.
A sample data-vf-js-location-nearest-activation-target='default' activation target
A sample data-vf-js-location-nearest-activation-target='heidelberg' activation target
A sample data-vf-js-location-nearest-activation-target='grenoble' activation target
Showing a second set of tabs
Showing a second set of tabs
<div class="vf-location-nearest | vf-content">
/* This is a demo only, to use this utility component follow the README.md to graft onto your UI */
<h3 id="detected-location">Detected location</h3>
<p>Your detected city is: <span data-vf-js-location-nearest-name><em>loading</em></span></p>
<h3 id="available-locations">Available locations</h3>
<div data-vf-js-location-nearest-override-widget><em>loading</em></div>
<h3 id="element-activation">Element activation</h3>
<p>Elements tagged with <code>data-vf-js-location-nearest-activation-target="{locationId}"</code> will receive clicks on location change. This is a simple method to activate diverse elements.</p>
<div class="vf-tabs">
<ul class="vf-tabs__list" data-vf-js-tabs>
<li class="vf-tabs__item">
<a class="vf-tabs__link" href="#vf-tabs__section--1" data-vf-js-location-nearest-activation-target="default">Default</a>
</li>
<li class="vf-tabs__item">
<a class="vf-tabs__link" href="#vf-tabs__section--2" data-vf-js-location-nearest-activation-target="heidelberg">Heidelberg</a>
</li>
<li class="vf-tabs__item">
<a class="vf-tabs__link" href="#vf-tabs__section--3" data-vf-js-location-nearest-activation-target="grenoble">Grenoble</a>
</li>
</ul>
</div>
<div class="vf-tabs-content" data-vf-js-tabs-content>
<section class="vf-tabs__section" id="vf-tabs__section--1">
<p>A sample <code>data-vf-js-location-nearest-activation-target='default'</code> activation target</p>
</section>
<section class="vf-tabs__section" id="vf-tabs__section--2">
<p>A sample <code>data-vf-js-location-nearest-activation-target='heidelberg'</code> activation target</p>
</section>
<section class="vf-tabs__section" id="vf-tabs__section--3">
<p>A sample <code>data-vf-js-location-nearest-activation-target='grenoble'</code> activation target</p>
</section>
</div>
</div>
<div class="vf-tabs">
<ul class="vf-tabs__list" data-vf-js-tabs>
<li class="vf-tabs__item">
<a class="vf-tabs__link" href="#vf-tabs__section--1" data-vf-js-location-nearest-activation-target="default">Default tabset 2</a>
</li>
<li class="vf-tabs__item">
<a class="vf-tabs__link" href="#vf-tabs__section--2" data-vf-js-location-nearest-activation-target="heidelberg">Heidelberg tabset 2</a>
</li>
</ul>
</div>
<div class="vf-tabs-content" data-vf-js-tabs-content>
<section class="vf-tabs__section" id="vf-tabs__section--1">
<p>Showing a second set of tabs</p>
</section>
<section class="vf-tabs__section" id="vf-tabs__section--2">
<p>Showing a second set of tabs</p>
</section>
</div>
</div>
<script type="text/javascript">
window.onload = function() {
// You should do this in your central JS (scripts.js) as appropriate
// Configure an object of your locations to detect
let vfLocationNearestLocations = {
default: {
name: "Heidelberg (default)",
latlon: "49.40768, 8.69079"
},
barcelona: {
name: "Barcelona",
latlon: "41.38879, 2.15899"
},
grenoble: {
name: "Grenoble",
latlon: "45.16667, 5.71667"
},
hamburg: {
name: "Hamburg",
latlon: "53.57532, 10.01534"
},
heidelberg: {
name: "Heidelberg",
latlon: "49.40768, 8.69079"
},
hinxton: {
name: "EMBL-EBI Hinxton",
latlon: "52.2, 0.11667"
},
rome: {
name: "Rome",
latlon: "41.89193, 12.51133"
}
}
// Bootstrap location detection
vfLocationNearest(vfLocationNearestLocations);
};
</script>
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
vf-navigation--on-this-page.vf-intro so it's a white background, removes the padding.vf-intro to be the 'correct' buttons.vf-component-assets:everything on local dev/css/app.cssvf-css:generate-component-css
File system location: components/vf-location-nearest
Find an issue on this page? Propose a change or discuss it.