VladPolskiy/leaflet
1
0
Fork 0
mirror of https://github.com/Leaflet/Leaflet.git synced 2025-08-16 16:45:22 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

Add option collapseDelay to Control.Layers (#9612)

Browse Source 
Co-authored-by: Florian Bischof <design.falke@gmail.com>
This commit is contained in:
fyyyyy
2025-07-06 20:25:00 +02:00
committed by GitHub
parent 181f6c3807
commit eae77baac2
2 changed files with 33 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/control/Control.Layers.js
View File

@ -51,6 +51,11 @@ export const Layers = Control.extend({
// @option collapsed: Boolean = true
// If `true`, the control will be collapsed into an icon and expanded on pointer hover, touch, or keyboard activation.
collapsed: true,
// @option collapseDelay: Number = 0
// Collapse delay in milliseconds. If greater than 0, the control will remain open longer, making it easier to scroll through long layer lists.
collapseDelay: 0,
position: 'topright',
// @option autoZIndex: Boolean = true
@ -128,6 +133,8 @@ export const Layers = Control.extend({
}
this._map.off('resize', this._expandIfNotCollapsed, this);
clearTimeout(this._collapseDelayTimeout);
},
// @method addBaseLayer(layer: Layer, name: String): this
@ -159,6 +166,8 @@ export const Layers = Control.extend({
// @method expand(): this
// Expand the control container if collapsed.
expand() {
clearTimeout(this._collapseDelayTimeout);
this._container.classList.add('leaflet-control-layers-expanded');
this._section.style.height = null;
const acceptableHeight = this._map.getSize().y - (this._container.offsetTop + 50);
@ -179,6 +188,15 @@ export const Layers = Control.extend({
// The control was collapsed instead of adding the layer to the map.
// So we allow collapse only if it is not touch.
if (!ev || !((ev.type === 'pointerleave' || ev.type === 'pointerout') && ev.pointerType === 'touch')) {
if (this.options.collapseDelay > 0) {
// Collapse delayed
this._collapseDelayTimeout = setTimeout(() => {
this._container.classList.remove('leaflet-control-layers-expanded');
}, this.options.collapseDelay);
return this;
}
// Collapse immediatelly
this._container.classList.remove('leaflet-control-layers-expanded');
}
return this;