User:Peterwhy/BSiconTooltips/sandbox.js

// User:Peterwhy/BSiconTooltips // with stylesheet User:Peterwhy/BSiconTooltips.css importStylesheet("User:Peterwhy/BSiconTooltips/sandbox.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 = $(" ").addClass("bs-quote-tooltip").hide.text(bsId); if (tagName == "a") { bsQuoteTooltip.addClass("bs-no-file"); }			var bsQuoteLink = $("", {				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); });