leaflet.sidepanel
Version:
Slide side panel plugin for Leaflet
2 lines (1 loc) • 4.1 kB
JavaScript
"use strict";const h=require("leaflet");function f(n){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const t in n)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(s,t,o.get?o:{enumerable:!0,get:()=>n[t]})}}return s.default=n,Object.freeze(s)}const e=f(h);class d extends e.Control{constructor(s,t){if(t=t||{},Object.keys(t).forEach(o=>{t[o]===void 0&&delete t[o]}),t.position){const o="Leaflet.SidePanel: You cannot set the `position` option. It is controlled by the `panelPosition` option.";t.panelPosition?console.warn(o):console.error(o)}t.panelPosition&&!["left","right"].includes(t.panelPosition)&&(console.error('Leaflet.SidePanel: The `panelPosition` option must be either "left" or "right".'),t.panelPosition="left"),t.tabsPosition&&!["top","bottom","left","right"].includes(t.tabsPosition)&&(console.error('Leaflet.SidePanel: The `tabsPosition` option must be either "top", "bottom", "left", or "right".'),t.tabsPosition="top"),super(t),this.options={panelPosition:"left",hasTabs:!0,tabsPosition:"top",darkMode:!1,pushControls:!1,defaultTab:1,size:"400px",onTabClick:()=>{},onToggle:()=>{},...t},this._panel=e.DomUtil.get(s),this._panel.style.setProperty("--panel-width",this.options.size),e.setOptions(this,t)}addTo(s){if(this._map=s,e.DomUtil.addClass(this._panel,"sidepanel-"+this.options.panelPosition),this.options.darkMode&&e.DomUtil.addClass(this._panel,"sidepanel-dark"),e.DomEvent.disableScrollPropagation(this._panel),e.DomEvent.disableClickPropagation(this._panel),this.options.pushControls){const t=this._map,i=(t instanceof e.Map?t.getContainer():t).querySelector(".leaflet-control-container");e.DomUtil.addClass(i,"leaflet-animate-control-container"),i.style.setProperty(`--panel-width-${this.options.panelPosition}`,this.options.size)}return this.options.hasTabs?this._initTabs(this.options.tabsPosition):this._initContent(),this}_initContent(){this._toggleButton()}_initTabs(s){e.DomUtil.addClass(this._panel,"tabs-"+s);const t=this._panel.querySelectorAll("a.sidebar-tab-link"),o=this._panel.querySelectorAll(".sidepanel-tab-content");t.forEach((i,l)=>{let p=!1,a;typeof this.options.defaultTab=="number"&&this.options.defaultTab-1===l&&(p=!0,a=o[l]),typeof this.options.defaultTab=="string"&&this.options.defaultTab===i.dataset.tabLink&&(p=!0,a=this._panel.querySelector(`.sidepanel-tab-content[data-tab-content="${this.options.defaultTab}"]`)),p&&(e.DomUtil.addClass(i,"active"),e.DomUtil.addClass(a,"active")),e.DomEvent.on(i,"click",c=>{e.DomEvent.preventDefault(c),t.forEach(r=>e.DomUtil.removeClass(r,"active")),e.DomUtil.addClass(i,"active"),o.forEach(r=>{i.dataset.tabLink===r.dataset.tabContent?e.DomUtil.addClass(r,"active"):e.DomUtil.removeClass(r,"active")}),this.options.onTabClick(i)},i)}),this._toggleButton()}toggle(s){let t=!0;const o=e.DomUtil.hasClass(this._panel,"opened"),i=e.DomUtil.hasClass(this._panel,"closed");if(!o&&!i?e.DomUtil.addClass(this._panel,"opened"):!o&&i?(e.DomUtil.addClass(this._panel,"opened"),e.DomUtil.removeClass(this._panel,"closed")):o&&!i&&(t=!1,e.DomUtil.removeClass(this._panel,"opened"),e.DomUtil.addClass(this._panel,"closed")),this.options.pushControls){const l=this._map;if(l){const a=(l instanceof e.Map?l.getContainer():l).querySelector(".leaflet-control-container");t?(e.DomUtil.removeClass(a,this.options.panelPosition+"-closed"),e.DomUtil.addClass(a,this.options.panelPosition+"-opened")):(e.DomUtil.removeClass(a,this.options.panelPosition+"-opened"),e.DomUtil.addClass(a,this.options.panelPosition+"-closed"))}else console.error("Leaflet.SidePanel: You must add the SidePanel to the map before setting the `pushControls` option.")}this.options.onToggle(t)}isOpened(){return e.DomUtil.hasClass(this._panel,"opened")}open(){this.isOpened()||this.toggle()}close(){this.isOpened()&&this.toggle()}_toggleButton(){const s=this._panel.querySelector(".sidepanel-toggle-container"),t=s.querySelector(".sidepanel-toggle-button");e.DomEvent.on(t,"click",o=>{this.toggle(o)},s)}}e.Control.SidePanel=d;e.control.sidepanel=function(n,s){return new d(n,s)};