View source for MediaWiki:Template:MainPageInfopush.js

$(
	(function () {
		mw.loader.using(["oojs-ui-core", "oojs-ui-windows"]).done(() => {
			var windowManager = new OO.ui.WindowManager();
			$(document.body).append(windowManager.$element);

			function showArticle(element) {
				var { articleTitle, articleContent } = element.dataset;

				function ArticleDialog(config) {
					ArticleDialog.super.call(this, config);
					this.config = config || {};
				}

				OO.inheritClass(ArticleDialog, OO.ui.ProcessDialog);

				ArticleDialog.static.name = "ArticleDialog";
				ArticleDialog.static.title = articleTitle;
				ArticleDialog.static.size = "large";
				ArticleDialog.static.actions = [
					{
						action: "close",
						flags: "safe",
						icon: "close",
						label: "Close"
					}
				];

				ArticleDialog.prototype.initialize = function () {
					ArticleDialog.super.prototype.initialize.apply(this, arguments);
					this.content = new OO.ui.PanelLayout({
						$content: atob(articleContent),
						expanded: false,
						padded: true,
						scrollable: true
					});

					this.$body.append(this.content.$element);
				};

				ArticleDialog.prototype.getActionProcess = function (action) {
					if (action === "close") {
						return new OO.ui.Process(function () {
							this.close({ action: "close" });
						}, this);
					}
					return ArticleDialog.super.prototype.getActionProcess.call(
						this,
						action
					);
				};

				var dialog = new ArticleDialog();

				windowManager.addWindows([dialog]);
				windowManager.openWindow(dialog);
			}

			const infopushes = document.querySelectorAll(".tpl-infopush");
			console.log("Template:MainPageInfopush", infopushes);

			for (const infopush of infopushes) {
				try {
					const content = infopush.querySelector(".tpl-infopush-content");

					const items = content.querySelectorAll(".tpl-infopush-item");
					const total = items.length;

					console.log("Template:MainPageInfopush", infopush, items);

					for (const item of items) {
						const { articleId } = item.dataset;
						if (!articleId) continue;

						item.addEventListener("click", () =>
							console.log("showArticle(item)")
						);
					}

					const navigation = infopush.querySelector(".tpl-infopush-navigation");

					let currentOffset = 0;
					function showSlide(index) {
						currentOffset = (index + total) % total;
						content.style.transform = `translateX(-${currentOffset * 100}%)`;
					}

					const autoAdvanceEvery = 5000;

					let autoAdvanceInterval;
					function resetAutoAdvance() {
						if (autoAdvanceInterval) clearInterval(autoAdvanceInterval);
						autoAdvanceInterval = setInterval(function () {
							showSlide(currentOffset + 1);
						}, autoAdvanceEvery);
					}

					navigation
						.querySelector(".tpl-infopush-navigation-previous")
						.addEventListener("click", () => {
							showSlide(currentOffset - 1);
							resetAutoAdvance();
						});

					navigation
						.querySelector(".tpl-infopush-navigation-next")
						.addEventListener("click", () => {
							showSlide(currentOffset + 1);
							resetAutoAdvance();
						});

					resetAutoAdvance();
					showSlide(0);
				} catch (reason) {
					console.warn(
						"Template:MainPageInfopush",
						"Couldn't initialize infopush.",
						reason
					);
				}
			}
		});
	})()
);
Description	What you type	What you get
Italic	''Italic text''	Italic text
Bold	'''Bold text'''	Bold text
Bold & italic	'''''Bold & italic text'''''	*Bold & italic text*