diff --git a/includes/Accordion/assets/js/rrze-accordion.js b/includes/Accordion/assets/js/rrze-accordion.js index 47a6aed5..69f3ec22 100644 --- a/includes/Accordion/assets/js/rrze-accordion.js +++ b/includes/Accordion/assets/js/rrze-accordion.js @@ -1,122 +1,159 @@ /** * RRZE Accordion 1.0.0 - * Refactored and documented for efficiency and readability. - * Uses jQuery for DOM manipulation and event handling. + * RRZE Webteam */ -const { __, _x, _n, sprintf } = wp.i18n; - jQuery(document).ready(function($) { - /** - * Initially hides all accordion bodies except those marked as open or should stay open, - * and marks the corresponding toggles as active. - */ - $('.accordion-body').not(".open, .stayopen").hide(); - $('.accordion-body.open').each(function() { - $(this).closest('.accordion-group').find('.accordion-toggle').first().addClass('active'); - }); + const { __, _x, _n, sprintf } = wp.i18n; - /** - * Checks if all items within an accordion are open to toggle the 'Expand All/Collapse All' button state. - */ + // Close Accordions on start, except first + $('.accordion-body').not(".accordion-body.open").not('.accordion-body.stayopen').hide(); + $('.accordion-body.open').each( function () { + $(this).closest('.accordion-group').find('button.accordion-toggle').first().addClass('active'); + }) $('.accordion').each(function() { - const $accordion = $(this); - const items = $accordion.find(".accordion-group"); - const openItems = items.find(".accordion-body.open"); - if (items.length === openItems.length) { - $accordion.find('button.expand-all').attr("data-status", 'open').data('status', 'open').html(__('Collapse All', 'rrze-elements')); + if ($(this).find('button.expand-all').length > 0) { + var items = $(this).find(".accordion-group"); + var open = $(this).find(".accordion-body.open"); + if (items.length == open.length) { + $(this).find('button.expand-all').attr("data-status", 'open').data('status', 'open').html(__('Collapse All', 'rrze-elements')); + } } }); - /** - * Retrieves the target accordion ID from a button or link element. - * @param {jQuery} $elem - The element that may contain a href or data-href attribute. - * @returns {string} The target selector for the accordion to be toggled. - */ - function getAccordionTarget($elem) { - return $elem.data('href') || $elem.attr('href'); - } - - /** - * Toggles the visibility of an accordion's content. - * @param {string} $accordion - The selector of the accordion whose visibility will be toggled. - */ - function toggleAccordion($accordion) { - const $group = $($accordion).closest('.accordion-group'); - const $directBody = $group.children('.accordion-body'); - const $directToggle = $group.children('.accordion-heading').children('.accordion-toggle'); - const $otherGroups = $group.siblings(); + $('.accordion-toggle').on('mousedown', function(event) { + event.preventDefault(); + var $accordion = $(this).attr('href'); + var $name = $(this).data('name'); + toggleAccordion($accordion); + // Put name attribute in URL path if available, else href + if (typeof($name) !== 'undefined') { + window.history.replaceState(null, null, '#' + $name); + } else { + window.history.replaceState(null, null, $accordion); + } + }); - $otherGroups.children('.accordion-heading').children('.accordion-toggle').removeClass('active'); - $otherGroups.children('.accordion-body').not('.accordion-body.stayopen').slideUp(); + // Keyboard navigation for accordions + $('.accordion-toggle').keydown(function(event) { + if (event.keyCode == 32) { + var $accordion = $(this).attr('href'); + var $name = $(this).data('name'); + toggleAccordion($accordion); + if (typeof($name) !== 'undefined') { + window.history.replaceState(null, null, '#' + $name); + } else { + window.history.replaceState(null, null, $accordion); + } + } + }); - $directToggle.toggleClass('active'); - $directBody.slideToggle(); + function toggleAccordion($accordion) { + var $thisgroup = $($accordion).closest('.accordion-group'); + var $othergroups = $($accordion).closest('.accordion').find('.accordion-group').not($thisgroup); + $($othergroups).children('.accordion-heading').children(' .accordion-toggle').removeClass('active'); + $($othergroups).children('.accordion-body').not('.accordion-body.stayopen').slideUp(); + $($thisgroup).children('.accordion-heading').children('.accordion-toggle').toggleClass('active'); + $($thisgroup).children('.accordion-body').slideToggle(); + // refresh Slick Gallery + var $slick = $($thisgroup).find("div.slick-slider"); + if ($slick.length < 0) { + $slick.slick("refresh"); + } + } - refreshSlickGallery($group); + function openAnchorAccordion($target) { + if ($target.closest('.accordion').parent().closest('.accordion-group')) { + var $thisgroup = $($target).closest('.accordion-group'); + var $othergroups = $($target).closest('.accordion').find('.accordion-group').not($thisgroup); + $($othergroups).find('.accordion-toggle').removeClass('active'); + $($othergroups).find('.accordion-body').not('.accordion-body.stayopen').slideUp(); + $($thisgroup).find('.accordion-toggle:first').not('.active').addClass('active'); + $($thisgroup).find('.accordion-body:first').slideDown(); + // open parent accordion bodies if target = nested accordion + $($thisgroup).parents('.accordion-group').find('.accordion-toggle:first').not('.active').addClass('active'); + $($thisgroup).parents('.accordion-body').slideDown(); + } + var offset = $target.offset(); + var $scrolloffset = offset.top - 300; + $('html,body').animate({ + scrollTop: $scrolloffset + }, 'slow'); } - /** - * Refreshes the Slick Gallery within an accordion if it exists. - * This is needed because changes in visibility can affect Slick's layout. - * @param {jQuery} $group - The accordion group that may contain a Slick slider. - */ - function refreshSlickGallery($group) { - const $slick = $group.find(".slick-slider"); - if ($slick.length) { - $slick.slick("refresh"); + if (window.location.hash) { + var identifier = window.location.hash.split('_')[0]; + var inpagenum = window.location.hash.split('_')[1]; + if (identifier == '#collapse') { + if ($.isNumeric(inpagenum)) { + var $findid = 'collapse_' + inpagenum; + var $target = $('body').find('#' + $findid); + } + } else { + var $findname = window.location.hash.replace('\#', ''); + var $target = $('body').find('div[name=' + $findname + ']'); + } + if ($target.length > 0) { + openAnchorAccordion($target); } } - /** - * Binds mousedown and keydown events to accordion toggles. - * Prevents default action and toggles the accordion based on the target derived from the element. - * Updates the URL hash if a name is provided. - */ - $('.accordion-toggle').on('mousedown keydown', function(event) { - if (event.type === 'mousedown' || event.keyCode === 32) { - event.preventDefault(); - const $target = getAccordionTarget($(this)); - const $name = $(this).data('name'); - toggleAccordion($target); - window.history.replaceState(null, null, $name ? '#' + $name : $target); + $('a:not(.prev, .next)').click(function(e) { // prev und next wegen Konflikt mit Timeline ausgeschlossen + // nur auf Seiten, auf denen ein Accordion existiert, + // und nur, wenn der geklickte Link nicht der Accordion-Toggle-Link oder der Expand-All-Link ist + if (($('[id^=accordion-]').length) && + (!$(this).hasClass("accordion-toggle")) && + (!$(this).hasClass("accordion-tabs-nav-toggle"))) { + var $hash = $(this).prop("hash"); + var identifier = $hash.split('_')[0]; + var inpagenum = $hash.split('_')[1]; + if (identifier == '#collapse') { + if ($.isNumeric(inpagenum)) { + var $findid = 'collapse_' + inpagenum; + var $target = $('body').find('#' + $findid); + } + } else { + var $findname = identifier.replace('\#', ''); + var $target = $('body').find('div[name=' + $findname + ']'); + } + if ($target) { + openAnchorAccordion($target); + } } }); - /** - * Handles clicks on the 'expand all' or 'collapse all' buttons within an accordion. - * Toggles the expansion state of all accordion bodies and toggles within the same accordion. - */ - $('.expand-all').on('click', function() { - const $this = $(this); - const $accordion = $this.closest('.accordion'); - const $bodies = $accordion.find('.accordion-body'); - const $toggles = $accordion.find('.accordion-toggle'); - if ($this.data('status') === 'open') { - $bodies.slideUp(); - $toggles.removeClass('active'); - $this.attr("data-status", 'closed').data('status', 'closed').html(__('Expand All', 'rrze-elements')); + $('.expand-all').click(function(e) { + var $thisgroup = $(this).closest('.accordion'); + if ($(this).data('status') === 'open') { + $($thisgroup).find('.accordion-body').slideUp(); + $($thisgroup).find('.accordion-toggle').removeClass('active'); + $(this).attr("data-status", 'closed').data('status', 'closed').html(__('Expand All', 'rrze-elements')); } else { - $bodies.slideDown(); - $toggles.addClass('active'); - $this.attr("data-status", 'open').data('status', 'open').html(__('Collapse All', 'rrze-elements')); + $($thisgroup).find('.accordion-body').slideDown(); + $($thisgroup).find('.accordion-toggle').addClass('active'); + $(this).attr("data-status", 'open').data('status', 'open').html(__('Collapse All', 'rrze-elements')); } }); - /** - * Binds click and keydown events to links within assistant tabs. - * Activates the tab associated with the clicked link and displays its corresponding pane. - */ - $('.assistant-tabs-nav a').on('click keydown', function(event) { - if (event.type === 'click' || event.keyCode === 32) { - event.preventDefault(); - const $link = $(this); - const $tabs = $link.parents('.assistant-tabs'); - const $paneId = $link.attr('href'); - $link.closest('ul').find('a').removeClass('active'); - $link.addClass('active'); - $tabs.find('.assistant-tab-pane').removeClass('assistant-tab-pane-active'); - $($paneId).addClass('assistant-tab-pane-active'); + // Assistant tabs + $('.assistant-tabs-nav a').on('click', function (event) { + event.preventDefault(); + var pane = $(this).attr('href'); + $(this).parents('ul').find('a').removeClass('active'); + $(this).addClass('active'); + $(this).parents('.assistant-tabs').find('.assistant-tab-pane').removeClass('assistant-tab-pane-active'); + $(pane).addClass('assistant-tab-pane-active'); + }); + + // Keyboard navigation for assistant tabs + $('.assistant-tabs-nav a').keydown('click', function (event) { + if (event.keyCode == 32) { + var pane = $(this).attr('href'); + $(this).parents('ul').find('a').removeClass('active'); + $(this).addClass('active'); + $(this).parents('.assistant-tabs').find('.assistant-tab-pane').removeClass('assistant-tab-pane-active'); + $(pane).addClass('assistant-tab-pane-active'); } }); + }); \ No newline at end of file diff --git a/includes/Accordion/assets/js/rrze-accordion.min.js b/includes/Accordion/assets/js/rrze-accordion.min.js index a4a0c6c0..ab20653d 100644 --- a/includes/Accordion/assets/js/rrze-accordion.min.js +++ b/includes/Accordion/assets/js/rrze-accordion.min.js @@ -1,5 +1 @@ -'use strict';const {__,_x,_n,sprintf}=wp.i18n; -jQuery(document).ready(function(c){c(".accordion-body").not(".open, .stayopen").hide();c(".accordion-body.open").each(function(){c(this).closest(".accordion-group").find(".accordion-toggle").first().addClass("active")});c(".accordion").each(function(){const a=c(this),b=a.find(".accordion-group"),d=b.find(".accordion-body.open");b.length===d.length&&a.find("button.expand-all").attr("data-status","open").data("status","open").html(__("Collapse All","rrze-elements"))});c(".accordion-toggle").on("mousedown keydown", -function(a){if("mousedown"===a.type||32===a.keyCode){a.preventDefault();a=c(this);a=a.data("href")||a.attr("href");const d=c(this).data("name");var b=c(a).closest(".accordion-group");const f=b.children(".accordion-body"),g=b.children(".accordion-heading").children(".accordion-toggle"),e=b.siblings();e.children(".accordion-heading").children(".accordion-toggle").removeClass("active");e.children(".accordion-body").not(".accordion-body.stayopen").slideUp();g.toggleClass("active");f.slideToggle();b=b.find(".slick-slider"); -b.length&&b.slick("refresh");window.history.replaceState(null,null,d?"#"+d:a)}});c(".expand-all").on("click",function(){const a=c(this);var b=a.closest(".accordion");const d=b.find(".accordion-body");b=b.find(".accordion-toggle");"open"===a.data("status")?(d.slideUp(),b.removeClass("active"),a.attr("data-status","closed").data("status","closed").html(__("Expand All","rrze-elements"))):(d.slideDown(),b.addClass("active"),a.attr("data-status","open").data("status","open").html(__("Collapse All","rrze-elements")))}); -c(".assistant-tabs-nav a").on("click keydown",function(a){if("click"===a.type||32===a.keyCode){a.preventDefault();a=c(this);const b=a.parents(".assistant-tabs"),d=a.attr("href");a.closest("ul").find("a").removeClass("active");a.addClass("active");b.find(".assistant-tab-pane").removeClass("assistant-tab-pane-active");c(d).addClass("assistant-tab-pane-active")}})}); \ No newline at end of file +jQuery(document).ready(function(a){const{__:o,_x:t,_n:i,sprintf:n}=wp.i18n;function s(o){var t=a(o).closest(".accordion-group"),i=a(o).closest(".accordion").find(".accordion-group").not(t);a(i).children(".accordion-heading").children(" .accordion-toggle").removeClass("active"),a(i).children(".accordion-body").not(".accordion-body.stayopen").slideUp(),a(t).children(".accordion-heading").children(".accordion-toggle").toggleClass("active"),a(t).children(".accordion-body").slideToggle();var n=a(t).find("div.slick-slider");n.length<0&&n.slick("refresh")}function e(o){if(o.closest(".accordion").parent().closest(".accordion-group")){var t=a(o).closest(".accordion-group"),i=a(o).closest(".accordion").find(".accordion-group").not(t);a(i).find(".accordion-toggle").removeClass("active"),a(i).find(".accordion-body").not(".accordion-body.stayopen").slideUp(),a(t).find(".accordion-toggle:first").not(".active").addClass("active"),a(t).find(".accordion-body:first").slideDown(),a(t).parents(".accordion-group").find(".accordion-toggle:first").not(".active").addClass("active"),a(t).parents(".accordion-body").slideDown()}var n=o.offset().top-300;a("html,body").animate({scrollTop:n},"slow")}if(a(".accordion-body").not(".accordion-body.open").not(".accordion-body.stayopen").hide(),a(".accordion-body.open").each(function(){a(this).closest(".accordion-group").find("button.accordion-toggle").first().addClass("active")}),a(".accordion").each(function(){if(a(this).find("button.expand-all").length>0){var t=a(this).find(".accordion-group"),i=a(this).find(".accordion-body.open");t.length==i.length&&a(this).find("button.expand-all").attr("data-status","open").data("status","open").html(o("Collapse All","rrze-elements"))}}),a(".accordion-toggle").on("mousedown",function(o){o.preventDefault();var t=a(this).attr("href"),i=a(this).data("name");s(t),void 0!==i?window.history.replaceState(null,null,"#"+i):window.history.replaceState(null,null,t)}),a(".accordion-toggle").keydown(function(o){if(32==o.keyCode){var t=a(this).attr("href"),i=a(this).data("name");s(t),void 0!==i?window.history.replaceState(null,null,"#"+i):window.history.replaceState(null,null,t)}}),window.location.hash){var c=window.location.hash.split("_")[0],d=window.location.hash.split("_")[1];if("#collapse"==c){if(a.isNumeric(d))var l="collapse_"+d,r=a("body").find("#"+l)}else{var h=window.location.hash.replace("#","");r=a("body").find("div[name="+h+"]")}r.length>0&&e(r)}a("a:not(.prev, .next)").click(function(o){if(a("[id^=accordion-]").length&&!a(this).hasClass("accordion-toggle")&&!a(this).hasClass("accordion-tabs-nav-toggle")){var t=a(this).prop("hash"),i=t.split("_")[0],n=t.split("_")[1];if("#collapse"==i){if(a.isNumeric(n))var s="collapse_"+n,c=a("body").find("#"+s)}else{var d=i.replace("#","");c=a("body").find("div[name="+d+"]")}c&&e(c)}}),a(".expand-all").click(function(t){var i=a(this).closest(".accordion");"open"===a(this).data("status")?(a(i).find(".accordion-body").slideUp(),a(i).find(".accordion-toggle").removeClass("active"),a(this).attr("data-status","closed").data("status","closed").html(o("Expand All","rrze-elements"))):(a(i).find(".accordion-body").slideDown(),a(i).find(".accordion-toggle").addClass("active"),a(this).attr("data-status","open").data("status","open").html(o("Collapse All","rrze-elements")))}),a(".assistant-tabs-nav a").on("click",function(o){o.preventDefault();var t=a(this).attr("href");a(this).parents("ul").find("a").removeClass("active"),a(this).addClass("active"),a(this).parents(".assistant-tabs").find(".assistant-tab-pane").removeClass("assistant-tab-pane-active"),a(t).addClass("assistant-tab-pane-active")}),a(".assistant-tabs-nav a").keydown("click",function(o){if(32==o.keyCode){var t=a(this).attr("href");a(this).parents("ul").find("a").removeClass("active"),a(this).addClass("active"),a(this).parents(".assistant-tabs").find(".assistant-tab-pane").removeClass("assistant-tab-pane-active"),a(t).addClass("assistant-tab-pane-active")}})}); \ No newline at end of file