MediaWiki:Gadget-QDmodal.js
Перейти к навигации
Перейти к поиску
Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
- Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
- Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
- Internet Explorer / Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
- Opera: Нажмите Ctrl+F5.
/* <nowiki>
QDmodal - flexbox-based modal library
CSS located at [[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 () {
"use strict";
var version = 20180212;
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>Закрыть</title>"
+ "<path stroke='currentColor' d='M 3,3 13,13 M 13,3 3,13'/>"
+ "</svg>"
);
function addButton(button) {
var $button = $("<span>");
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);
}
//// 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));
// close modal if the background outside the modal is clicked
this.$container.on("click", function (event) {
if (event.target === event.delegateTarget) {
this.hide();
}
}.bind(this));
// close modal if the escape key is pressed
$window.on("keydown", function (event) {
if (this.visible && event.which === 27) {
this.hide();
}
}.bind(this));
};
mw.libs.QDmodal.prototype.hide = function () {
if (this.data && typeof this.data.onHide === "function") {
this.data.onHide(this);
}
this.visible = false;
this.data = null;
this.$container.detach();
if (!visibleModals.length) {
$body.removeClass("qdmodal-no-scroll");
}
};
mw.libs.QDmodal.prototype.show = function (data) {
if (!data) {
return;
}
this.data = data;
this.$content.toggleClass("mw-ajax-loader", Boolean(data.loading));
// only set title if one is given, else keep previous title
if (data.title) {
this.$title.text(data.title);
}
this.$content.html(data.content || "");
this.$footer.empty();
if (Array.isArray(data.buttons)) {
data.buttons.forEach(addButton.bind(this));
}
if (data.hook) {
mw.hook(data.hook).fire(this);
}
if (!this.visible) {
$body
.addClass("qdmodal-no-scroll")
.append(this.$container);
this.visible = true;
}
if (typeof this.data.onShow === "function") {
this.data.onShow(this);
}
};
mw.libs.QDmodal.version = version;
// fire hook for convenience
mw.hook("dev.qdmodal").fire(mw.libs.QDmodal);
//// QDmodal theming ////
function initStyles() {
var theme = {
scrollbarWidth: window.innerWidth - document.body.offsetWidth
};
var styles = (
"body.qdmodal-no-scroll {"
// add a margin equivalent to the scrollbar width to
// prevent page content moving due to hidden overflow
+ "margin-right: ${scrollbarWidth}px;"
+ "}"
);
// replace placeholders with theme data
mw.util.addCSS(styles.replace(/\$\{([^}]+)\}/g, function (ignore, p1) {
return theme[p1];
}));
}
mw.loader.using("mediawiki.util").then(initStyles);
})