Release v1.8.0

jamietre · May 1, 2024 · fbcc325 · fbcc325
1 parent 7b61fc7
commit fbcc325
Show file tree

Hide file tree

Showing 13 changed files with 466 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,12 @@
 - Make callback data structures consistent
 - Improve docs
 
+## Version 1.7.1 - 2024.04.29
+
+- [Issue 420](https://github.com/jamietre/ImageMapster/issues/420) 🐞 Forgotten console.log in v1.7.0
+- [Issue 421](https://github.com/jamietre/ImageMapster/issues/421) 🐞 resizing map when map not visible causes `Failed to execute 'drawImage' on 'CanvasRenderingContext2D'` exception
+- [Issue 422](https://github.com/jamietre/ImageMapster/issues/422) 🐞 exception `TypeError: Cannot read properties of null (reading '5')` encountered after unbind
+
 ## Version 1.7.0 - 2024.04.29
 
 - [Issue 138](https://github.com/jamietre/ImageMapster/issues/138) 📘 Docs incorrectly state that highlighting will be disabled when staticState option is specified

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

diff --git a/dist/jquery.imagemapster.js b/dist/jquery.imagemapster.js
@@ -1,5 +1,5 @@
 /*!
-* imagemapster - v1.7.0 - 2024-04-29
+* imagemapster - v1.8.0 - 2024-05-01
 * https://jamietre.github.io/ImageMapster
 * Copyright (c) 2011 - 2024 James Treworgy
 * License: MIT
@@ -98,6 +98,122 @@
   }
 })(jQuery);
 
+/*
+  When autoresize is enabled, we obtain the width of the wrapper element and resize to that, however when we're hidden because of
+  one of our ancenstors, jQuery width function returns 0. Ideally, we could use ResizeObserver/MutationObserver to detect
+  when we hide/show and resize on that event instead of resizing while we are not visible but until official support of older 
+  browsers is dropped, we need to go this route.  The plugin below will provide the actual width even when we're not visible.
+
+  Source: https://raw.githubusercontent.com/dreamerslab/jquery.actual/master/jquery.actual.js
+*/
+/*! Copyright 2012, Ben Lin (http://dreamerslab.com/)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Version: 1.0.19
+ *
+ * Requires: jQuery >= 1.2.3
+ */
+/* eslint-disable one-var */
+(function ($) {
+  'use strict';
+
+  $.fn.addBack = $.fn.addBack || $.fn.andSelf;
+
+  $.fn.extend({
+    actual: function (method, options) {
+      // check if the jQuery method exist
+      if (!this[method]) {
+        throw (
+          '$.actual => The jQuery method "' +
+          method +
+          '" you called does not exist'
+        );
+      }
+
+      var defaults = {
+        absolute: false,
+        clone: false,
+        includeMargin: false,
+        display: 'block'
+      };
+
+      var configs = $.extend(defaults, options);
+
+      var $target = this.eq(0);
+      var fix, restore;
+
+      if (configs.clone === true) {
+        fix = function () {
+          var style = 'position: absolute !important; top: -1000 !important; ';
+
+          // this is useful with css3pie
+          $target = $target.clone().attr('style', style).appendTo('body');
+        };
+
+        restore = function () {
+          // remove DOM element after getting the width
+          $target.remove();
+        };
+      } else {
+        var tmp = [];
+        var style = '';
+        var $hidden;
+
+        fix = function () {
+          // get all hidden parents
+          $hidden = $target.parents().addBack().filter(':hidden');
+          style +=
+            'visibility: hidden !important; display: ' +
+            configs.display +
+            ' !important; ';
+
+          if (configs.absolute === true)
+            style += 'position: absolute !important; ';
+
+          // save the origin style props
+          // set the hidden el css to be got the actual value later
+          $hidden.each(function () {
+            // Save original style. If no style was set, attr() returns undefined
+            var $this = $(this);
+            var thisStyle = $this.attr('style');
+
+            tmp.push(thisStyle);
+            // Retain as much of the original style as possible, if there is one
+            $this.attr('style', thisStyle ? thisStyle + ';' + style : style);
+          });
+        };
+
+        restore = function () {
+          // restore origin style values
+          $hidden.each(function (i) {
+            var $this = $(this);
+            var _tmp = tmp[i];
+
+            if (_tmp === undefined) {
+              $this.removeAttr('style');
+            } else {
+              $this.attr('style', _tmp);
+            }
+          });
+        };
+      }
+
+      fix();
+      // get the actual value with user specific methed
+      // it can be 'width', 'height', 'outerWidth', 'innerWidth'... etc
+      // configs.includeMargin only works for 'outerWidth' and 'outerHeight'
+      var actual = /(outer)/.test(method)
+        ? $target[method](configs.includeMargin)
+        : $target[method]();
+
+      restore();
+      // IMPORTANT, this plugin only return the value of the first element
+      return actual;
+    }
+  });
+})(jQuery);
+/* eslint-enable one-var */
+
 /*
   core.js
   ImageMapster core
@@ -106,7 +222,7 @@
 (function ($) {
   'use strict';
 
-  var mapster_version = '1.7.0';
+  var mapster_version = '1.8.0';
 
   // all public functions in $.mapster.impl are methods
   $.fn.mapster = function (method) {
@@ -1206,7 +1322,6 @@
     };
     return me;
   })();
-  console.log('foo3456');
   $.mapster.impl.init();
 })(jQuery);
 
@@ -3088,6 +3203,7 @@
     },
     clearMapData: function (preserveState) {
       var me = this;
+      me.ensureNoHighlight();
       this._clearCanvases(preserveState);
 
       // release refs to DOM elements
@@ -3879,7 +3995,19 @@
 
   m.MapData.prototype.autoResize = function (duration, callback) {
     var me = this;
-    me.resize($(me.wrapper).width(), null, duration, callback);
+
+    /*
+      When autoresize is enabled, we obtain the width of the wrapper element and resize to that, however when we're hidden because of
+      one of our ancenstors, jQuery width function returns 0. Ideally, we could use ResizeObserver/MutationObserver to detect
+      when we hide/show and resize on that event instead of resizing while we are not visible but until official support of older 
+      browsers is dropped, we need to go this route.
+    */
+    me.resize(
+      $(me.wrapper).width() || $(me.wrapper).actual('width'),
+      null,
+      duration,
+      callback
+    );
   };
 
   m.MapData.prototype.configureAutoResize = function () {
@@ -4352,7 +4480,9 @@
     options.fadeDuration =
       options.fadeDuration ||
       (md.options.toolTipFade
-        ? u.isNumeric(areaOpts.fadeDuration) ? areaOpts.fadeDuration : md.options.fadeDuration
+        ? u.isNumeric(areaOpts.fadeDuration)
+          ? areaOpts.fadeDuration
+          : md.options.fadeDuration
         : 0);
 
     target = ad.area

diff --git a/dist/jquery.imagemapster.min.js b/dist/jquery.imagemapster.min.js
diff --git a/dist/jquery.imagemapster.min.js.map b/dist/jquery.imagemapster.min.js.map
diff --git a/dist/jquery.imagemapster.min.mjs b/dist/jquery.imagemapster.min.mjs
diff --git a/dist/jquery.imagemapster.min.mjs.map b/dist/jquery.imagemapster.min.mjs.map
diff --git a/dist/jquery.imagemapster.mjs b/dist/jquery.imagemapster.mjs
@@ -1,5 +1,5 @@
 /*!
-* imagemapster - v1.7.0 - 2024-04-29
+* imagemapster - v1.8.0 - 2024-05-01
 * https://jamietre.github.io/ImageMapster
 * Copyright (c) 2011 - 2024 James Treworgy
 * License: MIT
@@ -74,6 +74,122 @@ function imagemapsterFactory(jQuery) {
   }
 })(jQuery);
 
+/*
+  When autoresize is enabled, we obtain the width of the wrapper element and resize to that, however when we're hidden because of
+  one of our ancenstors, jQuery width function returns 0. Ideally, we could use ResizeObserver/MutationObserver to detect
+  when we hide/show and resize on that event instead of resizing while we are not visible but until official support of older 
+  browsers is dropped, we need to go this route.  The plugin below will provide the actual width even when we're not visible.
+
+  Source: https://raw.githubusercontent.com/dreamerslab/jquery.actual/master/jquery.actual.js
+*/
+/*! Copyright 2012, Ben Lin (http://dreamerslab.com/)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Version: 1.0.19
+ *
+ * Requires: jQuery >= 1.2.3
+ */
+/* eslint-disable one-var */
+(function ($) {
+  'use strict';
+
+  $.fn.addBack = $.fn.addBack || $.fn.andSelf;
+
+  $.fn.extend({
+    actual: function (method, options) {
+      // check if the jQuery method exist
+      if (!this[method]) {
+        throw (
+          '$.actual => The jQuery method "' +
+          method +
+          '" you called does not exist'
+        );
+      }
+
+      var defaults = {
+        absolute: false,
+        clone: false,
+        includeMargin: false,
+        display: 'block'
+      };
+
+      var configs = $.extend(defaults, options);
+
+      var $target = this.eq(0);
+      var fix, restore;
+
+      if (configs.clone === true) {
+        fix = function () {
+          var style = 'position: absolute !important; top: -1000 !important; ';
+
+          // this is useful with css3pie
+          $target = $target.clone().attr('style', style).appendTo('body');
+        };
+
+        restore = function () {
+          // remove DOM element after getting the width
+          $target.remove();
+        };
+      } else {
+        var tmp = [];
+        var style = '';
+        var $hidden;
+
+        fix = function () {
+          // get all hidden parents
+          $hidden = $target.parents().addBack().filter(':hidden');
+          style +=
+            'visibility: hidden !important; display: ' +
+            configs.display +
+            ' !important; ';
+
+          if (configs.absolute === true)
+            style += 'position: absolute !important; ';
+
+          // save the origin style props
+          // set the hidden el css to be got the actual value later
+          $hidden.each(function () {
+            // Save original style. If no style was set, attr() returns undefined
+            var $this = $(this);
+            var thisStyle = $this.attr('style');
+
+            tmp.push(thisStyle);
+            // Retain as much of the original style as possible, if there is one
+            $this.attr('style', thisStyle ? thisStyle + ';' + style : style);
+          });
+        };
+
+        restore = function () {
+          // restore origin style values
+          $hidden.each(function (i) {
+            var $this = $(this);
+            var _tmp = tmp[i];
+
+            if (_tmp === undefined) {
+              $this.removeAttr('style');
+            } else {
+              $this.attr('style', _tmp);
+            }
+          });
+        };
+      }
+
+      fix();
+      // get the actual value with user specific methed
+      // it can be 'width', 'height', 'outerWidth', 'innerWidth'... etc
+      // configs.includeMargin only works for 'outerWidth' and 'outerHeight'
+      var actual = /(outer)/.test(method)
+        ? $target[method](configs.includeMargin)
+        : $target[method]();
+
+      restore();
+      // IMPORTANT, this plugin only return the value of the first element
+      return actual;
+    }
+  });
+})(jQuery);
+/* eslint-enable one-var */
+
 /*
   core.js
   ImageMapster core
@@ -82,7 +198,7 @@ function imagemapsterFactory(jQuery) {
 (function ($) {
   'use strict';
 
-  var mapster_version = '1.7.0';
+  var mapster_version = '1.8.0';
 
   // all public functions in $.mapster.impl are methods
   $.fn.mapster = function (method) {
@@ -1182,7 +1298,6 @@ function imagemapsterFactory(jQuery) {
     };
     return me;
   })();
-  console.log('foo3456');
   $.mapster.impl.init();
 })(jQuery);
 
@@ -3064,6 +3179,7 @@ function imagemapsterFactory(jQuery) {
     },
     clearMapData: function (preserveState) {
       var me = this;
+      me.ensureNoHighlight();
       this._clearCanvases(preserveState);
 
       // release refs to DOM elements
@@ -3855,7 +3971,19 @@ function imagemapsterFactory(jQuery) {
 
   m.MapData.prototype.autoResize = function (duration, callback) {
     var me = this;
-    me.resize($(me.wrapper).width(), null, duration, callback);
+
+    /*
+      When autoresize is enabled, we obtain the width of the wrapper element and resize to that, however when we're hidden because of
+      one of our ancenstors, jQuery width function returns 0. Ideally, we could use ResizeObserver/MutationObserver to detect
+      when we hide/show and resize on that event instead of resizing while we are not visible but until official support of older 
+      browsers is dropped, we need to go this route.
+    */
+    me.resize(
+      $(me.wrapper).width() || $(me.wrapper).actual('width'),
+      null,
+      duration,
+      callback
+    );
   };
 
   m.MapData.prototype.configureAutoResize = function () {
@@ -4328,7 +4456,9 @@ function imagemapsterFactory(jQuery) {
     options.fadeDuration =
       options.fadeDuration ||
       (md.options.toolTipFade
-        ? u.isNumeric(areaOpts.fadeDuration) ? areaOpts.fadeDuration : md.options.fadeDuration
+        ? u.isNumeric(areaOpts.fadeDuration)
+          ? areaOpts.fadeDuration
+          : md.options.fadeDuration
         : 0);
 
     target = ad.area