https://zep-movie.com/js/common.js

1// Calculate scrollbar width and set it as a CSS custom property
2function setScrollbarWidth() {
3  const documentWidth = document.documentElement.clientWidth;
4  const windowWidth = window.innerWidth;
5  const scrollbarWidth = windowWidth - documentWidth;
6  document.documentElement.style.setProperty('--scrollbar-width', scrollbarWidth + 'px');
7}
8
9// Set initial scrollbar width
10setScrollbarWidth();
11
12// Update on resize
13window.addEventListener('resize', setScrollbarWidth);
14
15// Disable links with class="disabled"
16document.addEventListener('DOMContentLoaded', function () {
17  document.querySelectorAll('a.disabled').forEach(function (link) {
18    // Store original href
19    link.setAttribute('data-href', link.getAttribute('href'));
20    // Remove href
21    link.removeAttribute('href');
22    // Add aria attributes
23    link.setAttribute('aria-disabled', 'true');
24    link.setAttribute('tabindex', '-1');
25  });
26});
27
28// Handle all possible events
29document.addEventListener('click', function (e) {
30  if (e.target.closest('a.disabled')) {
31    e.preventDefault();
32    e.stopPropagation();
33    return false;
34  }
35}, true);
36
37document.addEventListener('touchstart', function (e) {
38  if (e.target.closest('a.disabled')) {
39    e.preventDefault();
40    e.stopPropagation();
41    return false;
42  }
43}, true);
44
45document.addEventListener('touchend', function (e) {
46  if (e.target.closest('a.disabled')) {
47    e.preventDefault();
48    e.stopPropagation();
49    return false;
50  }
51}, true);
52
53window.onhashchange = () => {
54  if (window.location.hash === '#page-header') {
55    window.history.replaceState(null, '', window.location.pathname + window.location.search);
56  }
57};
58
59// modals
60document.querySelectorAll('.eventOpen, .trailerOpen').forEach(button => {
61  button.addEventListener('click', function (e) {
62    e.preventDefault();
63    const modalId = this.classList.contains('eventOpen') ? 'eventModal' : 'trailerModal';
64    const modal = document.getElementById(modalId);
65    modal.style.display = 'flex';
66    modal.style.opacity = '1';
67    modal.style.visibility = 'visible';
68
69    // Prevent background scrolling
70    document.body.classList.add('no-scroll');
71
72    setTimeout(() => modal.classList.add('show'), 10);
73  });
74});
75
76function openModal(id) {
77  const modal = document.getElementById(id);
78  modal.classList.add('show');
79  modal.style.display = 'flex';
80  modal.style.opacity = '1';
81  modal.style.visibility = 'visible';
82
83  // Prevent background scrolling
84  document.body.classList.add('no-scroll');
85}
86
87function closeModal(modal) {
88  modal.classList.remove('show');
89  document.body.classList.remove('no-scroll');
90  setTimeout(() => {
91    modal.style.display = 'none';
92    modal.style.opacity = '0';
93    modal.style.visibility = 'hidden';
94    // Clear gallery image source if it's a gallery modal
95    if (modal.id === 'galleryModal') {
96      const galleryImage = modal.querySelector('#galleryImage');
97      if (galleryImage) {
98        galleryImage.src = '';
99      }
100    }
101    // Reset trailer back to the poster facade (stops playback on close)
102    if (modal.id === 'trailerModal') {
103      renderTrailerFacade(activeTrailerId());
104    }
105    // navもモーダルも開いていなければno-scroll解除
106    if (!document.querySelector('nav.open') && document.querySelectorAll('.modal.show').length === 0) {
107      document.body.classList.remove('no-scroll');
108    }
109  }, 300);
110}
111
112document.querySelectorAll('.close').forEach(btn => {
113  btn.addEventListener('click', function () {
114    const modal = this.closest('.modal');
115    closeModal(modal);
116  });
117});
118
119window.addEventListener('click', function (e) {
120  if (e.target.classList.contains('modal')) {
121    closeModal(e.target);
122  }
123});
124
125// Close any open modal with Escape key
126document.addEventListener('keydown', function (e) {
127  if (e.key === 'Escape') {
128    // Find any visible modal
129    const openModal = document.querySelector('.modal[style*="display: flex"]');
130    if (openModal) {
131      closeModal(openModal);
132    }
133  }
134});
135
136// Trailer modal: high-res poster facade + lazy-loaded YouTube iframe
137const TRAILER_DEFAULT_ID = 'trn2S6qk0k0';
138
139// Show a high-res poster (maxres) with a play button; fall back to hqdefault
140// for videos that don't have a maxres thumbnail.
141function renderTrailerFacade(videoId) {
142  const slot = document.getElementById('playerSlot');
143  if (!slot) return;
144  slot.innerHTML =
145    '<div class="video video-facade" data-video="' + videoId + '" role="button" tabindex="0" aria-label="予告編を再生">' +
146    '<img class="video-poster" src="https://img.youtube.com/vi/' + videoId + '/maxresdefault.jpg" ' +
147    'onerror="this.onerror=null;this.src=\'https://img.youtube.com/vi/' + videoId + '/hqdefault.jpg\';" ' +
148    'alt="『レッド・ツェッペリン：ビカミング』予告編サムネイル">' +
149    '<span class="video-play" aria-hidden="true"></span>' +
150    '</div>';
151}
152

153// Swap the facade for an autoplaying iframe of the chosen video.
154function playTrailer(videoId) {
155  const slot = document.getElementById('playerSlot');
156  if (!slot) return;
157  slot.innerHTML =
158    '<iframe id="player" class="video" src="https://www.youtube.com/embed/' + videoId + '?autoplay=1&rel=0" ' +
159    'frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" ' +
160    'allowfullscreen name="player"></iframe>';
161}
162
163function activeTrailerId() {
164  const active = document.querySelector('.video-button.active');
165  return active ? active.getAttribute('data-video') : TRAILER_DEFAULT_ID;
166}
167
168document.addEventListener('DOMContentLoaded', function () {
169  const slot = document.getElementById('playerSlot');
170  if (!slot) return;
171
172  // Click / keyboard on the poster plays the currently active trailer.
173  slot.addEventListener('click', function (e) {
174    if (e.target.closest('.video-facade')) {
175      playTrailer(activeTrailerId());
176    }
177  });
178  slot.addEventListener('keydown', function (e) {
179    if ((e.key === 'Enter' || e.key === ' ') && e.target.closest('.video-facade')) {
180      e.preventDefault();
181      playTrailer(activeTrailerId());
182    }
183  });
184
185  // Trailer-length buttons play that specific video immediately.
186  document.querySelectorAll('.video-button').forEach(button => {
187    button.addEventListener('click', function () {
188      document.querySelectorAll('.video-button').forEach(btn => btn.classList.remove('active'));
189      this.classList.add('active');
190      playTrailer(this.getAttribute('data-video'));
191    });
192  });
193});