https://www.npa.go.jp/common2/js/top.js

1const swiperSlides = document.getElementsByClassName('swiper-slide');
2const breakPoint = 800;
3let mySwiper;
4let mySwiperBool;
5let mySwiperLength;
6const sliderPbtn = document.getElementById('slider-pbtn');
7const sliderContainer = document.querySelector('.slider');
8let autoPlayClicked = false;
9
10const autoplayFunc = function(kind){
11  if (kind === 'toggle'){
12    if(sliderPbtn.classList.contains('stop')) {
13      sliderPbtn.classList.add('play');
14      sliderPbtn.classList.remove('stop');
15      mySwiper.autoplay.stop();
16      autoPlayClicked = true;
17    } else {
18      sliderPbtn.classList.add('stop');
19      sliderPbtn.classList.remove('play');
20      mySwiper.autoplay.start();
21      autoPlayClicked = true;
22    }
23  } else if (kind === 'play') {
24    sliderPbtn.classList.add('stop');
25    sliderPbtn.classList.remove('play');
26    mySwiper.autoplay.start();
27  } else if (kind === 'stop') {
28    sliderPbtn.classList.add('play');
29    sliderPbtn.classList.remove('stop');
30    mySwiper.autoplay.stop();
31  }
32};
33
34document.addEventListener('DOMContentLoaded', function() {
35  if( swiperSlides.length < 2){
36    mySwiperBool = false;
37  }else{
38    createSwiper();
39    mySwiperBool = true;
40  }
41

42  if(mySwiperBool) {
43    sliderPbtn.addEventListener('click', function(){
44      autoplayFunc('toggle');
45    });
46    const btns = document.querySelectorAll('.swiper-button');
47    var btnsArray = Array.prototype.slice.call(btns);
48    btnsArray.forEach(function(val) {
49      val.addEventListener('keyup', function (e) {
50        if(e.keyCode === 13) {
51          mySwiper.on('transitionEnd', function() {
52            if(!mySwiper.autoplay.running) {
53              slideLinkFocus = document.querySelector('.swiper-slide-active .swiper-slide-link');
54              slideLinkFocus.focus();
55            }
56          });
57        }
58      });
59    });
60  }
61
62  sliderContainer.addEventListener('focusin', function(){
63    document.addEventListener('keyup',function(e){
64      if (autoPlayClicked) {
65      } else if(e.keyCode === 9) {
66        autoplayFunc('stop');
67      }
68    });
69  });
70  sliderContainer.addEventListener('focusout', function(){
71    document.addEventListener('keyup',function(e){
72      if(e.keyCode === 9 && !autoPlayClicked) {
73        autoplayFunc('stop');
74      }
75    });
76  });
77
78  if (document.getElementById('topics')) {
79    var topicsHTML = new XMLHttpRequest(),
80    method = 'GET',
81    url = '/topic/common_top_topics.html';
82    var topics = document.getElementById('topics');
83  
84    topicsHTML.open(method, url, true);
85    topicsHTML.responseType='document';
86    topicsHTML.overrideMimeType("text/html;charset=UTF-8");
87    topicsHTML.onreadystatechange = function () {
88      if(topicsHTML.readyState === 4 && topicsHTML.status === 200) {
89        var restxt = topicsHTML.responseXML;
90        var int = restxt.getElementById('topicsI');
91        topics.innerHTML = int.innerHTML;
92      }
93    };
94    topicsHTML.send();
95  }
96
97  if (document.getElementById('news')) {
98    var newsHTML = new XMLHttpRequest(),
99    method = 'GET',
100    url = '/newlyarrived/common_top_news.html';
101    var news = document.getElementById('news');
102  
103    newsHTML.open(method, url, true);
104    newsHTML.responseType='document';
105    newsHTML.overrideMimeType("text/html;charset=UTF-8");
106    newsHTML.onreadystatechange = function () {
107      if(newsHTML.readyState === 4 && newsHTML.status === 200) {
108        var restxt = newsHTML.responseXML;
109        var int = restxt.getElementById('newsI');
110        news.innerHTML = int.innerHTML;
111      }
112    };
113    newsHTML.send();
114  }
115},false);
116
117let sliderImg = document.querySelectorAll('.swiper-img');
118let sliderTextArray = [];
119for (let i = 0; i < sliderImg.length; i++) {
120  sliderTextArray.push(sliderImg[i].getAttribute('alt'));
121}
122
123const createSwiper = function() {
124  mySwiper = new Swiper('.swiper-container', {
125    spaceBetween: 0,
126    loop: true,
127    loopAdditionalSlides: 1,
128    autoplay: {
129      delay: 3000,
130      disableOnInteraction: false,
131    },
132    navigation: {
133      nextEl: '.swiper-button-next',
134      prevEl: '.swiper-button-prev',
135    },
136    pagination: {
137      el: '.swiper-pagination',
138      type: 'bullets',
139      clickable: true,
140      renderBullet: function (index, className) {
141        return '<button class="' + className + ' swiper-button" aria-label="'+ (index + 1) +'. ' + sliderTextArray[index] +'"></button>';
142      },
143    },
144    a11y: {
145      enabled: false,
146    },
147    on: {
148      init: function() {
149        let slideLink = document.querySelectorAll('.swiper-slide-link');
150        if(typeof slideLink !== 'undefined'){
151          for (let i = 0; i < slideLink.length; i++){
152            slideLink[i].setAttribute('tabindex','-1');
153          };
154          let slideLinkFocus = document.querySelector('.swiper-slide-active .swiper-slide-link');
155          if (slideLinkFocus) {
156            slideLinkFocus.setAttribute('tabindex','0');
157          }
158        }
159      },
160      slideChangeTransitionEnd: function() {
161        let slideLink = document.querySelectorAll('.swiper-slide-link');
162        if(typeof slideLink !== 'undefined'){
163          for (let i = 0; i < slideLink.length; i++){
164            slideLink[i].setAttribute('tabindex','-1');
165          };
166          let slideLinkFocus = document.querySelector('.swiper-slide-active .swiper-slide-link');
167          slideLinkFocus = document.querySelector('.swiper-slide-active .swiper-slide-link');
168          if (slideLinkFocus) {
169            slideLinkFocus.setAttribute('tabindex','0');
170          }
171        }
172      }
173    }
174  });
175}