https://hakuoh.jp/common/js/base.js

1window.requestAnimFrame = (function(callback) {
2  return window.requestAnimationFrame ||
3  window.webkitRequestAnimationFrame ||
4  window.mozRequestAnimationFrame ||
5  window.oRequestAnimationFrame ||
6  window.msRequestAnimationFrame ||
7  function(callback){
8    return window.setTimeout(callback, 1000/60);
9  };
10})();
11
12window.cancelAnimFrame = (function(_id) {
13  return window.cancelAnimationFrame ||
14  window.cancelRequestAnimationFrame ||
15  window.webkitCancelAnimationFrame ||
16  window.webkitCancelRequestAnimationFrame ||
17  window.mozCancelAnimationFrame ||
18  window.mozCancelRequestAnimationFrame ||
19  window.msCancelAnimationFrame ||
20  window.msCancelRequestAnimationFrame ||
21  window.oCancelAnimationFrame ||
22  window.oCancelRequestAnimationFrame ||
23  function(_id) { window.clearTimeout(id); };
24})();
25
26var AutoHover = function(_type) {
27  this._type = _type;
28  this._targets = document.getElementsByClassName(this._type);
29  if (!this._targets.length)	return;
30  this.init();
31};
32
33AutoHover.prototype = {
34  init : function() {
35    var _self = this;
36    var i = 0|0;
37    for (i = 0; i<this._targets.length; i=(i+1)|0) {
38      this._targets[i].addEventListener('mouseenter', function(e) {_self.onMouseOver({currentTarget:e.currentTarget, self:_self})} , false);
39      this._targets[i].addEventListener('mouseleave', function(e) {_self.onMouseOut({currentTarget:e.currentTarget, self:_self})} , false);
40    };
41  },
42  onMouseOver:function(e) {
43    if (e.self._type === 'img_ovr') {
44      e.currentTarget.setAttribute('src', e.currentTarget.getAttribute('src').replace(/_off/ig, '_on'));
45      return;
46    }
47    Velocity(e.currentTarget, 'stop');
48    Velocity(e.currentTarget, {opacity:0.7}, {duration:300, delay:0, easing:'easeOutSine'});
49  },
50  onMouseOut:function(e) {
51    if (e.self._type === 'img_ovr') {
52      e.currentTarget.setAttribute('src', e.currentTarget.getAttribute('src').replace(/_on/ig, '_off'));
53      return;
54    }
55    Velocity(e.currentTarget, 'stop');
56    Velocity(e.currentTarget, {opacity:1}, {duration:300, delay:0, easing:'easeInSine'});
57  }
58}
59
60var PageTop = function() {
61  this._targets = document.getElementsByClassName('pagetop');
62  if (!this._targets.length)	return;
63  this.init();
64}
65PageTop.prototype = {
66  _isShow : false,
67  init : function() {
68    var _self = this;
69    window.addEventListener('scroll', _.debounce(function() {_self.onScroll();}, 50) , false);
70  },
71  onScroll : function() {
72    var _top = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
73    _top > 0 ? this.show() : this.hide();
74  },
75  show : function() {
76    if (this._isShow)	return;
77    this._isShow = true;
78    this.setVisible(1);
79  },
80  hide : function() {
81    if (!this._isShow)	return;
82    this._isShow = false;
83    this.setVisible(0);
84  },
85  setVisible : function(_opacity) {
86    var i = 0|0;
87    for (i = 0; i<this._targets.length; i=(i+1)|0) {
88      Velocity(this._targets[i], 'stop');
89      Velocity(this._targets[i], {opacity:_opacity}, {duration:300, delay:0, easing:'easeOutSine'});
90    };
91  }
92}
93
94var AnchorLink = function() {
95  this._targets = document.querySelectorAll('a[href^="#"]');
96  if (!this._targets.length)	return;
97  this.init();
98}
99AnchorLink.prototype = {
100  init : function() {
101    var i = 0|0;
102    for (i = 0; i<this._targets.length; i=(i+1)|0) {
103      this._targets[i].addEventListener('click', this.onClickHD , false);
104    };
105  },
106  onClickHD : function(e) {
107    var _hash = e.currentTarget.getAttribute('href').replace('#', '');
108    Velocity(document.getElementById(_hash), 'scroll', {duration:1000, delay:0, easing:'easeInOutSine'});
109    e.preventDefault();
110  }
111}
112
113var Base = function() {
114  !function Base() {
115    new AutoHover('img_ovr');
116    new AutoHover('alpha_ovr');
117    new PageTop();
118    //new AnchorLink();
119  }();
120  return Base;
121};
122
123
124//-  ------------------------------------------------------
125function addClass(_elem, _class) {
126if (_elem.classList)
127  _elem.classList.add(_class);
128else
129  _elem.className += ' ' + _class;
130}
131//-  ------------------------------------------------------
132function removeClass(_elem, _class) {
133 if (_elem.classList)
134   _elem.classList.remove(_class);
135 else
136   _elem.className = _elem.className.replace(new RegExp('(^|\\b)' + _class.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
137}
138//-  ------------------------------------------------------
139function hasClass(_elem, _className) {
140 if (_elem.classList) {
141   return _elem.classList.contains(_className);
142 } else {
143   return new RegExp('(^| )' + _className + '( |$)', 'gi').test(_elem._className);
144 }
145}
146//-  ------------------------------------------------------
147function fadeIn(_elem) {
148  _elem.style.opacity = 0;
149  var last = +new Date();
150  var tick = function() {
151    _elem.style.opacity = +_elem.style.opacity + (new Date() - last) / 400;
152    last = +new Date();
153    if (+_elem.style.opacity < 1) {
154      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
155    }
156  };
157  tick();
158}
159//-  ------------------------------------------------------
160
161
162
163// img change ================
164var $setElem = $('.switch'),
165pcName = '_pc',// pc img
166spName = '_sp',// sp img
167replaceWidth = 780;
168
169$setElem.each(function(){
170var $this = $(this);
171
172function imgSize(){
173	var windowWidth = parseInt($(window).width());
174		if(windowWidth >= replaceWidth) {
175		$this.attr('src',$this.attr('src').replace(spName,pcName)).css({visibility:'visible'});
176		} else if(windowWidth < replaceWidth) {
177		$this.attr('src',$this.attr('src').replace(pcName,spName)).css({visibility:'visible'});
178		}
179	}
180	$(window).resize(function(){
181		imgSize();
182	});
183	imgSize();
184});
185
186// ========================
187var winH = $(window).height();
188var winW = $(window).width();
189var headH = $('header').outerHeight();
190var	spW = 767;
191var nav_col1 = $('.navi_wrap01').outerHeight();
192var menuflag;
193var sp_flg = 0;
194// ========================
195
196if(spW <= winW) {
197  sp_flg = 0;
198} else {
199  sp_flg = 1;
200}
201
202function common_js() {
203	if(spW <= winW) {
204		$('body').addClass('status_pc');
205
206		// pc
207		headH = 0;
208		$('.main_area').css({ 'display':'block', marginTop:0});
209		scroll_link();
210		scroll_link2();
211
212    $('.sp_menu').height('auto').css('overflow','hidden');
213    $('html').css({'overflow': 'visible', 'height': 'auto'});
214    $('body').css({'overflow': 'visible', 'height': 'auto'});
215    $('#menu').css({'display': 'block'});
216    if($('.sp_menu').is(':visible')) {
217      $('.menu_icon').removeClass('active');
218      $('#menu_close').css({'display': 'none'});
219      menuflag = 'close';
220    }
221    if (sp_flg == 1) {
222      sp_flg = 0;
223    }
224	} else {
225		// sp
226		headH = 55;
227		$('body').removeClass('status_pc');
228
229    if (sp_flg == 0) {
230      $('#menu').css({'display': 'none'});
231      sp_flg = 1;
232    }
233
234		$('.main_area').css({marginTop: headH});
235		scroll_link();
236		scroll_link2();
237
238	}
239
240}
241
242// sp menubtn ================
243function menubtn(){
244	// if(!$('body').hasClass('status_pc')) {
245
246		menuflag = 'close';
247
248		$('#menu_btn').click(function() {
249
250			if(menuflag == 'close') {
251				winH = $(window).height();
252				$('.menu_icon').addClass('active');
253				$('#menu').slideDown(300);
254				$('#menu_close').slideDown(300);
255				$('.sp_menu').height(winH-headH).css('overflow-y','scroll');
256        $('html').css({'overflow': 'hidden', 'height': '100%'});
257        $('body').css({'overflow': 'hidden', 'height': '100%'});
258				menuflag = 'open';
259
260			} else {
261				$('.menu_icon').removeClass('active');
262				$('#menu').slideUp(300);
263				$('#menu_close').slideUp(300);
264        $('html').css({'overflow': 'visible', 'height': 'auto'});
265        $('body').css({'overflow': 'visible', 'height': 'auto'});
266				menuflag = 'close';
267			}
268		});
269	// }
270}
271function menu_close(){
272	$('.menu_icon').removeClass('active');
273	$('#menu').slideUp(300);
274	$('#menu_close').slideUp(300);
275	menuflag = 'close';
276}
277
278// second side_nav ================
279function side_nav() {
280	$('#side_navi_list > li span').hide();
281
282	$('#side_navi_list > li').click(function() {
283		if(!$(this).hasClass('current')) {
284			if($('span',this).length == 0) {
285				$(this).toggleClass('only');
286
287			} else {
288				$(this).addClass('current');
289				$('span',this).stop().slideDown(200);
290			}
291
292		} else {
293			$(this).removeClass();
294			$('span',this).stop().slideUp(200);
295		}
296	});
297
298  //- current 表示
299  if($('#side_navi_list').length > 0){
300    var _path = window.location.pathname,
301      _this = $('#side_navi_list li a[href="'+ _path +'"]');
302
303    _this.parents('span').addClass('now').css({'display': 'block'});
304    _this.parent().siblings('span').css({'display': 'block'});
305    _this.parents('li').addClass('current');
306
307    // console.log(_path);
308  }
309
310}
311
312// link scroll ================
313function scroll_link() {
314	var hash_data = location.hash;
315	if (hash_data) {
316		if ($(hash_data).offset()) {
317			var HashOffset = $(hash_data).offset().top - headH;
318			$('html,body').animate({scrollTop: HashOffset}, 1);
319		}
320		return false;

321	}
322}
323function scroll_link2() {
324	$('a[href^="#"]').click(function(){
325		var Hash = $(this.hash);
326		if ($(Hash).offset()) {
327			var HashOffset = $(Hash).offset().top - headH;
328			$('html,body').animate({scrollTop: HashOffset}, 1000);
329		}
330		return false;
331	});
332}
333
334// ================================
335
336$(function() {
337	$(window).ready(function() {
338		common_js();
339		side_nav();
340		menubtn();
341	});
342
343	$(window).resize(function() {
344		winW = $(window).width();
345		common_js();
346	});
347});
348
349
350//- category current ===================
351$('.category_nav li').each(function() {
352	$(this).click(function(){
353		var activename = '.' + $(this).attr('class');
354
355		// activeリセット
356		$('.category_nav li span.current').removeClass('current');
357		$('span',this).addClass('current');
358
359		if(!$(this).hasClass('btn_all')) {
360			//activeきりかえ
361			$('.news_list li:not(activename)').css('display','none');
362			$(activename).fadeIn(500);
363
364		} else {
365			$('.news_list li').fadeIn(500);
366		}
367	});
368});
369
370
371// tab ===================
372function tabChange() {
373	var _tabs = $('#switchBtn > li');
374	var _tabcontent = $('.category_wrap > li');
375
376	$('#switchBtn > li:first').addClass('current');
377	$('.category_wrap > li:first').addClass('current');
378
379	$('#switchBtn li').click(function(){
380		//タブactive解除
381		_tabcontent.hide().removeClass('current');
382		_tabs.removeClass('current');
383
384		//タブactive
385		_tabcontent.eq(_tabs.index(this)).fadeToggle(1000).addClass('current');
386		$(this).addClass('current');
387
388		//タブ中身 btn_all選択にする
389		_tabcontent.eq(_tabs.index(this)).find('.category_nav > li:first').addClass('current');
390		_tabcontent.eq(_tabs.index(this)).find('.category_nav > li:first span').addClass('current');
391		$('.news_list li').fadeIn(500);
392	});
393}
394
395
396
397window.addEventListener('DOMContentLoaded', function() {
398  if (window.jQuery) window.Velocity = window.jQuery.fn.velocity;
399  new Base();
400	tabChange();
401});