// =============================================================================
// Control for dislaying image/catalog settings
L.Control.Settings = L.Control.extend({
options : {
displayHTML : '',
catalogs: undefined,
},
makeIcon: function () {
let iconDiv = '
";
return iconDiv;
},
moveBadge: function (text) {
const parent = document.getElementById("settings-control");
const range = document.getElementById(text);
const badge = document.getElementById(text + "-badge");
badge.innerHTML = range.value;
badge.style.visibility = "visible";
const offsetLeft = range.getBoundingClientRect().left - parent.getBoundingClientRect().left;
badge.style.left = offsetLeft - 4 + (range.value / range.max * 0.9) * range.getBoundingClientRect().width + "px";
const offsetTop = range.getBoundingClientRect().top - parent.getBoundingClientRect().top;
badge.style.top = offsetTop - 22 + "px";
},
hideBadge: function (text) {
const badge = document.getElementById(text + "-badge");
badge.style.visibility = "hidden";
},
resetRange: function(text, defaultValue){
const range = document.getElementById(text);
range.value = defaultValue;
range.dispatchEvent(new Event("input"));
},
makeRange: function (text, min, max, defaultValue, step) {
let rangeText = '';
rangeText += `
`;
rangeText += `
`;
rangeText += `
`
rangeText += '
';
return rangeText;
},
updateCSS: function(e) {
let css = ".leaflet-tile { filter: ";
css += `brightness(${document.getElementById("Brightness").value}%) `;
css += `contrast(${document.getElementById("Contrast").value}%) `;
css += `invert(${document.getElementById("Invert").value}%) `;
css += `hue-rotate(${document.getElementById("Hue").value}deg) `;
css += "};";
document.getElementById("img-filters").innerHTML = css;
},
update_catalog_line: function(e) {
console.log("changed catalog line");
},
update_catalog_fill: function(e) {
console.log("changed catalog fill");
},
update_catalog_colorpickers(e) {
if (e !== undefined) {
const currentCatalog = document.getElementById("settings-catalog-picker").value;
const catalog = this.options.catalogs[currentCatalog];
document.getElementById("catalog-line-color").color=catalog.options.color;
document.getElementById("catalog-fill-color").color=catalog.options.color;
}
},
onAdd: function (map) {
const menuDiv = L.DomUtil.create('div', 'settings-control');
// This is the menu icon as an SVG
let iconDiv = this.makeIcon();
let menuHTML = '";
iconDiv += menuHTML;
menuDiv.innerHTML = iconDiv;
menuDiv.id = "settings-control";
L.DomEvent.disableClickPropagation(menuDiv);
L.DomEvent.on(menuDiv, {
mouseenter: this.expand,
mouseleave: this.collapse
}, this);
return menuDiv;
},
onRemove: function (map) {
},
// @method expand(): this
// Expand the control container if collapsed.
expand() {
this.update_catalog_colorpickers(this.options.catalogs);
document.getElementById("settings-control-menu").classList.remove("collapsed");
document.getElementById("settings-control-icon").classList.add("collapsed");
},
// @method collapse(): this
// Collapse the control container if expanded.
collapse() {
document.getElementById("settings-control-icon").classList.remove("collapsed");
document.getElementById("settings-control-menu").classList.add("collapsed");
},
});
L.control.settings = function (opts) {
const settingsControl = new L.Control.Settings(opts);
// Add the CSS for the settings control for the img css filters
const imgStyle = document.createElement("style");
imgStyle.id = "img-filters";
document.getElementsByTagName("head")[0].appendChild(imgStyle);
return settingsControl
}