Unverified Commit 0459997c authored by Ken Hawkins's avatar Ken Hawkins Committed by GitHub
Browse files

bug: vf-location-nearest tab activation (#1696)

When vf-location-nearest activates a tab, browsers scroll that content into focus -- this is not desirable.
parent 63c3bec9
Pipeline #203315 passed with stages
in 7 minutes and 28 seconds
### 1.0.2
* Remove unneeded `console.log`.
### 1.0.1
* changes any `set-` style functions to cleaner version
......
......@@ -51,17 +51,17 @@ function vfLocationNearestDetect(locationsList) {
* Receive a location and process it against a user location if any.
* @example vfLocationNearestResolve(locationsList, userLocation)
* @param {object} [locationsList] - An object of locations
* @param {object} [userLocation] - An obhject with .latitude and .lognitude
* @param {object} [userLocation] - An object with .latitude and .longitude
*/
function vfLocationNearestResolve(locationsList, userLocation) {
// console.log(locationsList, userLocation);
console.log("user at",userLocation.latitude + ", " + userLocation.longitude);
// console.log("user at",userLocation.latitude + ", " + userLocation.longitude);
// Determing which location is closest using circles
// Determine which location is closest using circles
// https://stackoverflow.com/questions/21279559/geolocation-closest-locationlat-long-from-my-position/21297385#21297385
function calculateNearestCity(latitude, longitude) {
// Convert Degress to Radians
// Convert Degrees to Radians
function Deg2Rad(deg) {
return deg * Math.PI / 180;
}
......
......@@ -28,7 +28,10 @@
<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="grenoble">Grenoble</a>
<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>
......@@ -40,6 +43,11 @@
{% endmarkdown %}
</section>
<section class="vf-tabs__section" id="vf-tabs__section--2">
{% markdown %}
A sample `data-vf-js-location-nearest-activation-target='heidelberg'` activation target
{% endmarkdown %}
</section>
<section class="vf-tabs__section" id="vf-tabs__section--3">
{% markdown %}
A sample `data-vf-js-location-nearest-activation-target='grenoble'` activation target
{% endmarkdown %}
......@@ -47,6 +55,33 @@
</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">
{% markdown %}
Showing a second set of tabs
{% endmarkdown %}
</section>
<section class="vf-tabs__section" id="vf-tabs__section--2">
{% markdown %}
Showing a second set of tabs
{% endmarkdown %}
</section>
</div>
</div>
<script type="text/javascript">
window.onload = function () {
// You should do this in your central JS (scripts.js) as appropriate
......
### 2.0.2
* Prevent hijacking of scroll when focusing tabs.
* https://github.com/visual-framework/vf-core/pull/1696
* Use new interactive colour token.
* https://github.com/visual-framework/vf-core/issues/1688
......
......@@ -43,7 +43,7 @@ function vfTabs(scope) {
}
}
newTab.focus();
newTab.focus({preventScroll:true});
// Make the active tab focusable by the user (Tab key)
newTab.removeAttribute("tabindex");
// Set the selected state
......@@ -91,7 +91,7 @@ function vfTabs(scope) {
e.preventDefault();
// If the down key is pressed, move focus to the open panel,
// otherwise switch to the adjacent tab
dir === "down" ? panels[i].focus() : tabs[dir] ? switchTab(tabs[dir]) : void 0;
dir === "down" ? panels[i].focus({preventScroll:true}) : tabs[dir] ? switchTab(tabs[dir]) : void 0;
}
});
});
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment