MediaWiki:Gadget-QDmodal.js

"use strict";

/* <nowiki>
    QDmodal - flexbox-based modal library
    Modified to remove Wikia-specific i18n code; relies on [[MediaWiki:Gadget-QDmodal.css]]

    @author OneTwoThreeFall
    @source <https://dev.fandom.com/wiki/QDmodal>
    @source <https://dev.fandom.com/wiki/MediaWiki:QDmodal.js>
*/

/*jslint browser, long, this */
/*global jQuery, mediaWiki */

(function ($, mw) {
  "use strict";

  var version = 20230117;
  if (mw.libs.QDmodal && mw.libs.QDmodal.version >= version) {
    return;
  }
  var visibleModals = document.getElementsByClassName("qdmodal");
  var $window = $(window);
  var $body = $(document.body);
  var $closeIcon = $("<svg class='qdmodal-close' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>" + "<title>Close</title>" + "<path d='M 3,3 13,13 M 13,3 3,13'/>" + "</svg>");
  var $spinner = $("<svg class='qdmodal-spinner' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'>" + "<path d='M 25,5 v 10'/>".repeat(12) + "</svg>");
  function isElementOrChildFrontmost(element) {
    var pos = element.getBoundingClientRect();
    var frontmostElement = document.elementFromPoint(pos.left, pos.top);
    return element.contains(frontmostElement);
  }
  function addButton(button) {
    var $button = $("<span>");
    if (!button) {
      // invalid
      return;
    }
    if (typeof button.condition === "function" && !button.condition(this)) {
      // condition function present and didn't return truthy
      return;
    }
    if (button.href) {
      $button = $("<a>").attr({
        href: button.href,
        target: "_blank"
      });
    }
    if (typeof button.handler === "function") {
      $button.on("click", button.handler);
    }
    if (button.attr) {
      $button.attr(button.attr);
    }
    $button.addClass("qdmodal-button").text(button.text);
    this.$footer.append($button);
  }
  function closeOnBackgroundClick(event) {
    if (event.target === event.delegateTarget) {
      this.hide();
    }
  }
  function closeOnEscapeKeydown(event) {
    if (event.key === "Escape" && isElementOrChildFrontmost(this.$container[0])) {
      this.hide();
    }
  }

  //// QDmodal constructor ////

  mw.libs.QDmodal = function (id) {
    if (this === mw.libs) {
      throw new Error("mw.libs.QDmodal should be called as a constructor.");
    }
    var $close = $closeIcon.clone();
    this.$container = $("<div>").addClass("qdmodal-container");
    this.$element = $("<div>").addClass("qdmodal");
    this.$title = $("<h3>");
    this.$content = $("<section>");
    this.$footer = $("<footer>");
    this.$container.append(this.$element.append($("<header>").append(this.$title, $close), this.$content, this.$footer));
    this.visible = false;
    this.data = null;
    if (typeof id === "string") {
      this.$element.attr("id", id);
    }
    $close.on("click", this.hide.bind(this));
    this.$container.on("click", closeOnBackgroundClick.bind(this));
    $window.on("keydown", closeOnEscapeKeydown.bind(this));
  };
  mw.libs.QDmodal.prototype.hide = function () {
    if (this.data && typeof this.data.onHide === "function") {
      if (this.data.onHide(this) === false) {
        return;
      }
    }
    this.visible = false;
    this.data = null;
    this.$container.detach();
    if (!visibleModals.length) {
      $body.removeClass("qdmodal-is-visible");
    }
  };
  mw.libs.QDmodal.prototype.show = function (data) {
    if (!data) {
      return;
    }
    this.data = data;

    // only set title if one is given, else keep previous title
    if (data.title) {
      this.$title.text(data.title);
    }
    if (data.loading) {
      this.$content.empty().append($spinner.clone());
    } else {
      this.$content.html(data.content || "");
    }
    this.$footer.empty();
    if (Array.isArray(data.buttons)) {
      data.buttons.forEach(addButton.bind(this));
    }
    if (typeof this.data.onBeforeShow === "function") {
      this.data.onBeforeShow(this);
    }
    if (data.hook) {
      mw.hook(data.hook).fire(this);
    }
    if (!this.visible) {
      $body.addClass("qdmodal-is-visible").append(this.$container);
      this.visible = true;
    }
    if (typeof this.data.onShow === "function") {
      this.data.onShow(this);
    }
  };

  //// Initialisation ////

  mw.libs.QDmodal.version = version;

  // provide other scripts a copy of the loading spinner
  mw.libs.QDmodal.getSpinner = function () {
    return $("<span>").addClass("qdmodal-spinner-container").append($spinner.clone());
  };

  // no-op function, kept to prevent breakage in other scripts
  mw.libs.QDmodal.loadTheme = function () {};
  $(function () {
    document.documentElement.style.setProperty("--qdmodal-scrollbar-width", window.innerWidth - document.body.offsetWidth + "px");
  });

  // fire hook for convenience
  mw.hook("dev.qdmodal").fire(mw.libs.QDmodal);
})(jQuery, mediaWiki);
// </nowiki>