https://www.andperse.com/public/assets/js/shared.js?d=20260910

1import Page from "./modules/page.js";
2import Accordion from "./modules/accordion.js";
3import Modal from "./modules/modal.v2.js";
4import { animate, createElement, scrollAddClass } from "./modules/utility.js";
5
6const pg = new Page();
7
8const LayoutWrapper = document.querySelector(".l-wrapper");
9
10function setupPageHeader() {
11  if (window.scrollY > 270) {
12    LayoutWrapper.classList.add("is-header-fixed");
13  } else {
14    LayoutWrapper.classList.remove("is-header-fixed");
15  }
16}
17
18class AnnouncementBar {
19  constructor() {
20    this.$base = document.querySelector(".c-announcement-bar");
21    if (!this.$base) return;
22
23    this.language = document.querySelector("html").dataset.path;
24    this.srcUrl = `${location.origin}/public/data/announce-bar-${this.language}.json`;
25
26    this.init();
27  }
28
29  init() {
30    this.generateSlider()
31      .then((result) => {
32        if (!result) return;
33        this.$base.append(result);
34        LayoutWrapper.classList.add("has-header-caution");
35      })
36      .then(() => {
37        this.swiper = new Swiper(".c-announcement-bar .swiper", {
38          loop: true,
39          autoplay: {
40            delay: 4000,
41          },
42          on: {
43            init: (swiper) => {
44              // console.log(swiper);
45              if (swiper.slides.length <= 3) {
46                // swiper.destroy()
47              }
48            },
49          },
50        });
51      });
52  }
53
54  async getShopifySlides() {
55    try {
56      const response = await fetch(this.srcUrl);
57      if (!response.ok) throw new Error("JSONファイルが見つかりません");
58
59      const data = await response.json();
60      if (!data.header) return;
61
62      const tmpDir = document.createElement("div");
63      tmpDir.innerHTML = data.header;
64
65      const result = tmpDir.querySelectorAll(".announcement-slider__slide");
66
67      return result;
68    } catch (error) {
69      console.log(error.message);
70    }
71  }
72
73  async generateSlider() {

74    const slides = await this.getShopifySlides();
75
76    const container = createElement("div", {
77      class: "swiper swiper-container",
78    });
79    const wrapper = createElement("div", {
80      class: "swiper-wrapper",
81    });
82
83    if (slides && slides.length < 1) {
84      [...slides].map((slide, i) => {
85        let slideHtml = slide.innerHTML;
86        const match = slideHtml.match(/href="\/(.*?)"/);
87
88        if (/href="\/(.*?)"/.test(slideHtml)) {
89          slideHtml = slideHtml.replace(
90            'href="/',
91            `href="${ONLINE_STORE_TOP}/`
92          );
93        }
94        slide.innerHTML = slideHtml;
95
96        slide.setAttribute("class", "swiper-slide");
97        slide.setAttribute("id", "");
98        wrapper.append(slide);
99      });
100      container.append(wrapper);
101
102      return container;
103    }
104  }
105}
106
107function setupAnchorTarget() {
108  const anchorAll = document.querySelectorAll("a");
109
110  anchorAll.forEach(anchor => {
111    if(anchor.hostname !== location.hostname) {
112      anchor.target = "_blank";
113    }
114  })
115}
116
117function setupAnnouncementSwiper() {
118  const containerAll = document.querySelectorAll(".c-announcement-bar");
119
120  if (containerAll.length < 1) return;
121
122  containerAll.forEach((container) => {
123    const slideAll = container.querySelectorAll(".swiper-slide");
124
125    if (slideAll.length > 1) {
126      const swiper = new Swiper(container, {
127        autoplay: true,
128        loop: true,
129      });
130    }
131  });
132}
133
134const setupSpNavi = () => {
135  const $base = document.querySelector(".c-sp-navi");
136  const allItems = $base?.querySelectorAll(`.c-sp-navi__items`);
137  const allChildren = $base?.querySelectorAll(`.c-sp-navi__children`);
138
139  allItems?.forEach((items, i) => {
140    items.previousElementSibling.classList.add("has-child");
141  });
142  allChildren?.forEach((children, i) => {
143    children.parentNode.classList.add("has-child");
144  });
145};
146
147const autoCompleteImgAlt = () => {
148  const allImg = document.querySelectorAll("img");
149
150  allImg.forEach((img, i) => {
151    let alt = img.getAttribute("alt");
152    if (alt === "") {
153      let src = img.getAttribute("src");
154      if (!src) return;
155      let filepath = src.match(/(.*)\/(.*?)\.(jpe?g|png|gif|svg)$/);
156      if (!filepath) return;
157      let filename = `${filepath[2]}`;
158      let newAlt = filename.replace("@pc", "");
159      newAlt = newAlt.replace(/\@(pc|sp|2x)/g, "");
160      newAlt = newAlt.replace(/(-|_)/g, " ");
161      img.setAttribute("alt", newAlt);
162      // console.log(newAlt);
163    } else {
164      // console.log(alt);
165    }
166  });
167};
168
169function setupAccordion() {
170  const onlineStoreAccordion = new Accordion(".c-menu", {
171    wrapperEl: ".c-menu__items",
172    itemEl: ".c-menu__item",
173    triggerEl: ".c-menu__link",
174    targetEl: ".c-menu-lv1",
175  });
176  const drawerMenuAccordion = new Accordion(".c-drawer-menu", {
177    wrapperEl: ".c-drawer-menu__items",
178    itemEl: ".c-drawer-menu__item",
179    triggerEl: ".c-drawer-menu__link",
180    targetEl: ".c-drawer-menu-lv1",
181  });
182  const spNaviAccordion = new Accordion(".c-sp-navi__cell", {
183    triggerEl: ".c-sp-navi__title",
184    targetEl: ".c-sp-navi__items",
185  });
186
187  const spNaviChildrenAccordion = new Accordion(".c-sp-navi__item", {
188    triggerEl: ".c-sp-navi__item >span",
189    targetEl: ".c-sp-navi__children",
190  });
191
192  const footerNaviAccordion = new Accordion(".p-footer-navi");
193}
194
195function setupApsHover() {
196  const containerAll = document.querySelectorAll(".js-aps-hover");
197
198  containerAll.forEach((container) => {
199    const img = container.querySelector("img");
200    const imgWrapper = img.closest("div");
201
202    const borderInline = createElement("div", {
203      class: "js-aps-hover-inline",
204    });
205    const borderBlock = createElement("div", {
206      class: "js-aps-hover-block",
207    });
208
209    imgWrapper.append(borderInline);
210    imgWrapper.append(borderBlock);
211
212    imgWrapper.style.position = "relative";
213  });
214}
215
216// {
217//   const modal = new Modal("#LayoutPlainModal", {
218//     appendTo: ".l-wrapper",
219//     template: `<div class="l-modal__container"><div class="l-modal__content"><div class="l-modal__close"></div></div></div>`,
220//   });
221
222//   const instaModalTrigger = document.getElementById("FooterSns__Instagram");
223//   const instagramAccounts = document.getElementById("InstagramAccounts");
224
225//   instaModalTrigger &&
226//     instaModalTrigger.addEventListener("click", (e) => {
227//       new Promise((res, rej) => {
228//         modal.$el.content.append(instagramAccounts);
229//         res();
230//       }).then(() => {
231//         modal.open();
232//       });
233//     });
234// }
235
236//=====================
237
238const handleWindowReady = () => {
239  setupSpNavi();
240  autoCompleteImgAlt();
241  setupAccordion();
242  setupAnnouncementSwiper();
243  setupApsHover();
244  setupAnchorTarget();
245};
246const handleWindowLoad = () => {
247  setupPageHeader();
248  scrollAddClass(".c-image");
249};
250const handleWindowResize = () => {
251  setupPageHeader();
252};
253const handleWindowScroll = () => {
254  setupPageHeader();
255  scrollAddClass(".c-image");
256};
257
258window.addEventListener("DOMContentLoaded", handleWindowReady);
259window.addEventListener("load", handleWindowLoad);
260window.addEventListener("resize", handleWindowResize);
261window.addEventListener("scroll", handleWindowScroll);