https://www.dbj-digital.jp/common/js/common_new.js

1$(() => {
2  // function実行
3  smoothScroll();
4  navActive();
5  spMenu();
6  accordionMenu();
7  sideAccordionMenu();
8  telLink();
9
10  // function: ナビカレント
11  function navActive() {
12    const path = window.location.pathname;
13    const navItem = document.getElementsByClassName("header__gnavItem");
14    for (let h = 0; h < navItem.length; h++) {
15      if (
16        navItem[h].firstChild.getAttribute("href") !== "#" &&
17        path.split("/")[1] === navItem[h].firstChild.pathname.split("/")[1]
18      ) {
19        navItem[h].firstChild.setAttribute("aria-current", "page");
20      }
21    }
22  }
23
24  // function: スムーススクロール
25  function smoothScroll() {
26    $(".js_pagetop").on("click", function() {
27      const speed = 500;
28      const href = $(this).attr("href");
29      const target = $(href == "#" || href == "" ? "html" : href);
30      const headerHight = $(".header").outerHeight();
31      const position = target.offset().top - headerHight - 45;
32      $("html, body").animate({ scrollTop: position }, speed, "swing");
33      $(".header__logo a").focus();
34      return false;
35    });
36  }
37
38  // function: SPドロワー
39  function spMenu() {
40    let scrollTop;
41    $(".js_sp_header__menuBtn").on("click", function() {
42      if (!$(this).attr("aria-expanded")) {
43        $(this).attr("aria-expanded", "true");
44        $(".js_sp_header__menuWrap").attr("aria-hidden", "false");
45        $("body > .wrapper").addClass("is_menu-open");
46        scrollTop = $(window).scrollTop();
47        $(".main").addClass("is_fixed");
48        $(".main").css({ top: -scrollTop });
49      } else {
50        $(this).removeAttr("aria-expanded");
51        $(".js_sp_header__menuWrap").attr("aria-hidden", "true");
52        $("body > .wrapper").removeClass("is_menu-open");
53        $(".main").removeClass("is_fixed");
54        $("main").css({ top: 0 });
55        $(window).scrollTop(scrollTop);
56      }
57    });
58  }
59
60  // function: アコーディオン
61  function accordionMenu() {
62    $(".js_mod-accordionMenu__heading").on("click", function() {
63      $(this).toggleClass("is-active");
64      $(this)
65        .next(".js_mod-accordionMenu__content")
66        .stop()
67        .slideToggle();
68      return false;
69    });
70  }
71
72  // function: サイドメニュー（アコーディオン）
73  function sideAccordionMenu() {
74    // 中カテゴリー カレント制御・初期表示
75    $(".js_mod_subNav__list li a").each(function() {
76      var menuTarget = $(this).data("target");
77      if ($("body").hasClass(menuTarget)) {
78        $(this).addClass("is-current");
79        $(this).attr('aria-current', 'page');
80      }
81    });
82
83    // サイドメニューに開閉の読み上げラベル設定
84    $(".js_mod-subNav__listItemLink.mod_subNav__listItemLink").each(function() {
85      var menuText = $(this).html();
86      $(this).attr('aria-label', menuText+' メニューを開く');
87    });
88
89    // 小カテゴリー カレント制御・初期表示
90    $(".js_mod-subNav__inListItemLink").each(function() {
91      var menuTarget = $(this).data("target");
92      if ($("body").hasClass(menuTarget)) {
93        $(this).addClass("is-active");
94        $(this)
95          .parents(".js_mod-subNav__inList")
96          .show();
97        $(this)
98          .parents(".js_mod-subNav__inList")
99          .prev(".js_mod-subNav__listItemLink")
100          .addClass("is-active");
101        // サイドメニューで開かれた状態のラベル変更
102        var menuText = $(this).parents(".js_mod-subNav__inList").prev(".js_mod-subNav__listItemLink").html();
103        $(this).parents(".js_mod-subNav__inList").prev(".js_mod-subNav__listItemLink").attr('aria-label', menuText+' メニューを閉じる');
104      }
105    });
106
107    // アコーディオン動作
108    $(".js_mod-subNav__listItemLink").on("click", function() {
109      $(this).toggleClass("is-active");
110      $(this)
111        .next(".js_mod-subNav__inList")
112        .stop()
113        .slideToggle();
114      var menuText = $(this).html();
115      if ($(this).hasClass('is-active')) {
116        $(this).attr('aria-label', menuText+' メニューを閉じる');
117      } else {
118        $(this).attr('aria-label', menuText+' メニューを開く');
119      }
120      return false;

121    });
122  }
123
124  // サイドメニューのEnterキー制御を有効化
125  $(".js_mod-subNav__listItemLink.mod_subNav__listItemLink").keyup(function(event) {
126    if (event.which === 13) {
127      $(this).click();
128    }
129  });
130
131  // function: 電話番号のリンク切り替え
132  function telLink() {
133    $(window).on("load resize", function() {
134      var windowWidth = $(window).width();
135      var breakPoint = 768;
136      $(".js_telLink").each(function() {
137        if(windowWidth >= breakPoint) {
138          $(this).attr("href", "/corp/info.html");
139        } else {
140          $(this).attr("href", "tel:03-5295-0571");
141        }
142      });
143    });
144
145  }
146
147});
148$(function () {
149	// 動画アクセシビリティ対応
150  $('.a11y-play-btn').on('click', function(){
151      if($(this).hasClass('playActive')){
152        $('#movie01').get(0).pause();
153        $('.case32_audio').get(0).pause();
154        $(this).html('音声解説バージョンで再生する');
155        $(this).removeClass('playActive');
156      }else{
157        if(!$('#movie01').get(0).paused){ // 動画が再生中
158          $('.case32_audio').get(0).currentTime = $('#movie01').get(0).currentTime;
159        } else { // 動画が停止中
160          $('#movie01').get(0).play();
161        }
162        $('.case32_audio').get(0).play();
163        $(this).html('音声解説バージョンを停止する');
164        $(this).addClass('playActive');
165      }
166  });
167  $('#movie01').on('playing', function(){
168      $(this).attr('controls', '');
169  });
170  $("#movie01").on('pause', function(){
171      $(this).attr('controls', '');
172      $('.case32_audio').get(0).pause();
173  });
174  $('#movie01').on('ended', function(){ 
175      $('.a11y-play-btn').removeClass('playActive');
176      $('.case32_audio').get(0).currentTime = 0;
177      $(this).attr('controls', '');
178      $('.a11y-play-btn').html('音声解説バージョンで再生する');
179      $('.a11y-play-btn').removeClass('playActive');
180  });
181  // 動画内のシークバー変更時
182  $('#movie01').on('seeked', function() {
183    if($('.a11y-play-btn').hasClass('playActive')){
184      $('.case32_audio').get(0).currentTime = $(this).get(0).currentTime;
185      $('.case32_audio').get(0).play();
186    }
187  });
188});