- Welcome to the Kancolle Wiki!
- If you have any questions regarding site content, account registration, etc., please visit the KanColle Wiki Discord
Difference between revisions of "MediaWiki:DetailToggle.js"
Jump to navigation
Jump to search
com>Ckwng (Add multi toggles for day of week filter feature for ImprovementTableKai) |
|||
Line 56: | Line 56: | ||
} | } | ||
} | } | ||
+ | $(window).trigger("WideTablesScan"); | ||
+ | } | ||
+ | |||
+ | //Local storage for multi toggles. | ||
+ | var MultiToggleStorage = function(property, property_default) { | ||
+ | if (!localStorage[property]) { | ||
+ | localStorage[property] = property_default; | ||
+ | } | ||
+ | return { | ||
+ | set: function(value) { | ||
+ | localStorage[property] = value; | ||
+ | }, | ||
+ | get: function(value) { | ||
+ | return localStorage[property]; | ||
+ | }, | ||
+ | on: function(value) { | ||
+ | return localStorage[property] === value; | ||
+ | } | ||
+ | }; | ||
+ | } | ||
+ | |||
+ | //Update a multi toggle. If selected is passed it is set as the state of the multi toggle. Pass false to selected to deselect when the multi toggle is a filter. | ||
+ | function multi_update(multi_toggle_element, selected) { | ||
+ | var property = multi_toggle_element.data("target") || "default", | ||
+ | property_states = multi_toggle_element.data("states"), | ||
+ | property_default = multi_toggle_element.data("default"), | ||
+ | property_filter = multi_toggle_element.data("filter") || false, //Whether or not the multi toggle is a filter | ||
+ | target = "multi-toggle-target-" + property, | ||
+ | multiToggleStorage = ToggleStorage(target, property_default); | ||
+ | //make sure the states are an array. | ||
+ | if (!property_states || typeof(property_states) !== "Array" || property_states.length < 1) { | ||
+ | return; | ||
+ | } else if (property_filter) { | ||
+ | property_states.splice(0, 0, false) | ||
+ | } | ||
+ | //need to set default here rather than in the declaration above to ensure the states are valid. | ||
+ | if (!property_default) { | ||
+ | property_default = property_states[0]; | ||
+ | } | ||
+ | //set the new state of the multi toggle. | ||
+ | if ((selected || selected === false) && property_states.indexOf(selected) >= 0) { | ||
+ | if ((property_filter && multiToggleStorage.on(selected))) { | ||
+ | multiToggleStorage.set(false); | ||
+ | } else { | ||
+ | multiToggleStorage.set(selected); | ||
+ | } | ||
+ | } else { | ||
+ | selected = multiToggleStorage.get() | ||
+ | } | ||
+ | //Update non-selected states | ||
+ | property_states.forEach(function(state) { | ||
+ | var toggle_show_selector = '.multi-toggle[data-target="' + property + '"] .multi-toggle-button[data-state="' + state + '"] .multi-toggle-active', | ||
+ | toggle_hide_selector = '.multi-toggle[data-target="' + property + '"] .multi-toggle-button[data-state="' + state + '"] .multi-toggle-inactive'; | ||
+ | if (!multiToggleStorage.on(state)) { | ||
+ | $(toggle_show_selector).hide(); | ||
+ | $(toggle_hide_selector).show(); | ||
+ | if (selected === false) { | ||
+ | $("." + target + "-" + state).show(); | ||
+ | } else { | ||
+ | $("." + target + "-" + state).hide(); | ||
+ | } | ||
+ | } | ||
+ | }) | ||
+ | //Update selected state last | ||
+ | var toggle_show_selector = '.multi-toggle[data-target="' + property + '"] .multi-toggle-button[data-state="' + selected + '"] .multi-toggle-active', | ||
+ | toggle_hide_selector = '.multi-toggle[data-target="' + property + '"] .multi-toggle-button[data-state="' + selected + '"] .multi-toggle-inactive'; | ||
+ | $(toggle_show_selector).show(); | ||
+ | $(toggle_hide_selector).hide(); | ||
+ | $("." + target + "-" + selected).show(); | ||
+ | //cleanup | ||
$(window).trigger("WideTablesScan"); | $(window).trigger("WideTablesScan"); | ||
} | } | ||
Line 68: | Line 138: | ||
toggle_element.click(function() { | toggle_element.click(function() { | ||
update(toggle_element, true); | update(toggle_element, true); | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | //Activate multi toggles. | ||
+ | $(".multi-toggle").each(function() { | ||
+ | var multi_toggle_element = $(this), | ||
+ | multi_toggle_buttons = multi_toggle_element.children(".multi-toggle-part"); | ||
+ | multi_toggle_element.show(); | ||
+ | multi_update(multi_toggle_element); | ||
+ | //Remove click event handlers from all multi toggle buttons | ||
+ | multi_toggle_buttons.off("click"); | ||
+ | //Add click event handler for all multi toggle buttons to trigger multi_update with select action. | ||
+ | multi_toggle_buttons.click(function() { | ||
+ | multi_update(multi_toggle_element, $(this).data("state")); | ||
}); | }); | ||
}); | }); |
Revision as of 07:24, 6 September 2016
(function(mw, $) {
"use strict";
$(document).ready(function() {
// custom hidable content and togglers supported by local storage
if (typeof(Storage) === "undefined") {
return;
}
var ToggleStorage = function(property, property_default) {
if (!localStorage[property]) {
localStorage[property] = property_default;
}
return {
toggle: function() {
localStorage[property] = localStorage[property] === "show" ? "hide" : "show";
},
on: function() {
return localStorage[property] === "show";
}
};
}
function update(toggle_element, toggle) {
var property = toggle_element.data("target") || "default",
property_anti = toggle_element.data("anti-target"),
property_default = toggle_element.data("default") || "show",
target = "toggle-target-" + property,
target_class = "." + target,
anti_target_class,
toggleStorage = ToggleStorage(target, property_default);
if (property_anti) {
anti_target_class = ".toggle-anti-target-" + property;
}
if (toggle) {
toggleStorage.toggle();
}
var toggle_show_selector = '.toggle[data-target="' + property + '"] .toggle-show',
toggle_hide_selector = '.toggle[data-target="' + property + '"] .toggle-hide';
if (toggleStorage.on()) {
$(toggle_show_selector).show();
$(toggle_hide_selector).hide();
$(target_class).show();
if (anti_target_class) {
$(anti_target_class).hide();
}
} else {
$(toggle_show_selector).hide();
$(toggle_hide_selector).show();
$(target_class).hide();
if (anti_target_class) {
$(anti_target_class).show();
}
}
$(window).trigger("WideTablesScan");
}
//Local storage for multi toggles.
var MultiToggleStorage = function(property, property_default) {
if (!localStorage[property]) {
localStorage[property] = property_default;
}
return {
set: function(value) {
localStorage[property] = value;
},
get: function(value) {
return localStorage[property];
},
on: function(value) {
return localStorage[property] === value;
}
};
}
//Update a multi toggle. If selected is passed it is set as the state of the multi toggle. Pass false to selected to deselect when the multi toggle is a filter.
function multi_update(multi_toggle_element, selected) {
var property = multi_toggle_element.data("target") || "default",
property_states = multi_toggle_element.data("states"),
property_default = multi_toggle_element.data("default"),
property_filter = multi_toggle_element.data("filter") || false, //Whether or not the multi toggle is a filter
target = "multi-toggle-target-" + property,
multiToggleStorage = ToggleStorage(target, property_default);
//make sure the states are an array.
if (!property_states || typeof(property_states) !== "Array" || property_states.length < 1) {
return;
} else if (property_filter) {
property_states.splice(0, 0, false)
}
//need to set default here rather than in the declaration above to ensure the states are valid.
if (!property_default) {
property_default = property_states[0];
}
//set the new state of the multi toggle.
if ((selected || selected === false) && property_states.indexOf(selected) >= 0) {
if ((property_filter && multiToggleStorage.on(selected))) {
multiToggleStorage.set(false);
} else {
multiToggleStorage.set(selected);
}
} else {
selected = multiToggleStorage.get()
}
//Update non-selected states
property_states.forEach(function(state) {
var toggle_show_selector = '.multi-toggle[data-target="' + property + '"] .multi-toggle-button[data-state="' + state + '"] .multi-toggle-active',
toggle_hide_selector = '.multi-toggle[data-target="' + property + '"] .multi-toggle-button[data-state="' + state + '"] .multi-toggle-inactive';
if (!multiToggleStorage.on(state)) {
$(toggle_show_selector).hide();
$(toggle_hide_selector).show();
if (selected === false) {
$("." + target + "-" + state).show();
} else {
$("." + target + "-" + state).hide();
}
}
})
//Update selected state last
var toggle_show_selector = '.multi-toggle[data-target="' + property + '"] .multi-toggle-button[data-state="' + selected + '"] .multi-toggle-active',
toggle_hide_selector = '.multi-toggle[data-target="' + property + '"] .multi-toggle-button[data-state="' + selected + '"] .multi-toggle-inactive';
$(toggle_show_selector).show();
$(toggle_hide_selector).hide();
$("." + target + "-" + selected).show();
//cleanup
$(window).trigger("WideTablesScan");
}
function updateContent() {
$(".toggle").each(function() {
var toggle_element = $(this);
toggle_element.show();
update(toggle_element);
toggle_element.off("click");
toggle_element.click(function() {
update(toggle_element, true);
});
});
//Activate multi toggles.
$(".multi-toggle").each(function() {
var multi_toggle_element = $(this),
multi_toggle_buttons = multi_toggle_element.children(".multi-toggle-part");
multi_toggle_element.show();
multi_update(multi_toggle_element);
//Remove click event handlers from all multi toggle buttons
multi_toggle_buttons.off("click");
//Add click event handler for all multi toggle buttons to trigger multi_update with select action.
multi_toggle_buttons.click(function() {
multi_update(multi_toggle_element, $(this).data("state"));
});
});
// .mw-collapsible togglers
$(".mw-collapsible-expand-all").each(function() {
var toggle_element = $(this);
toggle_element.off("click");
toggle_element.click(function() {
$(".mw-collapsible-toggle.mw-collapsible-toggle-collapsed").click();
});
});
$(".mw-collapsible-collapse-all").each(function() {
var toggle_element = $(this);
toggle_element.off("click");
toggle_element.click(function() {
$(".mw-collapsible-toggle:not(.mw-collapsible-toggle-collapsed)").click();
});
});
$(".mw-collapsible-toggle-all").each(function() {
var toggle_element = $(this);
toggle_element.off("click");
toggle_element.click(function() {
$(".mw-collapsible-toggle").click();
});
});
}
updateContent();
mw.hook("wikipage.content").add(updateContent);
});
}(mediaWiki, jQuery));