https://merl.com/gws_template_responsive/assets_gws_template_responsive/js/init.js

1// 即時実行
2(function($) {
3	'use strict';
4
5	// JS の Global な設定
6	// HTML中で事前に設定されていた場合はその内容を優先する
7	var MEL_SETTINGS = window.MEL_SETTINGS || {};
8	var MEL_YOUTUBE_SETTINGS = window.MEL_YOUTUBE_SETTINGS || {};
9	var MEL_CMS_SETTINGS = window.MEL_CMS_SETTINGS || {};
10	var helper = {
11		getMediaMode: function() {
12			return window.innerWidth < 981 ? 'small' : 'large';
13		},
14		getPath: function(uri) {
15			// URI から pathname 相当を取得
16			// a 要素を生成して pathname を取得することで確実な処理を期待
17			var path = $('<a />')
18				.attr('href', uri)
19				.prop('pathname');
20			if (path.match(/^[^\/]/)) path = '/' + path;
21			return path;
22		},
23		getCurrentPath: function() {
24			// meta[property="og:url"] から現在のパスを取得, og:url が無ければ location.pathname を使う
25			return (
26				helper.getPath($('meta[property="og:url"]').attr('content')) ||
27				location.pathname
28			);
29		}
30	};
31
32	window.MEL_SETTINGS = $.extend(
33		{
34			current_path: helper.getCurrentPath(),
35			// Header, Footer's external file path
36			footer_container_path:
37				'/gws_template_responsive/assets_gws_template_responsive/default/include/_footer.html',
38
39			// Header
40			header_path: '/gws_template_responsive/assets_gws_template_responsive/include/merl_header.html',
41
42			// Footer
43			footer_main_path:
44				'/gws_template_responsive/assets_gws_template_responsive/include/merl_footer.html',
45			footer_atw_path:
46				'/gws_template_responsive/assets_gws_template_responsive/include/merl_footer_atw.html',
47			footer_sns_path:
48				'/gws_template_responsive/assets_gws_template_responsive/include/merl_footer_sns.html',
49
50			local_nav_path: '',
51			helper: helper
52		},
53		MEL_SETTINGS
54	);
55
56	// LiveSite
57	var $root = $('#ls-canvas');
58	if ($root.length) {
59		var $header = $('[data-js-gs18-header]').parents('.ls-row');
60		var $footer = $('[data-js-gs18-footer]').parents('.ls-row');
61		var $main = $('<main role="main" class="gs18-Main" />');
62
63		$main.append($root.children());
64		$root.append($main);
65		$root.prepend($header);
66		$root.append($footer);
67	}
68
69	// Set Modal
70	if (MEL_CMS_SETTINGS.user_country === 'US') {
71		$('body').setModal({
72			contentPath: '/gws_template_responsive/assets_gws_template_responsive/include/_modal_us-transition/index.html'
73		});
74	} else if (
75		window.MEL_SETTINGS.country === 'TH' &&
76		window.MEL_SETTINGS.dialogContentPath
77	) {
78		$('body').setModalTH({
79			contentPath: window.MEL_SETTINGS.dialogContentPath
80		});
81	} else {
82		$('[data-js-gs18-modal]').setModal();
83	}
84
85	// Construction of Header
86	$('[data-js-gs18-header]').includeHeader({
87		path: window.MEL_SETTINGS.header_path,
88		// is-current の自動付与を止めたい場合は enableSetCurrent: false を設定
89		enableSetCurrent: true,
90		enableFlyOut: false,
91		noajax: $('[data-js-gs18-header]').data('js-gs18-header') === 'noajax',
92		callback: function($header) {
93			// Reading MarsFlag does not work unless it creates a Header.
94			var $marsFlagScript = $('<script/>').attr({
95				src: '//c.marsflag.com/mf/mfx/1.0/js/mfx-sbox.js',
96				charset: 'UTF-8'
97			});
98			$('body').append($marsFlagScript);
99			// NOTE: If additional processing is required after header display, pass function to callback
100			// console.log("some callbacks", $header)
101		}
102	});
103
104	// Local Navigation の構築
105	$('[data-js-gs18-local-nav]').includeLocalNav({
106		path: window.MEL_SETTINGS.local_nav_path,
107		local_nav_json_path: window.MEL_SETTINGS.local_nav_json_path,
108		callback: function($localNav) {
109			// NOTE: localNav 表示後に追加の処理が必要な場合は callback に関数を渡す
110			// console.log("some callbacks", $localNav)
111		}
112	});
113
114	// Static Local Navigation の高さ調整
115	$('[data-js-gs18-static-local-nav]').tidyStaticLocalNav();
116
117	// Construction of Footer
118	$('[data-js-gs18-footer]').includeFooter({
119		path: window.MEL_SETTINGS.footer_container_path,
120		mainPath: window.MEL_SETTINGS.footer_main_path,
121		atwPath: window.MEL_SETTINGS.footer_atw_path,
122		snsPath: window.MEL_SETTINGS.footer_sns_path,
123		noajax: $('[data-js-gs18-footer]').data('js-gs18-footer') === 'noajax',
124		callback: function($footer) {
125			// NOTE: If additional processing is necessary after footer display, pass the function to callback
126			// console.log("some callbacks", $footer)
127			var includeParts = function($target, path, callback) {
128				// eslint-disable-next-line no-redeclare
129				var callback = callback || function() {};
130				path &&
131					$.ajax({
132						url: path
133					}).done(function(data) {
134						$target.after(data);
135						$target.remove();
136						callback();
137					});
138			};
139
140			// Include Main
141			includeParts(
142				$('[data-js-gs18-footer-main]'),
143				window.MEL_SETTINGS.footer_main_path
144			);
145
146			// Include ATW
147			includeParts(
148				$('[data-js-gs18-footer-atw]'),
149				window.MEL_SETTINGS.footer_atw_path
150			);
151
152			// Include SNS
153			includeParts(
154				$('[data-js-gs18-footer-sns]'),
155				window.MEL_SETTINGS.footer_sns_path,
156				function() {
157					// Callbacks here
158
159					//Footer WeChat
160					$('[data-js-gs18-footer-wechat]').on('click', function(e) {
161						e.preventDefault();
162						$(this)
163							.find('[data-js-gs18-footer-wechat-target]')
164							.slideToggle();
165						$(this).blur();
166					});
167				}
168			);
169		}
170	});
171
172	// Note: Locations Regions
173	$('[data-js-gs18-location=locations]').includeRegions({
174		type: 'locations',
175		callback: function($createdRegions) {
176			// NOTE: [data-js-gs18-location] がページに1つだけの前提
177			$('[data-js-gs18-location]').append($createdRegions);
178		}
179	});
180
181	// Note: AtW Regions
182	$('[data-js-gs18-location=AtW]').includeRegions({
183		type: 'AtW',
184		callback: function($createdRegions) {
185			// NOTE: [data-js-gs18-location] がページに1つだけの前提
186			$('[data-js-gs18-location]').append($createdRegions);
187		}
188	});
189
190	// Set Learn More Tile
191	$('[data-js-gs18-learn-more-tile]').setLearnMoreTile();
192
193	// Set Learn More News
194	$('[data-js-gs18-learn-more-news]').setLearnMoreNews();
195
196	// Set Related Links
197	$('[data-js-gs18-related-slide]').setRelatedLinks();
198
199	$('[data-js-gs18-youtube]').jsYouTube({
200		youtube_settings: window.MEL_YOUTUBE_SETTINGS
201	});
202
203	// Set Custom Accorion UI
204	var accordionSelectors = [
205		{
206			body: '[data-js-gs18-accordion]',
207			trigger: '[data-js-gs18-accordion-trigger]',
208			content: '[data-js-gs18-accordion-content]'
209		},
210		{
211			body: '[data-js-accordion]',
212			trigger: '[data-js-accordion-trigger]',
213			content: '[data-js-accordion-content]'
214		}
215	];
216
217	$(accordionSelectors).each(function(index, selectors) {
218		$(selectors.body).setCustomAccordion({
219			selectors: selectors
220		});
221	});
222
223	// Set Local Smooth Scroll
224	$('main').setLocalSmoothScroll();
225
226	// DOMContentLoaded
227	$(function() {
228		'use strict';
229		//RSS Feed 表示
230		$('[data-js-gs18-feeds]').getFeeds();
231
232		//ページTopスクロール
233		$('[data-js-gs18-gotop]').on('click', function(e) {
234			e.preventDefault();
235			$(this).goTopScroll();
236		});
237
238		//Pulldown Link
239		$('[data-js-gs18-pulldown-link]').pulldownLink();
240		//MicroMacro Panel
241		$('[data-js-gs18-micro-macro]').microMacro();
242
243		//History Slider
244		$('[data-js-history-slide]').slick({
245			dots: true,

246			arrows: false,
247			infinite: false,
248			customPaging: function(slick, i) {
249				// dotsに年代を表示
250				// data-history-dotsから値を取得
251				var HistoryYear = slick.$slides.eq(i).data('history-dots');
252				return '<span>' + HistoryYear + '</span>';
253			}
254		});
255		//Responsive Table
256		$('[data-js-gs18-responsive-table]').setResponsiveTable();
257
258		//Facebook Page Plugin リサイズ
259		$('[data-js-facebook]').jsFacebookResize();
260
261		//キャプションの横幅をイメージの横幅に揃える
262		$('[data-js-gs18-adjust-caption-width]').adjustCaptionWidth();
263
264		// Set VI Changer - Top Page VI
265		// NOTE: 不要になっているかもしれない。
266		$('[data-js-gs18-top-slide]').setViChanger({
267			selectors: {
268				mainViewArea: '[data-js-gs18-top-slide-body]',
269				mainWrapper: '[data-js-gs18-top-slide-main]',
270				naviWrapper: '[data-js-gs18-top-slide-nav]',
271				prevBtn: '[data-js-gs18-top-slide-prev]',
272				nextBtn: '[data-js-gs18-top-slide-next]',
273				pauseBtn: '[data-js-gs18-top-slide-pause]'
274			},
275			pauseActiveClassName: 'is-active',
276			auto: 5000
277		});
278
279		// Set VI Changer - News Page VI
280		$('[data-js-gs18-news-slide]').setViChanger({
281			selectors: {
282				mainViewArea: '[data-js-gs18-news-slide-body]',
283				mainWrapper: '[data-js-gs18-news-slide-main]',
284				naviWrapper: '[data-js-gs18-news-slide-nav]',
285				prevBtn: '[data-js-gs18-news-slide-prev]',
286				nextBtn: '[data-js-gs18-news-slide-next]',
287				imgCol: '[data-js-gs18-news-slide-imgcol]'
288			},
289			auto: null,
290			isSetImageHeight: true
291		});
292
293		// Set VI Changer - Heme Page HeroImage VI
294		$('[data-js-gs18-hero-image-slide-start]');
295		var $heroImageSlide = $('[data-js-gs18-hero-image-slide]');
296		var heroImageStartIndex = $heroImageSlide.attr(
297			'data-js-gs18-hero-image-slide-start'
298		);
299		heroImageStartIndex = parseInt(heroImageStartIndex);
300		heroImageStartIndex = isNaN(heroImageStartIndex)
301			? 0
302			: heroImageStartIndex - 1;
303
304		$heroImageSlide.setViChanger({
305			selectors: {
306				mainViewArea: '[data-js-gs18-hero-image-slide-body]',
307				mainWrapper: '[data-js-gs18-hero-image-slide-main]',
308				naviWrapper: '[data-js-gs18-hero-image-slide-nav]',
309				pauseBtn: '[data-js-gs18-hero-image-slide-pause]'
310			},
311			naviActiveClassName: 'is-active',
312			startIndex: heroImageStartIndex,
313			auto: 5000
314		});
315	});
316})(window.jQuery3 || jQuery);