https://exawizards.com/wp/wp-content/themes/ew2020/assets/js/ew-footer.js?20260624091059

1/**
2 * initEwFooter
3 * 2023.06.29
4 * 
5 * wordpress template-partsなど、既にDOMが展開されている共通フッタに対して、初期化を行う
6 */
7
8function initEwFooter() {
9
10  // const
11  const EW_FOOTER_CLS = {
12    "footer": "ew-footer",
13
14    "totop": "ew-footerToTop__button",
15    "groupTitle": "ew-footerSitemap__groupTitle--layer0"
16  }
17
18  // element
19  var footer = document.querySelector(`.${EW_FOOTER_CLS.footer}`);
20  if (footer) {
21
22    /* button totop -------------------------------------------------- */
23    var button_totop = document.querySelector(`.${EW_FOOTER_CLS.totop}`);
24    if (button_totop) {
25      button_totop.addEventListener("click", function () {
26        scrollToTop(300);
27      });
28    }
29
30    
31    /* sitemap toggles -------------------------------------------------- */
32    var sitemap_toggles = document.querySelectorAll(`.${EW_FOOTER_CLS.groupTitle}`);
33    if (sitemap_toggles.length > 0) {
34      Array.from(sitemap_toggles).forEach((t) => {
35        t.addEventListener("click", function (e) {
36
37          if (window.innerWidth < 768) {
38            var list = t.nextElementSibling;
39
40            // 開閉
41            const cls_opened = "is-opened";
42            if (t.classList.contains(cls_opened)) {
43              slideUp(list);
44              t.classList.remove(cls_opened);
45            }
46            else {
47              slideDown(list);
48              t.classList.add(cls_opened);
49            }
50
51            // リンク阻止
52            e.preventDefault();
53          }
54        });
55      });
56    }
57  }
58
59
60  /**
61   * Scroll To Top
62   * https://stackoverflow.com/questions/21474678/scrolltop-animation-without-jquery
63   */
64  function scrollToTop(duration) {
65    // cancel if already on top
66    if (document.scrollingElement.scrollTop === 0) return;
67
68    const cosParameter = document.scrollingElement.scrollTop / 2;
69    let scrollCount = 0, oldTimestamp = null;
70
71    function step(newTimestamp) {
72      if (oldTimestamp !== null) {
73        // if duration is 0 scrollCount will be Infinity
74        scrollCount += Math.PI * (newTimestamp - oldTimestamp) / duration;
75        if (scrollCount >= Math.PI) return document.scrollingElement.scrollTop = 0;
76        document.scrollingElement.scrollTop = cosParameter + cosParameter * Math.cos(scrollCount);
77      }
78      oldTimestamp = newTimestamp;
79      window.requestAnimationFrame(step);
80    }
81    window.requestAnimationFrame(step);
82  }
83
84  /**
85   * jQuery slideUp/Down 代替
86   * https://web-dev.tech/front-end/javascript/slide-methods-on-vanilla-javascript/
87   */
88  function slideUp(el, duration = 300) {
89    el.style.height = el.offsetHeight + "px";
90    el.offsetHeight;
91    el.style.transitionProperty = "height, margin, padding";
92    el.style.transitionDuration = duration + "ms";
93    el.style.transitionTimingFunction = "ease";
94    el.style.overflow = "hidden";
95    el.style.height = 0;
96    el.style.paddingTop = 0;
97    el.style.paddingBottom = 0;
98    el.style.marginTop = 0;
99    el.style.marginBottom = 0;
100    setTimeout(() => {
101      el.style.display = "none";
102      el.style.removeProperty("height");
103      el.style.removeProperty("padding-top");
104      el.style.removeProperty("padding-bottom");
105      el.style.removeProperty("margin-top");
106      el.style.removeProperty("margin-bottom");
107      el.style.removeProperty("overflow");
108      el.style.removeProperty("transition-duration");
109      el.style.removeProperty("transition-property");
110      el.style.removeProperty("transition-timing-function");
111    }, duration);
112  }
113
114  function slideDown(el, duration = 300) {
115    el.style.removeProperty("display");
116    let display = window.getComputedStyle(el).display;
117    if (display === "none") {
118      display = "block";
119    }
120    el.style.display = display;
121    let height = el.offsetHeight;
122    el.style.overflow = "hidden";
123    el.style.height = 0;
124    el.style.paddingTop = 0;
125    el.style.paddingBottom = 0;
126    el.style.marginTop = 0;
127    el.style.marginBottom = 0;
128    el.offsetHeight;
129    el.style.transitionProperty = "height, margin, padding";
130    el.style.transitionDuration = duration + "ms";
131    el.style.transitionTimingFunction = "ease";
132    el.style.height = height + "px";
133    el.style.removeProperty("padding-top");
134    el.style.removeProperty("padding-bottom");
135    el.style.removeProperty("margin-top");
136    el.style.removeProperty("margin-bottom");
137    setTimeout(() => {
138      el.style.removeProperty("height");
139      el.style.removeProperty("overflow");
140      el.style.removeProperty("transition-duration");
141      el.style.removeProperty("transition-property");
142      el.style.removeProperty("transition-timing-function");
143    }, duration);
144  }
145}