Updated to v3.5.2

- Fixed #2122 - Focusable HTML5 video - Fixed #2128 - Missing smallBtn on mobile - Fixed #2096 - autoStart fullscreen AND slideshow - Fixed #2097 - German translation - Fixed #2132 - Youtube fullscreen - Captions now have linear-gradient background (instead of background image for pseudo element) and can have max-height and vertical scrollbar - Improved design for phones having the notch (https://webkit.org/blog/7929/designing-websites-for-iphone-x/)
fancyapps · Dec 10, 2018 · 5f7dd47 · 5f7dd47 · Eldenroot · Dec 10, 2018
1 parent 920b3e4
commit 5f7dd47
Show file tree

Hide file tree

Showing 10 changed files with 112 additions and 102 deletions.
diff --git a/dist/jquery.fancybox.css b/dist/jquery.fancybox.css
@@ -400,38 +400,32 @@ body.compensate-for-scrollbar {
 
 .fancybox-navigation .fancybox-button--arrow_left {
   left: 0;
+  left: env(safe-area-inset-left);
   padding: 31px 26px 31px 6px; }
 
 .fancybox-navigation .fancybox-button--arrow_right {
   padding: 31px 6px 31px 26px;
-  right: 0; }
+  right: 0;
+  right: env(safe-area-inset-right); }
 
 /* Caption */
 .fancybox-caption {
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.15) 65%, rgba(0, 0, 0, 0.075) 75.5%, rgba(0, 0, 0, 0.037) 82.85%, rgba(0, 0, 0, 0.019) 88%, transparent 100%);
   bottom: 0;
   color: #eee;
   font-size: 14px;
   font-weight: 400;
   left: 0;
   line-height: 1.5;
-  padding: 25px 44px 25px 44px;
+  overflow: auto;
+  padding: 50px 44px 25px 44px;
   right: 0;
   text-align: center;
   z-index: 99996; }
 
-.fancybox-caption::before {
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAD6CAQAAADKSeXYAAAAYklEQVQoz42RwQ3AMAgDjfcfup8WoRykfBAK5mQHKSz5rbXJPis1hjiV3CIqgG0hLZPkVkA4p4x5oR1bVeDrdCLrW2Q0D5bcwY3TGMHbdw3mPRuOtaspYP1w//G1OIcW148H0DMCqI/3mMMAAAAASUVORK5CYII=);
-  background-repeat: repeat-x;
-  background-size: contain;
-  bottom: 0;
-  content: '';
-  display: block;
-  left: 0;
-  pointer-events: none;
-  position: absolute;
-  right: 0;
-  top: -44px;
-  z-index: -1; }
+.fancybox-caption--separate {
+  margin-top: -25px;
+  max-height: 50vh; }
 
 .fancybox-caption a,
 .fancybox-caption a:link,
@@ -567,7 +561,8 @@ body.compensate-for-scrollbar {
 /* Styling for Small-Screen Devices */
 @media all and (max-height: 576px) {
   .fancybox-caption {
-    padding: 12px; }
+    padding-left: 12px;
+    padding-right: 12px; }
   .fancybox-slide {
     padding-left: 6px;
     padding-right: 6px; }
@@ -585,6 +580,11 @@ body.compensate-for-scrollbar {
     top: 0;
     width: 36px; } }
 
+/* Using calc to trick sass */
+@supports (padding: 0px) {
+  .fancybox-caption {
+    padding: 50px calc(max(12px, env(safe-area-inset-right))) calc(max(12px, env(safe-area-inset-bottom))) calc(max(25px, env(safe-area-inset-left))); } }
+
 /* Share */
 .fancybox-share {
   background: #f4f4f4;

diff --git a/dist/jquery.fancybox.js b/dist/jquery.fancybox.js
@@ -1,5 +1,5 @@
 // ==================================================
-// fancyBox v3.5.2
+// fancyBox v3.5.3
 //
 // Licensed GPLv3 for open source use
 // or fancyBox Commercial License for commercial use
@@ -111,7 +111,7 @@
     iframe: {
       // Iframe template
       tpl:
-        '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" allowfullscreen allow="autoplay; fullscreen" src=""></iframe>',
+        '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" allowfullscreen="allowfullscreen" allow="autoplay; fullscreen" src=""></iframe>',
 
       // Preload iframe before displaying it
       // This allows to calculate iframe content width and height
@@ -394,17 +394,17 @@
         ZOOM: "Zoom"
       },
       de: {
-        CLOSE: "Schliessen",
+        CLOSE: "Schlie&szlig;en",
         NEXT: "Weiter",
-        PREV: "Zurück",
-        ERROR: "Die angeforderten Daten konnten nicht geladen werden. <br/> Bitte versuchen Sie es später nochmal.",
+        PREV: "Zur&uuml;ck",
+        ERROR: "Die angeforderten Daten konnten nicht geladen werden. <br/> Bitte versuchen Sie es sp&auml;ter nochmal.",
         PLAY_START: "Diaschau starten",
         PLAY_STOP: "Diaschau beenden",
         FULL_SCREEN: "Vollbild",
         THUMBS: "Vorschaubilder",
         DOWNLOAD: "Herunterladen",
         SHARE: "Teilen",
-        ZOOM: "Maßstab"
+        ZOOM: "Vergr&ouml;&szlig;ern"
       }
     }
   };
