https://www.ccc.co.jp/assets/common/js/component.js

1
2
3	
4
5function module_initialize(){
6
7	const main = document.querySelector(".l-module"); // `main` 要素を取得
8
9  // `wrapper-gallery__btn` が存在し、`main` がある場合に処理を実行
10  if ( main) {
11    // モーダルのHTMLを作成
12    const modalHtml = `
13		<div class="wrapper-modal" id="video-modal">
14			<div class="wrapper-modal__bg"></div>
15			<div class="wrapper-modal__body --movie">
16			  <div>
17				<div id="modalvideo"></div>
18			  </div>
19			  <button class="wrapper-modal__close"><img src="/assets/common/img/component/icon-close.png" alt="閉じる" width="114" height="98"></button>
20			</div>
21		</div>
22      <div class="wrapper-modal" id="image-modal">
23        <div class="wrapper-modal__bg"></div>
24        <div class="wrapper-modal__body">
25          <div class="wrapper-modal__body-gallery">
26            <div>
27              <figure>
28                <div><img src="" alt="" width="1188" height="675"></div>
29                <figcaption></figcaption>
30              </figure>
31              <p class="wrapper-gallery__heading"></p>
32              <p class="font-l"></p>
33            </div>
34          </div>
35          <button class="wrapper-modal__close">
36            <img src="/assets/common/img/component/icon-close.png" alt="閉じる" width="114" height="98">
37          </button>
38        </div>
39      </div>`;
40
41    // `main` の末尾に追加
42    main.insertAdjacentHTML("beforeend", modalHtml);
43  }
44	
45	
46	let modalplayer=null
47	function getUniqueStr(myStrong){
48	 var strong = 1000;
49	 if (myStrong) strong = myStrong;
50	 return new Date().getTime().toString(16)  + Math.floor(strong*Math.random()).toString(16)
51	}
52	//youtube api
53	var tag = document.createElement('script');
54	tag.src = "https://www.youtube.com/player_api";
55	var firstScriptTag = document.getElementsByTagName('script')[0];
56	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
57	window.onYouTubePlayerAPIReady=function(){
58	
59		let videomodal=document.querySelectorAll('.wrapper-modal')
60		
61		modalplayer=new YT.Player('modalvideo', {
62	  height: '360',
63	  width: '640',
64	})
65		
66			}
67	
68	function nl2br(itm){
69		return itm.replaceAll(/\\n/g,"<br>")
70	}
71
72	//video modal
73	let modal_button=document.querySelectorAll('button');
74	for(let i=0;i<modal_button.length;i++){
75		modal_button[i].addEventListener("click",function(){
76			
77			let videoid=modal_button[i].getAttribute('data-video')
78			let jsonBase64 = modal_button[i].getAttribute('data-json-base64');
79			
80			if (videoid != null) {
81				let modal = document.querySelector('#video-modal');
82				modal.style = 'display:block;';
83				modalplayer.loadVideoById(videoid);
84				modalplayer.playVideo();
85			} else if (jsonBase64 != null || modal_button[i].querySelector(".modalData")) {
86				// base64デコードしてJSONオブジェクトに復元
87				let jsonData = {};
88				if (jsonBase64) {
89					jsonData = JSON.parse(decodeURIComponent(escape(atob(jsonBase64))));
90				} else {
91					jsonData.image =        modal_button[i].querySelector(".modalData .modal-image").innerHTML;
92					jsonData.imagecaption = modal_button[i].querySelector(".modalData .modal-imagecaption").innerHTML;
93					jsonData.imagelead =    modal_button[i].querySelector(".modalData .modal-imagelead").innerHTML;
94					jsonData.imagetext =    modal_button[i].querySelector(".modalData .modal-imagetext").innerHTML;
95				}
96
97				// image URL を / から始まるパスに変換
98				if (jsonData.image && jsonData.image.startsWith('http')) {
99					try {
100						const url = new URL(jsonData.image);
101						jsonData.image = url.pathname + url.search + url.hash;
102					} catch (e) {
103						console.error('Invalid URL in jsonData.image', jsonData.image);
104					}
105				}
106	
107				let modal = document.querySelector('#image-modal');
108				modal.querySelector('figure img').src = jsonData.image;
109				modal.querySelector('figure figcaption').innerHTML = nl2br(jsonData.imagecaption);
110				modal.querySelector('.wrapper-gallery__heading').innerHTML = nl2br(jsonData.imagelead);
111				modal.querySelector('.font-l').innerHTML = nl2br(jsonData.imagetext);
112				modal.style = 'display:block;';
113			}
114		})
115
116
117	}
118	let close_button=document.querySelectorAll('.wrapper-modal__close,.wrapper-modal__bg')
119	for(let i=0;i<close_button.length;i++){
120		close_button[i].addEventListener("click",function(){
121			let modal=close_button[i].closest('.wrapper-modal')
122			modal.style='display:none;'
123			modalplayer.pauseVideo()
124		})
125
126
127	}

128	//carousell
129	
130	let current=[]
131	
132	for(let i=0;i<document.querySelectorAll('.wrapper-gallery.--slide').length;i++)current.push(0)
133	function reswin(){
134		for(let i=0;i<document.querySelectorAll('.wrapper-gallery.--slide').length;i++)setcurrent(i,current[i])
135	}
136	
137	function setcurrent(n,pos){
138		let slider=document.querySelectorAll('.wrapper-gallery.--slide')[n]
139		let itm=slider.querySelectorAll('.wrapper-gallery__item')
140		let nav=slider.querySelectorAll('.wrapper-gallery__nav li button')
141		let cwd=window.innerWidth
142		let last=current[n]
143		if(pos<0)pos=0
144		if(pos>itm.length-1)pos=itm.length-1
145		current[n]=pos
146		
147		
148		let gap=32
149		if(cwd<768){
150			gap=20
151		}
152		for(let i=0;i<itm.length;i++){
153			itm[i].style='transform:translateX(calc('+(-pos*100)+'% + '+(-gap*pos)+'px))';
154		}
155		
156		for(let i=0;i<nav.length;i++){
157			if(i==current[n])nav[i].classList=['current'];
158			else nav[i].classList=[];
159		}
160	}
161	
162	let lwd=-1	
163	function resizer(){
164		let cwd=window.innerWidth
165		if(lwd!=cwd){
166			reswin()
167		}
168		
169		
170		lwd=cwd
171	}
172	resizer()
173	window.addEventListener("resize",resizer)
174	
175	let cni=0
176	
177	let lbtn=document.querySelectorAll('.wrapper-gallery__prev')
178	let rbtn=document.querySelectorAll('.wrapper-gallery__next')
179	for(let i=0;i<lbtn.length;i++){
180		lbtn[i].addEventListener('click',function(){
181			setcurrent(i,current[i]-1)
182		})
183		rbtn[i].addEventListener('click',function(){
184			setcurrent(i,current[i]+1)
185			
186		})
187	}
188	
189	let msx=-1,msy=-1
190	for(let i=0;i<document.querySelectorAll('.wrapper-gallery.--slide').length;i++){
191		let itm=document.querySelectorAll('.wrapper-gallery.--slide')[i]
192		itm.addEventListener("touchstart",function(e){
193			let evl=e.touches[0]
194			msy = evl.pageY;
195			msx = evl.pageX;
196			
197		
198		})
199		itm.addEventListener("touchmove",function(e){
200			let evl=e.touches[0]
201			let csy = evl.pageY;
202			let csx = evl.pageX;
203			if(msx==-1)return true
204			if(Math.abs(csy-msy)>10){
205				let sft=(csx-msx)
206				/*if(slipitem!=null)$({a:sft}).animate({a:0},{duration:200,step:function(t){
207					slipitem.css({transform:'translateX('+t+'px)'})
208				}
209				})*/
210				msx=-1
211				msy=-1
212				return true
213			}
214			if(csx-msx>10){
215				
216				setcurrent(i,current[i]-1)
217				msx=-1
218				msy=-1
219				return true
220			}
221			if(csx-msx<-10){
222				setcurrent(i,current[i]+1)
223				msx=-1
224				msy=-1
225				return true
226			}
227			e.preventDefault()
228			return false
229		})
230	}
231	
232	//scroll icon
233	let scrolliconitem=document.querySelectorAll('.wrapper-table.--slide > *')
234	
235	for(let i=0;i<scrolliconitem.length;i++){
236		scrolliconitem[i].addEventListener('scroll',function(){
237			scrolliconitem[i].querySelector('.wrapper-table__scrollable').style="opacity:0;"
238		})
239	}
240	
241	let mdl=document.querySelector('#image-modal .wrapper-modal__body-gallery')
242	if(mdl) {
243		mdl.addEventListener('wheel',function(e){
244			
245			mdl.scrollTop+=e.deltaY/5
246			e.preventDefault()
247		})
248		let lty=-1
249		mdl.addEventListener('touchstart',function(e){
250			
251		})
252		mdl.addEventListener('touchmove',function(e){
253			
254			let cty=e.changedTouches[0].screenY
255			if(lty!=-1)mdl.scrollTop+=lty-cty
256			lty=cty
257			e.preventDefault()
258		})
259		mdl.addEventListener('touchend',function(e){
260			let cty=e.changedTouches[0].screenY
261			lty=-1
262			e.preventDefault()
263		})
264	}
265	
266	let mdlbg=document.querySelector('#image-modal .wrapper-modal__bg')
267	if(mdlbg) {
268		mdlbg.addEventListener('wheel',function(e){
269			e.preventDefault()
270		})
271		mdlbg.addEventListener('touchmove',function(e){
272			e.preventDefault()
273		})
274	}
275	
276	
277	let vmdlbg=document.querySelector('#video-modal')
278	if(vmdlbg){
279		vmdlbg.addEventListener('wheel',function(e){
280			e.preventDefault()
281		})
282		vmdlbg.addEventListener('touchmove',function(e){
283			e.preventDefault()
284		})
285	}
286}
287document.addEventListener("DOMContentLoaded", function () {
288	module_initialize()
289});
290//module_initialize()