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 99: |
Line 110: |
| //set the new state of the multi toggle. | | //set the new state of the multi toggle. |
| if (selected && 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))) { |
| selected = "none"; | | selected = "none"; |
Line 104: |
Line 116: |
| 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 === "none") { | | 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';
| |
− | $(toggle_show_selector).show();
| |
− | $(toggle_hide_selector).hide();
| |
− | $("." + target + "-" + selected).show();
| |
| //Update colspan for custom rows. | | //Update colspan for custom rows. |
| if (property_filter) { | | if (property_filter) { |
Line 144: |
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 151: |
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 163: |
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 |