https://bjcma.com/2024/beiyin/js/common.js

1
2$(function () {
3
4  function init() {
5    initLayout();
6    initGnav();
7    initHero();
8    initRssFeed();
9  }
10
11  /**
12  * Layout 布局
13  */
14  function initLayout() {
15
16    // 修改页脚布局
17    //$('.f-nav').append($('#globalMenu>ul').clone());// 克隆加工前的页眉菜单
18    //$('.f-nav #gnavi-library').append($('.f-nav #gnavi-research>a, .f-nav #gnavi-evaluation>a'));
19    //$('.f-nav #gnavi-research, .f-nav #gnavi-evaluation').remove();
20    //
21    $('.f-nav1').append($('#globalMenu>ul').clone());
22    $('.f-nav2').append($('#visitorMenu').clone());
23
24    // 更改页眉布局
25    $('#util-sitemap').after($('#header_inner form'));
26    $('#header_inner form [type="image"]').attr('type', 'submit');
27
28
29    // $('#navWrap #visitorMenu').remove();
30    $('.c-hero').after($('#navWrap #visitorMenu'));
31    $('#visitorMenu').clone().attr('id', 'visitorMenu-sp').appendTo('#globalMenu');
32
33    /*
34    const $manuOthers = $('<li id="vnavi-others" class="has_children"><a>その他の方</a><ul></ul></li>');
35    $('#visitorMenu>ul>li:nth-child(2)').after($manuOthers);
36    $manuOthers.find('ul').append($('#visitorMenu>ul>li:nth-child(n+4)').clone());
37    */
38
39
40    $('#globalMenu>ul>li').each(function (index, el) {
41      if ($(el).find('>ul')[0]) {
42        $(el).addClass('has_children').find('>ul').wrap('<div class="bigmenu">');
43      }
44      $ttl = $(el).find('>a').text();
45      $('<div class="header"><h3>' + $ttl + '</h3></div>').prependTo($(el).find('.bigmenu'));
46      $(el).find('>a').clone().text($ttl + '顶 端').appendTo($(el).find('.bigmenu .header'));
47    });
48    $('#globalMenu>ul').prepend('<li class="current" id="gnavi-home"><a>首 页</a></li>');
49    $('#globalMenu').prepend($('.c-nav-tab')).prepend('<button class="menu-close">');
50    $('#globalHead').append('<button class="menu-open">');
51    $('.c-hero .slider>*').clone().appendTo('.c-hero .slider-nav');
52    $('.c-hero .slider-nav a').on('click', function (event) {
53      event.preventDefault();
54    });
55
56
57    $('#globalHead h1').clone().addClass('menu-logo-sp').appendTo('#globalMenu');
58
59  }
60
61  /**
62  * HERO初期化
63  */
64  function initHero() {
65
66    // 滑 块
67    $('.c-hero .counter .total').text($('.c-hero .slider>*').length);
68    let $slick1 = $('.c-hero .slider')
69      .on('beforeChange', function (event, slick, currentSlide, nextSlide) {
70        $('.c-hero .counter .num').text(nextSlide + 1);
71      }).slick({
72        autoplay: true,
73        autoplaySpeed: 4000,
74        speed: 500,
75        arrows: false,
76        dots: false,
77        fade: true,
78        asNavFor: '.c-hero .slider-nav',
79        responsive: [
80          {
81            breakpoint: 750,
82            settings: {
83              dots: true,
84            }
85          },
86        ]
87      });
88    let $slick1Nav = $('.c-hero .slider-nav').slick({
89      variableWidth: true,
90      arrows: false,
91      pauseOnFocus: true,
92      fade: false,
93      focusOnSelect: true,
94      asNavFor: '.c-hero .slider'
95    });
96
97    $('.c-hero .slider-nav-container button:nth-child(1)').on('click', function () {
98      $slick1.slick('slickPrev');
99    });
100    $('.c-hero .slider-nav-container button:nth-child(2)').on('click', function () {
101      $slick1.slick('slickNext');
102    });
103  }
104
105
106
107  /**
108 * Navigation 导航
109 */
110  function initGnav() {
111
112    // PC大菜单
113    $('#globalMenu .has_children').each(function (index, el) {
114      $(el).find('>a').on('click', function () {
115        if (!$('html').hasClass('js-sp')) {
116          if (!$(el).hasClass('open')) {
117            $('body').addClass('js-bigmenu-open');
118            $('#globalMenu .has_children').removeClass('open');
119            $(el).addClass('open');
120          } else {
121            $(el).removeClass('open');
122            $('body').removeClass('js-bigmenu-open');
123          }
124          return false;
125        }
126      });
127    });
128    $('body').on('click', function () {
129      $('body').removeClass('js-bigmenu-open');
130      $('#globalMenu .has_children').removeClass('open');
131    });

132
133    // PC子菜单
134    $('#visitorMenu .has_children').each(function (index, el) {
135      $(el).on('click', function () {
136        let isOpen = $(el).hasClass('open');
137        $('#visitorMenu .has_children').removeClass('open').find('>ul').stop().slideUp(300);
138        if (!isOpen) {
139          $(el).addClass('open');
140          $(el).find('>ul').stop().slideDown(300);
141        }
142        return false;
143      });
144    });
145
146    // SP 导航开关
147    $('#globalHead .menu-open').on('click', function () {
148      $('body').addClass('js-sp-menu-open');
149      $('#globalMenu').scrollTop(0);
150      return false;
151    });
152    $('body').on('click', function () {
153      if ($('body').hasClass('js-sp-menu-open')) $('body').removeClass('js-sp-menu-open');
154    });
155
156
157    // 搜索表单
158    $('#header_inner form [type="submit"]')
159      //.css('pointer-events', 'none')
160      .wrap('<div class="btn-search-form-open">');
161    $('.btn-search-form-open').on('click', function (event) {
162      $(this).parent().toggleClass('open');
163      $('body').toggleClass('js-header-search-open');
164      return false;
165    }).css('cursor', 'pointer');
166
167
168    $('.searchtext').keypress(function(e) {
169      if(e.key === 'Enter') {
170        /* 处理内容 */
171        $(this).parent().submit();
172      }
173    });
174
175    // sp 页脚导航开关
176    $('.f-nav>ul>li>a').each(function (index, el) {
177      if ($(el).find('+ ul')[0]) $(el).addClass('has_children_btn');
178    });
179    $('.f-nav .has_children_btn').each(function (index, el) {
180      $(el).on('click', function () {
181        if ($(window).width() <= breakpointSp) {
182          $(el).toggleClass('open');
183          $(el).find('+ ul').slideToggle(300);
184          return false;
185        }
186      });
187    });
188
189    // 往复运动时状态初始化
190    window.addEventListener('onPc', function () {
191      $('body').removeClass('js-sp-menu-open');
192      $('.f-nav .has_children_btn').removeClass('open').find('+ ul').stop().slideDown(0);
193    });
194
195    window.addEventListener('onSp', function () {
196      $('#visitorMenu .open').removeClass('open');
197      $('#visitorMenu .has_children>ul').stop().slideUp(0);
198
199    });
200  }
201
202
203  /**
204 * RSS 馈电读取
205 */
206  function initRssFeed() {
207
208    // 滑块化
209    function setSliderSp(el) {
210      let mySlider = $(el).slick({
211        variableWidth: true,
212        arrows: false,
213        pauseOnFocus: true,
214        fade: false,
215        autoplay: true,
216        autoplaySpeed: 3000,
217        speed: 300,
218        arrows: false,
219        dots: false,
220      });
221      let $sliderNav = $(el).closest('section').find('.slide-nav2');
222      $sliderNav.find('button').eq(0).on('click', function () {
223        $(el).slick('slickNext');
224      });
225      $sliderNav.find('button').eq(1).on('click', function () {
226        $(el).slick('slickPrev');
227      });
228    }
229
230    // 监听程序注册（RSS读取后运行）？？
231    document.addEventListener('onLoadedTopicsFeedsSP', function (e) {
232      setSliderSp('#topics-feed--sp>ul');
233    });
234    document.addEventListener('onLoadedResearchFeedsSP', function (e) {
235      setSliderSp('#research-feed--sp>ul');
236    });
237    document.addEventListener('onLoadedEventFeeds', function (e) {
238      $('#event-feed  .date').each(function () {
239        var dateText = $(this).text();
240        var dateParts = dateText.split('å¹´');
241        var year = dateParts[0];
242        var monthDayParts = dateParts[1].replace('日', '').split('月');
243        var month = monthDayParts[0];
244        var day = monthDayParts[1];
245        $(this).after('<p class=" date2"><span class="year">' + year + '</span><span class="month">' + month + '</span><span class="day">' + day + '</span></p>');
246      });
247      for (let i = 0; i < 3; i++) {
248        $('#event-feed>ul>li').clone().appendTo('#event-feed>ul');
249      }
250      $('#event-feed ul').slick({
251        variableWidth: true,
252        autoplay: true,
253        autoplaySpeed: 2000,
254        speed: 500,
255        arrows: false,
256        pauseOnFocus: true,
257        fade: false,
258        slidesToScroll: 1,
259      });
260      $('.sec-event .slide-nav button:nth-child(1)').on('click', function () {
261        $('#event-feed ul').slick('slickPrev');
262      });
263      $('.sec-event .slide-nav button:nth-child(2)').on('click', function () {
264        $('#event-feed ul').slick('slickNext');
265      });
266    });

267  }
268
269
270  init();
271});
272
273
274
275
276//基本设定用
277let breakpointSp;
278(function () {
279
280  function init() {
281    initResponsive();
282    initViewport();
283    checkUA();
284  }
285
286  /**
287   * 用于响应
288   *
289   */
290  function initResponsive() {
291    //
292    // 从css获取断点
293    $('body').append('<div class="js-breakpointSp">');
294    breakpointSp = parseInt($('.js-breakpointSp').css('width'));
295    $('.js-breakpointSp').remove();
296    //
297    function check() {
298      if ($(window).width() <= breakpointSp) {
299        if (!$('html').hasClass('js-sp')) {
300          $('html').removeClass('js-pc').removeClass('js-pcComplet').addClass('js-sp');
301          window.dispatchEvent(new CustomEvent('onSp'));
302          setTimeout(function () { $('html').addClass('js-spComplet'); }, 500);
303
304        }
305      } else {
306        if (!$('html').hasClass('js-pc')) {
307          $('html').removeClass('js-sp').removeClass('js-spComplet').addClass('js-pc');
308          window.dispatchEvent(new CustomEvent('onPc'));
309          setTimeout(function () { $('html').addClass('js-pcComplet'); }, 500);
310        }
311      }
312    }
313    $(window).on('load resize', check);
314    check();
315  }
316
317  /**
318   * 设置元视口
319   *
320   */
321  function initViewport() {
322    var viewportWidthTb;
323    var viewportWidthSp;
324    var viewportWidthPc;
325    var windowWidth;
326
327    function getViewportWidth() {
328      if (viewportWidthSp) return;
329      $('body').append('<div class="js-breakpointSp">');
330      $('body').append('<div class="js-viewportWidthTb">');
331      $('body').append('<div class="js-viewportWidthSp">');
332      $('body').append('<div class="js-viewportWidthPc">');
333      breakpointSp = parseInt($('.js-breakpointSp').css('width'));
334      viewportWidthTb = parseInt($('.js-viewportWidthTb').css('width'));
335      viewportWidthSp = parseInt($('.js-viewportWidthSp').css('width'));
336      viewportWidthPc = parseInt($('.js-viewportWidthPc').css('width'));
337      $('.js-breakpointSp').remove();
338      $('.js-viewportWidthTb').remove();
339      $('.js-viewportWidthSp').remove();
340      $('.js-viewportWidthPc').remove();
341    }
342
343    function check() {
344      getViewportWidth();
345      var ww = window.outerWidth;
346      if (windowWidth == ww || !viewportWidthSp) return;
347      windowWidth = ww;
348      var viewportContent = 'width=' + viewportWidthPc + ', shrink-to-fit=yes';
349      if (windowWidth <= viewportWidthTb) viewportWidthTb = 'width=' + viewportWidthTb + ', shrink-to-fit=yes';
350      if (windowWidth <= breakpointSp) viewportContent = 'width=' + viewportWidthSp + ', shrink-to-fit=yes';
351      document.querySelector('meta[name="viewport"]').setAttribute('content', viewportContent);
352    }
353
354    document.addEventListener('DOMContentLoaded', check);
355    window.addEventListener('resize', check);
356    window.addEventListener('load', check);
357    window.addEventListener('orientationchange', check);
358    setInterval(check, 500);
359  }
360
361  /**
362   * 检查用户代理
363   *
364   */
365  function checkUA() {
366    var userAgent = window.navigator.userAgent.toLowerCase();
367    if (userAgent.indexOf('msie') != -1 ||
368      userAgent.indexOf('trident') != -1) {
369      $('html').addClass('is-ie');
370    } else if (userAgent.indexOf('edge') != -1) {
371      $('html').addClass('is-edge');
372    } else if (userAgent.indexOf('chrome') != -1) {
373      $('html').addClass('is-chrome');
374    } else if (userAgent.indexOf('safari') != -1) {
375      $('html').addClass('is-safari');
376    } else if (userAgent.indexOf('firefox') != -1) {
377      $('html').addClass('is-firefox');
378    } else if (userAgent.indexOf('opera') != -1) {
379      $('html').addClass('is-opera');
380    }
381
382    if (userAgent.indexOf("windows nt") !== -1) {
383      $('html').addClass('is-win');
384    } else if (userAgent.indexOf("android") !== -1) {
385      $('html').addClass('is-android');
386    } else if (userAgent.indexOf("iphone") !== -1 || userAgent.indexOf("ipad") !== -1) {
387      $('html').addClass('is-ios');
388    } else if (userAgent.indexOf("mac os x") !== -1) {
389      $('html').addClass('is-mac');
390    } else { }
391
392
393    if ("ontouchstart" in window) {
394      $('html').addClass('is-touch'); //触摸装置
395    } else {
396      $('html').removeClass('is-touch');
397    }
398  }
399
400
401  init();
402})();
403