https://soporte.decorabano.com/hc/theming_assets/01HZPJTTHKEN506JB5VWC0X2KQ

1/**
2 * Highlighting initialization
3 * @description code styling
4 * @typedef {Object} hljs
5 */
6$(() => {
7  if (window.hljs) {
8    hljs.highlightAll();
9  }
10});
11
12/**
13 * Create lightbox
14 * @description magnificPopup initialization for images and videos
15 */
16$(() => {
17  if ($.magnificPopup) {
18    // Lightbox with images
19    $('.image-with-lightbox').magnificPopup({
20      type: 'image',
21      closeOnContentClick: true,
22      closeBtnInside: false,
23      fixedContentPos: true,
24      mainClass: 'mfp-with-zoom', // class to remove default margin from left and right side
25      image: {
26        verticalFit: true,
27      },
28      zoom: {
29        enabled: true,
30        duration: 300, // don't foget to change the duration also in CSS
31      },
32    });
33
34    // Lightbox with videos
35    $('.image-with-video-icon').magnificPopup({
36      disableOn: 700,
37      type: 'iframe',
38      mainClass: 'mfp-fade',
39      removalDelay: 160,
40      preloader: false,
41      fixedContentPos: false,
42    });
43  }
44});
45
46/**
47 * Accordions
48 */
49$(() => {
50  $('.accordion__item-title').each((index, el) => {
51    const text = $(el).text();
52    const newButtonTag = $('<button>')[0];
53    const parentIndex = $(el).parents('.accordion').index();
54
55    $.each(el.attributes, function () {
56      newButtonTag.setAttribute(this.name, this.value);
57      newButtonTag.setAttribute('aria-expanded', false);
58      newButtonTag.setAttribute('aria-controls', `content-${parentIndex}${index}`);
59    });
60    newButtonTag.innerText = text;
61    $(el).replaceWith(newButtonTag);
62  });
63
64  $('.accordion__item-content').each((index, el) => {
65    const parentIndex = $(el).parents('.accordion').index();
66    $(el).attr('id', `content-${parentIndex}${index}`);
67  });
68
69  $(window.document).on('click', '.accordion__item-title', (e) => {
70    e.preventDefault();
71    const isExpanded = $(e.currentTarget).attr('aria-expanded') === 'true';
72    $(e.currentTarget)
73      .toggleClass('accordion__item-title--active')
74
75      .closest('.accordion__item')
76      .find('.accordion__item-content')
77      .first()
78      .slideToggle();
79    $(e.currentTarget).attr('aria-expanded', !isExpanded);
80  });
81});
82
83/**
84 * Tabs
85 */
86$(() => {
87  const setFocus = function ($tabs, tabIndex) {
88    // undo tab control selected state,
89    // and make them not selectable with the tab key
90    // (all tabs)
91    const $link = $tabs.find('.tabs-link');
92    const $tab = $tabs.find('.tab');
93
94    $link.removeClass('is-active').attr({
95      tabindex: '-1',
96      'aria-selected': 'false',
97    });
98
99    $link.eq(tabIndex).addClass('is-active').attr({
100      tabindex: '0',
101      'aria-selected': 'true',
102    });
103
104    $tab.addClass('is-hidden');
105
106    $tab.eq(tabIndex).removeClass('is-hidden');
107  };
108
109  $('.tabs-menu').each((index, el) => {
110    $(el).attr('role', 'tablist');
111  });
112
113  $('.tabs-link').each((index, el) => {
114    const text = $(el).text();
115    const parentIndex = $(el).parents('.tabs').index();
116    const newLinkTag = $('<a>')[0];
117    $.each(el.attributes, function () {
118      newLinkTag.setAttribute(this.name, this.value);
119      newLinkTag.setAttribute('aria-selected', index === 0);
120      newLinkTag.setAttribute('aria-controls', `content-${parentIndex}${index}`);
121    });
122    newLinkTag.setAttribute('id', `tab-link-${parentIndex}${index}`);
123    newLinkTag.setAttribute('aria-controls', `tab-content-${parentIndex}${index}`);
124    newLinkTag.setAttribute('role', 'tab');
125    newLinkTag.setAttribute('href', `#tab-content-${parentIndex}${index}`);
126    newLinkTag.innerText = text;
127    $(el).replaceWith(newLinkTag);
128  });
129
130  $('.tab').each((index, el) => {
131    const parentIndex = $(el).parents('.tabs').index();
132    $(el)
133      .attr('id', `tab-content-${parentIndex}${index}`)
134      .attr('aria-labelledby', `tab-link-${parentIndex}${index}`)
135      .attr('role', 'tabpanel');
136  });
137
138  $(window.document).on('click', '.tabs-link', (e) => {
139    e.preventDefault();
140    const $link = $(e.currentTarget);
141    const $tabs = $link.parents('.tabs');
142    const tabIndex = $link.index();
143    setFocus($tabs, tabIndex);
144  });
145  $(window.document).on('keydown', '.tabs-link', (e) => {
146    const LEFT_ARROW = 37;
147    const UP_ARROW = 38;
148    const RIGHT_ARROW = 39;
149    const DOWN_ARROW = 40;
150    const $link = $(e.currentTarget);
151
152    const $tabs = $link.parents('.tabs');
153    const $tabLinks = $tabs.find('.tabs-link');
154    let index = $link.index();

155    const k = e.which || e.keyCode;
156
157    // if the key pressed was an arrow key
158    if (k >= LEFT_ARROW && k <= DOWN_ARROW) {
159      // move left one tab for left and up arrows
160      if (k === LEFT_ARROW || k === UP_ARROW) {
161        if (index > 0) {
162          index--;
163        } else {
164          // unless you are on the first tab,
165          // in which case select the last tab.
166          index = $tabLinks.length - 1;
167        }
168        // move right one tab for right and down arrows
169      } else if (k === RIGHT_ARROW || k === DOWN_ARROW) {
170        if (index < $tabLinks.length - 1) {
171          index++;
172        } else {
173          // unless you're at the last tab,
174          // in which case select the first one
175          index = 0;
176        }
177      }
178
179      // trigger a click event on the tab to move to
180      $tabLinks.eq(index).focus();
181      $tabLinks.eq(index).click();
182      e.preventDefault();
183    }
184  });
185});
186
187/**
188 * Fix animated icons
189 */
190$(() => {
191  $('.fa-spin').empty();
192});
193
194/**
195 * Inline SVG
196 * @description replace svg image to inline svg
197 */
198$(() => {
199  function inlineSVG() {
200    $('img.custom-block__image, [data-svg]').each(function () {
201      const $img = $(this);
202      const imgID = $img.attr('id');
203      const imgClass = $img.attr('class');
204      const imgURL = `${$img.attr('src')}?reset`;
205
206      $.get(
207        imgURL,
208        (data) => {
209          // Get the SVG tag, ignore the rest
210          let $svg = $(data).find('svg');
211
212          // Add replaced image's ID to the new SVG
213          if (typeof imgID !== 'undefined') {
214            $svg = $svg.attr('id', imgID);
215          }
216          // Add replaced image's classes to the new SVG
217          if (typeof imgClass !== 'undefined') {
218            $svg = $svg.attr('class', `${imgClass} replaced-svg`);
219          }
220
221          // Remove any invalid XML tags as per http://validator.w3.org
222          $svg = $svg.removeAttr('xmlns:a');
223          $svg.attr('aria-hidden', true);
224          $svg.attr('focusable', false);
225
226          // Replace image with new SVG
227          $img.replaceWith($svg);
228        },
229        'xml',
230      );
231    });
232  }
233  inlineSVG();
234
235  if (window.LS) {
236    setTimeout(inlineSVG, 100);
237  }
238});