Merge pull request #363 from jamietre/issue-362

Resolves #362 - apply css to hidden els on resize when duration specified
jamietre · Jan 30, 2021 · 67fa343 · 67fa343
2 parents 507f9de + 93fe264
commit 67fa343
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 20 deletions.
diff --git a/src/scale.js b/src/scale.js
@@ -171,6 +171,7 @@
           easing: 'linear'
         });
       });
+      els.filter(':hidden').css(newsize);
 
       p = u.defer();
       promises.push(p);

diff --git a/tests/imagemapster-test-runner.html b/tests/imagemapster-test-runner.html
@@ -149,16 +149,9 @@
           enableTestLink();
         });
 
-        // Zepto returns height/width of 0/0 when image is not visible
-        // so force image to be displayed
-        if (window.Zepto) {
-          $('#testElements').toggle(true);
-          $('#toggleTestImage').hide();
-        } else {
-          $('#toggleTestImage').on('click', function () {
-            $('#testElements').toggle('fast');
-          });
-        }
+        $('#toggleTestImage').on('click', function () {
+          $('#testElements').toggle('fast');
+        });
 
         enableTestLink();
 

diff --git a/tests/images/usa_map_720_alt_1.jpg b/tests/images/usa_map_720_alt_1.jpg
diff --git a/tests/images/usa_map_720_alt_2.jpg b/tests/images/usa_map_720_alt_2.jpg
diff --git a/tests/images/usa_map_720_alt_3.jpg b/tests/images/usa_map_720_alt_3.jpg
diff --git a/tests/images/usa_map_720_alt_4.jpg b/tests/images/usa_map_720_alt_4.jpg
diff --git a/tests/images/usa_map_720_alt_5.jpg b/tests/images/usa_map_720_alt_5.jpg
diff --git a/tests/resize.tests.js b/tests/resize.tests.js
@@ -9,34 +9,98 @@ this.tests.push(
       'use strict';
 
       var img = $('img'),
-        map = img.mapster(),
-        x = img.width(),
-        y = img.height();
+        altImages = {
+          img1: 'images/usa_map_720_alt_1.jpg',
+          img2: 'images/usa_map_720_alt_2.jpg',
+          img3: 'images/usa_map_720_alt_3.jpg',
+          img4: 'images/usa_map_720_alt_4.jpg',
+          img5: 'images/usa_map_720_alt_5.jpg'
+        },
+        map = img.mapster({
+          altImages: altImages
+        }),
+        x = parseInt(img.css('width').replace('px', ''), 10),
+        y = parseInt(img.css('height').replace('px', ''), 10),
+        newWidth = x + 200;
 
       this.when(function (cb) {
-        map.mapster('resize', 200, 0, cb);
+        map.mapster('resize', newWidth, 0, cb);
       }).then(function () {
-        var expectedHeight = Math.round((200 / x) * y);
-        a.equals(200, img.width(), 'image width is correct after resize');
+        var expectedWidth = newWidth + 'px',
+          expectedHeight = Math.round((newWidth / x) * y) + 'px';
         a.equals(
+          img.css('width'),
+          expectedWidth,
+          'image width is correct after resize'
+        );
+        a.equals(
+          img.css('height'),
           expectedHeight,
-          img.height(),
           'image height is correct after resize'
         );
 
         var wrapper = img.closest('div');
 
         a.equals(
-          'mapster_wrap',
           wrapper.attr('id').substring(0, 12),
+          'mapster_wrap',
           'sanity check - we have the wrapper element'
         );
-        a.equals(200, wrapper.width(), 'wrapper width matches image width');
         a.equals(
+          wrapper.css('width'),
+          expectedWidth,
+          'wrapper width matches image width'
+        );
+        a.equals(
+          wrapper.css('height'),
           expectedHeight,
-          wrapper.height(),
           'wrapper height matches image height'
         );
+        Object.values(altImages).map(function (ai) {
+          var selector = 'img[src="' + ai + '"]',
+            altImg = $(wrapper).children(selector);
+          a.equals(
+            altImg.css('width'),
+            expectedWidth,
+            'altimage ' + ai + ' width matches image width'
+          );
+          a.equals(
+            altImg.css('height'),
+            expectedHeight,
+            'altimage ' + ai + ' height matches image height'
+          );
+          a.equals(
+            altImg.css('display'),
+            'none',
+            'altimage ' + ai + ' has display of none'
+          );
+        });
+      });
+    })
+);
+
+this.tests.push(
+  iqtest
+    .create('autoresize', 'autoresize feature')
+    .add('wrapper does not have width/height', function (a) {
+      'use strict';
+
+      var img = $('img');
+      this.when(function (cb) {
+        img.mapster({ enableAutoResizeSupport: true, onConfigured: cb });
+      }).then(function () {
+        var wrapper = img.closest('div');
+        a.equals(
+          wrapper.attr('id').substring(0, 12),
+          'mapster_wrap',
+          'sanity check - we have the wrapper element'
+        );
+        a.equals(wrapper[0].style.width, '', 'wrapper width is not specified');
+        a.equals(
+          wrapper[0].style.height,
+          '',
+          'wrapper height is not specified'
+        );
       });
     })
 );