Resolves #357 - resize makes altimage visible

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

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');
   }
 }
 ```

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'
           },
 

src/scale.js

@@ -158,7 +158,7 @@
     if (duration) {
       promises = [];
       me.currentAction = 'resizing';
-      els.each(function (_, e) {
+      els.filter(':visible').each(function (_, e) {
         p = u.defer();
         promises.push(p);
 

tests/redist/zepto.1.2.0.js

@@ -1,4 +1,4 @@
-/* Zepto v1.2.0-30-gb5ed8d6 - zepto event ie fx touch - zeptojs.com/license */
+/* Zepto v1.2.0-30-gb5ed8d6 - zepto event ie fx touch selector - zeptojs.com/license */
 (function(global, factory) {
   if (typeof define === 'function' && define.amd)
     define(function() { return factory(global) })
@@ -1570,5 +1570,87 @@ window.$ === undefined && (window.$ = Zepto)
 
   $(document).ready(setup)
 })(Zepto)
+
+;(function($){
+  var zepto = $.zepto, oldQsa = zepto.qsa, oldMatches = zepto.matches
+
+  function visible(elem){
+    elem = $(elem)
+    return !!(elem.width() || elem.height()) && elem.css("display") !== "none"
+  }
+
+  // Implements a subset from:
+  // http://api.jquery.com/category/selectors/jquery-selector-extensions/
+  //
+  // Each filter function receives the current index, all nodes in the
+  // considered set, and a value if there were parentheses. The value
+  // of `this` is the node currently being considered. The function returns the
+  // resulting node(s), null, or undefined.
+  //
+  // Complex selectors are not supported:
+  //   li:has(label:contains("foo")) + li:has(label:contains("bar"))
+  //   ul.inner:first > li
+  var filters = $.expr[':'] = {
+    visible:  function(){ if (visible(this)) return this },
+    hidden:   function(){ if (!visible(this)) return this },
+    selected: function(){ if (this.selected) return this },
+    checked:  function(){ if (this.checked) return this },
+    parent:   function(){ return this.parentNode },
+    first:    function(idx){ if (idx === 0) return this },
+    last:     function(idx, nodes){ if (idx === nodes.length - 1) return this },
+    eq:       function(idx, _, value){ if (idx === value) return this },
+    contains: function(idx, _, text){ if ($(this).text().indexOf(text) > -1) return this },
+    has:      function(idx, _, sel){ if (zepto.qsa(this, sel).length) return this }
+  }
+
+  var filterRe = new RegExp('(.*):(\\w+)(?:\\(([^)]+)\\))?$\\s*'),
+      childRe  = /^\s*>/,
+      classTag = 'Zepto' + (+new Date())
+
+  function process(sel, fn) {
+    // quote the hash in `a[href^=#]` expression
+    sel = sel.replace(/=#\]/g, '="#"]')
+    var filter, arg, match = filterRe.exec(sel)
+    if (match && match[2] in filters) {
+      filter = filters[match[2]], arg = match[3]
+      sel = match[1]
+      if (arg) {
+        var num = Number(arg)
+        if (isNaN(num)) arg = arg.replace(/^["']|["']$/g, '')
+        else arg = num
+      }
+    }
+    return fn(sel, filter, arg)
+  }
+
+  zepto.qsa = function(node, selector) {
+    return process(selector, function(sel, filter, arg){
+      try {
+        var taggedParent
+        if (!sel && filter) sel = '*'
+        else if (childRe.test(sel))
+          // support "> *" child queries by tagging the parent node with a
+          // unique class and prepending that classname onto the selector
+          taggedParent = $(node).addClass(classTag), sel = '.'+classTag+' '+sel
+
+        var nodes = oldQsa(node, sel)
+      } catch(e) {
+        console.error('error performing selector: %o', selector)
+        throw e
+      } finally {
+        if (taggedParent) taggedParent.removeClass(classTag)
+      }
+      return !filter ? nodes :
+        zepto.uniq($.map(nodes, function(n, i){ return filter.call(n, i, nodes, arg) }))
+    })
+  }
+
+  zepto.matches = function(node, selector){
+    return process(selector, function(sel, filter, arg){
+      return (!sel || oldMatches(node, sel)) &&
+        (!filter || filter.call(node, null, arg) === node)
+    })
+  }
+})(Zepto)
   return Zepto
 }))