From d6fc47d70e15336a68f141b41c07cd1884f4ff69 Mon Sep 17 00:00:00 2001 From: ghybs Date: Sun, 25 Jun 2017 16:11:57 +0400 Subject: [PATCH] Fix(DivIcon): revert #5517 to avoid appending a single node instead of generating content (#5574) * 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 ba7bfb501107fce0b0f44c79aabb5ddddcce2391. Conflicts: spec/suites/layer/marker/MarkerSpec.js --- spec/suites/layer/marker/MarkerSpec.js | 26 ++++++-------------------- src/layer/marker/DivIcon.js | 10 ++-------- 2 files changed, 8 insertions(+), 28 deletions(-) diff --git a/spec/suites/layer/marker/MarkerSpec.js b/spec/suites/layer/marker/MarkerSpec.js index 41f268d9..9051edc1 100644 --- a/spec/suites/layer/marker/MarkerSpec.js +++ b/spec/suites/layer/marker/MarkerSpec.js @@ -73,7 +73,7 @@ describe("Marker", function () { 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}); map.addLayer(marker); @@ -81,7 +81,7 @@ describe("Marker", function () { marker.setIcon(icon2); var afterIcon = marker._icon; - expect(beforeIcon).to.be(afterIcon); + expect(beforeIcon).to.be(afterIcon); // Check that the element is re-used expect(afterIcon.src).to.contain(icon2._getIconUrl('icon')); }); @@ -122,21 +122,7 @@ describe("Marker", function () { expect(marker.dragging.enabled()).to.be(true); }); - it("changes the icon to another DivIcon which is a DOM 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('

InnerTextFromCustomNode

'); - }); - - it("changes the icon to another DivIcon", 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'})}); map.addLayer(marker); @@ -144,7 +130,7 @@ describe("Marker", function () { marker.setIcon(new L.DivIcon({html: 'Inner2Text'})); var afterIcon = marker._icon; - expect(beforeIcon).to.be(afterIcon); + expect(beforeIcon).to.be(afterIcon); // Check that the
element is re-used expect(afterIcon.innerHTML).to.contain('Inner2Text'); }); @@ -165,7 +151,7 @@ describe("Marker", function () { 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); if (L.Browser.retina) { @@ -183,7 +169,7 @@ describe("Marker", function () { 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(marker._icon.innerHTML).to.contain('Inner1Text'); diff --git a/src/layer/marker/DivIcon.js b/src/layer/marker/DivIcon.js index d011ea71..4af9c2a5 100644 --- a/src/layer/marker/DivIcon.js +++ b/src/layer/marker/DivIcon.js @@ -29,7 +29,7 @@ export var DivIcon = Icon.extend({ // iconAnchor: (Point), // popupAnchor: (Point), - // @option html: String|HTMLElement = '' + // @option html: String = '' // Custom HTML code to put inside the div element, empty by default. html: false, @@ -44,13 +44,7 @@ export var DivIcon = Icon.extend({ var div = (oldIcon && oldIcon.tagName === 'DIV') ? oldIcon : document.createElement('div'), options = this.options; - if (options.html === false) { - div.innerHTML = ''; - } else if (typeof options.html === 'object' && options.html.nodeType === 1) { - div.appendChild(options.html); - } else { - div.innerHTML = options.html; - } + div.innerHTML = options.html !== false ? options.html : ''; if (options.bgPos) { var bgPos = point(options.bgPos);