https://www.polus.jp/shared/js/common.js

1// JavaScript Document
2
3/* --------------------------------------------------------------------------------------
4  各種ユニット
5--------------------------------------------------------------------------------------- */
6
7document.addEventListener(window.cordova ? 'deviceready' : 'DOMContentLoaded', function() {
8	Gnavi();
9	ScrollAnimate();
10	Anchor();
11	ImageAdjustment();
12	Slider();
13	Tab();
14//	SPShop();
15});
16
17/* --------------------------------------------------------------------------------------
18	グローバルナビ
19--------------------------------------------------------------------------------------- */
20
21const Gnavi = function (){
22
23	const header = document.querySelector("header");
24	const Nav    = document.querySelector(".gnavi");
25	const Btn    = document.querySelector(".panel-btn");
26	const Search = document.querySelector("header section nav .other-btn .g-search img");
27	const form   = document.querySelector("header section nav .other-btn .g-search");
28
29	const Func = {
30		nav : function (){
31			Btn.classList.toggle("close");
32			Nav.classList.toggle("open");
33			form.closest(".g-search").classList.remove("search-open");
34		},
35
36		search : function (){
37			form.closest(".g-search").classList.toggle("search-open");
38			Func.searchClose();
39		},
40
41		searchClose : function (){
42			setTimeout(function (){
43				form.closest(".g-search").classList.remove("search-open");
44			},10000);
45		}
46	}
47
48	Btn.addEventListener('click',Func.nav);
49	Search.addEventListener('click',Func.search);
50
51}
52
53/* --------------------------------------------------------------------------------------
54	スクロールアニメーション
55--------------------------------------------------------------------------------------- */
56
57const ScrollAnimate = function () {
58
59	let Animate        = false,
60		windowTop      = window.scrollY,
61		FirstChangeTop = window.scrollY + window.innerHeight;
62
63	const Animation = function (){
64		if (Animate !== false) clearTimeout(Animate);
65		Animate = setTimeout(function (){
66			let box          = document.querySelectorAll(".slide-item"),
67				Max          = box.length,
68				ClassTbl     = ['slide-bottom','slide-top','slide-left','slide-right'],
69				changeTop    = window.scrollY + window.innerHeight - (window.innerHeight/2),
70				delay        = 0,
71				join         = 200,
72				itemTopTbl   = new Array(),
73				classJoin    = function (box,name){
74					setTimeout(function (){
75						box.classList.add(name + "-animate");
76					},delay);
77
78					delay += join;
79				};
80
81			//各アイテムのTOP位置を取得
82			box.forEach( box => {
83				Array.prototype.push.apply(itemTopTbl,[box.getBoundingClientRect().top + window.pageYOffset]);
84			});
85
86			//最初に読み込まれた時、スクロール位置までは即表示
87			let firstAnimate = true;
88			if (firstAnimate === true) {
89				for(let i=0; i<itemTopTbl.length; i++) {
90					if (FirstChangeTop > itemTopTbl[i]) {
91						const name = box[i].className;
92
93						for(let j=0; j<ClassTbl.length; j++) {
94							if (name.match(ClassTbl[j]) && !name.match("animate"))  box[i].classList.add(ClassTbl[j] + "-animate");
95						}
96					}
97				}
98			}
99
100			firstAnimate = false;
101
102			for(let i=0; i<Max; i++) {
103				const class_name = box[i].className;
104				const offsetTop  = box[i].getBoundingClientRect().top + window.pageYOffset;
105
106				if (offsetTop < changeTop) {
107					if (windowTop > 0 && windowTop < changeTop) delay = 0;
108
109					for(let j=0; j<ClassTbl.length; j++) {
110						if (class_name.match(ClassTbl[j]) && !class_name.match("animate")) classJoin(box[i],ClassTbl[j]);
111					}
112				}
113			}
114
115			windowTop = 0;
116		},50);
117	},
118
119	TopAnimate = function (){
120		let box   = document.querySelectorAll(".slide-item-top"),
121			delay = 0,
122			join  = 400;
123
124			box.forEach( box => {
125				setTimeout(function (){
126					box.classList.add("slide-left-animate");
127				},delay);
128
129				delay += join;
130			});
131	};
132
133	Animation();
134	if (document.querySelector('.top-key')) TopAnimate();
135	window.addEventListener('scroll', Animation);
136};
137
138/* --------------------------------------------------------------------------------------
139	ページ内アンカー
140--------------------------------------------------------------------------------------- */
141
142const Anchor = function (){
143
144	const sp = navigator.userAgent.indexOf("iPhone") > 0 || navigator.userAgent.indexOf("Android") > 0 || navigator.userAgent.indexOf("iPad") > 0;
145
146	//ヘッダーの高さ
147	let headerHeight = document.querySelector('header').offsetHeight;
148//	if (navigator.userAgent.indexOf("iPhone") > 0 || navigator.userAgent.indexOf("Android") > 0 || navigator.userAgent.indexOf("iPad") > 0) headerHeight = 50;
149
150	const Function = {
151
152		// イージング関数（easeOutExpo）
153		scrollToPos : function (position) {
154			const startPos = window.scrollY;
155			const distance = Math.min(position - startPos, document.documentElement.scrollHeight - window.innerHeight - startPos);
156			const duration = 800; // スクロールにかかる時間（ミリ秒）
157
158			let startTime;
159
160			const easeOutExpo = function (t, b, c, d) { return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b; }
161
162			const animation = function (currentTime) {
163				if (startTime === undefined) startTime = currentTime;
164
165				const timeElapsed = currentTime - startTime;
166				const scrollPos = easeOutExpo(timeElapsed, startPos, distance, duration);
167				window.scrollTo(0, scrollPos);
168
169				if (timeElapsed < duration) requestAnimationFrame(animation);
170				else window.scrollTo(0, position);
171			}
172
173			requestAnimationFrame(animation);
174		},
175
176		// 遅延読み込み解除
177		removeLazyLoad  : function () {
178			const targets = document.querySelectorAll('[data-src]');
179			for (const target of targets) {
180					target.setAttribute('src', target.getAttribute('data-src'));
181					target.addEventListener('load', () => {
182					target.removeAttribute('data-src');
183				});
184			}
185		},
186
187		// ページ内のスムーススクロール
188		Click : function (){
189			for (const link of document.querySelectorAll('a[href*="#"]')) {
190				link.addEventListener('click', (e) => {
191					const hash   = e.currentTarget.hash;
192					const target = document.getElementById(hash.slice(1));
193
194
195					// ページトップへ("#"と"#top"）
196					if (!hash || hash === '#top') {
197						e.preventDefault();
198						Function.scrollToPos(1); // iOSのChromeで固定ヘッダーが動くバグがあるため0ではなく1に
199
200					// アンカーへ
201					} else if (target) {
202						e.preventDefault();
203						Function.removeLazyLoad();
204						let position = target.getBoundingClientRect().top + window.scrollY - headerHeight;
205
206						Function.scrollToPos(position);
207
208						// URLにハッシュを含める
209						history.pushState(null, '', hash);
210					}
211
212					history.replaceState('','', location.href.replace("#" + hash.slice(1),""));
213					if (hash.slice(1) === "mypage") document.querySelector("#mypage input").click();
214
215				});
216			}
217		},
218
219		// 別ページ遷移後のスムーススクロール
220		Hash : function (){
221			const urlHash = window.location.hash;
222			if (urlHash) {
223				const target = document.getElementById(urlHash.slice(1));
224				if (target) {
225					// ページトップから開始（ブラウザ差異を考慮して併用）
226					history.replaceState(null, '', window.location.pathname);
227					window.scrollTo(0, 0);
228
229					Function.removeLazyLoad();
230					window.addEventListener("load", () => {
231						const position = target.getBoundingClientRect().top + window.scrollY - headerHeight;
232						Function.scrollToPos(position);
233
234						// ハッシュを再設定
235						history.replaceState(null, '', window.location.pathname + urlHash);
236
237						if (urlHash === "mypage") document.querySelector("#mypage input").click();
238					});
239				}
240			}
241		},
242
243		// ページトップ
244		Pagetop : function (){
245			const Btn   = document.querySelector("div.pagetop");
246			const gnavi = document.querySelector("header");
247			const Unit = {
248
249				Animate : false,
250
251				ClassToggle : function (){
252					let scrollTop = window.scrollY;
253
254					if (Unit.Animate !== false) clearTimeout(Unit.Animate);
255					Unit.Animate = setTimeout(function () {
256						if (scrollTop <= 1) Btn.classList.add("fadeOut");
257						else Btn.classList.remove("fadeOut");
258
259
260						if (scrollTop > gnavi.clientHeight) gnavi.classList.add("fixed");

261						else gnavi.classList.remove("fixed");
262					}, 100);
263				},
264
265				BtnClick : function (e){
266					e.preventDefault();
267					Function.scrollToPos(1);
268				}
269			}
270
271			if (Btn) {
272				window.addEventListener('scroll',Unit.ClassToggle);
273				Btn.addEventListener('click',Unit.BtnClick);
274			}
275		}
276	}
277
278	Function.Click();
279	Function.Hash();
280	Function.Pagetop();
281};
282
283/* --------------------------------------------------------------------------------------
284	画像調整
285--------------------------------------------------------------------------------------- */
286
287const ImageAdjustment = function (){
288
289	if (document.querySelectorAll(".charm section .image")) {
290		const leftImage  = document.querySelector(".charm section .image.left");
291		const rightImage  = document.querySelector(".vr section .image.right");
292		const ImageWidth = leftImage.clientWidth;
293
294		const Func = {
295			ChangePosition : function (Box,direction){
296
297				const windowWidth  = window.innerWidth;
298				const ContentWidth = document.querySelector(".charm section").clientWidth;
299
300				let Margin  = (windowWidth - ContentWidth)/2;
301				let width =  ImageWidth + Margin;
302
303				if (windowWidth < 1100) {
304					Margin = 0;
305					width = windowWidth - windowWidth/5;
306				}
307
308				const CSS = direction + ": -" + Margin + "px; width:" + width + "px";
309
310				Box.setAttribute("style",CSS);
311			}
312		}
313
314		window.addEventListener("resize",function() { Func.ChangePosition(leftImage,"left"); });
315		window.addEventListener("load",function() { Func.ChangePosition(leftImage,"left"); });
316
317		window.addEventListener("resize",function() { Func.ChangePosition(rightImage,"right"); });
318		window.addEventListener("load",function() { Func.ChangePosition(rightImage,"right"); });
319
320	}
321}
322
323/* --------------------------------------------------------------------------------------
324	スライダー
325--------------------------------------------------------------------------------------- */
326
327const Slider = function (){
328
329	if (document.querySelectorAll(".swiper")) {
330		const swiper = new Swiper(".swiper.banner-area", {
331			effect: "slide",
332			autoplay: { delay: 1000, },
333			speed: 3000,
334			loop: true,
335			slidesPerView: "auto",
336			spaceBetween: 32,
337			centeredSlides : true,
338			pagination: {
339				el: ".swiper-pagination",
340				clickable: true,
341				type:"bullets",
342			},
343		});
344	}
345}
346
347
348/* --------------------------------------------------------------------------------------
349	タブ切り替え
350--------------------------------------------------------------------------------------- */
351
352const Tab = function (){
353
354	if (document.querySelectorAll(".area-tab-main")) {
355
356		const Btn     = document.querySelectorAll(".area-tab-menu li");
357		const List    = document.querySelectorAll(".new-property .area-menu-list > div");
358		const Content = document.querySelectorAll(".new-property .area-tab-content > div");
359		const GetName = "area";
360
361		const Func = {
362			ChangeTab : function (){
363				const Area = this.getAttribute(GetName);
364
365				if (Area) {
366					Func.ResetContent();
367
368					this.classList.add("active");
369
370					List.forEach(List => { Func.ChangeContent(List,Area); });
371					Content.forEach(Content => { Func.ChangeContent(Content,Area); });
372				}
373			},
374
375			ChangeContent : function (Box,Name){
376				if (Box.getAttribute(GetName) == Name) Box.setAttribute("style","display:block;");
377				else Box.setAttribute("style","display:none;");
378			},
379
380			ResetContent : function (){

381				Btn.forEach(Btn => Btn.classList.remove("active"));
382				List.forEach(List => List.removeAttribute("style"));
383				Content.forEach(List => List.removeAttribute("style"));
384			}
385		}
386
387		Btn.forEach(Btn => Btn.addEventListener("click",Func.ChangeTab));
388
389	}
390}
391
392/* --------------------------------------------------------------------------------------
393	SP用ショップ
394--------------------------------------------------------------------------------------- */
395
396const SPShop = function (){
397	if (document.querySelectorAll(".item-section > section > .conditions .banner a")) {
398
399		const Btn = document.querySelectorAll(".item-section");
400
401		Btn.forEach(Btn => Btn.addEventListener("click",function (){
402
403			const sp = navigator.userAgent.indexOf("iPhone") > 0 || navigator.userAgent.indexOf("Android") > 0 || navigator.userAgent.indexOf("iPad") > 0;
404
405			if (sp === true) {
406
407				const Link = this.querySelector("section > .conditions .banner a");
408				location.href = Link;
409				return false;
410			}
411		}));
412
413	}
414}
415