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

Fix(DivIcon): revert #5517 to avoid appending a single node instead of generating content (#5574)

Browse Source 
* Docs(Marker): explain checks for re-using icon element

when the marker is modified with an icon of the same type (i.e. an image icon with an image icon, or a DivIcon with a DivIcon), or checks for NOT re-using the icon element when modifying with an icon of a different type (i.e. an image icon with a DivIcon, or the reverse).

* Revert "Div icon accept node element as option (#5517)"

This reverts commit ba7bfb5011.

Conflicts:
	spec/suites/layer/marker/MarkerSpec.js
This commit is contained in:
ghybs 2017-06-25 16:11:57 +04:00 committed by Per Liedman
parent a3ec8047b3
commit d6fc47d70e
2 changed files with 8 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
spec/suites/layer/marker/MarkerSpec.js
View File

@ -73,7 +73,7 @@ describe("Marker", function () {
expect(icon.style.height).to.be(expectedXY + 'px'); expect(icon.style.height).to.be(expectedXY + 'px');
}); });
it("changes the icon to another image", function () { it("changes the icon to another image while re-using the IMG element", function () {
var marker = new L.Marker([0, 0], {icon: icon1}); var marker = new L.Marker([0, 0], {icon: icon1});
map.addLayer(marker); map.addLayer(marker);
@ -81,7 +81,7 @@ describe("Marker", function () {
marker.setIcon(icon2); marker.setIcon(icon2);
var afterIcon = marker._icon; var afterIcon = marker._icon;
expect(beforeIcon).to.be(afterIcon); expect(beforeIcon).to.be(afterIcon); // Check that the <IMG> element is re-used
expect(afterIcon.src).to.contain(icon2._getIconUrl('icon')); expect(afterIcon.src).to.contain(icon2._getIconUrl('icon'));
}); });
@ -122,21 +122,7 @@ describe("Marker", function () {
expect(marker.dragging.enabled()).to.be(true); expect(marker.dragging.enabled()).to.be(true);
}); });
it("changes the icon to another DivIcon which is a DOM element", function () { it("changes the DivIcon to another DivIcon, while re-using the DIV element", function () {
var marker = new L.Marker([0, 0], {icon: new L.DivIcon({html: 'Inner1Text'})});
var customElement = document.createElement('p');
customElement.innerHTML = 'InnerTextFromCustomNode';
map.addLayer(marker);
var beforeIcon = marker._icon;
marker.setIcon(new L.DivIcon({html: customElement}));
var afterIcon = marker._icon;
expect(beforeIcon).to.be(afterIcon);
expect(afterIcon.innerHTML).to.contain('<p>InnerTextFromCustomNode</p>');
});
it("changes the icon to another DivIcon", function () {
var marker = new L.Marker([0, 0], {icon: new L.DivIcon({html: 'Inner1Text'})}); var marker = new L.Marker([0, 0], {icon: new L.DivIcon({html: 'Inner1Text'})});
map.addLayer(marker); map.addLayer(marker);
@ -144,7 +130,7 @@ describe("Marker", function () {
marker.setIcon(new L.DivIcon({html: 'Inner2Text'})); marker.setIcon(new L.DivIcon({html: 'Inner2Text'}));
var afterIcon = marker._icon; var afterIcon = marker._icon;
expect(beforeIcon).to.be(afterIcon); expect(beforeIcon).to.be(afterIcon); // Check that the <DIV> element is re-used
expect(afterIcon.innerHTML).to.contain('Inner2Text'); expect(afterIcon.innerHTML).to.contain('Inner2Text');
}); });
@ -165,7 +151,7 @@ describe("Marker", function () {
marker.setIcon(icon1); marker.setIcon(icon1);
expect(oldIcon).to.not.be(marker._icon); expect(oldIcon).to.not.be(marker._icon); // Check that the _icon is NOT re-used
expect(oldIcon.parentNode).to.be(null); expect(oldIcon.parentNode).to.be(null);
if (L.Browser.retina) { if (L.Browser.retina) {
@ -183,7 +169,7 @@ describe("Marker", function () {
marker.setIcon(new L.DivIcon({html: 'Inner1Text'})); marker.setIcon(new L.DivIcon({html: 'Inner1Text'}));
expect(oldIcon).to.not.be(marker._icon); expect(oldIcon).to.not.be(marker._icon); // Check that the _icon is NOT re-used
expect(oldIcon.parentNode).to.be(null); expect(oldIcon.parentNode).to.be(null);
expect(marker._icon.innerHTML).to.contain('Inner1Text'); expect(marker._icon.innerHTML).to.contain('Inner1Text');

10
src/layer/marker/DivIcon.js
View File

@ -29,7 +29,7 @@ export var DivIcon = Icon.extend({
// iconAnchor: (Point), // iconAnchor: (Point),
// popupAnchor: (Point), // popupAnchor: (Point),
// @option html: String|HTMLElement = '' // @option html: String = ''
// Custom HTML code to put inside the div element, empty by default. // Custom HTML code to put inside the div element, empty by default.
html: false, html: false,
@ -44,13 +44,7 @@ export var DivIcon = Icon.extend({
var div = (oldIcon && oldIcon.tagName === 'DIV') ? oldIcon : document.createElement('div'), var div = (oldIcon && oldIcon.tagName === 'DIV') ? oldIcon : document.createElement('div'),
options = this.options; options = this.options;
if (options.html === false) { div.innerHTML = options.html !== false ? options.html : '';
div.innerHTML = '';
} else if (typeof options.html === 'object' && options.html.nodeType === 1) {
div.appendChild(options.html);
} else {
div.innerHTML = options.html;
}
if (options.bgPos) { if (options.bgPos) {
var bgPos = point(options.bgPos); var bgPos = point(options.bgPos);