Merge pull request #428 from jamietre/fix/issue-427

fix: ensure initialization completes on subsequent attempts
jamietre · Dec 31, 2024 · 52543c1 · 52543c1
2 parents 28e41dd + 3b16f9a
commit 52543c1
Show file tree

Hide file tree

Showing 4 changed files with 244 additions and 2 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -31,6 +31,7 @@ <h1>ImageMapster Examples</h1>
         <li><a href="boundlist.html">Bound List</a></li>
         <li><a href="skeleton.html">Skeleton Joints</a></li>
         <li><a href="frog.html">Frog Menu</a></li>
+        <li><a href="multipleinit.html">Multiple Initialization</a></li>
       </ul>
     </div>
   </body>

diff --git a/examples/multipleinit.html b/examples/multipleinit.html
@@ -0,0 +1,170 @@
+<!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" lang="en-US">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>Multiple Initialization Test</title>
+
+    <script
+      type="text/javascript"
+      src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.min.js"
+    ></script>
+
+    <script type="text/javascript" src="redist/jquery.3.7.1.min.js"></script>
+    <script
+      type="text/javascript"
+      src="../dist/jquery.imagemapster.js"
+    ></script>
+
+    <!-- <script type="text/javascript" src="redist/zepto.1.2.0.min.js"></script>
+    <script
+      type="text/javascript"
+      src="../dist/jquery.imagemapster.zepto.js"
+    ></script> -->
+
+    <link rel="stylesheet" href="stylesheets/base.css" />
+    <script>
+      $(function () {
+        'use strict';
+
+        var $frogImg = $('#frog-img'),
+          $beatlesImg = $('#beatles-img'),
+          frogCounter = 0,
+          beatlesCounter = 0,
+          frogOpts = {
+            mapKey: 'data-name',
+            onConfigured: function () {
+              $('#frogOnConfigured').text(++frogCounter);
+            }
+          },
+          beatlesOpts = {
+            mapKey: 'data-name',
+            onConfigured: function () {
+              $('#beatlesOnConfigured').text(++beatlesCounter);
+            }
+          };
+
+        $frogImg.mapster(frogOpts);
+        $frogImg.mapster(frogOpts);
+
+        $beatlesImg.mapster(beatlesOpts);
+        $beatlesImg.mapster('unbind');
+        $beatlesImg.mapster(beatlesOpts);
+      });
+    </script>
+  </head>
+
+  <body>
+    <div class="navmenu">
+      Return to <a href="index.html">Main Menu</a>
+      <hr />
+    </div>
+    <h2>Multiple Initialization Test</h2>
+    <p>
+      Test 'initialize' to ensure mapster is properly initialized when multiple
+      calls to initialize are made.
+    </p>
+    <p>The behavior should be:</p>
+    <ul>
+      <li>When hovering over a hotspot on either image, it should highlight</li>
+      <li>onConfigured count should be two (2) for each image map</li>
+    </ul>
+
+    <h3>Frog</h3>
+    <p>Calls mapster multiple times in succession</p>
+    <p>Frog onConfigured called: <span id="frogOnConfigured">0</span> times</p>
+    <div>
+      <img id="frog-img" src="images/frog_map.jpg" usemap="#frog-map" />
+
+      <map name="frog-map">
+        <area
+          shape="rect"
+          data-name="menu1hot"
+          coords="10,10,120,330"
+          href="#"
+        />
+        <area shape="rect" data-name="menu1" coords="10,340,110,390" href="#" />
+        <area
+          shape="rect"
+          data-name="menu2hot"
+          coords="120,10,230,330"
+          href="#"
+        />
+        <area
+          shape="rect"
+          data-name="menu2"
+          coords="120,340,220,390"
+          href="#"
+        />
+        <area
+          shape="rect"
+          data-name="menu3hot"
+          coords="230,10,340,330"
+          href="#"
+        />
+        <area
+          shape="rect"
+          data-name="menu3"
+          coords="230,340,330,390"
+          href="#"
+        />
+        <area
+          shape="rect"
+          data-name="menu4hot"
+          coords="340,10,450,330"
+          href="#"
+        />
+        <area
+          shape="rect"
+          data-name="menu4"
+          coords="340,340,440,390"
+          href="#"
+        />
+      </map>
+    </div>
+
+    <h3>Beatles</h3>
+    <p>Calls mapster, then unbind, then mapster again in succession</p>
+    <p>
+      Beatles onConfigured called: <span id="beatlesOnConfigured">0</span> times
+    </p>
+    <div>
+      <img
+        id="beatles-img"
+        src="images/beatles_basic.jpg"
+        style="width: 400px; height: 240px"
+        usemap="#beatles-map"
+      />
+
+      <map name="beatles-map">
+        <area
+          id="paul"
+          shape="rect"
+          data-name="paul,beatles"
+          coords="36,46,121,131"
+          href="#"
+        />
+        <area
+          id="ringo"
+          shape="rect"
+          data-name="ringo,beatles"
+          coords="113,76,198,161"
+          href="#"
+        />
+        <area
+          id="john"
+          shape="rect"
+          data-name="john,beatles"
+          coords="192,50,277,135"
+          href="#"
+        />
+        <area
+          id="george"
+          shape="rect"
+          data-name="george,beatles"
+          coords="262,60,347,145"
+          href="#"
+        />
+      </map>
+    </div>
+  </body>
+</html>
diff --git a/src/core.js b/src/core.js
@@ -1023,8 +1023,11 @@
         if (md) {
           me.unbind.apply(img);
           if (!md.complete) {
-            // will be queued
-            return true;
+            // in most situations, queueCommand should return true since we just queued unbind, however
+            // if not successfully queued, nothing remains in-process so we can continue
+            if (m.queueCommand(md, img, 'bind', [options])) {
+              return true;
+            }
           }
           md = null;
         }

diff --git a/tests/events.tests.js b/tests/events.tests.js
@@ -2,6 +2,74 @@
 
 this.tests = this.tests || [];
 
+this.tests.push(
+  iqtest
+    .create('initialize', 'multiple initialization')
+    .add('is initialized when multiple initializations', function (a) {
+      'use strict';
+
+      var me = this,
+        getPromise = function (name) {
+          return me.promises(name);
+        };
+
+      image.mapster(
+        $.extend(map_options, {
+          onConfigured: getPromise('configured').resolve
+        })
+      );
+
+      image.mapster(
+        $.extend(map_options, {
+          onConfigured: getPromise('configured2').resolve
+        })
+      );
+
+      getPromise('configured').then(function () {
+        getPromise('configured2').then(function () {
+          getPromise('finished').resolve();
+        });
+      });
+
+      a.resolves(getPromise('finished'), 'Configured was called 2 times');
+    })
+);
+
+this.tests.push(
+  iqtest
+    .create('initialize_unbind', 'multiple initialization with unbind')
+    .add('is initialized when init, unbind, init', function (a) {
+      'use strict';
+
+      var me = this,
+        getPromise = function (name) {
+          return me.promises(name);
+        };
+
+      image.mapster(
+        $.extend(map_options, {
+          onConfigured: getPromise('configured').resolve
+        })
+      );
+
+      image.mapster('unbind');
+
+      image.mapster(
+        $.extend(map_options, {
+          onConfigured: getPromise('configured2').resolve
+        })
+      );
+
+      getPromise('configured').then(function () {
+        getPromise('configured2').then(function () {
+          getPromise('finished').resolve();
+        });
+      });
+
+      a.resolves(getPromise('finished'), 'Configured was called 2 times');
+    })
+);
+
 this.tests.push(
   iqtest
     .create('events', 'tests for imagemapster events')