Skip to content

Commit

Permalink
fix(action-sheets): correct use of action sheets everywhere
Browse files Browse the repository at this point in the history
  • Loading branch information
@azarz
azarz committed Sep 30, 2024
1 parent a8c90c7 commit b29542c
Show file tree
Hide file tree
Showing 5 changed files with 132 additions and 42 deletions.
23 changes: 23 additions & 0 deletions src/js/action-sheet.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ class ActionSheet extends EventTarget {
_targetWrapper = document.getElementById("sheetContent");
_targetContent = document.getElementById("sheetOptions");
_closeElem = document.getElementById("sheetClose");
_shown = false;

constructor() {
super();
Expand Down Expand Up @@ -124,6 +125,16 @@ class ActionSheet extends EventTarget {
}

async show(settings) {
// Si on demande l'ouverture de l'ActionSheet alors qu'elle est ouverte, on attend qu'elle se ferme.
if (this._shown) {
await new Promise((resolve) => {
this.addEventListener("hideSheet", () => {
resolve(null);
});
});
}

this._shown = true;
this.settings = settings || {
style: "list", // can be "buttons", "list", "custom"
options: [], // {class: "", text: "", value: "", confirmCallback: null}
Expand Down Expand Up @@ -163,6 +174,18 @@ class ActionSheet extends EventTarget {
setTimeout( () => {
this._target.classList.add("d-none");
this._clearHtml();
this._shown = false;
/**
* Evenement "hideSheet"
* @event hideSheet
* @type {*}
* @property {*} value -
*/
this.dispatchEvent(
new CustomEvent("hideSheet", {
bubbles: true,
})
);
}, 500);
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/js/layer-manager/layer-switcher.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -428,7 +428,7 @@ class LayerSwitcher extends EventTarget {
},
{
class: "tools-layer-remove",
text: "Retirer",
text: "Retirer de ma sélection",
value: "remove",
},
],
Expand Down
59 changes: 56 additions & 3 deletions src/js/my-account/my-account.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -502,7 +502,6 @@ class MyAccount {
if (route.visible) {
route.visible = false;
this.#updateSources();
document.getElementById(`route-visibility_ID_${route.id}`).checked = false;
}
let coordinates = [];
route.data.steps.forEach((step) => {
Expand All @@ -525,6 +524,14 @@ class MyAccount {
Globals.routeDraw.setId(route.id);
}

/**
* Ouvre l'outil de tracé d'itinéraire pour modifier un itinéraire à partir de son ID
* @param {Number} routeId
*/
editRouteFromID(routeId) {
this.editRoute(this.#getRouteFromID(routeId));
}

/**
* Ouvre l'outil de tracé d'itinéraire en mode consultation pour afficher les caractéristiques techniques
* @param {*} route
Expand All @@ -533,7 +540,7 @@ class MyAccount {
if (!route.visible) {
route.visible = true;
this.#updateSources();
document.getElementById(`route-visibility_ID_${route.id}`).checked = true;
document.getElementById(`route-container_ID_${route.id}`).classList.remove("invisible");
}
let coordinates = [];
route.data.steps.forEach((step) => {
Expand Down Expand Up @@ -651,7 +658,14 @@ Dénivelé positif : ${route.data.elevationData.dplus} m, Dénivelé négatif :
dialogTitle: "Partager mon itinéraire (résumé)",
});
}
}

/**
* Partage l'itinéraire sous forme de fichier à partir de son ID
* @param {Number} routeId
*/
shareRouteFromID(routeId) {
this.shareRoute(this.#getRouteFromID(routeId));
}

/**
Expand All @@ -672,7 +686,7 @@ https://cartes-ign.ign.fr?lng=${landmark.geometry.coordinates[0]}&lat=${landmark
}

/**
* Exporte l'itinéraire sous forme d'un ficheir geojson
* Exporte l'itinéraire sous forme d'un fichier
* @param {*} route
*/
async exportRoute(route) {
Expand Down Expand Up @@ -744,6 +758,14 @@ https://cartes-ign.ign.fr?lng=${landmark.geometry.coordinates[0]}&lat=${landmark
}
}

/**
* Exporte l'itinéraire sous forme d'un fichier à partir de son ID
* @param {Number} routeId
*/
exportRouteFromID(routeId) {
this.exportRoute(this.#getRouteFromID(routeId));
}

/**
* Exporte le point de repère sous forme d'un ficheir geojson
* @param {*} route
Expand Down Expand Up @@ -800,6 +822,17 @@ https://cartes-ign.ign.fr?lng=${landmark.geometry.coordinates[0]}&lat=${landmark
this.#updateSources();
}

/**
* Affiche l'itinéraire s'il est caché à partir de son ID
* @param {Number} routeId
*/
showRouteFromID(routeId) {
const route = this.#getRouteFromID(routeId);
if (!route.visible) {
this.toggleShowRoute();
}
}

/**
* Affiche le point de repère s'il est caché, ou le cache s'il est affiché
* @param {*} landmark
Expand All @@ -818,6 +851,26 @@ https://cartes-ign.ign.fr?lng=${landmark.geometry.coordinates[0]}&lat=${landmark
this.#updateSources();
}

/**
* Récupère un itinéraire via son ID
* @param {Number} routeId
* @returns route
*/
#getRouteFromID(routeId) {
if (routeId === null) {
console.error("Null route ID");
return;
}
let route;
for (let i = 0; i < Globals.myaccount.routes.length; i++) {
route = Globals.myaccount.routes[i];
if (route.id === routeId) {
break;
}
}
return route;
}

/**
* Convertit une route telle qu'enregistrée dans le compte en geojson valide
* @param {*} route
Expand Down
74 changes: 46 additions & 28 deletions src/js/route-draw/route-draw-dom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
*/

import utils from "../utils/unit-utils";
import DomUtils from "../utils/dom-utils";

import ActionSheet from "../action-sheet";

Expand Down Expand Up @@ -78,36 +77,55 @@ let RouteDrawDOM = {
labelAdvancedTools.title = "Plus d'outils";
labelAdvancedTools.className = "tools-layer-advanced";

var tplContainer = `
<div id="route-draw-advanced-tools" class="tools-layer-advanced-menu">
<div id="route-draw-advanced-edit" class="tools-layer-edit" title="Modifier l'itinéraire">Modifier</div>
<div id="route-draw-advanced-share" class="tools-layer-share" title="Partager l'itinéraire">Partager</div>
<div id="route-draw-advanced-export" class="tools-layer-export" title="Exporter l'itinéraire">Exporter</div>
<div id="route-draw-advanced-remove" class="tools-layer-remove" title="Supprimer l'itinéraire'">Supprimer</div>
</div>
`;

var advancedTools = DomUtils.stringToHTML(tplContainer.trim());
advancedTools.querySelector("#route-draw-advanced-share").addEventListener("click", this.shareRoute.bind(this));
advancedTools.querySelector("#route-draw-advanced-export").addEventListener("click", this.exportRoute.bind(this));
advancedTools.querySelector("#route-draw-advanced-edit").addEventListener("click", this.openEdition.bind(this));
let hasBeenClicked = false;
advancedTools.querySelector("#route-draw-advanced-remove").addEventListener("click", () => {
if (!hasBeenClicked) {
Toast.show({
text: "Confirmez la suppression de l'itinéraire",
duration: "short",
position: "bottom"
});
hasBeenClicked = true;
} else {
this.deleteRoute();
hasBeenClicked = false;
}
labelAdvancedTools.addEventListener("click", () => {
ActionSheet.show({
options: [
{
class: "tools-layer-edit",
text: "Modifier",
value: "edit",
},
{
class: "tools-layer-share",
text: "Partager",
value: "share",
},
{
class: "tools-layer-export",
text: "Exporter",
value: "export",
},
{
class: "tools-layer-remove confirm-needed",
text: "Supprimer",
value: "delete",
confirmCallback: () => {
Toast.show({
text: "Confirmez la suppression de l'itinéraire",
duration: "short",
position: "bottom"
});
}
},
],
timeToHide: 50,
}).then( (value) => {
if (value === "share") {
this.shareRoute();
}
if (value === "edit") {
this.openEdition();
}
if (value === "export") {
this.exportRoute();
}
if (value === "delete") {
this.deleteRoute();
}
});
});

wrapper.appendChild(labelAdvancedTools);
wrapper.appendChild(advancedTools);
div.appendChild(wrapper);
return div;
},
Expand Down
16 changes: 6 additions & 10 deletions src/js/route-draw/route-draw.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -285,32 +285,29 @@ class RouteDraw {
}
const routeId = this.routeId;
this.hide();
document.getElementById(`route-edit_ID_${routeId}`).click();
Globals.myaccount.editRouteFromID(routeId);
}

/**
* Partage l'itinéraire à l'aide de la méthode de myAccount
*/
shareRoute() {
const routeId = this.routeId;
document.getElementById(`route-share_ID_${routeId}`).click();
Globals.myaccount.shareRouteFromID(this.routeId);
}

/**
* Exporte l'itinéraire à l'aide de la méthode de myAccount
*/
exportRoute() {
const routeId = this.routeId;
document.getElementById(`route-export_ID_${routeId}`).click();
Globals.myaccount.exportRouteFromID(this.routeId);
}

/**
* Supprime l'itinéraire à l'aide de la méthode de myAccount
*/
deleteRoute() {
const routeId = this.routeId;
this.hide();
Globals.myaccount.deleteRoute(routeId);
Globals.myaccount.deleteRoute(this.routeId);
}

/**
Expand Down Expand Up @@ -1147,10 +1144,9 @@ class RouteDraw {
* @public
*/
hide() {
const routeId = this.routeId;
Globals.menu.close("routeDraw");
if (routeId !== null && !document.getElementById(`route-visibility_ID_${routeId}`).checked) {
document.getElementById(`route-visibility_ID_${routeId}`).click();
if (this.routeId !== null) {
Globals.myaccount.showRouteFromID(this.routeId);
}
}
}
Expand Down

0 comments on commit b29542c

Please sign in to comment.