https://www.hitachi-hgne.co.jp/js/jp/r1/responsive.js

1/* **************************************************
2
3Name: responsive.js
4
5Description: Settings for Responsive Web Design
6
7Create: 2015.01.31
8Update: 2017.01.31
9Update: 2019.03.01
10Update: 2021.07.12
11Update: 2023.05.22
12
13Copyright 2015 Hitachi, Ltd.
14
15***************************************************** */
16
17
18
19var _globalNaviClose;
20var _headerScrollTop;
21
22function _checkRWD(width) {
23	
24	var checkRWD = {
25		995	:$("#U995").css("display") == "block",
26		768	:$("#U768").css("display") == "block",
27		580	:$("#U580").css("display") == "block",
28		400	:$("#U400").css("display") == "block"
29	}
30	return checkRWD[width];
31	
32}
33
34
35
36(function($){
37
38
39
40/* Append to DOM
41=========================================================================================== */
42
43if (ua("win") || ua("mac")) $("html").addClass("PC");
44if (ua("android")) $("html").addClass("Android");
45$("html[class!='JS']").addClass("JS");
46
47if ($("head meta[name=viewport]").attr("content") == "width=1024") {
48	$("head meta[name=viewport]").attr("content", "width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0");
49}
50
51var under995 = function() {
52	
53	if (_checkRWD(995)) {
54		$("html[class!='Under995']").addClass("Under995");
55	} else {
56		$("html[class*='Under995']").removeClass("Under995");
57	}
58	
59}
60
61$(function(){
62	
63	$("#UltraGlobalNavi").before('<p id="GlobalNaviTopButtonSP" class="BtnOpen ShowRWD"><a href="javascript:void(0);"><img src="/image/jp/r1/icon/icon_navi_global.gif" width="21" height="21" alt="メニュー" /></a></p>');
64	$("#SiteIdentity .Title img").each(function() {$(this).after('<span class="ShowRWD">' + $(this).attr("alt") + '</span>');});
65	$("body").append('<div id="U995"></div><div id="U768"></div><div id="U580"></div><div id="U400"></div>');
66	under995();
67	
68	$(window).on("load resize", under995);
69	
70});
71
72
73
74/* Global Navigation
75=========================================================================================== */
76
77$(function(){
78	
79	var gn = '';
80	var cn = '';
81	
82	if ($("#GlobalNaviTop")[0]) {
83		gn = '<ul id="GlobalNaviTopSP">'
84		gn += $("#GlobalNaviTop").html();
85		gn += '</ul>';
86	}
87	
88	if ($("#GlobalNavi .CourtesyNavi")[0]) {
89		var cn = '<ul id="CourtesyNaviSP">';
90		cn += $("#GlobalNavi .CourtesyNavi").html();
91		cn += '</ul>';
92	}
93	
94	$("#UltraGlobalNavi").prepend('<div id="GlobalNaviSP" class="ShowRWD">' + gn + cn + '</div>');
95	
96	if ($("#HorizontalLocalNavi")[0]) {
97		var hln = '<ul id="HorizontalLocalNaviSP">';
98		hln += $("#HorizontalLocalNavi").html();
99		hln += '</ul>';
100		$("#GlobalNaviTopSP li.Current").append(hln);
101	}
102	
103});
104
105_headerScrollTop = function() {
106	
107	var topID = (navigator.userAgent.indexOf("Safari") !== -1) ? "body" : "html";
108	if ($(topID).scrollTop() > 100) {
109		$(topID).stop().animate({scrollTop: "0"}, 400, "swing");
110	}
111	
112}
113
114
115
116/* Link List
117=========================================================================================== */
118
119$(function(){
120	
121	var boxLink = {
122		768	:".ResponsiveLinkListStyle dl.LinkListStyle1, .ResponsiveLinkListStyle dl.LinkListStyle2, .Re

122sponsiveLinkListStyle .ImgW60SetStyle, .ResponsiveLinkListStyle .ImgW120SetStyle, .ResponsiveLinkListStyle .ImgW180SetStyle, .ResponsiveLinkListStyle .ImgW230SetStyle, .ResponsiveLinkListStyle .ThumbW60SetStyle, .ResponsiveLinkListStyle .ThumbW120SetStyle, .ResponsiveLinkListStyle .ThumbW180SetStyle, .ResponsiveLinkListStyle .ThumbW230SetStyle, .ResponsiveLinkListStyle .ThumbW300SetStyle",
123		580	:"",
124		400	:".ResponsivePanelStyle .Column1"
125	}
126	
127	var addLink = function(width) {
128		
129		$(boxLink[width]).each(function() {
130			if ($(this).find("a")[0]) {
131				
132				$a = $(this).find("a");
133				var js = $a.attr("onclick") || 0;
134				if (js) {
135					if (js.indexOf("this.href") !== -1) js = js.replace("this.href", "'" + $a.attr("href") + "'");
136					$(this).attr("onclick", "if(_checkRWD(" + width + ")) {" + js + "}");
137					$a.attr("onclick", "if(!_checkRWD(" + width + ")) {" + js + "}");
138				}
139				
140				$(this).addClass("LinkU" + width)
141					.removeClass("hover")		// for Android 4.x
142					.on("mouseover", function() {
143						if (_checkRWD(width)) $(this).addClass("hover");
144					}).on("mouseout", function() {
145						if (_checkRWD(width)) $(this).removeClass("hover");
146					}).on("click", function(){
147						if (_checkRWD(width) && !js) {
148							location.href = $(this).find("a").attr("href");
149							return false;
150						}
151					});
152				
153			}
154		});
155	}
156	
157	$(".ResponsiveLinkListStyle .DateListStyle1 dt, .ResponsiveLinkListStyle .DateListStyle2 dt").each(function() {
158		$(this).next().find("a").prepend('<strong class="Date">' + $(this).text() + '</strong>');
159	});
160	
161	addLink(768);
162	addLink(580);
163	addLink(400);
164	
165});
166
167
168
169/* Box
170=========================================================================================== */
171
172$(function(){
173	
174	if (!$(".BoxPatternA .BoxImgStyle, .BoxPatternB .BoxImgStyle")[0]) return false;
175	
176	$(".BoxPatternA .BoxImgStyle, .BoxPatternB .BoxImgStyle").each(function() {
177		var html = $(this).html();
178		$(this).next(".Title, h2, h3, h4").after('<p class="BoxImgStyleRWD ShowRWD">' + html + '</p>');
179	});
180	
181});
182
183
184
185/* Table
186=========================================================================================== */
187
188$(function(){
189	
190	if ($(".ResponsiveTableStyle1")[0]) {
191		
192		$(".ResponsiveTableStyle1").each(function() {
193			
194			var thItem = [];
195			$(this).find("tr").eq(0).find("th").each(function(i) {
196				if (i > 0) thItem[i] = $(this).text();
197			});
198			$(this).find("tr").each(function() {
199				$(this).find("td").each(function(i) {
200					$(this).prepend('<span class="ResponsiveTableHeading">' + thItem[i+1] + '</span>');
201				});
202			});
203			
204		});
205		
206	}
207	
208	
209	if ($(".ResponsiveTableStyle2")[0] || $(".ResponsiveTableStyle3")[0]) {
210		
211		var contents = "#top, #SiteIdentity, #SiteIdentityS, #SiteIdentityL, #GlobalNavi, #TopicPath, #Contents, .Contents, .FatBanner, .FatMenu, .FatMenuWide, #Footer, #PageTopBottom";
212		var topID = (ua("safari")) ? "body" : "html";
213		var scrolltop = 0;
214		var android4 = navigator.userAgent.indexOf("Android 4") !== -1;		// for Android 4.x
215		

216		$(".ResponsiveTableStyle2, .ResponsiveTableStyle3").each(function() {
217			
218			var grid = $(this).parent(".Grid4")[0] ? "Contents965" : "Contents720";
219			
220			var h = '<div class="ResponsiveTableWindow">';
221			h += '<div class="SiteIdentityP">';
222			h += '<p><a href="http://www.hitachi.co.jp/"><img src="/image/jp/r1/corp_id.gif" alt="Hitachi" width="95" height="29" /></a></p>';
223			h += '<ul class="CloseButtonStyle">';
224			h += '<li><a href="javascript:void(0);">閉じる</a></li>';
225			h += '</ul>';
226			h += '</div>';
227			h += android4 ? '<div class="ResponsiveTableContainer">' : '';	// for Android 4.x
228			h += '<div class="' + grid + '">';
229			h += $(this).find(".TableSet").html();
230			h += '</div>';
231			h += android4 ? '</div>' : '';					// for Android 4.x
232			h += '</div>';
233			
234			$("body").append(h);
235			
236		});
237		
238		$(".LinkSet a").on("click", function() {
239			
240			scrolltop = $(topID).scrollTop();
241			
242			var index = $(".LinkSet a").index(this);
243			$("html").addClass("ResponsiveTableWindowOpen");
244			$(contents + ", #HeaderArea").hide();
245			$(".ResponsiveTableWindow").eq(index).show();
246			
247			$(topID).scrollTop(0);
248			
249		});
250		
251		$(".CloseButtonStyle").on("click", function() {
252			
253			var index = $(".CloseButtonStyle").index(this);
254			$("html").removeClass("ResponsiveTableWindowOpen");
255			$(contents).removeAttr("style");
256			$("#HeaderArea").show();
257			$(".ResponsiveTableWindow").eq(index).removeAttr("style");
258			
259			$(topID).scrollTop(scrolltop);
260			
261		});
262		
263	}
264	
265});
266
267
268
269/* Branding Image
270=========================================================================================== */
271
272$(function(){
273	
274	$(".ResponsiveBrandingImgStyle").each(function() {
275		
276		if ($(this).find("a")[0] && !$(this).find(".branding-image")[0]) {
277			$(this).addClass("hover").on("click", function() {
278				location.href = $(this).find("a").attr("href");
279			});
280		}
281		
282	});
283	
284});
285
286
287
288/* Image Box
289=========================================================================================== */
290
291$(function(){
292	
293	$(".ImgBoxStyle1, .ImgBoxStyle2").each(function() {
294		var $img = $(this).find(".ImgOnlyStyle");
295		var html = $img.html();
296		$img.replaceWith('<p class="ImgOnlyStyle"><span>' + html + '</span></p>');
297	});
298	
299});
300
301$(window).on("load resize", function() {
302	
303	if (_checkRWD(995) && !_checkRWD(580)) {
304		
305		$(".ImgBoxStyle1, .ImgBoxStyle2").each(function() {
306			
307			var $img = $(this).find("span");
308			$img.removeAttr("style");
309			var boxH = $(this).height();
310			var imgW = $img.width();
311			var imgH = $img.height();
312			
313			if (boxH > imgH) {
314				imgW = imgW * (boxH / imgH);
315				var imgM = ($(this).find(".ImgOnlyStyle").width() - imgW) / 2;
316				$img.width(imgW).css({marginLeft:imgM});
317			}
318			
319		});
320		
321	}
322	
323});
324
325
326
327/* Category Navigation
328=========================================================================================== */
329
330$(function(){
331	
332	$(".CategoryNavi .Bottom").each(function() {
333		var cn = '<ul class="BottomSP ShowRWD">';
334		cn += $(this).html();
335		cn += '</ul>';
336		$(this).parent().find(".Top2 .Current").append(cn);
337	});
338	
339});
340
341
342
343/* Smooth Scroll
344=========================================================================================== */
345
346$(function(){
347	
348	var topID = (ua("safari")) ? "html,body" : "html";
349	
350	$(".SmoothScroll").unbind().click(function(){
351		var link = $(this).attr("href");
352		if(link.charAt(0)=="#" && link.charAt(1)!="") {
353			var offset = $(link).offset();
354			var tid = setTimeout(function() {
355				$(topID).stop().animate({scrollTop: offset.top}, 800, "easeInOutCubic", function() {
356					location.href = link;
357				});
358			}, 10);
359			return false;
360		}
361	});
362	
363});
364
365
366
367/* Page Top Button
368=========================================================================================== */
369
370$(window).on("load", function() {
371	
372	var link = navigator.userAgent.indexOf("Android 2") == -1 ? "#top" : "javascript:void(0)";
373	if (!$("#PageTopBottom")[0]) $("body").append('<ul id="PageTopBottom" class="ShowRWD"><li><a href="' + link + '"><span>ページの先頭へ</span></a></li></ul>');
374	
375	var topID = (ua("safari")) ? "html,body" : "html";
376	
377	$("#PageTopBottom a").on("click", function(){
378		if (navigator.userAgent.indexOf("Android 2") == -1) {
379			var tid = setTimeout(function() {
380				$(topID).stop().animate({scrollTop: 0}, 800, "easeInOutCubic", function() {
381					location.href = "#top";
382				});
383			}, 10);
384		} else {
385			var scrolltop = $(topID).scrollTop();
386			$(topID).scrollTop(scrolltop - 1);
387			var tid = setTimeout(function() {
388				$(topID).stop().animate({scrollTop: 1}, 800, "easeInOutCubic");
389			}, 50);
390		}
391		return false;

392	});
393	
394});
395
396
397
398/* for Android 2.x
399=========================================================================================== */
400
401$(function(){
402	
403	if (navigator.userAgent.indexOf("Android 2") !== -1) {
404		
405		$("a").each(function() {
406			var link = $(this).attr("href");
407			if (typeof link !== "undefined" && link.charAt(0)=="#" && link.charAt(1)!="") {
408				if ($(this).hasClass("SmoothScroll")) {
409					$(this).attr("href", "javascript:_smoothScroll('" + link + "')")
410					.removeClass("SmoothScroll");
411				} else {
412					$(this).attr("href", "javascript:_internalLink('" + link + "')")
413				}
414			}
415		});
416		
417		var topID = (ua("safari")) ? "body" : "html";
418		
419		_smoothScroll = function(link) {
420			var offset = $(link).offset();
421			var offsettop = offset.top == 0 ? 1 : offset.top;
422			var scrolltop = $(topID).scrollTop();
423			$(topID).scrollTop(scrolltop - 1);
424			var tid = setTimeout(function() {
425				$(topID).stop().animate({scrollTop: offsettop}, 800, "easeInOutCubic");
426			}, 50);
427			return false;
428		}
429		
430		_internalLink = function(link) {
431			var offset = $(link).offset();
432			var offsettop = offset.top == 0 ? 1 : offset.top;
433			$(topID).scrollTop(offsettop);
434			return false;
435		}
436		
437	}
438	
439});
440
441
442
443})(jQuery);
444
445
446
447if (navigator.userAgent.indexOf("Android 2") !== -1) {
448	
449	var _smoothScroll;
450	var _internalLink;
451	
452}
453
454
455
456/* Base Settings
457=========================================================================================== */
458
459// Browser size
460
461function getBrowserWidth() {
462	return window.innerWidth || self.innerWidth || (document.documentElement&&document.documentElement.clientWidth) || document.body.clientWidth;
463}
464
465function getBrowserHeight() {
466	return window.innerHeight || self.innerHeight || (document.documentElement&&document.documentElement.clientHeight) || document.body.clientHeight;
467}