Merge pull request #383 from jamietre/fix-boundlist-props

Resolves #83 Resolves #377 Resolves #378 Resolves #380 Resolves #381
jamietre · Feb 21, 2021 · 3593e7a · 3593e7a
2 parents a34ff0b + 67dbb74
commit 3593e7a
Show file tree

Hide file tree

Showing 9 changed files with 1,077 additions and 407 deletions.
diff --git a/examples/boundlist.html b/examples/boundlist.html
@@ -0,0 +1,354 @@
+<!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>Bound List 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.5.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" />
+
+    <style type="text/css">
+      #veg_list {
+        margin: 0;
+        padding: 0;
+      }
+      .control {
+        margin: 5px;
+      }
+      input {
+        margin: 3px;
+      }
+      input.isselected + span {
+        background-color: blue;
+      }
+      input:checked + span {
+        color: white;
+      }
+    </style>
+
+    <script type="text/javascript">
+      $(document).ready(function () {
+        'use strict';
+
+        function buildListItem(key, description) {
+          return $('<div/>', {
+            class: 'control'
+          })
+            .append(
+              $('<input/>', {
+                type: 'checkbox',
+                'data-name': key
+              }).on('click', function () {
+                $image.mapster(
+                  'set',
+                  $(this).is(':checked'),
+                  $(this).data('name')
+                );
+              })
+            )
+            .append(
+              $('<span/>', {
+                'data-name': key
+              }).text(description)
+            );
+        }
+
+        // eslint-disable-next-line no-unused-vars
+        function getBoundListForAreas(areas) {
+          var listItems = $.map(areas, function (area) {
+            var $a = $(area),
+              key = $a.data('name'),
+              description = $a.data('description');
+
+            return buildListItem(key, description);
+          });
+          return $veglist.empty().append(listItems).find('input');
+        }
+
+        // eslint-disable-next-line no-unused-vars
+        function getBoundListFromItems(items) {
+          var listItems = $.map(items, function (item) {
+            return buildListItem(item.key, item.value);
+          });
+          return $veglist.empty().append(listItems).find('input');
+        }
+
+        var $image = $('#veg_image'),
+          $veglist = $('#veg_list'),
+          imageOptions = {
+            mapKey: 'data-name',
+            mapValue: 'data-description',
+            fillOpacity: 0.4,
+            fillColor: 'd42e16',
+            strokeColor: '3320FF',
+            strokeOpacity: 0.8,
+            strokeWidth: 5,
+            render_select: {
+              strokeWidth: 10
+            },
+            render_highlight: {
+              strokeWidth: 5
+            },
+            stroke: true,
+            onConfigured: function () {
+              updateOptions();
+              updateKeys();
+            },
+            onStateChange: function () {
+              updateKeys();
+            },
+            listKey: 'data-name',
+            listSelectedAttribute: 'checked',
+            listSelectedClass: 'isselected',
+            sortList: 'asc',
+            /*
+              onGetList & boundList should behave identically
+            */
+            onGetList: function (items) {
+              var listItems = $.map(items, function (item) {
+                return buildListItem(item.key, item.value);
+              });
+              return $veglist.empty().append(listItems).find('input');
+            },
+            // boundList: (function () {
+            //   var listItems = $.map($('area'), function (area) {
+            //     var $a = $(area),
+            //       key = $a.data('name'),
+            //       description = $a.data('description');
+
+            //     return buildListItem(key, description);
+            //   });
+            //   return $veglist.empty().append(listItems).find('input');
+            // })(),
+            singleSelect: true,
+            isSelectable: true,
+            showToolTip: true,
+            toolTip: function (data) {
+              return $(data.target).data('tooltip');
+            },
+            areas: [
+              {
+                key: 'redpepper',
+                selected: true
+              }
+            ]
+          };
+
+        $('#reset_map').on('click', function () {
+          $veglist.empty();
+          $image.mapster('unbind').mapster(imageOptions);
+        });
+
+        $('#rebind_map').on('click', function () {
+          $veglist.empty();
+          var options = $.extend({}, $image.mapster('get_options'));
+          options.areas.push({
+            key: 'squash',
+            selected: true
+          });
+          $image.mapster('rebind', options);
+        });
+
+        $('#toggle_single_select').on('click', function () {
+          var options = $image.mapster('get_options');
+          $image.mapster('set_options', {
+            singleSelect: options.singleSelect === true ? false : true
+          });
+          updateOptions();
+        });
+
+        $('#clear_list').on('click', function () {
+          $image.mapster('set', false, $image.mapster('get'));
+        });
+
+        $('#toggle_veggies1').on('click', function () {
+          $image.mapster('set', null, 'carrots,squash');
+        });
+
+        $('#toggle_veggies2').on('click', function () {
+          $image.mapster('set', null, 'carrots,celery');
+        });
+
+        $('#toggle_isselectable').on('click', function () {
+          $veglist.empty();
+          var options = $image.mapster('get_options');
+          $image
+            .mapster('unbind')
+            .mapster(
+              $.extend({}, options, { isSelectable: !options.isSelectable })
+            );
+        });
+
+        function updateOptions() {
+          var options = $image.mapster('get_options');
+          $('#singleSelect').text(options.singleSelect);
+          $('#isSelectable').text(options.isSelectable);
+        }
+
+        function updateKeys() {
+          var keys = $image.mapster('get');
+          $('#selectedKeys').text(keys || 'No Keys Selected');
+        }
+
+        $image.mapster(imageOptions);
+      });
+    </script>
+  </head>
+
+  <body>
+    <div class="navmenu">
+      Return to <a href="index.html">Main Menu</a>
+      <hr />
+    </div>
+    <h2>Bound List Test</h2>
+    <p>
+      Test 'boundList' option using various combinations of values. This should
+      be converted to a unit test once the testing framework is updated.
+    </p>
+    <p>The behavior should be:</p>
+    <ul>
+      <li>
+        Red Pepper should be selected on initial load (configured with selected
+        === true)
+      </li>
+      <li>
+        Rebind should result in Red Pepper & Squash selected (configured with
+        selected === true)
+      </li>
+      <li>
+        List should stay in sync with selected areas except for where
+        <a
+          href="https://github.com/jamietre/ImageMapster/issues/378"
+          target="_blank"
+          >Issue #378</a
+        >
+        comes in to play.
+      </li>
+      <li>List should display and sync regardless of value of isSelectable</li>
+    </ul>
+    <p>Single Select: <span id="singleSelect"></span></p>
+    <p>IsSelectable: <span id="isSelectable"></span></p>
+    <p>Selected Keys: <span id="selectedKeys"></span></p>
+    <div>
+      <div style="float: left">
+        <img
+          id="veg_image"
+          style="width: 500px"
+          src="https://github.com/jamietre/ImageMapster/raw/master/examples/images/vegetables.jpg"
+          usemap="#veg_map"
+        />
+      </div>
+      <div style="float: left; margin-left: 10px">
+        <div>
+          <ul id="veg_list"></ul>
+        </div>
+        <div class="control"><button id="clear_list">Deselect All</button></div>
+        <div class="control"><button id="reset_map">Reset Map</button></div>
+        <div class="control"><button id="rebind_map">Rebind Map</button></div>
+        <div class="control">
+          <button id="toggle_single_select">Toggle SingleSelect</button>
+        </div>
+        <div class="control">
+          <button id="toggle_veggies1">Toggle Carrots &amp; Squash</button>
+        </div>
+        <div class="control">
+          <button id="toggle_veggies2">Toggle Carrots &amp; Celery</button>
+        </div>
+        <div class="control">
+          <button id="toggle_isselectable">Toggle isSelectable</button>
+        </div>
+      </div>
+      <div style="clear: both"></div>
+    </div>
+    <map id="veg_map" name="veg_map">
+      <area
+        shape="poly"
+        data-name="redpepper"
+        data-description="Red Pepper"
+        data-tooltip="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"
+        data-name="celery"
+        data-description="Celery"
+        data-tooltip="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"
+        data-name="carrots"
+        data-description="Carrots"
+        data-tooltip="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="#"
+      />
+      <area
+        shape="poly"
+        data-name="asparagus"
+        data-description="Asparagus"
+        data-tooltip="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"
+        data-name="squash"
+        data-description="Squash"
+        data-tooltip="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"
+        data-name="yellowpepper"
+        data-description="Yellow Pepper"
+        data-tooltip="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"
+        data-name="broccoli"
+        data-description="Broccoli"
+        data-tooltip="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"
+        data-name="broccoli2"
+        data-description="Broccoli 2"
+        data-tooltip="broccoli 2"
+        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="#"
+      />
+      <area
+        shape="poly"
+        data-name="dip"
+        data-description="Dip"
+        data-tooltip="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/examples/index.html b/examples/index.html
@@ -25,6 +25,8 @@ <h1>ImageMapster Examples</h1>
         <li><a href="nohref.html">Nohref & Href Attribute Values</a></li>
         <li><a href="staticstate.html">StaticState Values</a></li>
         <li><a href="includekeys.html">IncludeKeys Values</a></li>
+        <li><a href="rebind.html">Rebind</a></li>
+        <li><a href="boundlist.html">Bound List</a></li>
       </ul>
     </div>
   </body>