// ============================================================================= // 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 }