https://mrt.jp/assets/common.js

1
2if (typeof Swiper !== 'undefined') {
3  // ニュース スライダー
4  const newsSwiper = new Swiper('.news-swiper-container', {
5    speed: 600, // スライドの切り替えスピード
6    spaceBetween: 10, // スライド間の余白
7    slidesPerView: 'auto',
8    navigation: {
9        nextEl: ".news .swiper-button-next",
10        prevEl: ".news .swiper-button-prev",
11    },
12  })
13  
14  // お知らせ・最新情報 スライダー
15  const noticeSwiper = new Swiper('.notice-swiper-container', {
16    speed: 600, // スライドの切り替えスピード
17    spaceBetween: 10, // スライド間の余白
18    slidesPerView: 'auto',
19    navigation: {
20        nextEl: ".notice .swiper-button-next, ._notice .swiper-button-next",
21        prevEl: ".notice .swiper-button-prev, ._notice .swiper-button-prev",
22    },
23  })
24  
25  // SNS スライダー
26  const snsSwiper = new Swiper('.sns-swiper-container', {
27    speed: 600, // スライドの切り替えスピード
28    spaceBetween: 10, // スライド間の余白
29    slidesPerView: 'auto',
30    navigation: {
31        nextEl: ".sns .swiper-button-next, .swiper-button-next._sns",
32        prevEl: ".sns .swiper-button-prev, .swiper-button-prev._sns",
33    },
34  })
35  
36  // アナウンサー スライダー
37  const announcerSwiper = new Swiper('.announcer-swiper-container', {
38    speed: 600, // スライドの切り替えスピード
39    spaceBetween: 0, // スライド間の余白
40    slidesPerView: 'auto',
41    navigation: {
42        nextEl: ".announcer .swiper-button-next",
43        prevEl: ".announcer .swiper-button-prev",
44    },
45  })
46  
47  // イベント・スポーツ スライダー
48  const eventSwiper = new Swiper('.event-swiper-container', {
49    speed: 600, // スライドの切り替えスピード
50    spaceBetween: 10, // スライド間の余白
51    slidesPerView: 'auto',
52    navigation: {
53        nextEl: ".event .swiper-button-next",
54        prevEl: ".event .swiper-button-prev",
55    },
56  })
57  
58  // 動画 スライダー
59  const videoSwiper = new Swiper('.video-swiper-container', {
60    speed: 600, // スライドの切り替えスピード
61    spaceBetween: 10, // スライド間の余白
62    slidesPerView: 'auto',
63    navigation: {
64        nextEl: ".video .swiper-button-next",
65        prevEl: ".video .swiper-button-prev",
66    },
67  })
68  
69  // お店紹介スライダー
70  const storeSwiper = new Swiper('.store-swiper-container', {
71    speed: 600, // スライドの切り替えスピード
72    spaceBetween: 10, // スライド間の余白
73    slidesPerView: 'auto',
74    navigation: {
75        nextEl: ".store .swiper-button-next",
76        prevEl: ".store .swiper-button-prev",
77    },
78  })
79  
80  // レシピ スライダー
81  const recipeSwiper = new Swiper('.recipe-swiper-container', {
82    speed: 600, // スライドの切り替えスピード
83    spaceBetween: 10, // スライド間の余白
84    slidesPerView: 'auto',
85    navigation: {
86        nextEl: ".recipe .swiper-button-next",
87        prevEl: ".recipe .swiper-button-prev",
88    },
89  })
90  
91  
92  // プレゼント スライダー
93  const giftSwiper = new Swiper('.gift-swiper-container', {
94    speed: 600, // スライドの切り替えスピード
95    spaceBetween: 10, // スライド間の余白
96    slidesPerView: 'auto',
97    navigation: {
98        nextEl: ".gift .swiper-button-next",
99        prevEl: ".gift .swiper-button-prev",
100    },
101  })
102  
103  // MRT制作テレビ番組 スライダー
104  const mrtTvSwiper = new Swiper('.mrt-tv-swiper-container', {
105    speed: 600, // スライドの切り替えスピード
106    spaceBetween: 10, // スライド間の余白
107    slidesPerView: 'auto',
108    navigation: {
109        nextEl: ".mrt-tv .swiper-button-next",
110        prevEl: ".mrt-tv .swiper-button-prev",
111    },
112  })
113  
114  // MRT制作ラジオ番組 スライダー
115  const mrtRadioSwiper = new Swiper('.mrt-radio-swiper-container', {
116    speed: 600, // スライドの切り替えスピード
117    spaceBetween: 10, // スライド間の余白
118    slidesPerView: 'auto',
119    navigation: {
120        nextEl: ".mrt-radio .swiper-button-next",
121        prevEl: ".mrt-radio .swiper-button-prev",
122    },
123  })
124}
125
126// ハンバーガーメニュー
127$(".g-nav-btn").click(function () {//ボタンがクリックされたら
128$(this).toggleClass('active');//ボタン自身に activeクラスを付与し
129  $("#g-nav").toggleClass('panelactive');//ナビゲーションにpanelactiveクラスを付与
130});
131
132$("#g-nav a").click(function () {//ナビゲーションのリンクがクリックされたら
133  $(".g-nav-btn").removeClass('active');//ボタンの activeクラスを除去し
134  $("#g-nav").removeClass('panelactive');//ナビゲーションのpanelactiveクラスも除去
135});
136
137// スクロールのドラッグ有効化
138jQuery.prototype.mousedragscrollable = function () {
139let target;
140$(this).each(function (i, e) {
141  $(e).mousedown(function (event) {
142    event.preventDefault();
143    target = $(e);
144    $(e).data({
145      down: true,
146      move: false,
147      x: event.clientX,
148      y: event.clientY,
149      scrollleft: $(e).scrollLeft(),
150      scrolltop: $(e).scrollTop(),
151    });
152    return false;

153  });
154  $(e).click(function (event) {
155    if ($(e).data("move")) {
156      return false;
157    }
158  });
159});
160$(document)
161  .mousemove(function (event) {
162    if ($(target).data("down")) {
163      event.preventDefault();
164      let move_x = $(target).data("x") - event.clientX;
165      let move_y = $(target).data("y") - event.clientY;
166      if (move_x !== 0 || move_y !== 0) {
167        $(target).data("move", true);
168      } else {
169        return;
170      }
171      $(target).scrollLeft($(target).data("scrollleft") + move_x);
172      $(target).scrollTop($(target).data("scrolltop") + move_y);
173      return false;
174    }
175  })
176  .mouseup(function (event) {
177    $(target).data("down", false);
178    return false;
179  });
180};
181$(".header-nav").mousedragscrollable();
182$(".weather-items").mousedragscrollable();
183$(".area-wrap").mousedragscrollable();
184
185// ヘッダーメニュー 矢印を押すと横スクロール
186$(function () {
187$('.header-arrow-left').on('click', function () {
188//親要素を取得してその子要素のスクロールさせたい要素を取得
189  var target = $(this).parent('.header__inner').find('.header-nav');
190  var width = target.width();
191
192  target.animate({
193    //右にスクロール
194    scrollLeft: target.scrollLeft() + 120
195  }, 300);
196  return false;
197});
198});
199
200// weather 矢印を押すと横スクロール
201$(function () {
202$('.weather-arrow-right').on('click', function () {
203//親要素を取得してその子要素のスクロールさせたい要素を取得
204  var target = $(this).parent('.weather__inner').find('.weather-items');
205  var width = target.width();
206
207  target.animate({
208    //右にスクロール
209    scrollLeft: target.scrollLeft() + 150
210  }, 300);
211  return false;
212});
213});
214
215$(function () {
216  $('.weather-arrow-left').on('click', function () {
217  //親要素を取得してその子要素のスクロールさせたい要素を取得
218    var target = $(this).parent('.weather__inner').find('.weather-items');
219    var width = target.width();
220
221    target.animate({
222      //左にスクロール
223      scrollLeft: target.scrollLeft() - 150
224    }, 300);
225    return false;
226  });
227});
228
229// weather スクロールボタン 端までいくとスタイルを変更
230$(".weather-items").on("scroll", function () {
231  var scrollPosition = $(".weather-items").scrollLeft();
232  var maxPostion = $('.weather-items').get(0).scrollWidth - $('.weather-items').get(0).clientWidth;
233  if (scrollPosition === 0) {
234      $(".weather-arrow-left").css({"opacity": "0.6", "cursor": "default"});
235      $(".weather-arrow-right").css({"opacity": "1", "cursor": "pointer"});
236  } else if (scrollPosition === maxPostion) {
237      $(".weather-arrow-right").css({"opacity": "0.6", "cursor": "default"});
238      $(".weather-arrow-left").css({"opacity": "1", "cursor": "pointer"});
239  } else if (scrollPosition > 0 && scrollPosition < maxPostion) {
240      $(".weather-arrow-left").css({"opacity": "1", "cursor": "pointer"});
241      $(".weather-arrow-right").css({"opacity": "1", "cursor": "pointer"});
242  };
243});
244
245// 市町村リンク 矢印を押すと横スクロール
246$(function () {
247  $('.area-arrow-right').on('click', function (e) {
248  //親要素を取得してその子要素のスクロールさせたい要素を取得
249    var target = $(this).parent('.area-wrap-flex').find('.area-wrap');
250    // var width = target.width();
251    target.animate({
252      //右にスクロール
253      scrollLeft: target.scrollLeft() + 200
254    }, 300);
255    return false;
256  });
257});
258
259$(function () {
260  $('.area-arrow-left').on('click', function () {
261  //親要素を取得してその子要素のスクロールさせたい要素を取得
262    var target = $(this).parent('.area-wrap-flex').find('.area-wrap');
263    // var width = target.width();
264    target.animate({
265      //左にスクロール
266      scrollLeft: target.scrollLeft() - 200
267    }, 300);
268    return false;
269  });
270});
271
272// 市町村リンク スクロールボタン 端までいくとスタイルを変更
273$(".area-wrap").on("scroll", function () {
274  var scrollPosition = $(".area-wrap").scrollLeft();
275  var maxPostion = $('.area-wrap').get(0).scrollWidth - $('.area-wrap').get(0).clientWidth;
276  if (scrollPosition === 0) {
277      $(".area-arrow-left").css({"opacity": "0.6", "cursor": "default"});

278      $(".area-arrow-right").css({"opacity": "1", "cursor": "pointer"});
279  } else if (scrollPosition === maxPostion) {
280      $(".area-arrow-right").css({"opacity": "0.6", "cursor": "default"});
281      $(".area-arrow-left").css({"opacity": "1", "cursor": "pointer"});
282  } else if (scrollPosition > 0 && scrollPosition < maxPostion) {
283      $(".area-arrow-left").css({"opacity": "1", "cursor": "pointer"});
284      $(".area-arrow-right").css({"opacity": "1", "cursor": "pointer"});
285  };
286});
287
288if ($('.js_ytPlayer').length) {
289  // Load the IFrame Player API code asynchronously.
290  var tag = document.createElement('script');
291  tag.src = "https://www.youtube.com/player_api";
292  var firstScriptTag = document.getElementsByTagName('script')[0];
293  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
294
295  function onYouTubeIframeAPIReady() {
296    $('.js_ytPlayer').each(function() {
297      const vid = $(this).data('vid');
298      const ytPlayer = new YT.Player(this, {
299        height: '360',
300        width: '640',
301        videoId: vid,
302        playerVars: {
303          'rel': 0,
304          'controls': 2,
305          'mute': 1,
306          'loop': 1,
307          'autoplay': 0,
308          'showinfo': 0,
309          'enablejsapi': 1,
310          'origin': 'https://mrt.jp',
311          'fs': 1,
312          'playlist': vid,
313        },
314        events: {
315          'onReady': function(e) {
316            // スライドの初期化のほうが早いので、Youtubeの準備ができたらスライドのイベントを発火して一番目のスライドでも自動再生するようにした
317            $(e.target.g).data('ytPlayer', e.target);
318            const swiper = $(e.target.g).closest('.swiper')?.get(0)?.swiper;
319            if (swiper) {
320              swiper.emit('slideChange');
321            }
322          },
323        }
324      });
325    });
326  }
327}