https://shinhan.co.id/wp-content/cache/speedycache/shinhan.co.id/assets/9b45a54c76fc10c9-group-accordion.js

1const isPro = !!aagb_local_object.licensing;
2(function ($){
3const iconToggleMap=new Map([
4['dashicons-plus-alt2', 'dashicons-minus'],
5['dashicons-minus', 'dashicons-plus-alt2'],
6['dashicons-arrow-down-alt2', 'dashicons-arrow-up-alt2'],
7['dashicons-arrow-up-alt2', 'dashicons-arrow-down-alt2'],
8['dashicons-arrow-down', 'dashicons-arrow-up'],
9['dashicons-arrow-up', 'dashicons-arrow-down'],
10['dashicons-plus-alt', 'dashicons-dismiss'],
11['dashicons-dismiss', 'dashicons-plus-alt'],
12['dashicons-insert', 'dashicons-remove'],
13['dashicons-remove', 'dashicons-insert'],
14]);
15function toggleIcon(element, target=['expand', 'collapse'][0]){
16const $icon=$(element);
17const classList=$icon.attr('class')?.split(/\s+/)||[];
18for (const cls of classList){
19for (const [collapsedCls, expandedCls] of iconToggleMap){
20if(collapsedCls===cls||expandedCls===cls){
21const targetCls={
22expand: collapsedCls,
23collapse: expandedCls,
24}[target];
25$icon.removeClass(cls);
26$icon.addClass(targetCls);
27return;
28}}
29}}
30function stickToTheSamePlace($accordion, stopAfter=500){
31if(window.innerWidth >=756) return;
32const accordionPosition =
33$accordion[0]?.getBoundingClientRect().top||0;
34const intervalId=setInterval(()=> {
35const accordionOffset=$accordion.offset().top;
36const scrollTo=accordionOffset - accordionPosition;
37window.scrollTo({ top: scrollTo });
38}, 5);
39setTimeout(()=> {
40clearInterval(intervalId);
41}, stopAfter);
42}
43const $groupAccordions=$('.wp-block-aab-group-accordion');
44$groupAccordions.each(function (){
45const $groupAccordion=$(this);
46const autoPlay=isPro&&$groupAccordion.hasClass("autoplay");
47const $accordions=$groupAccordion.find('> .wp-block-aab-accordion-item'
48);
49let autoPlaySpeed=$accordions.data('duration');
50if(!(autoPlaySpeed >

50 0)){
51autoPlaySpeed=3000;
52}
53const Vertical=$accordions.data('progress-bar-direction');
54const progressBarOn=isPro&&$accordions.data('progress-bar-on');
55const autoPlayWithProgressBar=isPro&&autoPlay&&progressBarOn;
56const hasNextPrevious=$groupAccordion.hasClass('aab-next-previous-enabled');
57let currentIndex=0;
58let interval;
59const $accordionHeads=$accordions.find('> .aagb__accordion_head');
60const $accordionIcons=$accordionHeads.find('.aagb__icon');
61const $accordionBodies=$accordions.find('> .aagb__accordion_body');
62const activatorEvent=$groupAccordion.hasClass('hover')
63? 'mouseenter'
64: 'click';
65function resetAll(){
66$accordions.removeClass('aagb__accordion_active');
67$accordionHeads.removeClass('active');
68$accordionBodies
69.removeClass('aagb__accordion_body--show')
70.stop(true, true)
71.slideUp();
72if(autoPlayWithProgressBar){
73$accordions
74.find('.aab-progress-bar')
75.stop(true, true)
76.css({ width: '0%' });
77}
78$accordionIcons.each(function (){
79toggleIcon($(this), 'expand');
80});
81}
82function activateAccordion($accordion, index){
83const $head=$accordion.find('> .aagb__accordion_head');
84const $body=$accordion.find('> .aagb__accordion_body');
85const $icon=$head.find('.aagb__icon');
86resetAll();
87$accordion.addClass('aagb__accordion_active');
88$head.addClass('active');
89$body.addClass('aagb__accordion_body--show').slideDown();
90toggleIcon($icon, 'collapse');
91const imageUrl=$accordion.data('feature-image-url');
92const $accordionContainerClass=$accordion.closest('.aagb__group_accordion_container');
93const $featureImg=$($accordionContainerClass).find('.aab-feature-img');
94if(imageUrl){
95$accordionContainerClass.addClass('has_img');
96$featureImg.show();
97$featureImg.removeAttr('hidden');
98$featureImg.find('img').attr('src', imageUrl);
99}else{
100$featureImg.hide();
101$featureImg.find('img').attr('src', '');
102}
103if(autoPlayWithProgressBar){
104const $progress=$accordion.find('.aab-progress-bar');
105const isVertical=Vertical==='vertical';
106if(isVertical){
107$progress
108.stop(true, true)
109.css({ height: '0%', width: '100%', top: '0' })
110.animate({ height: '100%' }, autoPlaySpeed, 'linear');
111}else{
112$progress
113.stop(true, true)
114.css({ width: '0%', height: '100%', left: '0' })
115.animate({ width: '100%' }, autoPlaySpeed, 'linear');
116}}
117currentIndex=index;
118}
119function startAutoplay(){
120activateAccordion($accordions.eq(currentIndex), currentIndex);
121interval=setInterval(function (){
122currentIndex=(currentIndex + 1) % $accordions.length;
123activateAccordion($accordions.eq(currentIndex), currentIndex);
124}, autoPlaySpeed);
125}
126$accordionBodies.each(function (){
127const $body=$(this);
128if($body.hasClass('aagb__accordion_body--show')){
129$body.slideDown();
130const imageUrl=$accordions.data('feature-image-url');
131const $accordionContainerClass=$accordions.closest('.aagb__group_accordion_container');
132const $featureImg=$($accordionContainerClass).find('.aab-feature-img');
133if(imageUrl){
134$accordionContainerClass.addClass('has_img');
135$featureImg.show();
136$featureImg.removeAttr('hidden');
137$featureImg.find('img').attr('src', imageUrl);
138}else{
139$featureImg.hide();
140$featureImg.find('img').attr('src', '');
141}}
142});
143if(hasNextPrevious){
144const hasActiveAccordion=$accordions.hasClass('aagb__accordion_active');
145if(!hasActiveAccordion){
146activateAccordion($accordions.eq(0), 0);
147}}
148$accordionHeads.on(activatorEvent, function (){
149const $head=$(this);
150const $accordion=$head.parent();
151const index=$accordions.index($accordion);
152const isActive=$accordion.hasClass('aagb__accordion_active');
153if(isActive){
154resetAll();
155if(autoPlay) clearInterval(interval);
156}else{
157activateAccordion($accordion, index);
158if(autoPlay){
159clearInterval(interval);
160startAutoplay();
161}}
162updateButtonState($groupAccordion);
163});
164$accordions.each(function (index){
165const $accordion=$(this);
166$accordion.addClass('aagb__accordion_head--keyboard');
167$accordion.on('keydown', function (e){
168if(!$(document.activeElement).is($accordion)) return;
169if(e.code==='Enter'||e.code==='Space'){
170e.preventDefault();
171$accordion
172.find('> .aagb__accordion_head')
173.trigger(activatorEvent);
174}else if(/^Arrow(Up|Down|Left|Right)$/.test(e.code)){
175e.preventDefault();
176const nextIndex =
177index +
178{
179ArrowUp: -1,
180ArrowLeft: -1,
181ArrowDown: +1,
182ArrowRight: +1,
183}[e.code];
184const $next=$accordions.eq(nextIndex);
185if($next.length) $next.focus();
186}else if(e.code==='Home'){
187e.preventDefault();
188$accordions.first().focus();
189}else if(e.code==='End'){
190e.preventDefault();
191$accordions.last().focus();
192}});
193});

194if(autoPlay){
195startAutoplay();
196}else{
197$groupAccordion.find('.aab-progress-bar').remove();
198}});
199$('.content-accordion__show-all').on('click', function (e){
200e.preventDefault();
201var $this=$(this);
202var targetAccordion=$('.' + $this.data('opentarget'));
203targetAccordion.find('.aagb__accordion_body')
204.addClass('aagb__accordion_body--show')
205.slideDown();
206targetAccordion.find('.panel').addClass('aagb__accordion_active');
207targetAccordion.find('.hasSubHeading').addClass('active');
208const $icon=targetAccordion.find('.aagb__accordion_heading .aagb__icon');
209updateIcon($icon, 'open');
210$this.hide();
211$this.siblings('.content-accordion__close-all').show();
212});
213$('.content-accordion__close-all').on('click', function (e){
214e.preventDefault();
215var $this=$(this);
216var targetAccordion=$('.' + $this.data('closetarget'));
217targetAccordion.find('.aagb__accordion_body')
218.removeClass('aagb__accordion_body--show')
219.slideUp();
220targetAccordion.find('.panel').removeClass('aagb__accordion_active');
221targetAccordion.find('.hasSubHeading').removeClass('active');
222const $icon=targetAccordion.find('.aagb__accordion_heading .aagb__icon');
223updateIcon($icon, 'close');
224$this.hide();
225$this.siblings('.content-accordion__show-all').show();
226});
227$('.content-accordion__close-all').hide();
228function updateIcon($icon, action){
229$icon.each(function (){
230const $el=$(this);
231if(action==='open'){
232if($el.hasClass('dashicons-plus-alt2')){
233$el.removeClass('dashicons-plus-alt2').addClass('dashicons-minus');
234}else if($el.hasClass('dashicons-arrow-down-alt2')){
235$el.removeClass('dashicons-arrow-down-alt2').addClass('dashicons-arrow-up-alt2');
236}else if($el.hasClass('dashicons-arrow-down')){
237$el.removeClass('dashicons-arrow-down').addClass('dashicons-arrow-up');
238}else if($el.hasClass('dashicons-plus-alt')){
239$el.removeClass('dashicons-plus-alt').addClass('dashicons-dismiss');
240}else if($el.hasClass('dashicons-insert')){
241$el.removeClass('dashicons-insert').addClass('dashicons-remove');
242}}else{
243if($el.hasClass('dashicons-minus')){
244$el.removeClass('dashicons-minus').addClass('dashicons-plus-alt2');
245}else if($el.hasClass('dashicons-arrow-up-alt2')){
246$el.removeClass('dashicons-arrow-up-alt2').addClass('dashicons-arrow-down-alt2');
247}else if($el.hasClass('dashicons-arrow-up')){
248$el.removeClass('dashicons-arrow-up').addClass('dashicons-arrow-down');
249}else if($el.hasClass('dashicons-dismiss')){
250$el.removeClass('dashicons-dismiss').addClass('dashicons-plus-alt');
251}else if($el.hasClass('dashicons-remove')){
252$el.removeClass('dashicons-remove').addClass('dashicons-insert');
253}}
254});
255}
256$('.noEnterSubmit').keypress(function (e){
257if(e.which==13)
258e.preventDefault();
259});
260const accordionItemsChecklist=$('.aagb__accordion_container.check-list');
261if(accordionItemsChecklist.length){
262$.each(accordionItemsChecklist, function (index, item){
263const accordionHeading=$(item)
264.children('.aagb__accordion_head')
265.find('.aagb__accordion_heading');
266accordionHeading.prepend("<input type='checkbox' class='checklist-box'></input>"
267);
268});
269}
270const iconCls={
271next: 'aagb-accordion-next-icon',
272previous: 'aagb-accordion-previous-icon',
273};
274$('.aagb-accordion-next-previous').on('click', `.${iconCls.previous}, .${iconCls.next}`, function(){
275const $this=$(this);
276console.log('Next Previous Clicked');
277const parentItem=$this.closest('.wp-block-aab-group-accordion');
278const activatorEvent=parentItem.hasClass('hover')
279? 'mouseenter'
280: 'click';
281let currentItem=parentItem.find('.wp-block-aab-accordion-item.aagb__accordion_active'
282);
283let targetItem=currentItem.next('.wp-block-aab-accordion-item');
284if($this.hasClass(iconCls.previous)){
285targetItem=currentItem.prev('.wp-block-aab-accordion-item');
286}
287targetItem.find('.aagb__accordion_head').trigger(activatorEvent);
288})
289$('.wp-block-aab-group-accordion').each(function(){
290const parentItem=$(this);
291updateButtonState(parentItem);
292});
293function updateButtonState(parentItem){
294let activeItem=parentItem.find('.wp-block-aab-accordion-item.aagb__accordion_active'
295);
296let allItems=parentItem.find('.wp-block-aab-accordion-item');
297let currentIndex=allItems.index(activeItem);
298let prevBtn=parentItem.find('.aagb-accordion-previous-icon');
299let nextBtn=parentItem.find('.aagb-accordion-next-icon');
300const nextPrevBtn=parentItem.find('.aagb-accordion-next-previous');
301prevBtn.removeClass('aagb_disabled');
302nextBtn.removeClass('aagb_disabled');
303if(activeItem.length===0){
304nextPrevBtn.hide();
305return;
306}
307nextPrevBtn.show();
308if(currentIndex===0){
309prevBtn.addClass('aagb_disabled');
310}else if(currentIndex===allItems.length - 1){
311nextBtn.addClass('aagb_disabled');
312}}
313})(jQuery);