VladPolskiy/leaflet
1
0
Fork 0
mirror of https://github.com/Leaflet/Leaflet.git synced 2025-07-20 16:37:08 +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

15
spec/suites/control/Control.LayersSpec.js
View File

@ -235,6 +235,21 @@ describe('Control.Layers', () => {
UIEventSimulator.fire('click', map._container);
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.be.null;
});
it('should collapse with a delay', (done) => {
const layersCtrl = new Control.Layers(null, null, {collapsed: true, collapseDelay: 8}).addTo(map);
UIEventSimulator.fire('pointerover', layersCtrl._container, {pointerType});
expect(map._container.querySelector('.leaflet-control-layers-expanded')).not.to.be.null;
UIEventSimulator.fire('click', map._container);
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.be.ok;
setTimeout(() => {
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.be.ok;
}, 5);
setTimeout(() => {
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.be.null;
done();
}, 10);
});
});
describe('does not collapse when collapsed: false', () => {

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;