Exmoose: Floating Table of Contents

2021-10-24T19:51:45Z

Floating Table of Contents

New page

/**
* @name FloatingToc
* @author Pecoes, KhangND
* @desc Makes the Table of Contents floatable
* @doc https://dev.fandom.com/wiki/FloatingToc
* @files used:
* [[File:Ui-icons_ffffff_256x240.png]]
* [[File:Ui-icons_222222_256x240.png]]
*/

(function (mw, $, window) {
if (mw.config.get('skin') === 'fandomdesktop') return;
var root = $("#toc");
if (window.FloatingTocLoaded || !root.length) return;
window.FloatingTocLoaded = true;

function importArticle(page) {
const isScript = page.split(".").pop() === "js";
return $.ajax({
url: mw.config.get("wgLoadScript"),
data: {
mode: "articles",
only: isScript ? "scripts" : "styles",
articles: "u:dev:MediaWiki:" + page,
},
}).then(function (content) {
$("head").append($(isScript ? "<script>" : "<style>").html(content));
});
}

var css = importArticle("FloatingToc.css");

var colors = (window.dev || {}).colors
? $.Deferred().resolve()
: importArticle("Colors/code.js");

var i18n = ((window.dev || {}).i18n || {}).loadMessages
? $.Deferred().resolve()
: importArticle("I18n-js/code.js");

var jQueryUI = mw.loader.using([
"jquery.ui.dialog",
"jquery.ui.draggable",
"jquery.ui.resizable",
"jquery.effects.slide",
]);

$.when(i18n, css, colors, jQueryUI)
.then(function () {
return window.dev.i18n.loadMessages("FloatingToc");
})
.then(function (_i18n) {
var colors = window.dev.colors;
var pageBright = colors.parse(colors.wikia.page).isBright();
var menuBright = colors.parse(colors.wikia.menu).isBright();
var iconLight = 'url("https://images.wikia.nocookie.net/dev/images/c/c2/Ui-icons_ffffff_256x240.png")';
var iconDark = 'url("https://images.wikia.nocookie.net/dev/images/a/aa/Ui-icons_222222_256x240.png")';
var styles =
".toc-dialog{\
border: 2px solid $border;\
}\
.toc-dialog .ui-dialog-titlebar {\
background: $menu;\
border: 1px solid $menu;\
color: $contrast;\
}\
.toc-dialog.ui-widget-content .ui-icon {\
background-image: $menu-icons;\
}\
.toc-dialog.ui-widget-content a {\
color: $link;\
}\
.toc-dialog,\
.toc-dialog .toc {\
background-color: $page;\
color: $text;\
}\
#toc-open {\
border: 1px solid $page-border-gray;\
background-image: $page-icons;\
}\
.toc-btn, .toc-btn:hover {\
background-image: $menu-icons;\
}\
.toc-btn:hover {\
background-color: $gradient;\
}";

mw.util.addCSS(
colors.replace(styles, {
"page-border-gray": colors.wikia.border,
"menu-icons": menuBright ? iconDark : iconLight,
"page-icons": pageBright ? iconDark : iconLight,
})
);

var win = $(window),
page = $("#WikiaPage"),
rail = $("#WikiaRail"),
navHeight = $("#globalNavigation").height(),
barHeight = $("#WikiaBarWrapper").height(),
speed = 250,
i18n = _i18n.msg,
options = $.extend(
{
auto: false,
enableKey: true,
},
window.FloatingToc
);

// root ToC components
var rootToc = {
top: root.offset().top,
width: root.outerWidth(),
height: root.outerHeight(),
};

// creates a clone of the root ToC
// and transforms it to jQuery UI Dialog
var toc = {
resizing: false,
padWrap: 0,
wrapper: $(),
clone: $("<nav>", {
class: "toc show",
id: "tocDialog",
title: i18n("contents").plain(),
css: { display: "none" },
appendTo: page,
}),

state: function () {
var w = rootToc.width;
var h = Math.min(
rootToc.height,
win.height() - navHeight - barHeight
);
return {
position: [(win.width() - w) / 2, navHeight],
width: w,
height: h,
maxWidth: win.height() * (w / h),
maxHeight: win.height() - navHeight - barHeight,
};
},

toggle: function (action) {
var links = $(".toc-link");

if (links.css("display") === "none") links.show(speed);
else links.hide(speed);

if (root.css("display") === "none")
root.slideDown(speed, toc.keepPos(action));
else root.slideUp(speed, toc.keepPos(action));
},

keepPos: function (action) {
var winPos = win.scrollTop();
if (action === "open" && winPos > rootToc.top + rootToc.height) {
win.scrollTop(winPos - rootToc.height);
}
if (action === "close") {
if (!options.enableKey) {
win.scrollTop(rootToc.top - navHeight);
return;
}

if (winPos > rootToc.top) win.scrollTop(winPos + rootToc.height);
}
},

fixPos: function () {
if (toc.wrapper.css("position") === "fixed") return;
toc.wrapper.css({
top: toc.wrapper.offset().top - win.scrollTop(),
left: toc.wrapper.offset().left - win.scrollLeft(),
position: "fixed",
});
},

reset: function () {
toc.clone.dialog("option", toc.state());
},

dock: function () {
toc.clone.dialog("option", {
width:
rail.width() + parseInt(page.css("padding-right")) - toc.padWrap,
position: [rail.offset().left, navHeight],
});
},

back: function () {
win.scrollTop(0);
},

open: function () {
toc.clone.dialog("open");
},

close: function () {
toc.clone.dialog("close");
},

button: function (action) {
return $("<button>", {
class: "toc-btn",
id: "toc-" + action,
title: i18n(action).plain(),
click: toc[action],
});
},

onOpen: function () {
toc.reset();
toc.fixPos();
toc.toggle("open");
},

onClose: function () {
toc.toggle("close");
},

onCreate: function () {
// sets properties
toc.wrapper = $(this).parent();
toc.padWrap =
(parseInt(toc.wrapper.css("border-width")) +
parseInt(toc.wrapper.css("padding"))) *
2;

// modifies components
toc.toggle();
toc.wrapper.find(".ui-dialog-titlebar-close").remove();
$("<div>", {
id: "toc-btns",
appendTo: toc.wrapper.find(".ui-dialog-titlebar"),
append: [
toc.button("back"),
toc.button("dock"),
toc.button("reset"),
toc.button("close"),
],
});
toc.wrapper.draggable({
scroll: false,
containment: "window",
});
},

init: function () {
var selector = root.find("ol")[0] ? "ol" : "ul";
toc.clone.append(root.find(selector + ":first")[0].outerHTML);
toc.clone.dialog(
$.extend(
{
dialogClass: "toc-dialog",
show: { effect: "slideDown", duration: speed },
hide: { effect: "slideUp", duration: speed },
create: toc.onCreate,
open: toc.onOpen,
close: toc.onClose,
resizeStart: function () {
toc.resizing = true;
},
resizeStop: function () {
toc.resizing = false;
toc.fixPos();
},
},
toc.state()
)
);

win.on("resize", function () {
if (!toc.resizing && toc.clone.dialog("isOpen")) toc.reset();
});

// overrides click
$(this).on("click", function () {
if (toc.clone.dialog("isOpen")) toc.close();
else toc.open();
});
},
};

// adds ToC links to h2, h3
$("#mw-content-text")
.find("h2,h3")
.find(".mw-headline")
.after(
$("<a>", {
class: "toc-link",
href: "",
title: i18n("toc").plain(),
click: function () {
win.scrollTop(rootToc.top - navHeight);
return false;
},
})
);

var tocButton = $("<button>", {
id: "toc-open",
title: i18n("open").plain(),
appendTo: root.find("div:first"),
}).one("click", toc.init);

if (options.auto) tocButton.trigger("click");
if (options.enableKey) {
$(document).on("keyup", function (e) {
var elem = document.activeElement;
if (
$("body").hasClass("ve") ||
$("html").hasClass("ve-active") ||
elem.tagName === "INPUT" ||
elem.tagName === "TEXTAREA" ||
elem.hasAttribute("contenteditable")
)
return;

if (e.key === "t") tocButton.trigger("click");
});
}
});
})(mw, $, window);

MediaWiki:FloatingToc/code.js - Revision history

Exmoose: Floating Table of Contents