https://www.mof.go.jp/js/top.js

1(function ($) {
2  const mediaQuery = window.matchMedia('(max-width: 767px)');
3  $(function () {
4    /**
5     * MV スライダー
6     */
7    const $slider = $('.js-top-mv-slider');
8
9    $slider.slick({
10      accessibility: false,
11      autoplay: true,
12      dots: true,
13      appendDots: $('.top-mainvisual-button-inner'),
14      infinite: true,
15      speed: 1000,
16      arrows: false,
17      fade: true
18    });
19
20    // 再停止ボタン
21    $('.js-top-mv-pause').on('click', function () {
22      $slider.slick('slickPause');
23      $(this).addClass('is-active');
24      $('.js-top-mv-play').removeClass('is-active');
25    });
26
27    $('.js-top-mv-play').on('click', function () {
28      $slider.slick('slickPlay');
29      $(this).addClass('is-active');
30      $('.js-top-mv-pause').removeClass('is-active');
31    });
32
33    // ページネーションをキーボード操作可能に
34    const SetTabIndex = function () {
35      const $currentSlide = $slider.find('.slick-current');
36
37      // 全てのスライドを tabindex="-1" に
38      $slider.find('a').attr('tabindex', '-1');
39      // カレントのスライドを tabindex="0" に
40      $currentSlide.find('a').attr('tabindex', '0');
41    };
42
43    $slider.on('init', function (e, slick) {
44      SetTabIndex();
45    });
46
47    $slider.on('afterChange', function (e, slick, currentSlide) {
48      SetTabIndex();
49    });
50
51
52    /**
53     * ピックアップ情報：アコーディオン
54     */
55    // フォーカスが当たるようにtabindexを追加
56    $('.js-pickup-dropdown-button').attr('tabindex', 0);
57
58    // アコーディオン処理
59    const closeHeight = $('.has-dropdown').css('marginBottom');
60    const MENU_MARGIN_TOP = 40;
61    const duration = 300;
62    closePanel();
63    $('.js-pickup-dropdown-button').on('click', function (e) {
64      openPanel($(this));
65    }).keydown(function (e) {
66      // Enterキー操作でもメニューを開く
67      if (e.key === 'Enter') {
68        openPanel($(this));
69      }
70    });
71
72    // メニューを開く
73    function openPanel($this) {
74      const target = $this.next('.pickup-card-dropdown');
75      // クリックしたアイテムのメニューが表示されていたら閉じる
76      if ($this.closest('.has-dropdown').hasClass('is-open')) {
77        closePanel(closeHeight);
78        return false;
79        // ほかのメニューが表示されていたら閉じる
80      } else if ($('.has-dropdown').hasClass('is-open')) {
81        closePanel(closeHeight);
82      }
83      // クリックしたアイテムのメニューを開く
84      $this.closest('.has-dropdown').addClass('is-open');
85
86      adjustPanelSize(target);
87      $(window).on('resize', function () {
88        adjustPanelSize(target);
89      });
90
91      target.css({
92        'z-index': ''
93      }).stop().fadeIn(duration);
94
95      function adjustPanelSize(target) {
96        const contentWidth = $this.closest('.content-inner').width();
97        const targetHeight = target.height();
98        const targetOpenHeight = parseInt(targetHeight) + parseInt(closeHeight) + MENU_MARGIN_TOP;
99        target.css({
100          'width': contentWidth
101        }).stop(true, true).animate({
102          'duration': duration,
103          'easing': 'swing',
104        });
105        if ($this.closest('.has-dropdown').hasClass('is-open')) {
106          $this.closest('.has-dropdown').stop(true, true).animate({
107            marginBottom: targetOpenHeight
108          }, {
109            'duration': duration,
110            'easing': 'swing'
111          });
112        }
113      }
114      return false;
115    }
116
117    // メニューを閉じる
118    function closePanel(closeHeight) {
119      $('.has-dropdown').removeClass('is-open');
120      $('.pickup-card-dropdown').css({
121        'z-index': '-1',
122        'width': ''
123      }).stop().fadeOut(duration);
124      $('.has-dropdown').stop(true, true).animate({
125        marginBottom: closeHeight
126      }, {
127        'duration': duration,
128        'easing': 'swing'
129      });
130    }
131  });
132
133  $(window).on('load resize', function () {
134    // 高さ調節
135    function adjustHeight(n) {
136      const $adjustItem = $('.pickup-list-item');
137      const adjustLength = $adjustItem.length;
138      if (mediaQuery.matches === true) {
139        n = 2
140        $adjustItem.height('');
141      } else {
142        n = 4
143        $adjustItem.height('');
144      }
145      for (let i = 0;

145 i < Math.ceil(adjustLength / n); i++) {
146        let maxHeight = 0;
147        for (let j = 0; j < n; j++) {
148          if ($adjustItem.eq(i * n + j).innerHeight() > maxHeight) {
149            maxHeight = $adjustItem.eq(i * n + j).innerHeight();
150          }
151        }
152        for (let k = 0; k < n; k++) {
153          $adjustItem.eq(i * n + k).height(maxHeight);
154        }
155      }
156    }
157    mediaQuery.addListener(adjustHeight);
158    adjustHeight(mediaQuery);
159
160    // フォントサイズ取得
161    $.getFontSize = function () {
162      let getSize = 0;
163      getSize = $('body').css('fontSize');
164      return getSize;
165    };
166
167    let stockFontSize = $.getFontSize();
168    setInterval(function () {
169      const fontSize = $.getFontSize();
170      if (stockFontSize !== fontSize) {
171        $(document).trigger('changeFontSize');
172        stockFontSize = fontSize;
173      }
174    }, 10);
175
176    // フォントサイズが変わったタイミングで高さを再取得
177    $(document).on('changeFontSize', function () {
178      adjustHeight();
179    });
180  });
181})(window.jQuery);