blog.victor-hery.com/theme/static/photoswipe/photoswipe-ui-default.js

/*! PhotoSwipe Default UI - 4.1.3 - 2019-01-08
 * http://photoswipe.com
 * Copyright (c) 2019 Dmitry Semenov; */
/**
 *
 * UI on top of main sliding area (caption, arrows, close button, etc.).
 * Built just using public methods/properties of PhotoSwipe.
 *
 */
(function(root, factory) {
  if (typeof define === "function" && define.amd) {
    define(factory);
  } else if (typeof exports === "object") {
    module.exports = factory();
  } else {
    root.PhotoSwipeUI_Default = factory();
  }
})(this, function() {
  "use strict";

  var PhotoSwipeUI_Default = function(pswp, framework) {
    var ui = this;
    var _overlayUIUpdated = false,
      _controlsVisible = true,
      _fullscrenAPI,
      _controls,
      _captionContainer,
      _fakeCaptionContainer,
      _indexIndicator,
      _shareButton,
      _shareModal,
      _shareModalHidden = true,
      _initalCloseOnScrollValue,
      _isIdle,
      _listen,
      _loadingIndicator,
      _loadingIndicatorHidden,
      _loadingIndicatorTimeout,
      _galleryHasOneSlide,
      _options,
      _defaultUIOptions = {
        barsSize: { top: 44, bottom: "auto" },
        closeElClasses: ["item", "caption", "zoom-wrap", "ui", "top-bar"],
        timeToIdle: 4000,
        timeToIdleOutside: 1000,
        loadingIndicatorDelay: 1000, // 2s

        addCaptionHTMLFn: function(item, captionEl /*, isFake */) {
          if (!item.title) {
            captionEl.children[0].innerHTML = "";
            return false;
          }
          captionEl.children[0].innerHTML = item.title;
          return true;
        },

        closeEl: true,
        captionEl: true,
        fullscreenEl: true,
        zoomEl: true,
        shareEl: true,
        counterEl: true,
        arrowEl: true,
        preloaderEl: true,

        tapToClose: false,
        tapToToggleControls: true,

        clickToCloseNonZoomable: true,

        shareButtons: [
          {
            id: "facebook",
            label: "Share on Facebook",
            url: "https://www.facebook.com/sharer/sharer.php?u={{url}}"
          },
          {
            id: "twitter",
            label: "Tweet",
            url: "https://twitter.com/intent/tweet?text={{text}}&url={{url}}"
          },
          {
            id: "pinterest",
            label: "Pin it",
            url:
              "http://www.pinterest.com/pin/create/button/" +
              "?url={{url}}&media={{image_url}}&description={{text}}"
          },
          {
            id: "download",
            label: "Download image",
            url: "{{raw_image_url}}",
            download: true
          }
        ],
        getImageURLForShare: function(/* shareButtonData */) {
          return pswp.currItem.src || "";
        },
        getPageURLForShare: function(/* shareButtonData */) {
          return window.location.href;
        },
        getTextForShare: function(/* shareButtonData */) {
          return pswp.currItem.title || "";
        },

        indexIndicatorSep: " / ",
        fitControlsWidth: 1200
      },
      _blockControlsTap,
      _blockControlsTapTimeout;

    var _onControlsTap = function(e) {
        if (_blockControlsTap) {
          return true;
        }

        e = e || window.event;

        if (_options.timeToIdle && _options.mouseUsed && !_isIdle) {
          // reset idle timer
          _onIdleMouseMove();
        }

        var target = e.target || e.srcElement,
          uiElement,
          clickedClass = target.getAttribute("class") || "",
          found;

        for (var i = 0; i < _uiElements.length; i++) {
          uiElement = _uiElements[i];
          if (
            uiElement.onTap &&
            clickedClass.indexOf("pswp__" + uiElement.name) > -1
          ) {
            uiElement.onTap();
            found = true;
          }
        }

        if (found) {
          if (e.stopPropagation) {
            e.stopPropagation();
          }
          _blockControlsTap = true;

          // Some versions of Android don't prevent ghost click event
          // when preventDefault() was called on touchstart and/or touchend.
          //
          // This happens on v4.3, 4.2, 4.1,
          // older versions strangely work correctly,
          // but just in case we add delay on all of them)
          var tapDelay = framework.features.isOldAndroid ? 600 : 30;
          _blockControlsTapTimeout = setTimeout(function() {
            _blockControlsTap = false;
          }, tapDelay);
        }
      },
      _fitControlsInViewport = function() {
        return (
          !pswp.likelyTouchDevice ||
          _options.mouseUsed ||
          screen.width > _options.fitControlsWidth
        );
      },
      _togglePswpClass = function(el, cName, add) {
        framework[(add ? "add" : "remove") + "Class"](el, "pswp__" + cName);
      },
      // add class when there is just one item in the gallery
      // (by default it hides left/right arrows and 1ofX counter)
      _countNumItems = function() {
        var hasOneSlide = _options.getNumItemsFn() === 1;

        if (hasOneSlide !== _galleryHasOneSlide) {
          _togglePswpClass(_controls, "ui--one-slide", hasOneSlide);
          _galleryHasOneSlide = hasOneSlide;
        }
      },
      _toggleShareModalClass = function() {
        _togglePswpClass(_shareModal, "share-modal--hidden", _shareModalHidden);
      },
      _toggleShareModal = function() {
        _shareModalHidden = !_shareModalHidden;

        if (!_shareModalHidden) {
          _toggleShareModalClass();
          setTimeout(function() {
            if (!_shareModalHidden) {
              framework.addClass(_shareModal, "pswp__share-modal--fade-in");
            }
          }, 30);
        } else {
          framework.removeClass(_shareModal, "pswp__share-modal--fade-in");
          setTimeout(function() {
            if (_shareModalHidden) {
              _toggleShareModalClass();
            }
          }, 300);
        }

        if (!_shareModalHidden) {
          _updateShareURLs();
        }
        return false;
      },
      _openWindowPopup = function(e) {
        e = e || window.event;
        var target = e.target || e.srcElement;

        pswp.shout("shareLinkClick", e, target);

        if (!target.href) {
          return false;
        }

        if (target.hasAttribute("download")) {
          return true;
        }

        window.open(
          target.href,
          "pswp_share",
          "scrollbars=yes,resizable=yes,toolbar=no," +
            "location=yes,width=550,height=420,top=100,left=" +
            (window.screen ? Math.round(screen.width / 2 - 275) : 100)
        );

        if (!_shareModalHidden) {
          _toggleShareModal();
        }

        return false;
      },
      _updateShareURLs = function() {
        var shareButtonOut = "",
          shareButtonData,
          shareURL,
          image_url,
          page_url,
          share_text;

        for (var i = 0; i < _options.shareButtons.length; i++) {
          shareButtonData = _options.shareButtons[i];

          image_url = _options.getImageURLForShare(shareButtonData);
          page_url = _options.getPageURLForShare(shareButtonData);
          share_text = _options.getTextForShare(shareButtonData);

          shareURL = shareButtonData.url
            .replace("{{url}}", encodeURIComponent(page_url))
            .replace("{{image_url}}", encodeURIComponent(image_url))
            .replace("{{raw_image_url}}", image_url)
            .replace("{{text}}", encodeURIComponent(share_text));

          shareButtonOut +=
            '<a href="' +
            shareURL +
            '" target="_blank" ' +
            'class="pswp__share--' +
            shareButtonData.id +
            '"' +
            (shareButtonData.download ? "download" : "") +
            ">" +
            shareButtonData.label +
            "</a>";

          if (_options.parseShareButtonOut) {
            shareButtonOut = _options.parseShareButtonOut(
              shareButtonData,
              shareButtonOut
            );
          }
        }
        _shareModal.children[0].innerHTML = shareButtonOut;
        _shareModal.children[0].onclick = _openWindowPopup;
      },
      _hasCloseClass = function(target) {
        for (var i = 0; i < _options.closeElClasses.length; i++) {
          if (
            framework.hasClass(target, "pswp__" + _options.closeElClasses[i])
          ) {
            return true;
          }
        }
      },
      _idleInterval,
      _idleTimer,
      _idleIncrement = 0,
      _onIdleMouseMove = function() {
        clearTimeout(_idleTimer);
        _idleIncrement = 0;
        if (_isIdle) {
          ui.setIdle(false);
        }
      },
      _onMouseLeaveWindow = function(e) {
        e = e ? e : window.event;
        var from = e.relatedTarget || e.toElement;
        if (!from || from.nodeName === "HTML") {
          clearTimeout(_idleTimer);
          _idleTimer = setTimeout(function() {
            ui.setIdle(true);
          }, _options.timeToIdleOutside);
        }
      },
      _setupFullscreenAPI = function() {
        if (_options.fullscreenEl && !framework.features.isOldAndroid) {
          if (!_fullscrenAPI) {
            _fullscrenAPI = ui.getFullscreenAPI();
          }
          if (_fullscrenAPI) {
            framework.bind(document, _fullscrenAPI.eventK, ui.updateFullscreen);
            ui.updateFullscreen();
            framework.addClass(pswp.template, "pswp--supports-fs");
          } else {
            framework.removeClass(pswp.template, "pswp--supports-fs");
          }
        }
      },
      _setupLoadingIndicator = function() {
        // Setup loading indicator
        if (_options.preloaderEl) {
          _toggleLoadingIndicator(true);

          _listen("beforeChange", function() {
            clearTimeout(_loadingIndicatorTimeout);

            // display loading indicator with delay
            _loadingIndicatorTimeout = setTimeout(function() {
              if (pswp.currItem && pswp.currItem.loading) {
                if (
                  !pswp.allowProgressiveImg() ||
                  (pswp.currItem.img && !pswp.currItem.img.naturalWidth)
                ) {
                  // show preloader if progressive loading is not enabled,
                  // or image width is not defined yet (because of slow connection)
                  _toggleLoadingIndicator(false);
                  // items-controller.js function allowProgressiveImg
                }
              } else {
                _toggleLoadingIndicator(true); // hide preloader
              }
            }, _options.loadingIndicatorDelay);
          });
          _listen("imageLoadComplete", function(index, item) {
            if (pswp.currItem === item) {
              _toggleLoadingIndicator(true);
            }
          });
        }
      },
      _toggleLoadingIndicator = function(hide) {
        if (_loadingIndicatorHidden !== hide) {
          _togglePswpClass(_loadingIndicator, "preloader--active", !hide);
          _loadingIndicatorHidden = hide;
        }
      },
      _applyNavBarGaps = function(item) {
        var gap = item.vGap;

        if (_fitControlsInViewport()) {
          var bars = _options.barsSize;
          if (_options.captionEl && bars.bottom === "auto") {
            if (!_fakeCaptionContainer) {
              _fakeCaptionContainer = framework.createEl(
                "pswp__caption pswp__caption--fake"
              );
              _fakeCaptionContainer.appendChild(
                framework.createEl("pswp__caption__center")
              );
              _controls.insertBefore(_fakeCaptionContainer, _captionContainer);
              framework.addClass(_controls, "pswp__ui--fit");
            }
            if (_options.addCaptionHTMLFn(item, _fakeCaptionContainer, true)) {
              var captionSize = _fakeCaptionContainer.clientHeight;
              gap.bottom = parseInt(captionSize, 10) || 44;
            } else {
              gap.bottom = bars.top; // if no caption, set size of bottom gap to size of top
            }
          } else {
            gap.bottom = bars.bottom === "auto" ? 0 : bars.bottom;
          }

          // height of top bar is static, no need to calculate it
          gap.top = bars.top;
        } else {
          gap.top = gap.bottom = 0;
        }
      },
      _setupIdle = function() {
        // Hide controls when mouse is used
        if (_options.timeToIdle) {
          _listen("mouseUsed", function() {
            framework.bind(document, "mousemove", _onIdleMouseMove);
            framework.bind(document, "mouseout", _onMouseLeaveWindow);

            _idleInterval = setInterval(function() {
              _idleIncrement++;
              if (_idleIncrement === 2) {
                ui.setIdle(true);
              }
            }, _options.timeToIdle / 2);
          });
        }
      },
      _setupHidingControlsDuringGestures = function() {
        // Hide controls on vertical drag
        _listen("onVerticalDrag", function(now) {
          if (_controlsVisible && now < 0.95) {
            ui.hideControls();
          } else if (!_controlsVisible && now >= 0.95) {
            ui.showControls();
          }
        });

        // Hide controls when pinching to close
        var pinchControlsHidden;
        _listen("onPinchClose", function(now) {
          if (_controlsVisible && now < 0.9) {
            ui.hideControls();
            pinchControlsHidden = true;
          } else if (pinchControlsHidden && !_controlsVisible && now > 0.9) {
            ui.showControls();
          }
        });

        _listen("zoomGestureEnded", function() {
          pinchControlsHidden = false;
          if (pinchControlsHidden && !_controlsVisible) {
            ui.showControls();
          }
        });
      };

    var _uiElements = [
      {
        name: "caption",
        option: "captionEl",
        onInit: function(el) {
          _captionContainer = el;
        }
      },
      {
        name: "share-modal",
        option: "shareEl",
        onInit: function(el) {
          _shareModal = el;
        },
        onTap: function() {
          _toggleShareModal();
        }
      },
      {
        name: "button--share",
        option: "shareEl",
        onInit: function(el) {
          _shareButton = el;
        },
        onTap: function() {
          _toggleShareModal();
        }
      },
      {
        name: "button--zoom",
        option: "zoomEl",
        onTap: pswp.toggleDesktopZoom
      },
      {
        name: "counter",
        option: "counterEl",
        onInit: function(el) {
          _indexIndicator = el;
        }
      },
      {
        name: "button--close",
        option: "closeEl",
        onTap: pswp.close
      },
      {
        name: "button--arrow--left",
        option: "arrowEl",
        onTap: pswp.prev
      },
      {
        name: "button--arrow--right",
        option: "arrowEl",
        onTap: pswp.next
      },
      {
        name: "button--fs",
        option: "fullscreenEl",
        onTap: function() {
          if (_fullscrenAPI.isFullscreen()) {
            _fullscrenAPI.exit();
          } else {
            _fullscrenAPI.enter();
          }
        }
      },
      {
        name: "preloader",
        option: "preloaderEl",
        onInit: function(el) {
          _loadingIndicator = el;
        }
      }
    ];

    var _setupUIElements = function() {
      var item, classAttr, uiElement;

      var loopThroughChildElements = function(sChildren) {
        if (!sChildren) {
          return;
        }

        var l = sChildren.length;
        for (var i = 0; i < l; i++) {
          item = sChildren[i];
          classAttr = item.className;

          for (var a = 0; a < _uiElements.length; a++) {
            uiElement = _uiElements[a];

            if (classAttr.indexOf("pswp__" + uiElement.name) > -1) {
              if (_options[uiElement.option]) {
                // if element is not disabled from options

                framework.removeClass(item, "pswp__element--disabled");
                if (uiElement.onInit) {
                  uiElement.onInit(item);
                }

                //item.style.display = 'block';
              } else {
                framework.addClass(item, "pswp__element--disabled");
                //item.style.display = 'none';
              }
            }
          }
        }
      };
      loopThroughChildElements(_controls.children);

      var topBar = framework.getChildByClass(_controls, "pswp__top-bar");
      if (topBar) {
        loopThroughChildElements(topBar.children);
      }
    };

    ui.init = function() {
      // extend options
      framework.extend(pswp.options, _defaultUIOptions, true);

      // create local link for fast access
      _options = pswp.options;

      // find pswp__ui element
      _controls = framework.getChildByClass(pswp.scrollWrap, "pswp__ui");

      // create local link
      _listen = pswp.listen;

      _setupHidingControlsDuringGestures();

      // update controls when slides change
      _listen("beforeChange", ui.update);

      // toggle zoom on double-tap
      _listen("doubleTap", function(point) {
        var initialZoomLevel = pswp.currItem.initialZoomLevel;
        if (pswp.getZoomLevel() !== initialZoomLevel) {
          pswp.zoomTo(initialZoomLevel, point, 333);
        } else {
          pswp.zoomTo(
            _options.getDoubleTapZoom(false, pswp.currItem),
            point,
            333
          );
        }
      });

      // Allow text selection in caption
      _listen("preventDragEvent", function(e, isDown, preventObj) {
        var t = e.target || e.srcElement;
        if (
          t &&
          t.getAttribute("class") &&
          e.type.indexOf("mouse") > -1 &&
          (t.getAttribute("class").indexOf("__caption") > 0 ||
            /(SMALL|STRONG|EM)/i.test(t.tagName))
        ) {
          preventObj.prevent = false;
        }
      });

      // bind events for UI
      _listen("bindEvents", function() {
        framework.bind(_controls, "pswpTap click", _onControlsTap);
        framework.bind(pswp.scrollWrap, "pswpTap", ui.onGlobalTap);

        if (!pswp.likelyTouchDevice) {
          framework.bind(pswp.scrollWrap, "mouseover", ui.onMouseOver);
        }
      });

      // unbind events for UI
      _listen("unbindEvents", function() {
        if (!_shareModalHidden) {
          _toggleShareModal();
        }

        if (_idleInterval) {
          clearInterval(_idleInterval);
        }
        framework.unbind(document, "mouseout", _onMouseLeaveWindow);
        framework.unbind(document, "mousemove", _onIdleMouseMove);
        framework.unbind(_controls, "pswpTap click", _onControlsTap);
        framework.unbind(pswp.scrollWrap, "pswpTap", ui.onGlobalTap);
        framework.unbind(pswp.scrollWrap, "mouseover", ui.onMouseOver);

        if (_fullscrenAPI) {
          framework.unbind(document, _fullscrenAPI.eventK, ui.updateFullscreen);
          if (_fullscrenAPI.isFullscreen()) {
            _options.hideAnimationDuration = 0;
            _fullscrenAPI.exit();
          }
          _fullscrenAPI = null;
        }
      });

      // clean up things when gallery is destroyed
      _listen("destroy", function() {
        if (_options.captionEl) {
          if (_fakeCaptionContainer) {
            _controls.removeChild(_fakeCaptionContainer);
          }
          framework.removeClass(_captionContainer, "pswp__caption--empty");
        }

        if (_shareModal) {
          _shareModal.children[0].onclick = null;
        }
        framework.removeClass(_controls, "pswp__ui--over-close");
        framework.addClass(_controls, "pswp__ui--hidden");
        ui.setIdle(false);
      });

      if (!_options.showAnimationDuration) {
        framework.removeClass(_controls, "pswp__ui--hidden");
      }
      _listen("initialZoomIn", function() {
        if (_options.showAnimationDuration) {
          framework.removeClass(_controls, "pswp__ui--hidden");
        }
      });
      _listen("initialZoomOut", function() {
        framework.addClass(_controls, "pswp__ui--hidden");
      });

      _listen("parseVerticalMargin", _applyNavBarGaps);

      _setupUIElements();

      if (_options.shareEl && _shareButton && _shareModal) {
        _shareModalHidden = true;
      }

      _countNumItems();

      _setupIdle();

      _setupFullscreenAPI();

      _setupLoadingIndicator();
    };

    ui.setIdle = function(isIdle) {
      _isIdle = isIdle;
      _togglePswpClass(_controls, "ui--idle", isIdle);
    };

    ui.update = function() {
      // Don't update UI if it's hidden
      if (_controlsVisible && pswp.currItem) {
        ui.updateIndexIndicator();

        if (_options.captionEl) {
          _options.addCaptionHTMLFn(pswp.currItem, _captionContainer);

          _togglePswpClass(
            _captionContainer,
            "caption--empty",
            !pswp.currItem.title
          );
        }

        _overlayUIUpdated = true;
      } else {
        _overlayUIUpdated = false;
      }

      if (!_shareModalHidden) {
        _toggleShareModal();
      }

      _countNumItems();
    };

    ui.updateFullscreen = function(e) {
      if (e) {
        // some browsers change window scroll position during the fullscreen
        // so PhotoSwipe updates it just in case
        setTimeout(function() {
          pswp.setScrollOffset(0, framework.getScrollY());
        }, 50);
      }

      // toogle pswp--fs class on root element
      framework[(_fullscrenAPI.isFullscreen() ? "add" : "remove") + "Class"](
        pswp.template,
        "pswp--fs"
      );
    };

    ui.updateIndexIndicator = function() {
      if (_options.counterEl) {
        _indexIndicator.innerHTML =
          pswp.getCurrentIndex() +
          1 +
          _options.indexIndicatorSep +
          _options.getNumItemsFn();
      }
    };

    ui.onGlobalTap = function(e) {
      e = e || window.event;
      var target = e.target || e.srcElement;

      if (_blockControlsTap) {
        return;
      }

      if (e.detail && e.detail.pointerType === "mouse") {
        // close gallery if clicked outside of the image
        if (_hasCloseClass(target)) {
          pswp.close();
          return;
        }

        if (framework.hasClass(target, "pswp__img")) {
          if (
            pswp.getZoomLevel() === 1 &&
            pswp.getZoomLevel() <= pswp.currItem.fitRatio
          ) {
            if (_options.clickToCloseNonZoomable) {
              pswp.close();
            }
          } else {
            pswp.toggleDesktopZoom(e.detail.releasePoint);
          }
        }
      } else {
        // tap anywhere (except buttons) to toggle visibility of controls
        if (_options.tapToToggleControls) {
          if (_controlsVisible) {
            ui.hideControls();
          } else {
            ui.showControls();
          }
        }

        // tap to close gallery
        if (
          _options.tapToClose &&
          (framework.hasClass(target, "pswp__img") || _hasCloseClass(target))
        ) {
          pswp.close();
          return;
        }
      }
    };
    ui.onMouseOver = function(e) {
      e = e || window.event;
      var target = e.target || e.srcElement;

      // add class when mouse is over an element that should close the gallery
      _togglePswpClass(_controls, "ui--over-close", _hasCloseClass(target));
    };

    ui.hideControls = function() {
      framework.addClass(_controls, "pswp__ui--hidden");
      _controlsVisible = false;
    };

    ui.showControls = function() {
      _controlsVisible = true;
      if (!_overlayUIUpdated) {
        ui.update();
      }
      framework.removeClass(_controls, "pswp__ui--hidden");
    };

    ui.supportsFullscreen = function() {
      var d = document;
      return !!(
        d.exitFullscreen ||
        d.mozCancelFullScreen ||
        d.webkitExitFullscreen ||
        d.msExitFullscreen
      );
    };

    ui.getFullscreenAPI = function() {
      var dE = document.documentElement,
        api,
        tF = "fullscreenchange";

      if (dE.requestFullscreen) {
        api = {
          enterK: "requestFullscreen",
          exitK: "exitFullscreen",
          elementK: "fullscreenElement",
          eventK: tF
        };
      } else if (dE.mozRequestFullScreen) {
        api = {
          enterK: "mozRequestFullScreen",
          exitK: "mozCancelFullScreen",
          elementK: "mozFullScreenElement",
          eventK: "moz" + tF
        };
      } else if (dE.webkitRequestFullscreen) {
        api = {
          enterK: "webkitRequestFullscreen",
          exitK: "webkitExitFullscreen",
          elementK: "webkitFullscreenElement",
          eventK: "webkit" + tF
        };
      } else if (dE.msRequestFullscreen) {
        api = {
          enterK: "msRequestFullscreen",
          exitK: "msExitFullscreen",
          elementK: "msFullscreenElement",
          eventK: "MSFullscreenChange"
        };
      }

      if (api) {
        api.enter = function() {
          // disable close-on-scroll in fullscreen
          _initalCloseOnScrollValue = _options.closeOnScroll;
          _options.closeOnScroll = false;

          if (this.enterK === "webkitRequestFullscreen") {
            pswp.template[this.enterK](Element.ALLOW_KEYBOARD_INPUT);
          } else {
            return pswp.template[this.enterK]();
          }
        };
        api.exit = function() {
          _options.closeOnScroll = _initalCloseOnScrollValue;

          return document[this.exitK]();
        };
        api.isFullscreen = function() {
          return document[this.elementK];
        };
      }

      return api;
    };
  };
  return PhotoSwipeUI_Default;
});