https://www.matsuyafoods.co.jp/js/scripts.js?ver=1.0.4

1var app = app || {};
2
3var spBreak = 750;
4
5app.init = function() {
6
7  app.tabletViewport();
8  app.navigation();
9  app.navigation_movie();
10  app.dropdown();
11  app.slider();
12  app.tabs();
13  app.getPhoto();
14  app.jsSelect();
15  app.jsTabs();
16
17};
18
19app.isMobile = function() {
20
21  return window.matchMedia('(max-width: ' + spBreak + 'px)').matches;
22
23};
24
25app.tabletViewport = function() {
26
27  var viewport = document.getElementById('viewport');
28
29  var viewports = {
30    default: viewport.getAttribute('content'),
31    tablet: 'width=1300, user-scalable=0',
32    smartphone: 'width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=0'
33  };
34
35  var viewportSet = function() {
36    if (screen.width >= 751 && screen.width <= 1300) {
37      viewport.setAttribute('content', viewports.tablet);
38    } else {
39      viewport.setAttribute('content', viewports.smartphone);
40    }
41  };
42
43  viewportSet();
44
45  window.onload = function() {
46    viewportSet();
47  };
48
49  window.onresize = function() {
50    viewportSet();
51  };
52
53};
54
55app.navigation = function() {
56
57  var btnMenu = $('#btn-menu');
58  var spNav = $('#navigation');
59  var overlay = $('#overlay-menu');
60  var header = $('header');
61  var offsetY = window.pageYOffset;
62
63  btnMenu.click(function() {
64    $(this).toggleClass('js-active');
65    header.toggleClass('js-header');
66    if ($(this).hasClass('js-active')) {
67      spNav.slideDown();
68      offsetY = window.pageYOffset;
69      $('body').css({
70        position: 'fixed',
71        'top': -offsetY + 'px',
72        width: '100%'
73      });
74    } else {
75      spNav.slideUp();
76      $('body').css({
77        'position': 'static',
78        'top': 'auto',
79        'width': 'auto'
80      });
81      $(window).scrollTop(offsetY);
82    }
83    return false;
84  });
85
86  overlay.click(function() {
87    btnMenu.removeClass('js-active');
88    header.removeClass('js-header');
89    spNav.slideUp();
90    $('body').css({
91      'position': 'static',
92      'top': 'auto',
93      'width': 'auto'
94    });
95    $(window).scrollTop(offsetY);
96    return false;
97  });
98
99};
100
101app.navigation_movie = function() {
102
103  var btnMenu = $('#btn-menu-movie');
104  var spNav = $('#navigation-movie');
105  var overlay = $('#overlay-menu-movie');
106  var header = $('header');
107  var offsetY = window.pageYOffset;
108
109  btnMenu.click(function() {
110    $(this).toggleClass('js-active');
111    header.toggleClass('js-header');
112    if ($(this).hasClass('js-active')) {
113      spNav.slideDown();
114      offsetY = window.pageYOffset;
115      $('body').css({
116        position: 'fixed',
117        'top': -offsetY + 'px',
118        width: '100%'
119      });
120    } else {
121      spNav.slideUp();
122      $('body').css({
123        'position': 'static',
124        'top': 'auto',
125        'width': 'auto'
126      });
127
128      $(window).scrollTop(offsetY);
129    }
130    return false;
131  });
132
133	overlay.click(function() {
134    btnMenu.removeClass('js-active');
135    header.removeClass('js-header');
136    spNav.slideUp();
137
138    $('body').css({
139
140      'position': 'static',
141
142
143      'top': 'auto',
144      'width': 'auto'
145    });
146    $(window).scrollTop(offsetY);
147    return false;
148  });
149
150};
151
152
153app.dropdown = function() {
154  if ($('.btn-dropdown-js').length) {
155    $('.btn-dropdown-js').click(function() {
156
157      $(this).toggleClass('active');
158      $(this).parent().find('> .js-accordion').slideToggle();
159
160      return false;
161
162    });
163  }
164
165  if ($('.accordion-load').length > 0) {
166
167    $('.accordion-load').each(function() {
168
169
170
171
172      var accObject = $(this);
173      var numberCurrent = $(this).attr('data-current');
174      var numberShow = $(this).attr('data-show');
175      accObject.find('.list > .item').slice(0, numberCurrent).show();
176
177      accObject.find('.js-load-more').on('click', function(e) {
178        e.preventDefault();
179        accObject.find('.list > .item:hidden').slice(0, numberShow).slideDown();
180        if (accObject.find('.list > .item:hidden').length == 0) {
181
182          $('.js-load-more').fadeOut();
183        };
184      });
185    });
186
187  }
188
189};
190
191app.slider = function() {
192  if ($(".keyvisual-slide").length) {
193    var $slide = $('.keyvisual-slide').slick({
194      arrows: true,
195      autoplay: true,
196      autoplaySpeed: 5000,
197      speed: 400,
198      dots: false,
199      centerMode: true,
200      variableWidth: true,
201      infinite: true,
202      focusOnSelect: false,
203      pauseOnHover: false,
204      responsive: [{
205        breakpoint: spBreak,
206        settings: {
207          variableWidth: false,
208          centerMode: false,
209          dots: true,
210          fade: true
211        }
212      }]
213    });

214    $('#list-brand a[data-slide]').click(function(e) {
215
216//			if (!$(this).hasClass('active')) {
217//      $('#list-brand a').removeClass('active');
218//      e.preventDefault();
219//      var slideno = $(this).data('slide');
220//      $(this).addClass('active');
221//      $slide.slick('slickGoTo', slideno - 1);
222//			return false;
223//			}
224    });
225    $slide.on('afterChange', function(event, slick, currentSlide, nextSlide) {
226      $('.map-point').removeClass('active');
227      $('.map-point[data-slide=' + parseInt(currentSlide + 1) + ']').addClass('active');
228    });
229
230  }
231};
232
233app.slider = function() {
234  if ($(".matsuya-keyvisual-slide").length) {
235    $('.matsuya-keyvisual-slide').slick({
236      arrows: true,
237      autoplay: true,
238      autoplaySpeed: 5000,
239      speed: 400,
240      dots: true,
241      centerMode: true,
242      variableWidth: true,
243      infinite: true,
244      focusOnSelect: false,
245      pauseOnHover: false,
246      pauseOnFocus: false,
247      responsive: [{
248        breakpoint: spBreak,
249        settings: {
250          variableWidth: false,
251          centerMode: false
252        }
253      }]
254    });
255  }
256};
257
258
259
260app.tabs = function() {
261
262  $('.jtabs').each(function() {
263    var $active, $content, $links = $(this).find('a');
264
265    $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
266    $active.addClass('active');
267
268    $content = $($active.attr('href'));
269
270    $links.not($active).each(function() {
271      $($(this).attr('href')).hide();
272
273    });
274
275    $(this).on('click', 'a', function(e) {
276      $active.removeClass('active');
277      $content.hide();
278      $active = $(this);
279
280			$content = $($(this).attr('href'));
281      $active.addClass('active');
282      $content.show();
283      e.preventDefault();
284
285    });
286  });
287
288};
289
290app.jsTabs = function() {
291  var mod = this;
292
293  mod.selector = 'ul.js-tabs li';
294
295  mod.selectorContent = '.tab-content';
296
297
298
299
300
301
302  mod.init = function() {
303
304
305    $(mod.selector).click(function() {
306      var el = $(this);
307      var tabId = $(this).attr('data-tab');
308      var tabHead = $(this).attr('data-head');
309
310      var tabBody = $(this).attr('data-body');
311      $('.' + tabHead).removeClass('current');
312
313      $(this).addClass('current');
314
315      $('.' + tabBody).removeClass('current');
316      $("#" + tabId).addClass('current');
317      if (!$(this).parents('.tab-content').length) {
318        resetSelection();
319
320        $('.select-options-year li.options-year').removeClass('options-year');
321        $('.select-options-year li[rel="' + tabId + '"]').addClass('options-year');
322
323        var txtY = $('.select-options-year li[rel="' + tabId + '"]').text();
324        $('.select-styled-year').text(txtY);
325      }
326
327      if ($(this).parents('.tab-content').length) {
328        $('.select-options-cate li.options-cate').removeClass('options-cate');
329
330        $('.select-options-cate li[rel="' + tabId + '"]').addClass('options-cate');
331
332
333        var txt = $('.select-options-cate li[rel="' + tabId + '"]').text();
334
335        $('.select-styled-cate').text(txt);
336
337      }
338    });
339
340  };
341  if ($(mod.selector).length > 0) {
342
343    mod.init();
344
345  }
346
347  function resetSelection() {
348
349
350    $('.select-options li').removeClass('options-active');
351    $('.select-styled').text($('.select-year').children('option:first').text());
352  }
353};
354
355app.getPhoto = function() {
356
357  if ($('#get-photo').length) {
358    var total = 6;
359
360
361    var feed = new Instafeed({
362      get: 'user',
363      userId: 13022130320,
364
365      accessToken: '13022130320.1677ed0.3fd34aacc22a4248b02e8da59911ce9b',
366      target: 'get-photo',
367
368      resolution: 'low_resolution',
369
370      limit: total,
371      template: '<a href="{{link}}" target="_blank" class="trans"><img class="{{orientation}}" src="{{image}}" /></a>',
372
373      after: function() {
374
375        var group = $('#get-photo > a');
376        for (var i = 0; i < group.length; i += 1) {
377          group.slice(i, i + 1).wrapAll('<div class="col-thumb"><div class="item"></div></div>');
378        }
379
380			}
381    });
382    window.onload = function() {
383      feed.run();
384
385
386    };
387  }
388};
389
390app.jsSelect = function() {
391
392  $('.js-select').each(function() {
393    var $this = $(this),
394      numberOfOptions = $(this).children('option').length;
395    $this.addClass('select-hidden');
396
397
398
399
400
401
402    $this.wrap('<div class="select-cmn"></div>');
403
404
405    $this.after('<div class="select-styled"></div>');
406    var $styledSelect = $this.next('div.select-styled');
407    $styledSelect.text($this.children('option').eq(0).text());
408    var $list = $('<ul />', {
409
410      'class': 'select-options'
411    }).insertAfter($styledSelect);
412
413    for (var i = 0; i < numberOfOptions; i++) {
414
415      $('<li />', {
416        text: $this.children('option').eq(i).text(),
417        rel: $this.children('option').eq(i).val()
418      }).appendTo($list);
419
420    }
421    var $listItems = $list.children('li');
422
423    $styledSelect.click(function(e) {
424      e.stopPropagation();
425      $('div.select-styled.active').not(this).each(function() {
426
427        $(this).removeClass('active').next('ul.select-options').hide();
428      });
429
430      $(this).toggleClass('active').next('ul.select-options').toggle();
431    });
432
433		$listItems.click(function(e) {
434
435      e.stopPropagation();
436      var id1 = $(this).attr('rel');
437      $styledSelect.text($(this).text()).removeClass('active');
438      $this.val($(this).attr('rel'));
439
440			$('ul.select-options .options-active').removeClass('options-active');
441      $(this).addClass('options-active');
442
443      $('.js-tabs .tab-parent.current').removeClass('current');
444
445      $('.tab-content.current').removeClass('current');
446
447      $('.tab-content#' + id1).addClass('current');
448      $('.select-options-year li.options-year').removeClass('options-year');
449
450      $('.select-options-year li[rel="' + id1 + '"]').addClass('options-year');
451      var txtYear = $('.select-options-year li[rel="' + id1 + '"]').text();
452      $('.select-styled-year').text(txtYear);
453      $list.hide();
454    });
455    $(document).click(function() {
456      $styledSelect.removeClass('active');
457      $list.hide();
458    });
459
460  });
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556  $('.js-select-sm').each(function() {
557    var $this = $(this),
558      numberOfOptions = $(this).children('option').length;
559
560    $this.addClass('select-hidden');
561    $this.wrap('<div class="select-cmn-cate"></div>');
562    $this.after('<div class="select-styled-cate"></div>');
563
564    var $styledSelect = $this.next('div.select-styled-cate');
565    $styledSelect.text($this.children('option').eq(0).text());
566    var $list = $('<ul />', {
567
568      'class': 'select-options-cate'
569
570    }).insertAfter($styledSelect);
571
572    for (var i = 0; i < numberOfOptions; i++) {
573      $('<li />', {
574        text: $this.children('option').eq(i).text(),
575        rel: $this.children('option').eq(i).val()
576      }).appendTo($list);
577    }
578    var $listItems = $list.children('li');
579
580    $styledSelect.click(function(e) {
581      e.stopPropagation();
582      var id1 = $(this).attr('data-tab');
583      $('div.select-styled-cate.active').not(this).each(function() {
584
585        $(this).removeClass('active').next('ul.select-options-cate').hide();
586      });
587      $(this).toggleClass('active').next('ul.select-options-cate').toggle();
588    });
589
590    $listItems.click(function(e) {
591
592      e.stopPropagation();
593      var elm = $(this);
594      var id2 = $(this).attr('rel');
595      $styledSelect.text($(this).text()).removeClass('active');
596
597
598
599
600
601      $this.val($(this).attr('data-tab'));
602      $('ul.select-options-cate .options-cate').removeClass('options-cate');
603
604
605      $(this).addClass('options-cate');
606      elm.parents('.tab-content').find('.tab-content-sub.current').removeClass('current');
607      $('.tab-content-sub#' + id2).addClass('current');
608
609
610      elm.parents('.tab-content').find('.ul-tab-text li.current').removeClass('current');
611      elm.parents('.tab-content').find('.ul-tab-text li[data-tab="' + id2 + '"]').addClass('current');
612      $list.hide();
613    });
614
615    $(document).click(function() {
616      $styledSelect.removeClass('active');
617      $list.hide();
618    });
619
620  });
621
622
623  $('.js-select-year').each(function() {
624    var $this = $(this),
625      numberOfOptions = $(this).children('option').length;
626
627    $this.addClass('select-hidden');
628    $this.wrap('<div class="select-cmn-year"></div>');
629    $this.after('<div class="select-styled-year"></div>');
630    var $styledSelect = $this.next('div.select-styled-year');
631
632
633    $styledSelect.text($this.children('option').eq(0).text());
634
635    var $list = $('<ul />', {
636      'class': 'select-options-year'
637    }).insertAfter($styledSelect);
638    for (var i = 0; i < numberOfOptions; i++) {
639
640      $('<li />', {
641        text: $this.children('option').eq(i).text(),
642
643        rel: $this.children('option').eq(i).val()
644
645      }).appendTo($list);
646
647    }
648
649
650    $('ul.select-options-year li:first-child').addClass('options-year');
651
652    var $listItems = $list.children('li');
653
654    $styledSelect.click(function(e) {
655      e.stopPropagation();
656      $('div.select-styled-year.active').not(this).each(function() {
657        $(this).removeClass('active').next('ul.select-options-year').hide();
658      });
659
660      $(this).toggleClass('active').next('ul.select-options-year').toggle();
661    });
662
663
664
665    $listItems.click(function(e) {
666      e.stopPropagation();
667      var elYear = $(this);
668      var id3 = $(this).attr('rel');
669
670      $styledSelect.text($(this).text()).removeClass('active');
671      $this.val($(this).attr('data-tab'));
672      $('ul.select-options-year .options-year').removeClass('options-year');
673      $(this).addClass('options-year');
674      $('.tab-content.current').removeClass('current');
675      $('.tab-content#' + id3).addClass('current');
676      if ($('.js-tabs-year li[data-tab="' + id3 + '"]').length) {
677        $('.js-tabs-year li').removeClass('current');
678        $('.select-options li.options-active').removeClass('options-active');
679
680//				$('.select-styled').text('~2014');
681        $('.js-tabs-year li[data-tab="' + id3 + '"]').addClass('current');
682      } else {
683        $('.js-tabs-year li').removeClass('current');
684        $('.select-options li.options-active').removeClass('options-active');
685        $('.select-options li[rel="' + id3 + '"]').addClass('options-active');
686        var txt = $('.select-options li[rel="' + id3 + '"]').text();
687        $('.select-styled').text(txt);
688      }
689
690      if ($('.js-tabs-cate li[data-tab="' + id3 + '"]').length) {
691        $('.js-tabs-cate li.current').removeClass('current');
692        $('.js-tabs-cate li[rel="' + id3 + '"]').addClass('current');
693      }
694
695      $list.hide();
696
697
698
699
700
701
702    });
703
704
705    $(document).click(function() {
706      $styledSelect.removeClass('active');
707      $list.hide();
708    });
709
710  });
711
712};
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735$(function() {
736
737  app.init(); anchorScroll();
738
739
740});
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755function anchorScroll() {
756	$('a[href^="#"]').not(".noscroll").click(function () {
757		var e = $(this).attr("href"),
758			i = $("#" == e || "" == e ? "body" : e);
759
760		if ("fixed" == $("header").css("position")) var o = $("header").innerHeight();
761		else o = 0;
762		var t = i.offset().top - o;
763
764
765		return $("body , html").animate({
766			scrollTop: t
767		}, 500, "swing"), !1
768	})
769}
770
771
772
773
774
775
776
777
778
779
780

