Resolves #328 - Fix map_cache bug on unbind

jamietre · Jan 18, 2021 · 5cfad44 · 5cfad44
1 parent ff44143
commit 5cfad44
Show file tree

Hide file tree

Showing 6 changed files with 178 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,9 @@
 ## Version 2.0.0 (planned)
 * **Breaking Change** - [Issue 70](https://github.com/jamietre/ImageMapster/issues/70) Respect target attribute for AREA elements with href.
 
+## Version 1.3.2 (planned)
+* [Issue 328](https://github.com/jamietre/ImageMapster/issues/328) Fix tracking internal map_cache on unbind
+
 ## Version 1.3.1 - 2021.01.10
 * Publish to NPM
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "ImageMapster",
-  "version": "1.3.1",
+  "version": "1.3.2-beta.0",
   "homepage": "https://github.com/jamietre/ImageMapster",
   "description": "jQuery plugin that activates areas in HTML imagemaps with support for highlighting, selecting, tooltips, resizing and more",
   "main": "dist/jquery.imagemapster.min.js",

diff --git a/examples/multiple-maps.html b/examples/multiple-maps.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>Multiple Maps Demo</title>
+
+    <script
+      type="text/javascript"
+      src="javascripts/jquery.3.5.1.min.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="../dist/jquery.imagemapster.js"
+    ></script>
+    <link rel="stylesheet" href="stylesheets/base.css" />
+
+    <style type="text/css">
+      p,
+      div {
+        font-family: Arial, Helvetica, Sans Serif;
+        font-size: 12px;
+        font-weight: normal;
+      }
+    </style>
+    <script type="text/javascript">
+      $(document).ready(function () {
+        "use strict";
+
+        var options = {
+          fillOpacity: 0.4,
+          fillColor: "d42e16",
+          strokeColor: "3320FF",
+          strokeOpacity: 0.8,
+          strokeWidth: 4,
+          stroke: true,
+          isSelectable: true,
+          mapKey: "name",
+        };
+        $("img").mapster(options);
+
+        $(".unbind-map").on("click", function (e) {
+          e.preventDefault();
+          var image_id = $(this).data("image"),
+            selector = image_id ? "#" + image_id : "img";
+          $(selector).mapster("unbind");
+        });
+
+        $(".bind-map").on("click", function (e) {
+          e.preventDefault();
+          var image_id = $(this).data("image"),
+            selector = image_id ? "#" + image_id : "img";
+          $(selector).mapster("unbind");
+          $(selector).mapster(options);
+        });
+      });
+    </script>
+  </head>
+
+  <body>
+    <div class="navmenu">
+      Return to <a href="index.html">Main Menu</a>
+      <hr />
+    </div>
+    <h2>Multiple Maps Demo</h2>
+    <div id="veg_demo" style="width: 640px">
+      <p>Simple test of multiple image maps.</p>
+      <p>
+        You can unbind/rebind individual maps using links under each map or
+        unbind/rebind all using the following links:
+      </p>
+      <a href="#" class="unbind-map">Unbind all maps</a><br />
+      <a href="#" class="bind-map">Rebind all maps</a><br />
+      <p>
+        <strong>Vegetables #1</strong> - Red Pepper, Celery, Carrots<br />
+        <a href="#" class="unbind-map" data-image="vegimg1">Unbind the map</a
+        ><br />
+        <a href="#" class="bind-map" data-image="vegimg1">Rebind the map</a
+        ><br />
+      </p>
+      <div style="clear: both; margin-left: 80px">
+        <img id="vegimg1" src="images/vegetables.jpg" usemap="#vegmap1" />
+      </div>
+      <p>
+        <strong>Vegetables #2</strong> - Squash, Yellow Pepper, Broccoli<br />
+        <a href="#" class="unbind-map" data-image="vegimg2">Unbind the map</a
+        ><br />
+        <a href="#" class="bind-map" data-image="vegimg2">Rebind the map</a
+        ><br />
+      </p>
+      <div style="clear: both; margin-left: 80px">
+        <img id="vegimg2" src="images/vegetables.jpg" usemap="#vegmap2" />
+      </div>
+      <p>
+        <strong>Vegetables #3</strong> - Asparagus, Dip<br />
+        <a href="#" class="unbind-map" data-image="vegimg3">Unbind the map</a
+        ><br />
+        <a href="#" class="bind-map" data-image="vegimg3">Rebind the map</a
+        ><br />
+      </p>
+      <div style="clear: both; margin-left: 80px">
+        <img id="vegimg3" src="images/vegetables.jpg" usemap="#vegmap3" />
+      </div>
+      <div style="clear: both; height: 8px"></div>
+    </div>
+    <map id="vegmap1" name="vegmap1">
+      <area
+        shape="poly"
+        name="redpepper"
+        coords="412,156, 427,161, 429,163, 444,153, 453,155, 457,159, 452,168, 459,174, 455,178, 460,179, 463,193, 460,203, 441,214, 436,217, 458,238, 469,257, 479,267, 478,269, 479,285, 458,309, 436,310, 414,305, 410,323, 397,334, 379,313, 389,316, 401,320, 399,305, 382,300, 371,290,
+	367,296, 366,298,
+	338,274, 332,272, 300,239, 316,238, 316,234, 313,230, 328,225, 333,213, 338,196, 333,181, 337,166, 345,145"
+        href="#"
+      />
+      <area
+        shape="poly"
+        name="celery"
+        coords="147,131, 156,143, 163,146, 177,129, 175,138, 177,138, 182,144, 180,164, 148,169, 139,171, 144,180, 141,198, 139,208, 140,222, 127,237, 148,216, 163,212, 166,216, 160,223, 163,233, 153,281, 135,318, 129,313, 122,322, 117,320, 99,301, 98,293, 85,300, 80,303, 74,300,
+	64,285, 76,272, 98,249,
+	94,246, 72,261, 57,258, 62,251, 60,248, 47,228, 51,207, 71,195, 72,192, 38,202, 33,195, 30,173, 147,127"
+        href="#"
+      />
+      <area
+        shape="poly"
+        name="carrots"
+        coords="175,74, 170,80, 154,85, 189,103, 190,111, 182,111, 179,98, 157,95, 142,111, 140,128, 38,169, 39,163, 74,143, 74,141, 56,135, 52,115, 79,111, 78,106, 63,98, 71,91, 81,88, 82,83, 91,75, 136,74, 174,70"
+        href="#"
+      />
+    </map>
+    <map id="vegmap2" name="vegmap2">
+      <area
+        shape="poly"
+        name="squash"
+        coords="388,26, 391,38, 394,43, 395,46, 425,58, 427,68, 428,92, 386,125, 371,132, 374,124, 377,118, 374,105, 371,105, 370,107, 364,102, 368,97, 356,87, 353,89, 348,86, 322,87, 314,100, 314,102, 282,85, 278,84, 273,74, 272,68, 319,46, 346,31"
+        href="#"
+      />
+      <area
+        shape="poly"
+        name="yellowpepper"
+        coords="237,222, 246,254, 255,291, 262,323, 271,322, 285,350, 306,352, 307,365, 298,374, 285,366, 270,375, 249,378, 244,384, 231,389, 215,373, 210,363, 203,357, 199,368, 184,361, 175,349, 162,356, 140,340, 143,305, 161,252, 168,224, 188,240, 194,223, 198,232, 213,226, 224,224, 229,218"
+        href="#"
+      />
+      <area
+        shape="poly"
+        name="broccoli"
+        coords="341,89, 342,91, 360,95, 353,100, 360,104, 364,109, 368,115, 369,112, 367,110, 376,111, 373,123, 367,128, 362,128, 359,131, 348,134, 345,137, 340,138, 341,148, 334,167, 323,172, 315,165, 315,162, 312,165, 311,172, 293,167, 292,141, 298,136, 307,134, 322,129, 328,128,329,116, 319,109, 314,104,317,93, 332,84"
+        href="#"
+      />
+      <area
+        shape="poly"
+        name="broccoli"
+        coords="328,178, 338,197, 337,202, 330,215, 328,217, 325,228, 307,234, 305,239, 287,225, 287,216, 286,212, 282,216, 277,212, 277,185, 284,179, 310,175"
+        href="#"
+      />
+    </map>
+    <map id="vegmap3" name="vegmap3">
+      <area
+        shape="poly"
+        name="asparagus"
+        coords="224,25, 239,33, 244,36, 247,32, 327,23, 344,31, 343,36, 319,41, 315,42, 302,52, 272,61, 265,64, 270,73, 256,67, 248,60, 187,55, 192,58, 192,60, 184,64, 185,67, 176,67, 173,69, 142,67, 146,63, 135,59, 123,57, 142,44, 145,42, 143,39, 145,32, 207,38, 185,18, 212,19,
+	220,22"
+        href="#"
+      />
+      <area
+        shape="poly"
+        name="dip"
+        coords="253,102, 277,100, 280,105, 290,107, 295,111, 304,130, 290,140, 287,147, 240,157, 238,159, 227,153, 203,146, 198,125, 200,116, 214,102, 231,102"
+        href="#"
+      />
+    </map>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "imagemapster",
-  "version": "1.3.1",
+  "version": "1.3.2-beta.0",
   "description": "jQuery plugin that activates areas in HTML imagemaps with support for highlighting, selecting, tooltips, resizing and more",
   "main": "dist/jquery.imagemapster.min.js",
   "files": [

diff --git a/src/core.js b/src/core.js
@@ -521,7 +521,7 @@
         },
         removeMap = function (map_data) {
             m.map_cache.splice(map_data.index, 1);
-            for (var i = m.map_cache.length - 1; i >= this.index; i--) {
+            for (var i = m.map_cache.length - 1; i >= map_data.index; i--) {
                 m.map_cache[i].index--;
             }
         };