Skip to content

Commit

Permalink
feat(layerswitcher): range progress in webkit
Browse files Browse the repository at this point in the history
  • Loading branch information
@azarz
azarz committed Dec 4, 2023
1 parent 599960e commit 97d2112
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 73 deletions.
28 changes: 7 additions & 21 deletions src/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,18 +208,17 @@ input[type="range"]:focus {
input[type="range"]::-webkit-slider-runnable-track {
border-radius: 2px;
height: 4px;
background: linear-gradient(#E9ECEF 0 0) scroll no-repeat center /
100% 5px;
background: linear-gradient(#2dc398,#2dc398) 0/var(--sx) 100% no-repeat, #efefef;
}

input[type=range] {
--range: calc(var(--max) - var(--min));
--ratio: calc((var(--value) - var(--min)) / var(--range));
--sx: calc(0.5 * 16px + var(--ratio) * (100% - 16px));
}

/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
--clip-top: calc((16px - 4px) * 0.5 - 0.5px);
--clip-bottom: calc(16px - var(--clip-top));
--clip-further: calc(100% + 1px);
--clip-edges: 0.0125em;
--box-fill: calc(-100vmax - 16px) 0 0 100vmax currentColor;

-webkit-appearance: none; /* Override default look */
appearance: none;
margin-top: -6px; /* Centers thumb on the track */
Expand All @@ -229,19 +228,6 @@ input[type="range"]::-webkit-slider-thumb {
width: 16px;
border: #3F4A55 6px solid;
box-sizing: border-box;

box-shadow: var(--box-fill);

clip-path: polygon(
100% -1px,
0.125em -1px,
0 var(--clip-top),
-100vmax var(--clip-top),
-100vmax var(--clip-bottom),
0 var(--clip-bottom),
var(--clip-edges) 100%,
var(--clip-further) var(--clip-further)
);
}

/*********** Firefox styles ***********/
Expand Down
111 changes: 59 additions & 52 deletions src/js/layer-switcher.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ import ImageNotFound from '../html/img/image-not-found.png';
* @todo N&B
* @todo menu avancé sous forme d'une popup verticale
* @todo icone de visibilité à modifier
* @description
* → manager
* @description
* → manager
* → instancie this.catalogue & this.switcher
* → ecouteurs sur les events
* → ecouteurs sur les events
* * addLayer
* → this.catalogue → call this.switcher.addLayer
* → this.switcher → call this.updateCounter
Expand All @@ -26,8 +26,8 @@ import ImageNotFound from '../html/img/image-not-found.png';
* → this.switcher → call this.updateCounter
* → loader de couches par defaut
* → call this.catalogue.addLayer
*
* → catalogue
*
* → catalogue
* → this.addLayer → call add interface → fire event addLayer
* → this.removeLayer → call remove interface → fire event removeLayer
* → switcher
Expand All @@ -39,16 +39,16 @@ class LayerSwitcher {

/**
* constructeur
* @param {*} options
* @param {*} options
* @param {*} options.target
*/
constructor(options) {
this.options = options || {
target : null
};

// TODO
// options d'ajout de couches
// options d'ajout de couches
// avec un test si la couche est déjà disponible sur la carte

this.target = this.options.target || document.getElementById("layer-switcher");
Expand All @@ -75,7 +75,7 @@ class LayerSwitcher {
* }
*/
this.layers = {};

/**
* Interface pour les evenements
* @example
Expand All @@ -85,9 +85,9 @@ class LayerSwitcher {
this.event = new EventTarget();

this.#render();

}

/**
* Rendu
*/
Expand All @@ -100,7 +100,7 @@ class LayerSwitcher {
console.warn();
return;
}

// ajout du container
this.target.appendChild(container);

Expand All @@ -118,11 +118,11 @@ class LayerSwitcher {
}
});
}

/**
* Obtenir le nom de la couche à partir de son numero d'indexe
* @param {*} index
* @returns
* @param {*} index
* @returns
*/
#getId(index) {
var id = null;
Expand All @@ -140,28 +140,28 @@ class LayerSwitcher {

/**
* Obtenir le numero d'indexe à partir du nom de la couche
* @param {*} id
* @returns
* @param {*} id
* @returns
*/
#getIndex(id) {
return this.layers[id].index;
}

/**
* Position de la couche dans le gestionnaire
* @param {*} id
* @param {*} newIndex
* @param {*} oldIndex
* @param {*} id
* @param {*} newIndex
* @param {*} oldIndex
*/
#setPosition(id, newIndex, oldIndex) {
// position :
// * ordre natif à mapbox
// position :
// * ordre natif à mapbox
// > cad même position dans le fichier de style !
// idx pos style
// idx pos style
// 0 0 0 la couche de fonds
// 1 1 1 la couche intermediaire
// 2 2 2 la couche la plus au dessus

// Mais on prévoit un ordre inversé dans le gestionnaire !
// idx pos style
// 0 2 2 la couche la plus au dessus
Expand Down Expand Up @@ -207,7 +207,7 @@ class LayerSwitcher {
}
}
// INFO
// les couches raster possedent un seul style,
// les couches raster possedent un seul style,
// on associe donc position dans le style et position dans le gestionnaire.
// pour le vecteur tuilé, il faut determiner le nombre de styles pour chaque position.
const getIndexLayer = (pos) => {
Expand All @@ -232,7 +232,7 @@ class LayerSwitcher {
/**
* Mise à jour des positions dans le gestionnaire et les styles
* lors de l'ajout ou suppression d'une couche
* @param {*} id
* @param {*} id
*/
#updatePosition(id) {
// 1. redefinition des positions dans le gestionnaire
Expand All @@ -251,7 +251,7 @@ class LayerSwitcher {
}
// 2. redefinition des positions dans les styles
// on redefinie la position des couches vecteurs tuilés dans les styles
//
//
if (typeof id !== "undefined") {
if (this.layers[id].type === "vector") {
// HACK
Expand All @@ -267,8 +267,8 @@ class LayerSwitcher {

/**
* Opacité de la couche
* @param {*} id
* @param {*} value
* @param {*} id
* @param {*} value
*/
#setOpacity(id, value) {
this.layers[id].opacity = value;
Expand All @@ -285,8 +285,8 @@ class LayerSwitcher {

/**
* Visualisation de la couche
* @param {*} id
* @param {*} value
* @param {*} id
* @param {*} value
*/
#setVisibility(id, value) {
this.layers[id].visibility = value;
Expand All @@ -303,17 +303,17 @@ class LayerSwitcher {

/**
* Affichage du N&B
* @param {*} id
* @param {*} id
* @param {*} value
* @todo not yet implemented !
*/
#setColor(id, value) {
this.layers[id].gray = value;

var type = this.layers[id].type;
if (type === "raster") {
// INFO
// mise à jour de la couche via une property du style,
// mise à jour de la couche via une property du style,
// mais, il n'existe pas de fonctionnalité pour le N&B
// ex. this.map.setPaintProperty(id, "raster-contrast", (value) ? 1 : 0);
} else if (type === "vector") {
Expand Down Expand Up @@ -388,15 +388,15 @@ class LayerSwitcher {

/**
* Ajout d'une entrée pour une couche (DOM)
* @param {*} id
* @param {*} id
*/
#addLayerContainer(id) {
var quickLookUrl = this.layers[id].quickLookUrl || ImageNotFound;
var opacity = this.layers[id].opacity;
var gray = this.layers[id].gray;
var visibility = this.layers[id].visibility;
var title = this.layers[id].title || id.split("$")[0];

var index = this.#getIndex(id);

// Template d'une couche
Expand Down Expand Up @@ -444,29 +444,29 @@ class LayerSwitcher {
}
return true;
};

// If DOMParser is supported, use it
if (support()) {
var parser = new DOMParser();
var doc = parser.parseFromString(str, 'text/html');
return doc.body.firstChild;
}

// Otherwise, fallback to old-school method
var dom = document.createElement('div');
dom.innerHTML = str;
return dom;

};

// transformation du container : String -> DOM
var container = stringToHTML(tplContainer.trim());

if (!container) {
console.warn();
return;
}

// ajout du shadow DOM
const shadow = container.attachShadow({ mode: "open" });
shadow.innerHTML = tplContainer.trim();
Expand All @@ -479,14 +479,21 @@ class LayerSwitcher {
// ajout des écouteurs
this.#addListeners(id, shadow);

// pour l'affichage en couleur de la barre à gauche du selecteur
var sliderProgress = shadow.getElementById(`opacity-value-range_ID_${index}`);
sliderProgress.style.setProperty('--value', sliderProgress.value);
sliderProgress.style.setProperty('--min', sliderProgress.min == '' ? '0' : sliderProgress.min);
sliderProgress.style.setProperty('--max', sliderProgress.max == '' ? '100' : sliderProgress.max);
sliderProgress.addEventListener('input', () => sliderProgress.style.setProperty('--value', sliderProgress.value));

var target = document.getElementById("lst-layer-switcher");
var theFirstChild = target.firstChild;
target.insertBefore(shadow, theFirstChild);
}

/**
* Suppression d'une entrée pour une couche (DOM)
* @param {*} id
* @param {*} id
*/
#removeLayerContainer(id) {
var index = this.#getIndex(id);
Expand All @@ -496,12 +503,12 @@ class LayerSwitcher {

/**
* Ajout de la couche
* @param {*} id
* @returns
* @param {*} id
* @returns
*/
#addLayerMap(id) {
var promise = null;

var type = this.layers[id].type;
var style = [];
if (type === "raster") {
Expand All @@ -517,12 +524,12 @@ class LayerSwitcher {
this.layers[id].error = true;
throw new Error(`Type not yet implemented or unknown : ${type}`);
}
// HACK
// HACK
// on positionne toujours le style avant ceux du calcul d'itineraires (directions)
// afin que le calcul soit toujours la couche visible du dessus !
var layerIndexBefore = this.map.getStyle().layers.findIndex((l) => l.source === "maplibre-gl-directions");
var layerIdBefore = (layerIndexBefore !== -1) ? this.map.getStyle().layers[layerIndexBefore].id : null;

if (Array.isArray(style)) {
// Raster
promise = new Promise((resolve, reject) => {
Expand All @@ -538,7 +545,7 @@ class LayerSwitcher {
.then((data) => {
// INFO
// on ajoute les sources !
// les sources des couches tuiles vectorielles ne sont pas pré chargées
// les sources des couches tuiles vectorielles ne sont pas pré chargées
// car on les connait que maintenant en lisant le fichier de style.
// l'id des source est different du nom de la couche pour le vecteur !
for (const key in data.sources) {
Expand Down Expand Up @@ -578,15 +585,15 @@ class LayerSwitcher {

/**
* Suppression de la couche
* @param {*} id
* @param {*} id
*/
#removeLayerMap(id) {
LayersGroup.removeGroup(id);
}

/**
* Ajout d'une couche dans le gestionnaire
* @param {*} id
* @param {*} id
* @fires addlayer
* @public
*/
Expand Down Expand Up @@ -637,7 +644,7 @@ class LayerSwitcher {

/**
* Supprime une couche du gestionnaire
* @param {*} id
* @param {*} id
* @fires removelayer
* @public
*/
Expand Down

0 comments on commit 97d2112

Please sign in to comment.