https://www.subaru.jp/assets/js/modal.min.js?v=20250908

1
2
3document.addEventListener("DOMContentLoaded", () => {
4    function initModal() {
5        const modalOverlay = document.querySelector(".modal-overlay");
6        let modalWin = document.querySelector(".modal-win");
7        const onModal = document.querySelectorAll("[data-action='on_modal']");
8        const modalLastButtons = document.querySelectorAll(".js-modal-last-btm");
9        const offModalButton = document.querySelector('button[data-action="off_modal"]');
10        const onModalOverlay = document.querySelector(".modal-overlay.on-modal");
11        let triggerTargetKeep = {};
12        if (onModal) {
13            onModal.forEach(function (element) {
14                element.addEventListener("click", function () {
15                    if (element.hasAttribute("data-target-modal-win")) {
16                        const t = element.getAttribute("data-target-modal-win");
17                        modalWin = document.querySelector(`.modal-win[data-modal-win-id="${t}"]`);
18                    }
19                    if (modalWin) {
20                        const bcModalMovie = modalWin.querySelector('#bc-movie-modal');
21                        if(bcModalMovie){
22                          const style = bcModalMovie.style;
23                                if (style.opacity === "0") style.opacity = "";
24                                if (style.display === "none") style.display = "";
25                        }
26                    }
27                    triggerTargetKeep = element;
28                    document.body.classList.add("modal-open");
29                    const modalType = element.getAttribute("data-modal-type");
30                    const modalArea = document.querySelector(`[data-area='${modalType}']`);
31                    if (modalArea.classList.contains("on-modal")) document.body.classList.add("on-modal-open");
32                    const modalLink = element.getAttribute("data-modal-link");
33                    if (modalArea === null) {
34                        console.error("対応するdata-areaが存在しません");
35                        return;
36                    }
37                    modalArea.classList.remove("hide");
38                    switch (modalType) {
39                        case "img":
40                            let imgSrc = element.querySelector("img").src;
41                            modalArea.innerHTML = `<div class="modal-overlay-inner"></div><img loading="lazy" src="${imgSrc}" alt="${element.dataset.modalAlt}">`;
42                            modalWin.classList.add("img-modal-win");
43                            modalWin.classList.remove("win-large");
44                            const modalOverlayInner = document.querySelector(".modal-win-body .modal-overlay-inner");
45                            modalOverlayInner.addEventListener("click", function () {
46                                modalClose();
47                            });
48                            if (modalOverlayInner)
49                                onModalOverlay?.addEventListener("click", function () {
50                                    modalClose();
51                                });
52                            break;
53                        case "car_selecter":
54                            const modalSelectCarinfo = document.getElementById("modal_select_carinfo");
55                            const radios = modalSelectCarinfo.querySelectorAll('input[type="radio"]');
56                            radios.forEach((radio) => {
57                                radio.disabled = !1;
58                                radio.parentElement.classList.remove("disabled");
59                            });
60                            const carId = element.getAttribute("data-car-id");
61                            const carType = element.getAttribute("data-car-type");
62                            const radioCurCarId = document.getElementById(carId);
63                            radioCurCarId.checked = !0;
64                            const urlParams = new URLSearchParams(window.location.search);
65                            if (carType === "base") {

66                                const targetCar = urlParams.get("target_car");
67                                const targetCarRadio = document.getElementById(targetCar);
68                                targetCarRadio.setAttribute("disabled", "true");
69                                targetCarRadio.parentElement.classList.add("disabled");
70                            } else {
71                                const baseCar = urlParams.get("base_car");
72                                const baseCarRadio = document.getElementById(baseCar);
73                                baseCarRadio.setAttribute("disabled", "true");
74                                baseCarRadio.parentElement.classList.add("disabled");
75                            }
76                            break;
77                        case "car_filter":
78                            break;
79                        case "accessory":
80                            document.querySelectorAll(".accessory-modal-box").forEach(function (box) {
81                                box.classList.add("hide");
82                            });
83                            var targetBox = document.querySelector(`.accessory-modal-box[data-box='${modalLink}']`);
84                            if (targetBox) {
85                                targetBox.classList.remove("hide");
86                            }
87                            break;
88                        case "cmn_modal_selecter":
89                            const modalId = element.getAttribute("data-modal-id");
90                            var targetBox = document.querySelector(`.accessory-modal-box[data-box='${modalId}']`);
91                            if (targetBox) {
92                                targetBox.classList.remove("hide");
93                            }
94                            break;
95                        default:
96                            break;
97                    }
98                    const modalGroup = modalArea.getAttribute("data-modal-group");
99                    switch (modalGroup) {
100                        case "accessory-box":
101                            modalWin.classList.add("show");
102                            if (window.innerHeight - 80 > modalArea.querySelector(".modal-win-main")?.offsetHeight) {
103                                modalWin.classList.add("ver-ht-auto", "is-ht-auto");
104                            }
105                            break;
106                        case "autoHt-group-cmn":
107                            modalWin.classList.add("show");
108                            if (window.innerHeight - 80 > modalArea.querySelector(".modal-win-main")?.offsetHeight) {
109                                modalWin.classList.add("ver-ht-auto", "is-ht-auto");
110                            }
111                            break;
112                        default:
113                            modalWin.classList.remove("is-ht-auto");
114                            break;
115                    }
116                    modalOverlay.classList.add("show");
117                    if (document.body.classList.contains("on-modal-open")) {
118                        onModalOverlay.classList.add("show");
119                        const dataModalType = element.getAttribute("data-modal-type");
120                        const iframe = document.querySelector(`[data-area="${dataModalType}"]`)?.querySelector(".js-onmodal-iframe");
121                        if (iframe) {
122                            const src = iframe.getAttribute("src");
123                            iframe.setAttribute("src", `${src}&autoplay=true`);
124                        }
125                        modalWin.classList.remove("ver-ht-auto");
126                    }
127                    modalWin.classList.add("show");
128                    offModalButton.focus();
129                });
130            });
131        }
132        document.querySelectorAll("[data-action='off_modal']").forEach(function (element) {
133            element.addEventListener("click", function () {
134                modalClose();
135            });
136            element.addEventListener("keydown", function (event) {
137                if (event.key === "Enter") {
138                    event.preventDefault();
139                    modalClose();
140                    triggerTargetKeep.focus();
141                }
142            });
143        });
144        modalOverlay.addEventListener("click", function () {
145            modalClose();
146        });
147        if (onModalOverlay)
148            onModalOverlay.addEventListener("click", function () {
149                modalClose();
150            });
151        document.addEventListener("keydown", function (event) {
152            if (event.key === "Escape") {
153                const modal = document.querySelector(".modal-overlay.show");
154                if (modal) {
155                    modalClose();
156                }
157            }
158        });
159        function modalClose() {
160            try {
161                const allPlayers = videojs.getAllPlayers();
162                

163                allPlayers.forEach((player) => {
164                    if (player && !player.paused()) {
165                        player.pause();
166                    }
167                });
168            } catch (e) {
169                console.warn('Brightcoveプレイヤーの取得中にエラーが発生しました:', e);
170            }
171            
172            const modalWinBodies = document.querySelectorAll(".modal-win-body");
173            if (document.body.classList.contains("on-modal-open")) {
174                document.body.classList.remove("on-modal-open");
175                const onModals = document.querySelectorAll(".modal-win-body.with-mask.on-modal");
176                onModals.forEach((onModal) => onModal.classList.add("hide"));
177                onModalOverlay.classList.remove("show");
178                if (modalWin.classList.contains("is-ht-auto")) modalWin.classList.add("ver-ht-auto");
179                const hideModalBodies = Array.from(modalWinBodies).filter((modalWinBody) => modalWinBody.classList.contains("hide"));
180                if (hideModalBodies.length === modalWinBodies.length) {
181                    modalOverlay.classList.remove("show");
182                    modalWin.classList.remove("ver-ht-auto", "show");
183                    document.body.classList.remove("modal-open");
184                }
185            } else {
186                document.body.classList.remove("modal-open");
187                modalWinBodies.forEach((e) => e.classList.add("hide"));
188                modalWin.classList.remove("img-modal-win");
189                modalOverlay.classList.remove("show");
190                modalWin.classList.remove("ver-ht-auto");
191                modalWin.classList.remove("show");
192            }
193        }
194        modalLastButtons.forEach((modalLastButton) => {
195            modalLastButton?.addEventListener("keydown", (event) => {
196                if (event.key === "Tab" && !event.shiftKey) {
197                    event.preventDefault();
198                    offModalButton?.focus();
199                }
200            });
201        });
202        offModalButton?.addEventListener("keydown", (event) => {
203            if (event.key === "Tab" && event.shiftKey) {
204                event.preventDefault();
205                modalLastButton.focus();
206            }
207            if (event.key === "Tab" && !event.shiftKey) {
208                const visibleModalWinBody = document.querySelector(".modal-win-body:not(.hide)");
209                const focusableSelectors = ["a[href]", "button", "input", "textarea", "select", "details", '[tabindex]:not([tabindex="-1"])'];
210                const focusableElements = visibleModalWinBody.querySelectorAll(focusableSelectors.join(", "));
211                if (focusableElements.length === 0) {
212                    event.preventDefault();
213                    return;
214                }
215            }
216        });
217        const resultBtn = document.querySelector(".js-result-btn");
218        if (resultBtn)
219            resultBtn.addEventListener("click", () => {
220                modalClose();
221            });
222    }
223    initModal();
224    window.initModal = initModal;
225});
226
227