Merge pull request #360 from jamietre/add-autoresize

Add autoresize feature and fix altimages becoming visible Resolves #357, Resolves #359
jamietre · Jan 30, 2021 · 452f2f8 · 452f2f8
2 parents b90c0d6 + 019075b
commit 452f2f8
Show file tree

Hide file tree

Showing 10 changed files with 423 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,8 @@
 
 ## Version 1.5.0 (planned)
 
+- [Issue 357](https://github.com/jamietre/ImageMapster/issues/357) AltImages become visible after `resize` when duration is specified
+
 ## Version 1.5.0-beta.1 - 2021.01.26
 
 - Applied `next` tag to NPM v1.5.0-beta.1 and re-applied `latest` tag to NPM v1.4.0

diff --git a/README.md b/README.md
@@ -171,6 +171,7 @@ To use ImageMapster >= v1.3.2 < 2.0.0 with Zepto v.1.2.0, Zepto must contain the
 - ie
 - fx
 - touch
+- selector
 
 ### CDN
 
@@ -201,18 +202,32 @@ Use `jquery.imagemapster.zepto.min.js`
 
 The maintainers of Zepto decided not to support any module loaders so there is no official support of Zepto using AMD/CJS/etc. Given this, the Zepto version of ImageMapster expects a dependency of `jquery` when using a module loader. The Zepto version of ImageMapster will work with jQuery or Zepto. If you'd like to utilize Zepto, there are some projects that wrap Zepto and support UMD such as [zepto-modules](https://www.npmjs.com/package/zepto-modules). In order to use Zepto, you will need to configure your bundler to map `jquery` to your Zepto build.
 
-Using `webpack` and the `zepto-modules/_custom` module as an example:
+Using `webpack` and `zepto-modules` as an example:
 
 #### Install from NPM
 
 ```sh
 npm install zepto-modules imagemapster@1.4.0 --save
 ```
 
-#### yourmodule.js
+### src/yourzepto.js
 
 ```js
-import $ from 'zepto-modules/_custom';
+var $ = require('zepto-modules/zepto');
+
+require('zepto-modules/event');
+require('zepto-modules/ie');
+require('zepto-modules/fx');
+require('zepto-modules/touch');
+require('zepto-modules/selector');
+
+module.exports = $;
+```
+
+#### src/yourmodule.js
+
+```js
+import $ from './yourzepto.js';
 import im from 'imagemapster/dist/jquery.imagemapster.zepto.js';
 ...
 $(yourImage).mapster({ ... });
@@ -223,7 +238,7 @@ $(yourImage).mapster({ ... });
 ```js
 resolve: {
   alias: {
-    jquery: path.resolve('./node_modules/zepto-modules/_custom');
+    jquery: path.resolve('./src/yourzepto');
   }
 }
 ```

diff --git a/examples/altimages.html b/examples/altimages.html
@@ -37,7 +37,7 @@
           altImages: {
             img2: '../examples/images/usa_map_720_alt_2.jpg',
             img3: '../examples/images/usa_map_720_alt_3.jpg',
-            img4: '../examples/images/usa_map_720_alt_3.jpg',
+            img4: '../examples/images/usa_map_720_alt_4.jpg',
             img5: '../examples/images/usa_map_720_alt_5.jpg'
           },
 

diff --git a/examples/autoresize.html b/examples/autoresize.html
@@ -0,0 +1,221 @@
+<!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>Automatic Resize Demo</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" />
+    <script type="text/javascript">
+      $(document).ready(function () {
+        'use strict';
+
+        // apply mapster to all images
+        $('img').mapster({
+          enableAutoResizeSupport: true,
+          autoResize: true,
+          autoResizeDelay: 0,
+          autoResizeDuration: 0,
+          onAutoResize: function () {
+            //console.log('auto resized!');
+          }
+        });
+
+        $('.toggle-autoresize-image').on('click', function () {
+          var imageId = $(this).data('imageid'),
+            selector = '#' + imageId,
+            options = $(selector).mapster('get_options');
+
+          $(selector).mapster('set_options', {
+            autoResize: !options.autoResize
+          });
+        });
+
+        $('.toggle-autoresize-all').on('click', function () {
+          var $images = $('img'),
+            isEnabled = $(this).data('enabled');
+
+          $images.mapster('set_options', { autoResize: isEnabled });
+          if (isEnabled) {
+            $images.mapster('resize', null, null, 0, function () {
+              //console.log('manually triggered auto-resize');
+            });
+          }
+        });
+      });
+    </script>
+  </head>
+  <body>
+    <div class="navmenu">
+      Return to <a href="index.html">Main Menu</a>
+      <hr />
+    </div>
+    <h2>Automatic Resize Demo</h2>
+    <p>
+      Demonstrates automatic resize feature of ImageMapster introduced in
+      v1.5.0. To enable automatic resize, you must set two configuration values:
+    </p>
+    <ul>
+      <li>
+        enableAutoResizeSupport (true|false) - Set this to true to enable the
+        feature. If you want to enable/disable this feature after initializing
+        mapster, you must use `rebind`.
+      </li>
+      <li>
+        autoResize (true|false) - When auto resize support is enabled and
+        autoResize === true, ImageMapster will automatically resize the image to
+        the size of its container. This option can be toggled via set_options
+        API.
+      </li>
+    </ul>
+    <p>Additional Auto Resize Configuration Options:</p>
+    <ul>
+      <li>
+        autoResizeDelay (int) - The amount of time to delay resizing when window
+        resize event occurs. Default is 0 (zero).
+      </li>
+      <li>
+        autoResizeDuration (int) - Corresponds to `resize` API duration
+        parameter. Default is 0 (zero).
+      </li>
+      <li>
+        onAutoResize (func) - Correponds to `resize` API callback parameter.
+        Default is null.
+      </li>
+    </ul>
+    <p>
+      Change the size of the window to see how the image automatically resizes
+      to its container size.
+    </p>
+    <ul>
+      <li>
+        <a
+          href="javascript:void(0);"
+          class="toggle-autoresize-image"
+          data-imageid="beatlesimage1"
+          >Toggle Auto Resize for Top Left Image</a
+        >
+      </li>
+      <li>
+        <a
+          href="javascript:void(0);"
+          class="toggle-autoresize-image"
+          data-imageid="beatlesimage2"
+          >Toggle Auto Resize for Top Middle Image</a
+        >
+      </li>
+      <li>
+        <a
+          href="javascript:void(0);"
+          class="toggle-autoresize-image"
+          data-imageid="beatlesimage3"
+          >Toggle Auto Resize for Top Right Image</a
+        >
+      </li>
+      <li>
+        <a
+          href="javascript:void(0);"
+          class="toggle-autoresize-image"
+          data-imageid="beatlesimage4"
+          >Toggle Auto Resize for Bottom Image</a
+        >
+      </li>
+
+      <li style="margin-top: 20px">
+        <a
+          href="javascript:void(0);"
+          class="toggle-autoresize-all"
+          data-enabled="true"
+          >Enable Auto Resize for all Images</a
+        >
+      </li>
+      <li>
+        <a
+          href="javascript:void(0);"
+          class="toggle-autoresize-all"
+          data-enabled="false"
+          >Disable Auto Resize for all Images</a
+        >
+      </li>
+    </ul>
+    <div>
+      <div
+        style="width: 10%; margin: 10px; float: left; border: 5px solid blue"
+      >
+        <img
+          id="beatlesimage1"
+          src="images/beatles_basic.jpg"
+          usemap="#beatles-map1"
+          style="width: 100%"
+        />
+      </div>
+      <div
+        style="width: 30%; margin: 10px; float: left; border: 5px solid green"
+      >
+        <img
+          id="beatlesimage2"
+          src="images/beatles_basic.jpg"
+          usemap="#beatles-map2"
+          style="width: 100%"
+        />
+      </div>
+      <div style="width: 40%; margin: 10px; float: left; border: 5px solid red">
+        <img
+          id="beatlesimage3"
+          src="images/beatles_basic.jpg"
+          usemap="#beatles-map3"
+          style="width: 100%"
+        />
+      </div>
+      <div style="clear: both" />
+    </div>
+    <div style="border: 5px solid orange; padding: 20px; margin: 40px">
+      <img
+        id="beatlesimage4"
+        src="images/beatles_basic.jpg"
+        usemap="#beatles-map4"
+        style="width: 100%"
+      />
+    </div>
+    <map name="beatles-map1">
+      <area shape="rect" coords="36,46,121,131" href="#" />
+      <area shape="rect" coords="113,76,198,161" href="#" />
+      <area shape="rect" coords="192,50,277,135" href="#" />
+      <area shape="rect" coords="262,60,347,145" href="#" />
+    </map>
+    <map name="beatles-map2">
+      <area shape="rect" coords="36,46,121,131" href="#" />
+      <area shape="rect" coords="113,76,198,161" href="#" />
+      <area shape="rect" coords="192,50,277,135" href="#" />
+      <area shape="rect" coords="262,60,347,145" href="#" />
+    </map>
+    <map name="beatles-map3">
+      <area shape="rect" coords="36,46,121,131" href="#" />
+      <area shape="rect" coords="113,76,198,161" href="#" />
+      <area shape="rect" coords="192,50,277,135" href="#" />
+      <area shape="rect" coords="262,60,347,145" href="#" />
+    </map>
+    <map name="beatles-map4">
+      <area shape="rect" coords="36,46,121,131" href="#" />
+      <area shape="rect" coords="113,76,198,161" href="#" />
+      <area shape="rect" coords="192,50,277,135" href="#" />
+      <area shape="rect" coords="262,60,347,145" href="#" />
+    </map>
+  </body>
+</html>
diff --git a/examples/index.html b/examples/index.html
@@ -20,6 +20,7 @@ <h1>ImageMapster Examples</h1>
         <li><a href="multiple-maps.html">Multiple Maps</a></li>
         <li><a href="navigate-simple.html">Navigate - Simple</a></li>
         <li><a href="navigate-full.html">Navigate - Full</a></li>
+        <li><a href="autoresize.html">Automatic Resize</a></li>
       </ul>
     </div>
   </body>

diff --git a/examples/redist/zepto.1.2.0.min.js b/examples/redist/zepto.1.2.0.min.js
diff --git a/src/core.js b/src/core.js
@@ -65,6 +65,11 @@
       configTimeout: 30000,
       noHrefIsMask: true,
       scaleMap: true,
+      enableAutoResizeSupport: false, // TODO: Remove in next major release
+      autoResize: false,
+      autoResizeDelay: 0,
+      autoResizeDuration: 0,
+      onAutoResize: null,
       safeLoad: false,
       areas: []
     },

diff --git a/src/mapdata.js b/src/mapdata.js
@@ -29,7 +29,8 @@
       _tooltip_events: [], // {}         info on events we bound to a tooltip container, so we can properly unbind them
       scaleInfo: null, // {}         info about the image size, scaling, defaults
       index: -1, // index of this in map_cache - so we have an ID to use for wraper div
-      activeAreaEvent: null
+      activeAreaEvent: null,
+      autoResizeTimer: null // tracks autoresize timer based on options.autoResizeDelay
     });
   }
 
@@ -482,6 +483,9 @@
     wrapId: function () {
       return 'mapster_wrap_' + this.index;
     },
+    instanceEventNamespace: function () {
+      return '.mapster.' + this.wrapId();
+    },
     _idFromKey: function (key) {
       return typeof key === 'string' &&
         Object.prototype.hasOwnProperty.call(this._xref, key)
@@ -737,13 +741,19 @@
 
       // now that we have processed all the areas, set css for wrapper, scale map if needed
 
-      css = {
-        display: 'block',
-        position: 'relative',
-        padding: 0,
-        width: scale.width,
-        height: scale.height
-      };
+      css = $.extend(
+        {
+          display: 'block',
+          position: 'relative',
+          padding: 0
+        },
+        opts.enableAutoResizeSupport === true
+          ? {}
+          : {
+              width: scale.width,
+              height: scale.height
+            }
+      );
 
       if (opts.wrapCss) {
         $.extend(css, opts.wrapCss);
@@ -802,6 +812,10 @@
       me.complete = true;
       me.processCommandQueue();
 
+      if (opts.enableAutoResizeSupport === true) {
+        me.configureAutoResize();
+      }
+
       if (opts.onConfigured && typeof opts.onConfigured === 'function') {
         opts.onConfigured.call(img, true);
       }
@@ -960,6 +974,8 @@
     clearEvents: function () {
       $(this.map).find('area').off('.mapster');
       $(this.images).off('.mapster');
+      $(window).off(this.instanceEventNamespace());
+      $(window.document).off(this.instanceEventNamespace());
     },
     _clearCanvases: function (preserveState) {
       // remove the canvas elements created
@@ -985,6 +1001,10 @@
 
       me.images.clear();
 
+      if (me.autoResizeTimer) {
+        clearTimeout(me.autoResizeTimer);
+      }
+      me.autoResizeTimer = null;
       this.image = null;
       u.ifFunction(this.clearToolTip, this);
     },