https://www.city.shimada.shizuoka.jp/js/new-layout/script.js

1let SHIMADA = {} || SHIMADA;
2
3SHIMADA.MENU = {
4  init: function () {
5    this.setParameters();
6    this.bindEvents();
7  },
8  setParameters: function () {
9    this.$menuOpen = $('.jsc-menu-open');
10    this.$menuClose = $('.jsc-menu-close');
11    this.$menuModal = $('.jsc-menu-modal');
12    this.$menuInnerModal = $('.jsc-inner-modal');
13    this.$jscHeaderAlert = $('.jsc-header-alert');
14    this.$jscHeaderOption = $('.jsc-header-option');
15
16    // menu button
17    this.$themeButton = $('#ss-theme > a');
18    this.$sizeButton = $('#size > span');
19
20    this.$body = $('body');
21  },
22  bindEvents: function () {
23    const myself = this;
24
25    this.$menuOpen.each(function(){
26      $(this).on('click', function(){
27        myself.controlMenu($(this));
28      })
29    })
30    this.$menuClose.each(function(){
31      $(this).on('click', function(){
32        myself.controlMenu($(this));
33      })
34    })
35    this.$menuModal.on('click', function(){
36      myself.controlMenu($(this));
37    })
38    this.$menuInnerModal.on('click', function(event){
39      event.stopPropagation();
40    })
41    this.$jscHeaderAlert.on('click', function(){
42      myself.checkModal();
43    })
44    this.$jscHeaderOption.on('click', function(){
45      myself.checkModal();
46    })
47    this.$themeButton.each(function(){
48      $(this).on('click', function(){
49        myself.checkModal();
50      })
51    })
52    this.$sizeButton.each(function(){
53      $(this).on('click', function(){
54        myself.checkModal();
55      })
56    })
57  },
58  controlMenu: function ($target) {
59    $('#header__alert--check').prop('checked', false);
60    let $parent = $target.parent('.jsc-menu');
61    $parent.find('.jsc-menu-open').toggle();
62    $parent.find('.jsc-menu-close').toggleClass('active');
63    $parent.find('.jsc-menu-modal').toggle();
64    this.$body.toggleClass('body-hidden');
65    $('.header__alert').toggleClass('alert_active');
66    $('.header__alert--left__heading').toggleClass('alert_active');
67    $('.header__alert--left').toggleClass('alert_active');
68    $('.header__alert--list').toggleClass('alert_active');
69    $('.header__option').toggleClass('alert_active');
70    $('.header__alert--title').toggleClass('alert_active');
71  },
72  checkModal: function() {
73    const myself = this;
74    this.$menuModal.each(function(){
75      if($(this).css('display') === 'block') {
76        myself.controlMenu($(this));
77      }
78    })
79  }
80}
81
82SHIMADA.ACCORDION = {
83  init: function () {
84    this.setParameters();
85    this.bindEvents();
86    let myself = this;
87    this.$menu.each(function () {
88      myself.scrollMenu(jQuery(this));
89    })
90  },
91  setParameters: function () {
92    this.$menu = $('.jsc_accordion dt');
93  },
94  bindEvents: function () {
95    let myself = this;
96    this.$menu.on('click', function () {
97      myself.scrollMenu($(this));
98    })
99  },
100  scrollMenu: function ($target) {
101    let $dd = $target.next('dd');
102    $dd.slideUp(function () { });

103
104    if ($dd.css('display') == 'none') {
105      $dd.slideDown(function () {
106      })
107      $target.children('.jsc_accordion_status_image').removeClass('is_accordion_close').addClass('is_accordion_open');
108    } else {
109      if($dd.hasClass('jsc-accordion-initial')) {
110        $dd.slideDown(function () {
111        })
112        $dd.removeClass('jsc-accordion-initial')
113        $target.children('.jsc_accordion_status_image').addClass('is_accordion_open');
114      } else {
115        $target.children('.jsc_accordion_status_image').removeClass('is_accordion_open').addClass('is_accordion_close');
116      }
117    }
118  }
119};
120
121SHIMADA.SLIDER = {
122  SPEED: 3000,
123  AUTO_PLAY_SPEED: 4000,
124  init: function () {
125    this.bindEvents();
126  },
127  bindEvents: function () {
128    let $slide = $(".slide")
129      .slick({
130        dots: true,
131        dotsClass: 'slide-dots',
132        arrows: true,
133        prevArrow: '<img src="/img/icon/icon_prev.svg" class="slide-arrow prev-arrow">',
134        nextArrow: '<img src="/img/icon/icon_next.svg" class="slide-arrow next-arrow">',
135        infinite: true,
136        slidesToShow: 1,
137        slidesToScroll: 1,
138        fade: true,
139        speed: this.SPEED,
140        autoplaySpeed: this.AUTO_PLAY_SPEED,
141        autoplay: true,
142        waitForAnimate: false
143      })
144      .on({
145        beforeChange: function(event, slick, currentSlide, nextSlide) {
146          $(".slick-slide", this).eq(currentSlide).find('img').addClass("preve-slide");
147          $(".slick-slide", this).eq(nextSlide).find('img').addClass("slide-animation");
148        },
149        afterChange: function() {
150          $(".preve-slide").removeClass();
151        }
152      });
153    $slide.find(".slick-slide").eq(0).find('img').addClass("slide-animation");
154    $('.slide-background').removeClass("slide-background");
155  }
156}
157
158$(function () {
159  SHIMADA.SLIDER.init();
160  SHIMADA.MENU.init();
161  SHIMADA.ACCORDION.init();
162
163  const ua = navigator.userAgent;
164  if(ua.indexOf('Trident') !== -1) {
165    objectFitImages('.item > img');
166    objectFitImages('.event-list .image > img');
167    $(".header").fixedsticky();
168  }
169
170  let startPos = 0;
171  let winScrollTop = 0;
172
173  $(window).on('scroll',function(){
174    
175    winScrollTop = $(this).scrollTop();
176
177    if (winScrollTop == 0) {
178      $('.header').removeClass('hide');
179      $('.site-header').removeClass('is-white');
180    } else if (startPos < winScrollTop) {
181      if ($('.header__alert').length) {
182        alertHight = $('.header__alert').height() + $('.header__option').height();
183      } else {
184        alertHight = 0;
185      }
186      hideHight = ($('.header').height() / 4) + alertHight; 
187      if (hideHight < winScrollTop) {
188        $('.header').addClass('hide');
189      }
190    } else {
191      $('.header').removeClass('hide');
192      $('.site-header').addClass('is-white');
193    }
194    startPos = winScrollTop;
195
196  });
197})