cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Only collapse layer control if collapsed: true (#5131)

Browse Source 
Close #5126
This commit is contained in:
Per Liedman 2016-11-23 10:49:59 +01:00 committed by Iván Sánchez Ortega
parent e0f80e0e1a
commit 2253672051
2 changed files with 52 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -140,6 +140,46 @@ describe("Control.Layers", function () {
});
});
describe("collapse when collapsed: true", function () {
it('expands when mouse is over', function () {
var layersCtrl = L.control.layers(null, null, {collapsed: true}).addTo(map);
happen.once(layersCtrl._container, {type:'mouseover'});
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.be.ok();
});
it('collapses when mouse is out', function () {
var layersCtrl = L.control.layers(null, null, {collapsed: true}).addTo(map);
happen.once(layersCtrl._container, {type:'mouseover'});
happen.once(layersCtrl._container, {type:'mouseout'});
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.not.be.ok();
});
it('collapses when map is clicked', function () {
var layersCtrl = L.control.layers(null, null, {collapsed: true}).addTo(map);
map.setView([0, 0], 0);
happen.once(layersCtrl._container, {type:'mouseover'});
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.be.ok();
happen.click(map._container);
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.not.be.ok();
});
});
describe("does not collapse when collapsed: false", function () {
it('does not collapse when mouse enters or leaves', function () {
var layersCtrl = L.control.layers(null, null, {collapsed: false}).addTo(map);
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.be.ok();
happen.once(layersCtrl._container, {type:'mouseover'});
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.be.ok();
happen.once(layersCtrl._container, {type:'mouseout'});
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.be.ok();
});
it('does not collapse when map is clicked', function () {
var layersCtrl = L.control.layers(null, null, {collapsed: false}).addTo(map);
map.setView([0, 0], 0);
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.be.ok();
happen.click(map._container);
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.be.ok();
});
});
describe("sortLayers", function () {
beforeEach(function () {
map.setView([0, 0], 14);

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

@ -156,7 +156,8 @@ L.Control.Layers = L.Control.extend({
_initLayout: function () {
var className = 'leaflet-control-layers',
container = this._container = L.DomUtil.create('div', className);
container = this._container = L.DomUtil.create('div', className),
collapsed = this.options.collapsed;
// makes this work on IE touch devices by stopping it from firing a mouseout event when the touch is released
container.setAttribute('aria-haspopup', true);
@ -168,11 +169,15 @@ L.Control.Layers = L.Control.extend({
var form = this._form = L.DomUtil.create('form', className + '-list');
if (!L.Browser.android) {
L.DomEvent.on(container, {
mouseenter: this.expand,
mouseleave: this.collapse
}, this);
if (collapsed) {
this._map.on('click', this.collapse, this);
if (!L.Browser.android) {
L.DomEvent.on(container, {
mouseenter: this.expand,
mouseleave: this.collapse
}, this);
}
}
var link = this._layersLink = L.DomUtil.create('a', className + '-toggle', container);
@ -192,10 +197,9 @@ L.Control.Layers = L.Control.extend({
setTimeout(L.bind(this._onInputClick, this), 0);
}, this);
this._map.on('click', this.collapse, this);
// TODO keyboard accessibility
if (!this.options.collapsed) {
if (!collapsed) {
this.expand();
}