do not roll images when window is hidden

(otherwise the browser would keep in cache all the animations that were
to be played and do them all when redisplaying the window)

diff --git a/panikweb_studioneau/templates/includes/footer.html b/panikweb_studioneau/templates/includes/footer.html
index 7fae3804a33613458756c27e20dc42b58e23c668..c0add548fe86b503af2b32e43d52d757ac2cfa96 100644 (file)
--- a/panikweb_studioneau/templates/includes/footer.html
+++ b/panikweb_studioneau/templates/includes/footer.html
@@ -34,34 +34,38 @@ $(function() {
    }
    $('#next').on('click', function(ev, autoroll) {
      if (roll_timeout && !autoroll) { clearTimeout(roll_timeout); roll_timeout = null; }
-     var current_position = $(window).scrollTop();
-     const $first = $('.scrolling-images .item:not(.transition)').first();
-     const $last = $('.scrolling-images .item:not(.transition)').last();
-     if ($first.length == 0) return;
-     const $cloned = $first.clone();
-     $cloned.addClass('transition').insertBefore($('.scrolling-images .item').first());
-     $cloned.on('transitionend', function() { $cloned.remove(); });
-     $first.detach().insertAfter($last);
-     $cloned[0].offsetHeight; // redraw
-     $cloned.addClass('faded');
-     if (autoroll) {
-       /* this is required to avoid some strange autoscrolling when the next
-          button is not in the viewport */
-       $(window).scrollTop(current_position);
+     if (!document.hidden) {
+       var current_position = $(window).scrollTop();
+       const $first = $('.scrolling-images .item:not(.transition)').first();
+       const $last = $('.scrolling-images .item:not(.transition)').last();
+       if ($first.length == 0) return;
+       const $cloned = $first.clone();
+       $cloned.addClass('transition').insertBefore($('.scrolling-images .item').first());
+       $cloned.on('transitionend', function() { $cloned.remove(); });
+       $first.detach().insertAfter($last);
+       $cloned[0].offsetHeight; // redraw
+       $cloned.addClass('faded');
+       if (autoroll) {
+         /* this is required to avoid some strange autoscrolling when the next
+            button is not in the viewport */
+         $(window).scrollTop(current_position);
+       }
      }
      if (autoroll) { roll_timeout = setTimeout(function() {$('#next').trigger('click', ['autoroll']); }, 10000); }
    });
    $('#prev').on('click', function(ev, autoroll) {
      if (roll_timeout && !autoroll) { clearTimeout(roll_timeout); roll_timeout = null; }
-     const $first = $('.scrolling-images .item:not(.transition)').first();
-     const $last = $('.scrolling-images .item:not(.transition)').last();
-     if ($first.length == 0) return;
-     const $cloned = $first.clone();
-     $cloned.addClass('transition').insertBefore($('.scrolling-images .item').first());
-     $cloned.on('transitionend', function() { $cloned.remove(); });
-     $last.detach().insertBefore($first);
-     $cloned[0].offsetHeight; // redraw
-     $cloned.addClass('faded');
+     if (!document.hidden) {
+       const $first = $('.scrolling-images .item:not(.transition)').first();
+       const $last = $('.scrolling-images .item:not(.transition)').last();
+       if ($first.length == 0) return;
+       const $cloned = $first.clone();
+       $cloned.addClass('transition').insertBefore($('.scrolling-images .item').first());
+       $cloned.on('transitionend', function() { $cloned.remove(); });
+       $last.detach().insertBefore($first);
+       $cloned[0].offsetHeight; // redraw
+       $cloned.addClass('faded');
+     }
      if (autoroll) { roll_timeout = setTimeout(function() {$('#next').trigger('click', ['autoroll']); }, 10000); }
    });
    $('.scrolling-images').addClass('initialized');