MediaWiki:Common.js

Revision as of 18:48, 27 May 2022 by Mr Pie 5 (talk | contribs) (Added sidebar images)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* Any JavaScript here will be loaded for all users on every page load. */

$(function(){
	
	// Adds the left fixed sidebar
	var sidebar = $("<nav>").attr("id","sidebar").appendTo(document.body);
	var sidebarList = $("<ul>").attr("id", "sidebar__links").appendTo(sidebar);
	$("<a>").text("Wiki").attr("href","https://wiki.geministation.com").append($("<img>").attr("src", "https://wiki.geministation.com/images/f/f7/G.png")).appendTo(sidebarList);
	var links = [
	["Mods", "https://wiki.geministation.com/images/5/52/Sidebar-mods.png"],
	["Items", "https://wiki.geministation.com/images/a/a3/Sidebar-items.png"],
	["Ships", "https://wiki.geministation.com/images/6/64/Sidebar-ships.png"],
	["Places", "https://wiki.geministation.com/images/d/d6/Sidebar-places.png"],
	["Missions", "https://wiki.geministation.com/images/c/c1/Sidebar-missions.png"],
	["Guides", "https://wiki.geministation.com/images/9/91/Sidebar-guides.png"]
	];
	for(var i = 0; i < links.length; i++){
      	var link = links[i];
		$("<a>").text(link[0]).attr("href","https://wiki.geministation.com/" + link[0]).append($("<img>").attr("src", link[1])).appendTo(sidebarList);
	}
	
	// Creates a sliding gallery (carousel), such as the one on the main page
	function galleryRight(galleryContainer, width){
		var gallery = galleryContainer.querySelector('ul.gallery');
		gallery.scroll({
			left:parseInt(gallery.scrollLeft)+width+4,
			behavior:'smooth',
		});
	}
	function galleryLeft(galleryContainer, width){
		var gallery = galleryContainer.querySelector('ul.gallery');
		gallery.scroll({
			left:parseInt(gallery.scrollLeft)-width-4,
			behavior:'smooth',
		});
	}
	$(".sliding-gallery").each(function(gallery){
		var $buttons = $("<div></div>").addClass("sliding-gallery--buttons");
		var width = this.getElementsByTagName("img")[0].getAttribute("width");
		$("<button></button>").addClass("sliding-gallery--button right").text("🡒").on("click", galleryRight.bind(this, this, parseInt(width))).appendTo($buttons);
		$("<button></button>").addClass("sliding-gallery--button left").text("🡐").on("click", galleryLeft.bind(this, this, parseInt(width))).appendTo($buttons);
		$buttons.appendTo(this);
	});
	
	// Creates the enhanced footer
	var $footer = $("<div>").attr("id", "footer__content");
	$("footer#footer").html("").append($footer);
	
	var footerLinks = [
	    {
	        header: "Overview",
	        links: [
	            // [text, link]
	            ["What is Gemini Station?", ""],
	            ["Contribute", ""],
	            ["Press", ""],
	            ["Contact", ""],
	            ["Terms of Use", ""],
	            ["Privacy Policy", "/Project:Privacy_policy"], // [[/Project:Privacy_policy]]
	        ]
	    },
	    {
	        header: "Wiki",
	        links: [
	            ["Ships", "/Ships"], // [[Ships]]
	            ["Mods", "/Mods"], // [[Mods]]
	            ["Items", "/Items"], // [[Items]]
	            ["Facilities", "/Facilities"], // [[Facilities]]
	            ["Drones", "/Overview"], // [[Overview]]
	            ["Missions", "/Missions"], // [[Missions]]
	            ["Stories", "/Stories"], // [[Stories]]
	            ["Characters", "/Characters"] // [[Characters]]
	        ]
	    },
	    {
	        header: "Community",
	        links: [
	            ["Game", ""],
	            ["Forum", ""],
	            ["Discord", ""],
	            ["Reddit", ""]
	        ]
	    },
	];
	
	footerLinks.forEach(function(group){
	    var $ul = $("<ul>");
	    for(var i = 0; i < group.links.length; i++){
	        var link = group.links[i];
	        $("<li>").append(
	            $("<a>").text(link[0]).attr("href", link[1])
	        ).appendTo($ul);
	    }
	
	    $("<div>").addClass("footer-group").append(
	        $("<h2>").text(group.header)
	    ).append($ul).appendTo($footer);
	});
	
	$("#footer .footer-group:first-child").prepend(
	    $("<a>").attr("id", "footer__logo").attr("href", "https://geministation.com/").append(
	        $("<img>").attr("src", "https://wiki.geministation.com/images/0/06/Gemini_Station_Logo.png")
	    )
	);
});