@@ -645,13 +645,7 @@
       var arr = obj.opts.i18n[obj.opts.lang] || obj.opts.i18n.en;
 
       return str.replace(/\{\{(\w+)\}\}/g, function(match, n) {
-        var value = arr[n];
-
-        if (value === undefined) {
-          return match;
-        }
-
-        return value;
+        return arr[n] === undefined ? match : arr[n];
       });
     },
 
@@ -922,11 +916,14 @@
             self.$refs.stage.hide();
           }
 
-          setTimeout(function() {
-            self.$refs.stage.show();
+          setTimeout(
+            function() {
+              self.$refs.stage.show();
 
-            self.update(e);
-          }, $.fancybox.isMobile ? 600 : 250);
+              self.update(e);
+            },
+            $.fancybox.isMobile ? 600 : 250
+          );
         }
       });
 
@@ -949,7 +946,7 @@
         // Enable keyboard navigation
         // ==========================
 
-        if (!current.opts.keyboard || e.ctrlKey || e.altKey || e.shiftKey || $(e.target).is("input") || $(e.target).is("textarea")) {
+        if (!current.opts.keyboard || e.ctrlKey || e.altKey || e.shiftKey || $(e.target).is("input,textarea,video,audio")) {
           return;
         }
 
@@ -1325,7 +1322,7 @@
           scaleX: scaleX,
           scaleY: scaleY
         },
-        duration || 330,
+        duration || 366,
         function() {
           self.isAnimating = false;
         }
@@ -1366,7 +1363,7 @@
           scaleX: end.width / $content.width(),
           scaleY: end.height / $content.height()
         },
-        duration || 330,
+        duration || 366,
         function() {
           self.isAnimating = false;
         }
@@ -1986,11 +1983,6 @@
         $slide = slide.$slide,
         $iframe;
 
-      // Fix responsive iframes on iOS (along with `position:absolute;` for iframe element)
-      if ($.fancybox.isMobile) {
-        opts.css.overflow = "scroll";
-      }
-
       slide.$content = $('<div class="fancybox-content' + (opts.preload ? " fancybox-is-hidden" : "") + '"></div>')
         .css(opts.css)
         .appendTo($slide);
@@ -2034,7 +2026,7 @@
             $body = $contents.find("body");
           } catch (ignore) {}
 
-          // Calculate contnet dimensions if it is accessible
+          // Calculate content dimensions, if it is accessible
           if ($body && $body.length && $body.children().length) {
             // Avoid scrolling to top (if multiple instances)
             $slide.css("overflow", "visible");
@@ -2312,9 +2304,12 @@
         current = slide || self.current,
         caption = current.opts.caption,
         $caption = self.$refs.caption,
-        captionH = false;
+        captionH = false,
+        preventOverlap = current.opts.preventCaptionOverlap;
+
+      $caption.toggleClass("fancybox-caption--separate", preventOverlap);
 
-      if (current.opts.preventCaptionOverlap && caption && caption.length) {
+      if (preventOverlap && caption && caption.length) {
         if (current.pos !== self.currPos) {
           $caption = $caption
             .clone()
@@ -2649,6 +2644,8 @@
           "iframe",
           "object",
           "embed",
+          "video",
+          "audio",
           "[contenteditable]",
           '[tabindex]:not([tabindex^="-"])'
         ].join(","),
@@ -3041,7 +3038,7 @@
   });
 
   $.fancybox = {
-    version: "3.5.2",
+    version: "3.5.3",
     defaults: defaults,
 
     // Get current instance and execute a command.
@@ -3445,8 +3442,8 @@
       },
       paramPlace: 8,
       type: "iframe",
-      url: "//www.youtube-nocookie.com/embed/$4",
-      thumb: "//img.youtube.com/vi/$4/hqdefault.jpg"
+      url: "https://www.youtube-nocookie.com/embed/$4",
+      thumb: "https://img.youtube.com/vi/$4/hqdefault.jpg"
     },
 
     vimeo: {
@@ -4450,7 +4447,7 @@
     newPos.width = self.contentStartPos.width;
     newPos.height = self.contentStartPos.height;
 
-    $.fancybox.animate(self.$content, newPos, 330);
+    $.fancybox.animate(self.$content, newPos, 366);
   };
 
   Guestures.prototype.endZooming = function() {
@@ -4944,11 +4941,13 @@
       if (instance) {
         // If image is zooming, then force to stop and reposition properly
         if (instance.current && instance.current.type === "image" && instance.isAnimating) {
-          instance.current.$content.css("transition", "none");
-
           instance.isAnimating = false;
 
           instance.update(true, true, 0);
+
+          if (!instance.isComplete) {
+            instance.complete();
+          }
         }
 
         instance.trigger("onFullscreenChange", isFullscreen);