User:Peterwhy/BSiconTooltips.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

// [[User:Peterwhy/BSiconTooltips]]
// with stylesheet [[User:Peterwhy/BSiconTooltips.css]]
importStylesheet("User:Peterwhy/BSiconTooltips.css");

(function() {
	var load = function() {
		// Do setup for each bs-overlap cell
		$(".bs-overlap").each(eachSetup);
		// Attach listener for future addition of .bs-overlap
		$("#content").on("mouseenter", ".bs-overlap:not(bs-setup-done)", eachSetup);
	};
	
	var eachSetup = function (event) {
		// check if this table element has been set up
		if ($(this).hasClass("bs-setup-done")) {
			return;
		}
		$(this).addClass("bs-setup-done");
		
		// if first time run this
		var _this = this;
		var showTimer, hideTimer;
		var labelElements, iconElements;
		var iconHeight = 0, defaultIconHeight = 20;
		
		//
		// Add label boxes
		//
		iconElements = $(this).find("img,a.new");
		iconElements.each(function(index) {
			// Tag elements with class
			$(this).addClass("bs-icon");
			if (index == iconElements.length - 1) {
				$(this).addClass("bs-base");
			} else {
				$(this).addClass("bs-superimpose");
				$(this).closest("div").addClass("bs-superimpose-wrapper");
			}
			
			// Get BSicon id from img src or a href (if icon name is not valid)
			var tagName = $(this).prop("tagName").toLowerCase()
			var stringToParse, bsId;
			if (tagName == "a") { // no-file
				stringToParse = $(this).attr("href");
				// If base icon (only), try to parse correct size from red text
				if (index == iconElements.length - 1) {
					var size;
					for (var heightText = $(this).text();
						(isNaN(size = parseFloat(heightText)) || (size < 0)) && (heightText.length > 0); 
						heightText = heightText.substr(1)) {
					}
					if (!isNaN(size)) {
						$(this).css({
							"padding": (size/2) + "px 0px",
							"width": size + "px"
						});
						iconHeight = Math.max(iconHeight, size);
					}
				}
			} else if (tagName == "img") {
				stringToParse = $(this).attr("src");
				iconHeight = Math.max(iconHeight, $(this).height());
			}
			stringToParse = stringToParse.split("BSicon_",2)[1].split(".svg",1)[0];
			bsId = decodeURIComponent(stringToParse.replace(/_/g," "));
			$(this).data("parsed-bsid", bsId);
			
			// Attach the label element
			var bsQuoteTooltip = $("<div/>").addClass("bs-quote-tooltip").hide().text(bsId);
			if (tagName == "a") {
				bsQuoteTooltip.addClass("bs-no-file");
			}
			
			var bsQuoteLink = $("<a/>", {
				href:"/wiki/File:BSicon_" + stringToParse + ".svg",
				title:"File:BSicon " + bsId + ".svg"
			}).addClass("bs-quote-link").append(bsQuoteTooltip);
			
			if ($(this).parent().prop("tagName").toLowerCase() == "a") {
				$(this).addClass("bs-has-link");
				$(this).parent().before(bsQuoteLink);
			} else {
				$(this).before(bsQuoteLink);
			}
		});
		
		// Assign size information to other red links
		if (iconHeight == 0) {
			iconHeight = defaultIconHeight;
		}
		iconElements.filter("a.new").each(function(index) {
			$(this).css({
				"padding": (iconHeight/2) + "px 0px",
				"width": iconHeight + "px"
			});
		});
		
		// Tag for empty icon cell, i.e. no icon
		if (iconElements.length == 0) {
			$(this).addClass("bs-empty");
		}
		
		// Store label elements
		labelElements = $(this).find(".bs-quote-tooltip");
		
		//
		// Set up show/hide behaviours
		//
		var show = function () {
			// Set transform origins
			$(_this).find(".bs-superimpose").each(function(index) {
				var thisIconWidth = $(this).width();
				var transformOriginX = Math.round(1300*iconHeight/thisIconWidth) + "%";
				$(this).closest(".bs-superimpose-wrapper").css({
					"transform-origin": (transformOriginX + " 50%"),
					"-ms-transform-origin": (transformOriginX + " 50%"),
					"-moz-transform-origin": (transformOriginX + " 50%"),
					"-o-transform-origin": (transformOriginX + " 50%"),
					"-webkit-transform-origin": (transformOriginX + " 50%")
				});
			});
			
			// Start fade-in
			labelElements.fadeIn(200);
			$(_this).addClass("selected");
			clearTimeout(hideTimer);
		}
		var hide = function () {
			$(_this).removeClass("selected");
			labelElements.fadeOut(100);
		}
		
		//
		// Set up mouse event handlers
		//
		var mouseEnter = function(event) {
			clearTimeout(showTimer);
			clearTimeout(hideTimer);
			
			showTimer = setTimeout(show, 200);
		};
		var mouseLeave = function(event) {
			clearTimeout(showTimer);
			hideTimer = setTimeout(hide, 500);
		}
		$(this).hover(mouseEnter, mouseLeave);
		
		//
		// Directly run mouseEnter after first hover
		//
		if (event && event.type == "mouseenter") {
			mouseEnter(event);
		}
	};
	
	$(document).ready(load);
})();