781function topBtn_engage() {
782	var h = window.innerHeight ? window.innerHeight: $(window).height();
783	var bh = $('body').innerHeight();
784
785	var w = $(window).innerWidth();
786	var x = 1000;
787
788	var topBtn = $('.btn_totop');
789
790	var footerOffset = $(".copyright").offset();
791	var _adj1 = 0; var _adj2 = -10;
792
793	if ($(".copyright")[0]) {
794
795		if ($(this).scrollTop() > footerOffset.top - h + _adj1) {
796			topBtn.css("bottom" , bh - (footerOffset.top + (bh - ($(this).scrollTop() + h) ) + _adj2 ) );
797		}
798		else {
799
800			topBtn.css("bottom" , '');
801		}
802	}
803
804
805	if ($(this).scrollTop() != 0) {
806		if ($(this).scrollTop() > 100) {
807			topBtn.show();
808		}
809
810		else {
811			topBtn.hide();
812		}
813
814	}
815
816	else {
817		topBtn.hide();
818	}
819
820}
821
822
823
824
825
826$(window).on("scroll touchstart touchmove touchend", function () {
827	topBtn_engage();
828
829
830});
831
832
833
834
835$('#safety_allergen .tablewrap').each(function() {
836	$(this).scroll(function() {
837
838
839
840		var scroll = $(this).scrollLeft();
841			if(scroll > 10) {
842				$(this).children('.slide_mark').fadeOut();
843
844			}
845	 });
846
847
848});
849
850
851/*
852  Top Video
853*/
854
855// video start timer
856/*
857setTimeout(function(){
858  var v = document.getElementById('matsuya-video');
859  v.play();
860},400);
861*/
862
863// fade
864$('#section-matsuya-movie-inner').fadeIn(4000);
865
866// スクロール途中からヘッダーを出現させるための設定を関数でまとめる
867if($('#top_page').length) {
868  var elemTop = 0;
869  function FixedAnime() {
870    var elemTop = $('.keyvisual').offset().top;
871    var movie_margin_bottom = $('.section-matsuya-movie').css('margin-bottom');
872    movie_margin_bottom = parseInt(movie_margin_bottom, 10);
873    elemTop = elemTop - movie_margin_bottom; // movieからのmargin-bottomの数値を引く
874    var scroll = $(window).scrollTop();
875    if(scroll >= elemTop) {
876      $('#container > .header-site').removeClass('UpMove'); // .header-siteについているUpMoveというクラス名を除く
877      $('#container > .header-site').addClass('DownMove'); // .header-siteについているDownMoveというクラス名を付与
878    } else {
879      if($('#container > .header-site').hasClass('animation_auto')){
880        $('#container > .header-site').removeClass('animation_auto');
881      }
882
883      if($('#container > .header-site').hasClass('DownMove')){ // すでに.header-siteにDownMoveというクラス名がついていたら
884        $('#container > .header-site').removeClass('DownMove'); // DownMoveというクラス名を除き
885        $('#container > .header-site').addClass('UpMove'); // UpnMoveというクラス名を付与
886      }
887    }
888  }
889
890  // 画面をスクロールをしたら動かしたい場合の記述
891  $(window).scroll(function () {
892    FixedAnime();// スクロール途中からヘッダーを出現させる関数を呼ぶ
893  });
894
895  // ページが読み込まれたらすぐに動かしたい場合の記述
896  $(window).on('load', function () {
897    var elemTop = $('.keyvisual').offset().top; // .keyvisualの位置まできたら
898    var scroll = $(window).scrollTop();
899    FixedAnime(); // スクロール途中からヘッダーを出現させる関数を呼ぶ
900  });
901
902  $('#container > .header-site #btn-menu').click(function() {
903    $('#container > .header-site').addClass('animation_auto');
904  });
905}