Skip to content

Commit

Permalink
fix(route-drax): change animation to fix ios scroll
Browse files Browse the repository at this point in the history
  • Loading branch information
@azarz
azarz committed Oct 9, 2024
1 parent c301c2b commit 8fe13b7
Show file tree
Hide file tree
Showing 6 changed files with 52 additions and 37 deletions.
4 changes: 4 additions & 0 deletions src/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,10 @@ input, textarea, select {
padding: 0 !important;
}

.opacity0 {
opacity: 0 !important;
}

/* DS IGN forms */
.dsign-form-label,
.signalement-select {
Expand Down
8 changes: 4 additions & 4 deletions src/css/map-buttons.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
position: absolute;
bottom: calc(72px + 25px + max(calc(var(--safe-area-inset-bottom) - 10px - var(--nav-bar-height)), 20px));
width: 100vw;
transition: transform 0.5s ease-in-out;
transition: opacity 0.5s;
}

#bottomButtons.routeDraw {
Expand Down Expand Up @@ -173,7 +173,7 @@
padding-left: 25px;
background-position: 13px center;
width: 5.385rem;
transition: top 0.3s, transform 0.5s;
transition: top 0.3s, opacity 0.5s;
font-size: 14px;
}

Expand Down Expand Up @@ -223,7 +223,7 @@
box-sizing: border-box;
left: 50%;
transform: translateX(-50%);
transition: transform 0.5s;
transition: opacity 0.5s;
}

#routeDrawEdit > .button {
Expand Down Expand Up @@ -342,7 +342,7 @@
margin-right: 15px;
box-shadow: unset;
background-color: unset;
transition: margin-top 0.3s;
transition: margin-top 0.3s, opacity 0.5s;
}

