User:Peterwhy/BSiconTooltips.js
// 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 = $("
").addClass("bs-quote-tooltip").hide().text(bsId);if (tagName == "a") {
bsQuoteTooltip.addClass("bs-no-file");
}
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);
})();