Skip to content

Commit c2dfad8

Browse files
fuzhennfuzhenn
committed
fix layer switcher's mouseleave
1 parent 3a4905f commit c2dfad8

File tree

2 files changed

+166
-161
lines changed

2 files changed

+166
-161
lines changed

‎src/control/Control.LayerSwitcher.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import Control from './Control';
66
* @property {Object} options - options
77
* @property {Object} [options.position='top-right'] - position of the control
88
* @property {Object} [options.baseTitle='Base Layers'] - title of the base layers
9-
* @property {Object} [options.overlayTitle='Overlay Layers'] - title of the overlay layers
10-
* @property {Object} [options.excludeLayers=[] - ids of layers that don't display in layerswitcher
9+
* @property {Object} [options.overlayTitle='Layers'] - title of the overlay layers
10+
* @property {Object} [options.excludeLayers=[]] - ids of layers that don't display in layerswitcher
1111
* @property {Object} [options.containerClass=maptalks-layer-switcher] - layerswitcher's container div's CSS class
1212
*
1313
* @memberOf control.LayerSwitcher
@@ -16,7 +16,7 @@ import Control from './Control';
1616
const options = {
1717
'position' : 'top-right',
1818
'baseTitle' : 'Base Layers',
19-
'overlayTitle' : 'Overlay Layers',
19+
'overlayTitle' : 'Layers',
2020
'excludeLayers' : [],
2121
'containerClass' : 'maptalks-layer-switcher'
2222
};
@@ -56,6 +56,7 @@ class LayerSwitcher extends Control {
5656
off(this.button, 'mouseover', this._show, this);
5757
off(this.panel, 'mouseleave', this._hide, this);
5858
removeDomNode(this.panel);
59+
removeDomNode(this.button);
5960
delete this.panel;
6061
delete this.button;
6162
delete this.container;
@@ -69,8 +70,10 @@ class LayerSwitcher extends Control {
6970
}
7071
}
7172

72-
_hide() {
73-
setClass(this.container, this.options['containerClass']);
73+
_hide(e) {
74+
if (e.relatedTarget || e.toElement) {
75+
setClass(this.container, this.options['containerClass']);
76+
}
7477
}
7578

7679
_createPanel() {

‎test/map/control/Control.LayerSwitcherSpec.js‎

Lines changed: 158 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -1,156 +1,158 @@
1-
describe('Control.LayerSwitcher', function () {
2-
3-
var container;
4-
var map;
5-
var center = new maptalks.Coordinate(118.846825, 32.046534);
6-
7-
beforeEach(function () {
8-
container = document.createElement('div');
9-
container.style.width = '800px';
10-
container.style.height = '600px';
11-
document.body.appendChild(container);
12-
var option = {
13-
zoomAnimation: false,
14-
zoom: 5,
15-
center: center
16-
};
17-
map = new maptalks.Map(container, option);
18-
});
19-
20-
afterEach(function () {
21-
map.remove();
22-
REMOVE_CONTAINER(container);
23-
});
24-
25-
it('baseTitle and overlayTitle', function () {
26-
var tile1 = new maptalks.TileLayer('tile1', {
27-
urlTemplate : '/resources/tile.png'
28-
});
29-
var tile2 = new maptalks.TileLayer('tile2', {
30-
urlTemplate : '/resources/tile.png'
31-
});
32-
map.setBaseLayer(tile1);
33-
map.addLayer(tile2);
34-
var control = new maptalks.control.LayerSwitcher({
35-
baseTitle: 'baseTitle',
36-
overlayTitle : 'overlayTitle'
37-
});
38-
map.addControl(control);
39-
happen.mouseover(control.button, {
40-
'clientX' : 100,
41-
'clientY' : 100
42-
});
43-
44-
var labels = document.querySelectorAll('.maptalks-layer-switcher label', this);
45-
expect(labels[0].innerText).to.be.eql('baseTitle');
46-
expect(labels[1].innerText).to.be.eql('tile1');
47-
expect(labels[2].innerText).to.be.eql('overlayTitle');
48-
expect(labels[3].innerText).to.be.eql('tile2');
49-
});
50-
51-
it('excludeLayers', function () {
52-
var control = new maptalks.control.LayerSwitcher({
53-
excludeLayers: ['tile1']
54-
});
55-
map.addControl(control);
56-
var tile1 = new maptalks.TileLayer('tile1', {
57-
urlTemplate : '/resources/tile.png'
58-
});
59-
var tile2 = new maptalks.TileLayer('tile2', {
60-
urlTemplate : '/resources/tile.png'
61-
});
62-
map.addLayer([tile1, tile2]);
63-
happen.mouseover(control.button, {
64-
'clientX' : 100,
65-
'clientY' : 100
66-
});
67-
var labels = document.querySelectorAll('.layer label', this);
68-
for (var i = 0, len = labels.length; i < len; i++) {
69-
expect(labels[i].innerText).not.to.eql('tile1');
70-
}
71-
});
72-
73-
it('base layers switch', function () {
74-
var control = new maptalks.control.LayerSwitcher();
75-
map.addControl(control);
76-
var group = new maptalks.GroupTileLayer('group', [
77-
new maptalks.TileLayer('tile1', {
78-
urlTemplate : '/resources/tile.png'
79-
}),
80-
new maptalks.TileLayer('tile2', {
81-
urlTemplate : '/resources/tile.png',
82-
visible : false
83-
})
84-
]);
85-
map.setBaseLayer(group);
86-
happen.mouseover(control.button, {
87-
'clientX' : 100,
88-
'clientY' : 100
89-
});
90-
var radios = document.querySelectorAll('.layer input',this);
91-
expect(radios[0].checked).to.be.ok();
92-
expect(radios[1].checked).not.to.be.ok();
93-
expect(group.layers[0].isVisible()).to.be.ok();
94-
expect(group.layers[1].isVisible()).not.to.be.ok();
95-
radios[1].addEventListener("click", function() {
96-
expect(radios[0].checked).not.to.be.ok();
97-
expect(radios[1].checked).to.be.ok();
98-
expect(group.layers[0].isVisible()).not.to.be.ok();
99-
expect(group.layers[1].isVisible()).to.be.ok();
100-
});
101-
});
102-
103-
it('overlay layers switch', function () {
104-
var control = new maptalks.control.LayerSwitcher();
105-
map.addControl(control);
106-
var tile1 = new maptalks.TileLayer('tile1', {
107-
urlTemplate : '/resources/tile.png'
108-
});
109-
map.addLayer(tile1);
110-
happen.mouseover(control.button, {
111-
'clientX' : 100,
112-
'clientY' : 100
113-
});
114-
var checkbox = document.querySelector('.layer input',this);
115-
expect(checkbox.checked).to.be.ok();
116-
expect(tile1.isVisible()).to.be.ok();
117-
checkbox.addEventListener("click", function() {
118-
expect(checkbox.checked).not.to.be.ok();
119-
expect(tile1.isVisible()).not.to.be.ok();
120-
});
121-
});
122-
123-
it('show and hide', function () {
124-
var control = new maptalks.control.LayerSwitcher();
125-
map.addControl(control);
126-
var tile1 = new maptalks.TileLayer('tile1', {
127-
urlTemplate : '/resources/tile.png'
128-
});
129-
map.addLayer(tile1);
130-
happen.mouseover(control.button, {
131-
'clientX' : 100,
132-
'clientY' : 100
133-
});
134-
expect(control.container.className).to.be.eql(control.options.containerClass + ' shown');
135-
happen.once(control.panel, {
136-
'type' : 'mouseleave',
137-
'clientX' : 100,
138-
'clientY' : 100
139-
});
140-
expect(control.container.className).to.be.eql(control.options.containerClass);
141-
});
142-
143-
it('remove from map', function () {
144-
var control = new maptalks.control.LayerSwitcher();
145-
map.addControl(control);
146-
var tile1 = new maptalks.TileLayer('tile1', {
147-
urlTemplate : '/resources/tile.png'
148-
});
149-
map.addLayer(tile1);
150-
happen.mouseover(control.button, {
151-
'clientX' : 100,
152-
'clientY' : 100
153-
});
154-
control.remove();
155-
});
156-
});
1+
describe('Control.LayerSwitcher', function () {
2+
3+
var container;
4+
var map;
5+
var center = new maptalks.Coordinate(118.846825, 32.046534);
6+
7+
beforeEach(function () {
8+
container = document.createElement('div');
9+
container.style.width = '800px';
10+
container.style.height = '600px';
11+
document.body.appendChild(container);
12+
var option = {
13+
zoomAnimation: false,
14+
zoom: 5,
15+
center: center
16+
};
17+
map = new maptalks.Map(container, option);
18+
});
19+
20+
afterEach(function () {
21+
map.remove();
22+
REMOVE_CONTAINER(container);
23+
});
24+
25+
it('baseTitle and overlayTitle', function () {
26+
var tile1 = new maptalks.TileLayer('tile1', {
27+
urlTemplate : '/resources/tile.png'
28+
});
29+
var tile2 = new maptalks.TileLayer('tile2', {
30+
urlTemplate : '/resources/tile.png'
31+
});
32+
map.setBaseLayer(tile1);
33+
map.addLayer(tile2);
34+
var control = new maptalks.control.LayerSwitcher({
35+
baseTitle: 'baseTitle',
36+
overlayTitle : 'overlayTitle'
37+
});
38+
map.addControl(control);
39+
happen.mouseover(control.button, {
40+
'clientX' : 100,
41+
'clientY' : 100
42+
});
43+
44+
var labels = document.querySelectorAll('.maptalks-layer-switcher label', this);
45+
expect(labels[0].innerText).to.be.eql('baseTitle');
46+
expect(labels[1].innerText).to.be.eql('tile1');
47+
expect(labels[2].innerText).to.be.eql('overlayTitle');
48+
expect(labels[3].innerText).to.be.eql('tile2');
49+
});
50+
51+
it('excludeLayers', function () {
52+
var control = new maptalks.control.LayerSwitcher({
53+
excludeLayers: ['tile1']
54+
});
55+
map.addControl(control);
56+
var tile1 = new maptalks.TileLayer('tile1', {
57+
urlTemplate : '/resources/tile.png'
58+
});
59+
var tile2 = new maptalks.TileLayer('tile2', {
60+
urlTemplate : '/resources/tile.png'
61+
});
62+
map.addLayer([tile1, tile2]);
63+
happen.mouseover(control.button, {
64+
'clientX' : 100,
65+
'clientY' : 100
66+
});
67+
var labels = document.querySelectorAll('.layer label', this);
68+
for (var i = 0, len = labels.length; i < len; i++) {
69+
expect(labels[i].innerText).not.to.eql('tile1');
70+
}
71+
});
72+
73+
it('base layers switch', function () {
74+
var control = new maptalks.control.LayerSwitcher();
75+
map.addControl(control);
76+
var group = new maptalks.GroupTileLayer('group', [
77+
new maptalks.TileLayer('tile1', {
78+
urlTemplate : '/resources/tile.png'
79+
}),
80+
new maptalks.TileLayer('tile2', {
81+
urlTemplate : '/resources/tile.png',
82+
visible : false
83+
})
84+
]);
85+
map.setBaseLayer(group);
86+
happen.mouseover(control.button, {
87+
'clientX' : 100,
88+
'clientY' : 100
89+
});
90+
var radios = document.querySelectorAll('.layer input',this);
91+
expect(radios[0].checked).to.be.ok();
92+
expect(radios[1].checked).not.to.be.ok();
93+
expect(group.layers[0].isVisible()).to.be.ok();
94+
expect(group.layers[1].isVisible()).not.to.be.ok();
95+
radios[1].addEventListener("click", function() {
96+
expect(radios[0].checked).not.to.be.ok();
97+
expect(radios[1].checked).to.be.ok();
98+
expect(group.layers[0].isVisible()).not.to.be.ok();
99+
expect(group.layers[1].isVisible()).to.be.ok();
100+
});
101+
});
102+
103+
it('overlay layers switch', function () {
104+
var control = new maptalks.control.LayerSwitcher();
105+
map.addControl(control);
106+
var tile1 = new maptalks.TileLayer('tile1', {
107+
urlTemplate : '/resources/tile.png'
108+
});
109+
map.addLayer(tile1);
110+
happen.mouseover(control.button, {
111+
'clientX' : 100,
112+
'clientY' : 100
113+
});
114+
var checkbox = document.querySelector('.layer input',this);
115+
expect(checkbox.checked).to.be.ok();
116+
expect(tile1.isVisible()).to.be.ok();
117+
checkbox.addEventListener("click", function() {
118+
expect(checkbox.checked).not.to.be.ok();
119+
expect(tile1.isVisible()).not.to.be.ok();
120+
});
121+
});
122+
123+
it('show and hide', function () {
124+
var control = new maptalks.control.LayerSwitcher();
125+
map.addControl(control);
126+
var tile1 = new maptalks.TileLayer('tile1', {
127+
urlTemplate : '/resources/tile.png'
128+
});
129+
map.addLayer(tile1);
130+
happen.mouseover(control.button, {
131+
'clientX' : 100,
132+
'clientY' : 100
133+
});
134+
expect(control.container.className).to.be.eql(control.options.containerClass + ' shown');
135+
happen.once(control.panel, {
136+
'type' : 'mouseleave',
137+
'clientX' : 100,
138+
'clientY' : 100,
139+
'toElement' : container,
140+
'relatedTarget' : container
141+
});
142+
expect(control.container.className).to.be.eql(control.options.containerClass);
143+
});
144+
145+
it('remove from map', function () {
146+
var control = new maptalks.control.LayerSwitcher();
147+
map.addControl(control);
148+
var tile1 = new maptalks.TileLayer('tile1', {
149+
urlTemplate : '/resources/tile.png'
150+
});
151+
map.addLayer(tile1);
152+
happen.mouseover(control.button, {
153+
'clientX' : 100,
154+
'clientY' : 100
155+
});
156+
control.remove();
157+
});
158+
});

0 commit comments

Comments
 (0)