.maplibregl-ctrl-top-right > .maplibregl-ctrl.higher {
Expand Down
3 changes: 3 additions & 0 deletions src/js/controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import Signalement from "./signalement";
import SignalementOSM from "./signalement-osm";
import Landmark from "./landmark";
import MapboxAccessibility from "./poi-accessibility";
import DOM from "./dom";

import LocationLayers from "./services/location-styles";

Expand Down Expand Up @@ -96,6 +97,8 @@ const addControls = () => {
// contrôle fullscreen
map.addControl(new maplibregl.FullscreenControl(), "top-right");

DOM.$fullScreenBtn = document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl");

// contrôle d'intéractivité de la carte
Globals.mapInteractivity = new MapInteractivity(map, {});

Expand Down
2 changes: 2 additions & 0 deletions src/js/dom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ const $routeDrawCancel = document.getElementById("routeDrawCancel");
const $routeDrawRestore = document.getElementById("routeDrawRestore");
const $routeDrawDelete = document.getElementById("routeDrawDelete");
const $routeDrawSave = document.getElementById("routeDrawSave");
const $fullScreenBtn = null;

const $mapCenter = document.getElementById("mapCenter");
const $mapCenterMenu = document.getElementById("mapCenterMenu");
Expand Down Expand Up @@ -125,4 +126,5 @@ export default {
$landmarkWindow,
$tabClose,
$sideBySideFadeSlider,
$fullScreenBtn,
};
18 changes: 12 additions & 6 deletions src/js/event-listeners.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,14 +243,20 @@ function addListeners() {
};

window.addEventListener("scroll", () => {
DOM.$bottomButtons.style.removeProperty("transform");
DOM.$routeDrawEdit.style.removeProperty("transform");
DOM.$filterPoiBtn.style.removeProperty("transform");
DOM.$bottomButtons.classList.remove("opacity0");
DOM.$routeDrawEdit.classList.remove("opacity0");
DOM.$filterPoiBtn.classList.remove("opacity0");
if (DOM.$fullScreenBtn) {
DOM.$fullScreenBtn.classList.remove("opacity0");
}
const thresh = window.innerHeight / 2;
if (!window.matchMedia("screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches && window.scrollY > thresh) {
DOM.$bottomButtons.style.transform = "translateY(-100vh)";
DOM.$routeDrawEdit.style.transform = "translateX(100vw)";
DOM.$filterPoiBtn.style.transform = "translateY(-100vh)";
DOM.$bottomButtons.classList.add("opacity0");
DOM.$routeDrawEdit.classList.add("opacity0");
DOM.$filterPoiBtn.classList.add("opacity0");
if (DOM.$fullScreenBtn) {
DOM.$fullScreenBtn.classList.add("opacity0");
}
}
const insetTop = Math.round(parseFloat(getComputedStyle(document.body).getPropertyValue("--safe-area-inset-top").slice(0, -2)));
const insetBottom = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-inset-bottom").slice(0, -2));
Expand Down
54 changes: 27 additions & 27 deletions src/js/nav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ class MenuNavigation {
Globals.backButtonState = "landmark-" + previousBackState;
DOM.$search.classList.add("d-none");
DOM.$filterPoiBtn.classList.add("d-none");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.add("d-none");
DOM.$fullScreenBtn.classList.add("d-none");
DOM.$backTopLeftBtn.classList.remove("d-none");
Globals.interactivityIndicator.hardDisable();
Globals.currentScrollIndex = 1;
Expand All @@ -151,12 +151,12 @@ class MenuNavigation {
Globals.backButtonState = "signalementOSM-" + previousBackState;
DOM.$positionWindow.classList.add("d-none");
DOM.$filterPoiBtn.classList.add("d-none");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.add("d-none");
DOM.$fullScreenBtn.classList.add("d-none");
Globals.interactivityIndicator.hardDisable();
break;
case "comparePoi":
DOM.$search.classList.add("d-none");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.add("higher");
DOM.$fullScreenBtn.classList.add("higher");
DOM.$filterPoiBtn.classList.add("higher");
DOM.$backTopLeftBtn.classList.remove("d-none");
Globals.currentScrollIndex = 2;
Expand All @@ -165,7 +165,7 @@ class MenuNavigation {
case "selectOnMapIsochrone":
case "selectOnMapLandmark":
DOM.$filterPoiBtn.classList.add("d-none");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.add("d-none");
DOM.$fullScreenBtn.classList.add("d-none");
DOM.$layerManagerBtn.classList.add("d-none");
DOM.$mapCenter.classList.remove("d-none");
DOM.$mapCenterMenu.classList.remove("d-none");
Expand Down Expand Up @@ -228,7 +228,7 @@ class MenuNavigation {
case "routeDrawSave":
DOM.$routeDrawWindow.classList.add("d-none");
DOM.$filterPoiBtn.classList.add("d-none");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.add("d-none");
DOM.$fullScreenBtn.classList.add("d-none");
Globals.routeDraw.dom.changeMode.classList.add("d-none");
DOM.$routeDrawEdit.classList.add("d-none");
DOM.$bottomButtons.classList.remove("routeDraw");
Expand All @@ -239,7 +239,7 @@ class MenuNavigation {
DOM.$tabClose.classList.add("d-none");
DOM.$search.classList.add("d-none");
DOM.$filterPoiBtn.classList.add("higher");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.add("higher");
DOM.$fullScreenBtn.classList.add("higher");
DOM.$backTopLeftBtn.classList.remove("d-none");
if (!Globals.routeDraw.readonly) {
DOM.$routeDrawEdit.classList.remove("d-none");
Expand All @@ -257,14 +257,14 @@ class MenuNavigation {
DOM.$filterPoiBtn.classList.add("higher");
DOM.$backTopLeftBtn.classList.remove("d-none");
DOM.$filterPoiBtn.classList.add("d-none");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.add("d-none");
DOM.$fullScreenBtn.classList.add("d-none");
Globals.currentScrollIndex = 2;
break;
case "layerManager":
Globals.backButtonState = "layerManager-" + previousBackState;
DOM.$layerManagerBtn.classList.add("active");
DOM.$search.classList.add("d-none");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.add("higher");
DOM.$fullScreenBtn.classList.add("higher");
DOM.$filterPoiBtn.classList.add("higher");
DOM.$tabContainer.classList.remove("white");
DOM.$backTopLeftBtn.classList.remove("d-none");
Expand All @@ -284,9 +284,9 @@ class MenuNavigation {
Globals.interactivityIndicator.enable();
DOM.$search.classList.add("d-none");
DOM.$filterPoiBtn.classList.add("higher");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.add("higher");
DOM.$fullScreenBtn.classList.add("higher");
DOM.$filterPoiBtn.classList.remove("d-none");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.remove("d-none");
DOM.$fullScreenBtn.classList.remove("d-none");
DOM.$backTopLeftBtn.classList.remove("d-none");
Globals.currentScrollIndex = 2;
break;
Expand All @@ -296,7 +296,7 @@ class MenuNavigation {
Globals.backButtonState = "isochrone-" + previousBackState;
DOM.$search.classList.add("d-none");
DOM.$filterPoiBtn.classList.add("d-none");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.add("highest");
DOM.$fullScreenBtn.classList.add("highest");
DOM.$backTopLeftBtn.classList.remove("d-none");
Globals.interactivityIndicator.hardDisable();
Globals.currentScrollIndex = 1;
Expand Down Expand Up @@ -340,9 +340,9 @@ class MenuNavigation {
Globals.backButtonState = "directions-" + previousBackState;
DOM.$search.classList.add("d-none");
DOM.$filterPoiBtn.classList.add("higher");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.add("higher");
DOM.$fullScreenBtn.classList.add("higher");
DOM.$filterPoiBtn.classList.remove("d-none");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.remove("d-none");
DOM.$fullScreenBtn.classList.remove("d-none");
DOM.$backTopLeftBtn.classList.remove("d-none");
Globals.interactivityIndicator.hardDisable();
// FIXME
Expand Down Expand Up @@ -396,7 +396,7 @@ class MenuNavigation {
case "landmark":
DOM.$search.classList.remove("d-none");
DOM.$filterPoiBtn.classList.remove("d-none");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.remove("d-none");
DOM.$fullScreenBtn.classList.remove("d-none");
DOM.$backTopLeftBtn.classList.add("d-none");
Globals.landmark.clear();
Globals.interactivityIndicator.enable();
Expand All @@ -405,7 +405,7 @@ class MenuNavigation {
case "signalementOSM":
DOM.$positionWindow.classList.remove("d-none");
DOM.$filterPoiBtn.classList.remove("d-none");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.remove("d-none");
DOM.$fullScreenBtn.classList.remove("d-none");
Globals.interactivityIndicator.enable();
Globals.signalement.clear();
Globals.signalementOSM.clear();
Expand All @@ -415,13 +415,13 @@ class MenuNavigation {
case "comparePoi":
Globals.comparePoi.clearSources();
DOM.$search.classList.remove("d-none");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.remove("higher");
DOM.$fullScreenBtn.classList.remove("higher");
DOM.$filterPoiBtn.classList.remove("higher");
DOM.$backTopLeftBtn.classList.add("d-none");
break;
case "selectOnMapDirections":
DOM.$filterPoiBtn.classList.remove("d-none");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.remove("d-none");
DOM.$fullScreenBtn.classList.remove("d-none");
// falls through
case "selectOnMapIsochrone":
case "selectOnMapLandmark":
Expand Down Expand Up @@ -477,7 +477,7 @@ class MenuNavigation {
// Disparition de la croix
DOM.$tabClose.classList.add("d-none");
DOM.$filterPoiBtn.classList.remove("d-none");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.remove("d-none");
DOM.$fullScreenBtn.classList.remove("d-none");
DOM["$routeDrawWindow"].classList.remove("d-none");
Globals.routeDraw.dom.changeMode.classList.remove("d-none");
DOM.$routeDrawEdit.classList.remove("d-none");
Expand All @@ -488,9 +488,9 @@ class MenuNavigation {
case "routeDraw":
DOM.$search.classList.remove("d-none");
DOM.$filterPoiBtn.classList.remove("higher");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.remove("higher");
DOM.$fullScreenBtn.classList.remove("higher");
DOM.$filterPoiBtn.classList.remove("d-none");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.remove("d-none");
DOM.$fullScreenBtn.classList.remove("d-none");
DOM.$backTopLeftBtn.classList.add("d-none");
if (!Globals.routeDraw.readonly) {
DOM.$routeDrawEdit.classList.add("d-none");
Expand All @@ -503,16 +503,16 @@ class MenuNavigation {
case "poi":
DOM.$search.classList.remove("d-none");
DOM.$filterPoiBtn.classList.remove("higher");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.remove("higher");
DOM.$fullScreenBtn.classList.remove("higher");
DOM.$backTopLeftBtn.classList.add("d-none");
DOM.$filterPoiBtn.classList.remove("d-none");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.remove("d-none");
DOM.$fullScreenBtn.classList.remove("d-none");
break;
case "layerManager":
DOM.$search.classList.remove("d-none");
DOM.$layerManagerBtn.classList.remove("active");
DOM.$filterPoiBtn.classList.remove("higher");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.remove("higher");
DOM.$fullScreenBtn.classList.remove("higher");
DOM.$backTopLeftBtn.classList.add("d-none");
break;
case "informations":
Expand All @@ -522,15 +522,15 @@ class MenuNavigation {
case "position":
DOM.$search.classList.remove("d-none");
DOM.$filterPoiBtn.classList.remove("higher");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.remove("higher");
DOM.$fullScreenBtn.classList.remove("higher");
DOM.$backTopLeftBtn.classList.add("d-none");
Globals.mapInteractivity.clear();
break;
case "isochrone":
// FIXME mettre en place une méthode sur la classe Searchs
DOM.$search.classList.remove("d-none");
DOM.$filterPoiBtn.classList.remove("d-none");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.remove("highest");
DOM.$fullScreenBtn.classList.remove("highest");
DOM.$backTopLeftBtn.classList.add("d-none");
Globals.isochrone.clear();
Globals.interactivityIndicator.enable();
Expand Down Expand Up @@ -582,9 +582,9 @@ class MenuNavigation {
case "directions":
DOM.$search.classList.remove("d-none");
DOM.$filterPoiBtn.classList.remove("higher");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.remove("higher");
DOM.$fullScreenBtn.classList.remove("higher");
DOM.$filterPoiBtn.classList.remove("d-none");
document.querySelector(".maplibregl-ctrl-top-right > .maplibregl-ctrl").classList.remove("d-none");
DOM.$fullScreenBtn.classList.remove("d-none");
DOM.$backTopLeftBtn.classList.add("d-none");
Globals.directions.clear();
Globals.interactivityIndicator.enable();
Expand Down

0 comments on commit 8fe13b7

Please sign in to comment.