https://www.kyoto-station-building.co.jp/app/themes/kyoto-station-…/common/js/modal.js?ver=20260924-2115

1const MODAL_MANAGER = {
2  modal_class: 'is_modal',
3  hidden_class: 'is_hidden',
4  scrollbarWidth: window.innerWidth - document.body.scrollWidth
5};
6
7MODAL_MANAGER.waitDialogAnimation = async (dialog) => {
8  return Promise.allSettled(
9    Array.from(dialog.getAnimations()).map(animation => animation.finished)
10  );
11}
12
13MODAL_MANAGER.openModal = (el) => {
14  let data_open_modal = el.dataset.openModal;
15  for (let i = 0; i < MODAL_MANAGER.dom_modal.length; i++) {
16    let data_target_modal = MODAL_MANAGER.dom_modal[i].dataset.targetModal;
17    if (data_open_modal == data_target_modal) {
18      MODAL_MANAGER.dom_body.classList.add(MODAL_MANAGER.modal_class);
19      MODAL_MANAGER.dom_modal[i].classList.remove(MODAL_MANAGER.hidden_class);
20      MODAL_MANAGER.dom_body.style.paddingRight = MODAL_MANAGER.scrollbarWidth + 'px';
21      if (el.dataset.iframePath) {
22        let iframe_path = el.dataset.iframePath;
23        MODAL_MANAGER.dom_modal[i].querySelector('iframe').contentWindow.location.replace(iframe_path);
24      }
25      MODAL_MANAGER.dom_modal[i].showModal();
26      MODAL_MANAGER.dom_modal[i].scrollTo(0, 0);
27    }
28  }
29}
30
31MODAL_MANAGER.closeModal = () => {
32  let dom_target_modal = document.querySelector('dialog[open]');
33  MODAL_MANAGER.dom_body.classList.remove(MODAL_MANAGER.modal_class);
34  dom_target_modal.close();
35}
36
37MODAL_MANAGER.onModalCancel = () => {
38  MODAL_MANAGER.dom_body.classList.remove(MODAL_MANAGER.modal_class);
39}
40
41MODAL_MANAGER.onModalClick = (el, e) => {
42  let dom_target_modal = el.closest('dialog');
43  if (!e.target.closest('dialog .container_area')) {
44    MODAL_MANAGER.dom_body.classList.remove(MODAL_MANAGER.modal_class);
45    dom_target_modal.close();
46  }
47}
48
49MODAL_MANAGER.onModalClose = async (el) => {
50  MODAL_MANAGER.dom_body.style.paddingRight = '';
51  await MODAL_MANAGER.waitDialogAnimation(el);
52  el.classList.add(MODAL_MANAGER.hidden_class);
53}
54
55MODAL_MANAGER.on = (selecters, event, callback) => {
56  if (event == 'scroll') {
57    document.querySelector(selecters).addEventListener('scroll', (e) => {
58      let el = e.target;
59      let cel = e.target;
60      callback(el, cel, e)
61    });
62  } else {
63    document.addEventListener(event, (e) => {
64      let el = e.target;
65      let cel = e.target;
66      while (el && el !== document) {
67        if (el.matches(selecters)) {
68          callback(el, cel, e);
69          break;
70        }
71        el = el.parentNode;
72      }
73    }, false);
74  }
75}
76
77MODAL_MANAGER.setDomElements = () => {
78  MODAL_MANAGER.dom_modal = document.querySelectorAll('dialog');
79  MODAL_MANAGER.dom_body = document.body;
80}
81
82MODAL_MANAGER.setUiEvent = () => {
83  MODAL_MANAGER.on('[data-modal="open_button"]', 'click', (el) => {
84    MODAL_MANAGER.openModal(el);
85  })
86  MODAL_MANAGER.on('[data-modal="close_button"]', 'click', () => {
87    MODAL_MANAGER.closeModal();
88  })
89  MODAL_MANAGER.on('dialog', 'click', (el, cel, e) => {
90    MODAL_MANAGER.onModalClick(el, e);
91  })
92  for (let i = 0; i < MODAL_MANAGER.dom_modal.length; i++) {
93    MODAL_MANAGER.dom_modal[i].addEventListener('cancel', () => MODAL_MANAGER.onModalCancel());
94    MODAL_MANAGER.dom_modal[i].addEventListener('close', () => MODAL_MANAGER.onModalClose(MODAL_MANAGER.dom_modal[i]));
95  }
96}
97
98MODAL_MANAGER.init = () => {
99  MODAL_MANAGER.setDomElements();
100  MODAL_MANAGER.setUiEvent();
101}
102
103MODAL_MANAGER.init();
104
105
106
107//snsƒƒjƒ…[ 
108
109const modalButtons02 = document.querySelectorAll('.sns-js-modal-button');
110const modals02 = document.querySelectorAll('.sns-js-modal');
111const closeButtons02 = document.querySelectorAll('.js-close-button');
112
113// function setHeight() {
114//   let vh = window.innerHeight * 0.01;
115//   document.documentElement.style.setProperty("--vh", `${vh}px`);
116// }
117
118// setHeight();
119// window.addEventListener("resize", setHeight);
120
121modalButtons02.forEach((button) => {
122  button.addEventListener('click', () => {
123    const targetModalId02 = button.getAttribute('data-target');
124    const targetModal02 = document.getElementById(targetModalId02);
125
126    if (targetModal02) {
127      targetModal02.classList.add('is-open');
128      document.body.classList.add('is-open');
129
130      // if (window.innerWidth <= 768) {
131      //   targetModal.querySelector('.modal__content').style.maxHight = `calc(var(--vh,1vh) * 70)`;
132      // }
133    }
134  });
135});
136
137closeButtons02.forEach((button) => {
138  button.addEventListener('click', () => {
139    const modal02 = button.closest('.sns-js-modal');
140    modal02.classList.remove('is-open');
141    document.body.classList.remove('is-open');
142  });
143});
144
145modals02.forEach((modal02) => {
146  modal02.addEventListener('click', (event) => {
147    if (event.target === modal02) {
148      modal02.classList.remove('is-open');
149      document.body.classList.remove('is-open');
150    }
151  });
152});