MediaWiki:Jquery.table-shrinker.js
From Tibia Tactics Knowledge Base
Note: After saving, 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)
- Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
var resizeEvent;
function updateCollapsed() {
$("tr.shrink-row + tr.shrink-wrapper:visible").each(function (id, e) {
if ($(e).height()) { $(e).prev("tr").addClass("collapsed"); }
else { $(e).prev("tr").removeClass("collapsed"); }
});
};
function updateZebra() {
setTimeout(function () {
$(".shrink.shrink-use-zebra tr.shrink-row + tr.shrink-wrapper:visible").each(function () {
$(this).find("> td > div.shrinked-row:not(:has(table)) div:visible").each(function (i) {
$(this).parent().removeClass("even odd");
$(this).parent().addClass(i % 2 === 0 ? "even" : "odd");
});
});
}, 300);
};
jQuery.fn.chained = [].reverse;
(function ($, window, document) {
"use strict";
var pluginName = "tableShrinker",
defaults = {
useZebra: true,
useTransitions: true,
transitionSpeed: 300,
ignoreWhenHit: "input, button, a, .btn",
customToggle: ["<span>˅</span>", "<span>˄</span>"],
customToggleAll: ["<span>˅</span>", "<span>˄</span>"],
showToggle: true,
showToggleAll: false,
iconsOnLeft: false,
loadCollapsed: null
};
// The actual plugin constructor
function Plugin(element, options) {
this.element = element;
this.settings = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
$.extend(Plugin.prototype, {
init() {
// local variables
let _this = this;
let _toggle = _this.settings.customToggle;
let _toggleAll = _this.settings.customToggleAll;
let _useZebra = _this.settings.useZebra === true ? true : $(_this.element).hasClass("shrink-use-zebra");
let _showToggle = _this.settings.showToggle === true ? true : $(_this.element).hasClass("shrink-show-toggle");
let _showToggleAll = _this.settings.showToggleAll === true ? true : $(_this.element).hasClass("shrink-show-toggle-all");
let _iconsOnLeft = _this.settings.iconsOnLeft === true ? true : $(_this.element).hasClass("shrink-icons-on-left");
let _loadCollapsed = _this.settings.loadCollapsed === true ? true : $(_this.element).hasClass("shrink-load-collapsed");
let _suffixes = "";
let _headerRow = null;
let _atLeastOneToShrink = null;
// instance properties
_this.$t = $(_this.element);
_this.$ths = _this.$t.children("tbody").first().find("> tr > th");
_this.$trs = _this.$t.children("tbody").first().find("> tr").slice(1);
_this.transitionSpeed = _this.settings.useTransitions === true ? _this.settings.transitionSpeed : 0;
if (_useZebra) { _this.$t.addClass("shrink-use-zebra"); }
if (_iconsOnLeft) { _this.$t.addClass("shrink-icons-on-left"); }
// start shrinkable restructure
_this.$trs.each(function (rId) {
let r = $(this).addClass("shrink-row").after("<tr class=\"blank-row\"></tr>").after("<tr class=\"shrink-wrapper\"><td colspan=\"99\"></td></tr>");
_this.$ths.each(function (hId) {
if (r.children("td").attr("colspan") != null) { return; }//ignore if has colspan
if ($(this)[0].className.match("shrinkable")) { r.find("td").eq(hId).addClass("shrinkable"); }
let re = new RegExp("(?:shrink-)([a-z]*)[^ ]?");
let result;
if (r.parents("table").first().find("th").eq(hId)[0]) {
result = r.parents("table").first().find("th").eq(hId)[0].className.match(re);
}
if (result) {
_atLeastOneToShrink = true;
//setup shrink/unshrinked elements
if (r.find("td").eq(hId).parents("table").first() != null) {
_suffixes = _suffixes + " " + result[1];
if (r.parents("table").first().find("th").eq(hId).html().trim() === "") {
r.next(".shrink-wrapper").find("td").append("<div class=\"shrinked-row\" style=\"display:none\"><div class=\"unshrink-" + result[1] + "\"><div style=\"width:100%\">" + r.find("td").eq(hId).html() + "</div></div></div>");
} else {
r.next(".shrink-wrapper").find("td").append("<div class=\"shrinked-row\" style=\"display:none\"><div class=\"unshrink-" + result[1] + "\"><div>" + r.parents("table").first().find("th").eq(hId).html() + "</div><div>" + r.find("td").eq(hId).html() + "</div></div></div>");
};
r.children("td").eq(hId).addClass("shrink-" + result[1]);
};
};
//setup toggle buttons
if (_atLeastOneToShrink) {
if (hId === r.children("td").last().index() && r.children("td:not(:has(table))").length > 0) {
//setup toggle
if (_iconsOnLeft) {
if (_showToggle) { r.prepend("<td class=\"shrink-toggle shrink-toggle-left\">" + _toggle[0] + "</td>"); }
else { r.prepend("<td class=\"shrink-toggle\"></td>"); }
}
else {
if (_showToggle) { r.append("<td class=\"shrink-toggle\">" + _toggle[0] + "</td>"); }
else { r.append("<td class=\"shrink-toggle\"></td>"); }
}
_suffixes.trim().split(" ").forEach(function (val) { r.find("td.shrink-toggle").addClass("unshrink-" + val); });
//setup toggleAll
if (rId === 0 && !_iconsOnLeft || rId === _this.$trs.length - 1 && _iconsOnLeft) {
_headerRow = r.parents("table").first().children("tbody").children("tr").first();
if (_iconsOnLeft) {
if (_showToggleAll) { _headerRow.prepend("<th class=\"shrink-toggle-all shrink-toggle-left\">" + _toggleAll[0] + "</th>"); }
else { _headerRow.prepend("<th class=\"shrink-toggle-all hidden\"></th>"); }
}
else {
if (_showToggleAll) { _headerRow.append("<th class=\"shrink-toggle-all\">" + _toggleAll[0] + "</th>"); }
else { _headerRow.append("<th class=\"shrink-toggle-all hidden\"></th>"); }
}
_suffixes.trim().split(" ").forEach(function (val) { _headerRow.find("th.shrink-toggle-all").addClass("unshrink-" + val); });
};
};
}
});
});
$(".shrinked-row:has(table)").addClass("shrink-has-table");
// Bind events
_this.$t.children("tbody").first().children("> tr").first().on("click", _this.toggleAll.bind(_this)); // toggle-all for main table
_this.$t.find(".shrinked-row.shrink-has-table table>tbody>tr:first-child").on("click", _this.toggleAll.bind(_this)); // toggle-all for shrinked tables
if (_this.$t.parents("table").length === 0) { _this.$t.children("tbody").first().children("tr").on("click", _this.toggle.bind(_this)); }
if (_loadCollapsed) { _this.$t.find(">tbody>tr:first-child").click(); }
},
toggle(e) {
if ($(e.target).is(this.settings.ignoreWhenHit)) {
return;
}
if (window.getSelection().type !== "Range" && !$(e.target).parents("table").first().find(".shrinked-row").is(":animated")) {
let nextWrapper = $(e.target).closest("tr").next(".shrink-wrapper");
setTimeout(this.updateToggle(nextWrapper, nextWrapper.find("td>div.shrinked-row > div:visible").length > 0 ? 0 : 1), this.transitionSpeed);
nextWrapper.find(">td>div.shrinked-row").slideToggle(this.transitionSpeed);
if ($(e.target).parents("table").first().hasClass("shrink-use-zebra")) { updateZebra(); }
setTimeout(function () { updateCollapsed(); }, this.transitionSpeed);
}
},
toggleAll(e) {
if ($(e.target).is(this.settings.ignoreWhenHit)) {
return;
}
if (window.getSelection().type !== "Range" && !$(e.target).parents("table").first().find(".shrinked-row").is(":animated")) {
let currentTable = $(e.target).parents("table").first();
currentTable.toggleClass("shrink-collapsed");
let isAlreadyCollapsed = currentTable.hasClass("shrink-collapsed") ? 1 : 0;
setTimeout(this.updateToggleAll(currentTable, isAlreadyCollapsed), this.transitionSpeed);
if (isAlreadyCollapsed) { currentTable.find(">tbody>tr.shrink-wrapper>td>div.shrinked-row:hidden").slideDown(this.transitionSpeed, function () { }); }
else { currentTable.find(">tbody>tr.shrink-wrapper>td>div.shrinked-row:visible").slideUp(this.transitionSpeed, function () { }); }
if ($(e.target).parents("table").first().hasClass("shrink-use-zebra")) { updateZebra(); }
setTimeout(function () { updateCollapsed(); }, this.transitionSpeed);
}
},
updateToggle(wrapper, toggleState) {
let _showToggle = this.settings.showToggle === true ? true : $(this.element).hasClass("shrink-show-toggle");
if (_showToggle) { wrapper.prev("tr").children(".shrink-toggle").first().html(this.settings.customToggle[toggleState]); }
},
updateToggleAll(table, toggleState) {
let _showToggleAll = this.settings.showToggleAll === true ? true : table.hasClass("shrink-show-toggle-all");
let _showToggle = this.settings.showToggle === true ? true : table.hasClass("shrink-show-toggle");
if (_showToggleAll) { table.find(">tbody>tr>th.shrink-toggle-all").first().html(this.settings.customToggleAll[toggleState]); }
if (_showToggle) { table.find(">tbody>tr>td.shrink-toggle:not(.hidden)").html(this.settings.customToggle[toggleState]); }
}
});
// A lightweight plugin wrapper around the constructor, preventing against multiple instantiations
$.fn[pluginName] = function (options) {
return this.each(function () {
if (!$.data(this, "plugin-" + pluginName)) {
$.data(this, "plugin-" + pluginName, new Plugin(this, options));
}
});
};
}(jQuery, window, document));
$(window).on("resize", function () {
updateZebra();
updateCollapsed();
});
$( document ).ready(function() {$("table.shrink").tableShrinker();});