Line 4: |
Line 4: |
| | | |
| $(document).ready(function() { | | $(document).ready(function() { |
| + | |
| + | console.log('DetailToggle v1.0.0'); |
| | | |
| // custom hidable content and togglers supported by local storage | | // custom hidable content and togglers supported by local storage |
Line 29: |
Line 31: |
| property_anti = toggle_element.data("anti-target"), | | property_anti = toggle_element.data("anti-target"), |
| property_default = toggle_element.data("default") || "show", | | property_default = toggle_element.data("default") || "show", |
| + | property_classes = toggle_element.data("classes") && toggle_element.data("classes").split(' ').map(function (e) { return "toggle-class-" + e.trim() }).join(' '), |
| target = "toggle-target-" + property, | | target = "toggle-target-" + property, |
| target_class = "." + target, | | target_class = "." + target, |
Line 44: |
Line 47: |
| $(toggle_show_selector).show(); | | $(toggle_show_selector).show(); |
| $(toggle_hide_selector).hide(); | | $(toggle_hide_selector).hide(); |
− | $(target_class).show(); | + | if (property_classes) { |
| + | $(target_class).addClass(property_classes); |
| + | } else { |
| + | $(target_class).show(); |
| + | } |
| if (anti_target_class) { | | if (anti_target_class) { |
| $(anti_target_class).hide(); | | $(anti_target_class).hide(); |
Line 51: |
Line 58: |
| $(toggle_show_selector).hide(); | | $(toggle_show_selector).hide(); |
| $(toggle_hide_selector).show(); | | $(toggle_hide_selector).show(); |
− | $(target_class).hide(); | + | if (property_classes) { |
| + | $(target_class).removeClass(property_classes); |
| + | } else { |
| + | $(target_class).hide(); |
| + | } |
| if (anti_target_class) { | | if (anti_target_class) { |
| $(anti_target_class).show(); | | $(anti_target_class).show(); |
Line 77: |
Line 88: |
| } | | } |
| | | |
− | //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. | + | //Update a multi toggle. If selected is passed it is set as the state of the multi toggle. Pass "none" to selected to deselect when the multi toggle is a filter. |
| function multi_update(multi_toggle_element, selected) { | | function multi_update(multi_toggle_element, selected) { |
| var property = multi_toggle_element.data("target") || "default", | | var property = multi_toggle_element.data("target") || "default", |
Line 83: |
Line 94: |
| property_default = multi_toggle_element.data("default"), | | property_default = multi_toggle_element.data("default"), |
| property_filter = multi_toggle_element.data("filter") || false, //Whether or not the multi toggle is a filter | | property_filter = multi_toggle_element.data("filter") || false, //Whether or not the multi toggle is a filter |
− | target = "multi-toggle-target-" + property, | + | property_base_colspan = multi_toggle_element.data("base-colspan"), |
− | multiToggleStorage = MultiToggleStorage(target, property_default);
| + | target = "multi-toggle-target-" + property; |
| //make sure the states are an array. | | //make sure the states are an array. |
− | if (!property_states || typeof(property_states) !== "Array" || property_states.length < 1) { | + | if (!property_states || !Array.isArray(property_states) || property_states.length < 1) { |
| + | multi_toggle_element.hide(); |
| return; | | return; |
− | } else if (property_filter) { | + | } else if (property_filter && property_states[0] !== "none") { |
− | property_states.splice(0, 0, false) | + | property_states.splice(0, 0, "none") |
| } | | } |
| //need to set default here rather than in the declaration above to ensure the states are valid. | | //need to set default here rather than in the declaration above to ensure the states are valid. |
Line 95: |
Line 107: |
| property_default = property_states[0]; | | property_default = property_states[0]; |
| } | | } |
| + | var multiToggleStorage = MultiToggleStorage(target, property_default); |
| //set the new state of the multi toggle. | | //set the new state of the multi toggle. |
− | if ((selected || selected === false) && property_states.indexOf(selected) >= 0) { | + | if (selected && property_states.indexOf(selected) >= 0) { |
| + | //If the selected filter was re-selected, that is a remove filter action. |
| if ((property_filter && multiToggleStorage.on(selected))) { | | if ((property_filter && multiToggleStorage.on(selected))) { |
− | multiToggleStorage.set(false); | + | selected = "none"; |
− | } else {
| |
− | multiToggleStorage.set(selected);
| |
| } | | } |
| + | multiToggleStorage.set(selected); |
| } else { | | } else { |
| + | //No selection, so we are initializing the multi toggle. |
| selected = multiToggleStorage.get() | | selected = multiToggleStorage.get() |
| } | | } |
| //Update non-selected states | | //Update non-selected states |
| + | var hide_selectors = []; |
| + | var show_selectors = []; |
| property_states.forEach(function(state) { | | property_states.forEach(function(state) { |
− | var toggle_show_selector = '.multi-toggle[data-target="' + property + '"] .multi-toggle-button[data-state="' + state + '"] .multi-toggle-active', | + | var toggle_active_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'; | + | toggle_inactive_selector = '.multi-toggle[data-target="' + property + '"] .multi-toggle-button[data-state="' + state + '"] .multi-toggle-inactive'; |
− | if (!multiToggleStorage.on(state)) { | + | if (selected !== state) { |
− | $(toggle_show_selector).hide(); | + | $(toggle_active_selector).hide(); |
− | $(toggle_hide_selector).show(); | + | $(toggle_inactive_selector).show(); |
− | if (selected === false) { | + | if (selected === "none") { |
− | $("." + target + "-" + state).show(); | + | show_selectors.push("." + target + "-" + state); |
| } else { | | } else { |
− | $("." + target + "-" + state).hide(); | + | hide_selectors.push("." + target + "-" + state); |
| } | | } |
| + | } else { |
| + | $(toggle_active_selector).show(); |
| + | $(toggle_inactive_selector).hide(); |
| + | show_selectors.push("." + target + "-" + state); |
| } | | } |
| }) | | }) |
| + | $(hide_selectors.join(',')).hide(); |
| //Update selected state last | | //Update selected state last |
− | var toggle_show_selector = '.multi-toggle[data-target="' + property + '"] .multi-toggle-button[data-state="' + selected + '"] .multi-toggle-active', | + | $(show_selectors.join(',')).show(); |
− | toggle_hide_selector = '.multi-toggle[data-target="' + property + '"] .multi-toggle-button[data-state="' + selected + '"] .multi-toggle-inactive'; | + | //Update colspan for custom rows. |
− | $(toggle_show_selector).show();
| + | if (property_filter) { |
− | $(toggle_hide_selector).hide();
| + | if (selected === "none") { |
− | $("." + target + "-" + selected).show();
| + | $(".custom-row." + target).attr("colSpan", property_base_colspan); |
| + | } else { |
| + | $(".custom-row." + target).attr("colSpan", property_base_colspan - property_states.length + 2); |
| + | } |
| + | } |
| //cleanup | | //cleanup |
| $(window).trigger("WideTablesScan"); | | $(window).trigger("WideTablesScan"); |
Line 135: |
Line 160: |
| toggle_element.show(); | | toggle_element.show(); |
| update(toggle_element); | | update(toggle_element); |
| + | if (toggle_element.hasClass('toggle-passive')) { |
| + | return; |
| + | } |
| toggle_element.off("click"); | | toggle_element.off("click"); |
| toggle_element.click(function() { | | toggle_element.click(function() { |
Line 142: |
Line 170: |
| | | |
| //Activate multi toggles. | | //Activate multi toggles. |
| + | var targets = {}; |
| $(".multi-toggle").each(function() { | | $(".multi-toggle").each(function() { |
| var multi_toggle_element = $(this), | | var multi_toggle_element = $(this), |
− | multi_toggle_buttons = multi_toggle_element.children(".multi-toggle-button"); | + | multi_toggle_buttons = multi_toggle_element.children(".multi-toggle-button"), |
| + | target = multi_toggle_element.data("target") || "default"; |
| multi_toggle_element.show(); | | multi_toggle_element.show(); |
− | multi_update(multi_toggle_element); | + | if (!targets.hasOwnProperty(target)) |
| + | targets[target] = multi_toggle_element; |
| //Remove click event handlers from all multi toggle buttons | | //Remove click event handlers from all multi toggle buttons |
| multi_toggle_buttons.off("click"); | | multi_toggle_buttons.off("click"); |
Line 154: |
Line 185: |
| }); | | }); |
| }); | | }); |
| + | //call multi-update once for each target to allow multiple controls |
| + | //without horrible lag |
| + | Object.keys(targets).forEach(function (key) {multi_update(targets[key])}); |
| | | |
| // .mw-collapsible togglers | | // .mw-collapsible togglers |