https://www.oenon.jp/n_js/top.js

1/* -------------------------------------------
2* top.js
3* @init
4* @requires jQuery
5------------------------------------------- */
6// 新着情報出力（最新5件）
7$(function(){
8	const c = $.extend({
9		factorElement: "#newsUpdate ul",
10	});
11	const $elm = $(c.factorElement);
12	const settings = {
13		path: 'https://ssl4.eir-parts.net/V4Public/eir/2533/ja/announcement/announcement_39.js',
14		callbackName: 'eolparts_announcement_39',
15	};
16
17	// sub_type に応じたカテゴリ class 名を返す関数
18	function getCategoryClass(item) {
19		const subName = {
20			ir_material15: "product",
21			ir_material16: "personnelAffairs",
22			ir_material17: "recruit",
23			ir_material18: "management",
24			ir_material19: "other",
25			ir_material20: "ir"
26		};
27		return subName[item.sub_type] || "ir";
28	}
29
30	// 新着判定用の関数
31	function GetComputeDate(DaySpan) {
32		const myD = new Date();
33		const targetDate = new Date(myD.getFullYear(), myD.getMonth(), myD.getDate() + DaySpan);
34		const y = targetDate.getFullYear();
35		const m = ('0' + (targetDate.getMonth() + 1)).slice(-2);
36		const d = ('0' + targetDate.getDate()).slice(-2);
37		return `${y}${m}${d}`;
38	}
39
40	// 日付を「YYYYMMDD」形式に変換する関数（比較用）
41	function formatDateToNum(dateStr) {
42		const d = new Date(dateStr);
43		const y = d.getFullYear();
44		const m = ('0' + (d.getMonth() + 1)).slice(-2);
45		const day = ('0' + d.getDate()).slice(-2);
46		return `${y}${m}${day}`;
47	}
48
49	// Newアイコンが表示される上限日付(現在の日時から何日前までかを指定する)
50	const NewIconLimit = -10;
51
52	// 日付を「YYYY年M月D日」に変換する関数
53	function formatJapanDate(dateStr) {
54		const date = new Date(dateStr);
55		const year = date.getFullYear();

56		const month = date.getMonth() + 1;
57		const day = date.getDate();
58		return `${year}年${month}月${day}日`;
59	}
60
61	// exit
62	if ($elm.length === 0) { return false; }
63
64	function initNewsReleaseSlider() {
65	// #newsRelease初期化
66		if($("#newsRelease ul").length > 0){
67			$("#newsRelease ul").bxSlider({
68				auto: true,
69				pause: 6000,
70				mode: "vertical",
71				speed: 1000,
72				pager: false,
73				controls: false,
74				touchEnabled: false
75			});
76		}
77	}
78
79
80	// control
81	$.ajax({
82		type: 'get',
83		url: settings.path,
84		dataType: 'jsonp',
85		jsonpCallback: settings.callbackName,
86	}).done((json) => {
87		// vars
88		// json.item が存在しない or 配列でない場合を考慮
89		const itemArray = Array.isArray(json && json.item) ? json.item : [];
90		const outputLength = itemArray.length;
91		let HTML = '';
92
93		if (outputLength > 0) {
94			// 今日からNewIconLimit日以内の日付の境界値を算出（YYYYMMDD形式）
95			const newIconLimitDateNum = GetComputeDate(NewIconLimit);
96
97			// json最新5件を表示
98			for (let j = 0; j < Math.min(outputLength, 5); j++) {
99				const item = itemArray[j];
100				const title = item.title;
101				const url = item.link;
102				const subType = getCategoryClass(item);
103				const formatDate = formatJapanDate(item.date);
104				const target = (item.new_target === '_blank') ? 'target="_blank"' : '';
105
106				// ファイルアイコン（pdf, xls, xlsx）を判定してimgタグ作成
107				let fileIconImg = '';
108				const fileType = item.type;
109				if (fileType === 'pdf'){
110					fileIconImg = `<img src="/common_renew/images/pdf_ic02.png" class="innerIcon01 pdfIcon news_file" align="absmiddle">`;
111				} else if(fileType === 'xls' || fileType === 'xlsx') {
112					fileIconImg = `<img src="/common_renew/images/xls_ic02.png" class="innerIcon01 pdfIcon news_file" align="absmiddle">`;
113				}
114
115				// ファイルサイズ表示用の変数（初期は空文字）
116				let fileSizeText = '';
117				// ファイルサイズがあればテキストを作成
118				if (item.file_size && item.file_size.length > 0) {
119					fileSizeText = `（${item.file_size}KB）`;
120				}
121
122				// 新着判定（日付をYYYYMMDD数値に変換して比較）
123				const itemDateNum = formatDateToNum(item.date);
124				// 新着かどうか
125				const isNew = itemDateNum >= newIconLimitDateNum;
126				// 新着アイコンのimgタグを作る
127				const newIconImg = `<img src="/common_renew/images/new.png" width="33" height="16" alt="NEW" class="innerIcon01 newIcon">`;
128
129				HTML += `<li><span class="date ${subType}">${formatDate}</span><span class="txt"><a ${target} href="${url}">${title}${fileIconImg}${fileSizeText}</a>${isNew ? newIconImg : ''}</span></li>`;
130			}
131		} else {
132			// データが0件の場合
133			HTML = '<li>掲載情報はございません</li>';
134		}
135		// HTML出力
136		$elm.append(HTML);
137
138		// bxSlider初期化
139		if(itemArray && itemArray.length > 0){
140			$elm.bxSlider({
141				auto: true,
142				pause: 6000,
143				mode: "vertical",
144				speed: 1000,
145				pager: false,
146				controls: false,
147				touchEnabled: false
148			});
149		}
150
151		initNewsReleaseSlider();
152	}).fail(() => {
153		// 通信失敗時の処理
154		$elm.append('<li>掲載情報はございません</li>');
155		// スライダーは起動しない
156		initNewsReleaseSlider();
157	});
158});
159
160$(function($){
161	/**
162	 * @plugin productTabs
163	 */
164	$.fn.productTabs = function(config){
165		if(this.length == 0){ return false; }
166
167		/**
168		 * @user option
169		 */
170		var c = $.extend({
171			tabClassName: ".jsProductTabList",
172			boxClassName: ".jsProductTabBox",
173			speed: 300
174		}, config);
175
176		/**
177		 * vars
178		 */
179		var list = $(c.tabClassName),
180				link = $(c.tabClassName).find('li').children('a'),
181				box = $(c.boxClassName);
182		/* クリック時 */
183		box.first().show();
184		link.on('click', function(){
185			// list処理
186			list.find('li').removeClass('on');
187			$(this).parent('li').addClass('on');
188			// box処理
189			var productCategory = $(this).attr('data-product-link');
190			box.hide();
191			$(c.boxClassName + '[data-product-box="' + productCategory + '"]').show();
192		});
193	};
194	/**
195	 * @plugin brandTabs
196	 */
197	$.fn.brandTabs = function(config){
198		if(this.length == 0){ return false; }
199
200		/**
201		 * @user option
202		 */
203		var c = $.extend({
204			tabClassName: ".jsBrandTabList",
205			boxClassName: ".jsBrandTabBox",
206			speed: 300
207		}, config);
208
209
210		/**
211		 * vars
212		 */
213		var list = $(c.tabClassName),
214				link = $(c.tabClassName).find('li').children('a'),
215				box = $(c.boxClassName);
216		/* クリック時 */
217		box.first().show();
218		link.on('click', function(){
219			// list処理
220			list.find('li').removeClass('on');
221			$(this).parent('li').addClass('on');
222			// box処理
223			var brandCategory = $(this).attr('data-brand-link');
224			box.hide();
225			$(c.boxClassName + '[data-brand-box="' + brandCategory + '"]').show();
226		});
227	};
228	/**
229	 * @plugin productTabs
230	 */
231	$.fn.morebtn = function(){
232		if(this.length == 0){ return false; }
233
234		/**
235		 * vars
236		 */
237		var $panel = $('.brandColumn'),
238				item = '.columnItem',
239				panelHeight = $panel.find(item).outerHeight();
240		$panel.each(function(){
241			if($(this).children(item).length > 6){
242				$(this).next('.moreBtn').addClass('active');
243				if ($.isTablet()){
244					$(this).height((panelHeight*2)+15);
245				} else if ($.isMobile()){
246					$(this).height((panelHeight*3)+(15*2));
247				}
248			}
249		})
250		$('.moreBtnLink').on('click',function(){
251			$(this).parent('.moreBtn').removeClass('active');
252			$(this).parents('.brandBoxInner').children('.brandColumn').height('100%');
253		});
254	};
255	/**
256	 * @plugin productTabs
257	 */
258	$.fn.groupAccordion = function(){
259		if(this.length == 0){ return false; }
260		$('.groupColumn .heading02').on('click',function(){
261			if($('.groupColumn .heading02').hasClass('open')){
262				$('.groupColumn .heading02').removeClass('open');
263				$('.groupColumn .groupInner').removeClass('active').slideUp();
264			} else {
265				$('.groupColumn .heading02').addClass('open');
266				$('.groupColumn .groupInner').addClass('active').slideDown();
267			}
268		});
269	};
270	/**
271	 * @plugin topTabs
272	 */
273	$.fn.topTabs = function(config){
274		// options
275		var c = $.extend({
276			elemName: '.newsListColumn',
277			list: '.list',
278			box: '.tabBox',
279			defaultId: $('.newsListColumn').find('.list').find('li:first-child').find('a').attr('href'),
280			activeClass: 'on'
281		}

281, config);
282		// exit
283		if($(c.elemName).length === 0){ return false; }
284		// vars
285		var $triggerParent = $(c.elemName).find(c.list).find('li'),
286				$trigger = $(c.elemName).find(c.list).find('li').find('a'),
287				defaultThis = $(c.elemName).find(c.list).find('li:first-child');
288		// function
289		var changeAction = function(_this, _data){
290			$triggerParent.removeClass(c.activeClass);
291			$(_this).addClass(c.activeClass);
292			$(c.elemName).find(c.box).hide();
293			$(c.elemName).find(c.box).each(function(){
294				var $this = $(this);
295				if($this.attr('id') === _data.slice(1)) {
296					$this.show();
297				}
298			});
299			$.equalHeight();
300		};
301		// init
302		if(location.hash){
303			var hashThis = $(c.elemName).find(c.list).find('[href="'+location.hash+'"]').parent('li');
304			changeAction(hashThis, location.hash);
305		} else {
306			changeAction(defaultThis, c.defaultId);
307		}
308		$(window).on('load',function(){
309			if(location.hash){
310				$("html, body").animate({scrollTop: 0}, 0, "swing");
311			}
312		});
313		// click
314		$trigger.on('click', function(){
315			var $this = $(this),
316					thisParent =  $this.parent('li'),
317					thisId =  $this.attr('href');
318			changeAction(thisParent, thisId);
319			return false;
320		});
321	};
322});
323
324$(function(){
325	$(".productTabs").productTabs();
326	$(".brandTabs").brandTabs();
327	if ($.isTablet()){
328		$(".brandTabs").morebtn();
329	}
330	if ($.isMobile()){
331		$(".brandTabs").morebtn();
332		$(".groupColumn").groupAccordion();
333		$("#newsListArea .list .iconLink").remove();
334		$(".newsListColumn").topTabs();
335	}
336
337	function spCheck() {
338		if (!$.isMobile()){
339			$("#newsListArea .tabBox").addClass("newsTabShow");
340			$("#newsListArea .list li > a").on("click", function(){
341				return false;
342			});
343
344		} else {
345			$("#newsListArea .tabBox").removeClass("newsTabShow");
346		}
347	}
348	spCheck();
349
350	var timer = false;
351	$(window).bind("resize", function(){
352		if (timer !== false) {
353			clearTimeout(timer);
354		}
355		timer = setTimeout(function() {
356			spCheck();
357		}, 400);
358	});
359
360});