aboutsummaryrefslogtreecommitdiff
path: root/modern/src/map/switcher
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2021-09-03 20:38:43 -0700
committerAnton Tananaev <anton.tananaev@gmail.com>2021-09-03 20:38:43 -0700
commit7b338688fb6f2bcca5236348495e4b7398f8de00 (patch)
treec573f4d65b6ed97578b2da332e61f20ac459f503 /modern/src/map/switcher
parentf5ed35a51a570f0bf68754ef4141c40c9b6d4233 (diff)
downloadtrackermap-web-7b338688fb6f2bcca5236348495e4b7398f8de00.tar.gz
trackermap-web-7b338688fb6f2bcca5236348495e4b7398f8de00.tar.bz2
trackermap-web-7b338688fb6f2bcca5236348495e4b7398f8de00.zip
Proper map localization
Diffstat (limited to 'modern/src/map/switcher')
-rw-r--r--modern/src/map/switcher/switcher.js91
1 files changed, 52 insertions, 39 deletions
diff --git a/modern/src/map/switcher/switcher.js b/modern/src/map/switcher/switcher.js
index c239662a..5fa62dcb 100644
--- a/modern/src/map/switcher/switcher.js
+++ b/modern/src/map/switcher/switcher.js
@@ -1,63 +1,76 @@
export class SwitcherControl {
- constructor(styles, defaultStyle, beforeSwitch, afterSwitch) {
- this.styles = styles;
- this.defaultStyle = defaultStyle;
- this.beforeSwitch = beforeSwitch;
- this.afterSwitch = afterSwitch;
+
+ constructor(onBeforeSwitch, onAfterSwitch) {
+ this.onBeforeSwitch = onBeforeSwitch;
+ this.onAfterSwitch = onAfterSwitch;
this.onDocumentClick = this.onDocumentClick.bind(this);
- this.variables = {};
+ this.styles = [];
+ this.currentStyle = null;
}
getDefaultPosition() {
return 'top-right';
}
- setVariable(key, value) {
- this.variables[key] = value;
- }
+ updateStyles(updatedStyles, selectedStyle) {
+ this.styles = updatedStyles;
+
+ while (this.mapStyleContainer.firstChild) {
+ this.mapStyleContainer.removeChild(this.mapStyleContainer.firstChild);
+ }
+
+ let selectedStyleElement;
- onAdd(map) {
- this.map = map;
- this.controlContainer = document.createElement('div');
- this.controlContainer.classList.add('maplibregl-ctrl');
- this.controlContainer.classList.add('maplibregl-ctrl-group');
- this.mapStyleContainer = document.createElement('div');
- this.styleButton = document.createElement('button');
- this.styleButton.type = 'button';
- this.mapStyleContainer.classList.add('maplibregl-style-list');
for (const style of this.styles) {
const styleElement = document.createElement('button');
styleElement.type = 'button';
styleElement.innerText = style.title;
- if (style.title) {
- styleElement.classList.add(style.title.replace(/[^a-z0-9-]/gi, '_'));
- }
+ styleElement.dataset.id = style.id;
styleElement.dataset.uri = JSON.stringify(style.uri);
styleElement.addEventListener('click', (event) => {
- const { srcElement } = event;
- if (srcElement.classList.contains('active')) {
- return;
+ const { target } = event;
+ if (!target.classList.contains('active')) {
+ this.onSelectStyle(target);
}
- this.beforeSwitch();
- let uri = JSON.parse(srcElement.dataset.uri);
- if (typeof uri === 'string') {
- Object.entries(this.variables).forEach(([key, value]) => uri = uri.replaceAll(`\{${key}}`, value));
- }
- this.map.setStyle(uri);
- this.afterSwitch();
- this.mapStyleContainer.style.display = 'none';
- this.styleButton.style.display = 'block';
- const elms = this.mapStyleContainer.getElementsByClassName('active');
- while (elms[0]) {
- elms[0].classList.remove('active');
- }
- srcElement.classList.add('active');
});
- if (style.title === this.defaultStyle) {
+ if (style.id === selectedStyle) {
+ selectedStyleElement = styleElement;
styleElement.classList.add('active');
}
this.mapStyleContainer.appendChild(styleElement);
}
+
+ if (this.currentStyle !== selectedStyle) {
+ this.onSelectStyle(selectedStyleElement);
+ }
+ }
+
+ onSelectStyle(target) {
+ this.onBeforeSwitch();
+
+ this.map.setStyle(JSON.parse(target.dataset.uri));
+
+ this.mapStyleContainer.style.display = 'none';
+ this.styleButton.style.display = 'block';
+
+ const elements = this.mapStyleContainer.getElementsByClassName('active');
+ while (elements[0]) {
+ elements[0].classList.remove('active');
+ }
+ target.classList.add('active');
+
+ this.onAfterSwitch();
+ }
+
+ onAdd(map) {
+ this.map = map;
+ this.controlContainer = document.createElement('div');
+ this.controlContainer.classList.add('maplibregl-ctrl');
+ this.controlContainer.classList.add('maplibregl-ctrl-group');
+ this.mapStyleContainer = document.createElement('div');
+ this.styleButton = document.createElement('button');
+ this.styleButton.type = 'button';
+ this.mapStyleContainer.classList.add('maplibregl-style-list');
this.styleButton.classList.add('maplibregl-ctrl-icon');
this.styleButton.classList.add('maplibregl-style-switcher');
this.styleButton.addEventListener('click', () => {