User:Aeywoo/customNavLinks

From Support Wiki
Jump to navigation Jump to search
Example script usage.

This script was created by Jr Mime and Caburum on the Fandom Developers Wiki and was ported to Wiki.gg under the Creative Commons Attribution-Share Alike License 3.0 (Unported) (CC BY-SA) license this script is therefore under the same license regardless of this wikis defined license where otherwise stated.

This script allows you to add custom links to the top wiki.gg navbar, the links will be located to the left of the user tools.

Installation

Because of technical limitations with Wiki.gg you are unable to use scripts cross-wiki natively, this is in stark contrast to other wikifarms like Wikia and Gamepedia however this may change in the future, for now you will need to rely on external sources to load this script cross-wiki, this includes but is not limited to, TamperMonkey and ViolentMonkey being the most popular of the two when it comes to inserting custom JavaScript to the DOM of a specified website via regex. You can use the following example snippets below to load and customise your custom nav links to your liking.

Installation Examples

ViolentMonkey

Using ViolentMonkey you can utilise the below script to not only load the scripts JavaScript and CSS, but also your Common.js/custom JavaScript subpage. Replace User:Aeywoo with your username and replace topBar.js with common.js or your custom JavaScript subpages name.

Example ViolentMonkey custom script usage:

// ==UserScript==
// @name        Personal Wiki.gg Scripts
// @namespace   Violentmonkey Scripts
// @match       https://*.wiki.gg/*
// @grant       none
// @version     1.0
// @author      Aeywoo
// @description 04/03/2024, 12:29:37 am
// ==/UserScript==
(() => {
    const interval = setInterval(() => {
        if (typeof eval("window?.mw?.loader?.using") != "function") return
        clearInterval(interval);

        mw.loader.load("https://support.wiki.gg/index.php?title=User:Aeywoo/customNavLinks.js&action=raw\u0026ctype=text/javascript");
        mw.loader.load("https://support.wiki.gg/index.php?title=User:Aeywoo/topBar.js&action=raw\u0026ctype=text/javascript");

        console.log("All resources finished loading!");
    }, 10);
})();

Configuration Syntax

When utilising the examples listed under this section you will need to know what kind of customisability you have with this script and what it allows you to do, this syntax shows you what you can do with this script;

Before adding the import, you need to configure your own buttons. Add your custom buttons above your import script. Each button consists of 5 items in an object, in an array.

text
The text that displays on the dropdown label in the navbar.
hoverText
The text that displays when you hover over the dropdown label or the standalone navbar link.
url
The URL of the navbar link or the dropdowns links (if empty, leave "" empty, but still include it). If you want to link to a page locally on the wiki, use mw.util.getUrl().
isMain
If the link is the main element in a dropdown. Enter true if it is, else enter false.
whoIsMain
If the link is a child of the dropdown, enter the shortName of the main element. Otherwise, enter false unless isMain is already defined as true.
shortName
A short name used in elements to customize links and create dropdowns.

You can add any of the following examples to your common.js or any JavaScript subpage of your User page, e.g. User:Aeywoo/topBar.js.

Example 1

This is an example of a standard dropdown menu containing two links to https sites.

mw.loader.using(["mediawiki.api", "mediawiki.util"]).then(function() {
window.customNavLinks = [{
    text: "Wikis",
    url: "",
    isMain: true,
    hoverText: "A list of Wikis I edit on",
    shortName: "wikis"
}, {
    text: "Terraria Wiki",
    url: "https://terraria.wiki.gg/wiki/",
    whoIsMain: "wikis"
}, {
    text: "The Aether Wiki",
    url: "https://aether.wiki.gg/wiki/",
    whoIsMain: "wikis"
}];

Example 2

This is an example of a standard dropdown menu containing two links to internal MediaWiki maintenance pages.

window.customNavLinks = [{
    text: "Maintenance",
    url: "",
    isMain: true,
    hoverText: "Maintenance links",
    shortName: "maint"
}, {
    text: "New Files"
    url: mw.util.getUrl("Special:NewFiles"),
    whoIsMain: "maint"
}, {
    text: "All Templates",
    url: mw.util.getUrl("Special:AllPages") + "?namespace=8",
    whoIsMain: "maint"
}];