MediaWiki:Common.js

/* 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", ""],
	["Items", ""],
	["Ships", ""],
	["Places", ""],
	["Missions", ""],
	["Guides", ""]
	];
	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")
	    )
	);
});