https://www.brei.men/assets/js/page/top.js

1'use strict';
2(() => {
3  PAGE_FUNCTION.add('top', {
4    enter() {
5      PAGE_TOP.setup();
6    },
7    leave() {
8      PAGE_TOP.destroy();
9    },
10  });
11  const OP = {
12    play: true,
13    config: {
14      area: '.js-op',
15      addClass: 'is-op',
16      movie: undefined,
17    },
18    state: {
19      location: {},
20    },
21    timer: undefined,
22    start() {
23      $body.addClass('is-op');
24      this.timer = setTimeout(() => {
25        this.bindReset();
26        this.finish();
27      }, 100);
28    },
29    finish() {
30      $body.addClass('is-op-end');
31      sessionStorage.setItem('op', 'true');
32      this.timer = setTimeout(() => {
33        $body.removeClass('is-op');
34      }, 2000);
35    },
36    bind() {
37      $body.css({
38        height: winH,
39      });
40    },
41    bindReset() {
42      $body.css({
43        height: 'auto',
44      });
45    },
46    init() {
47      const OP_SKIP = sessionStorage.getItem('op');
48      if (!OP_SKIP && this.play) {
49        this.start();
50      }
51    },
52  };
53
54  const PAGE_TOP = {
55    instance: {},
56    setup() {
57      this.instance[CURRENT_AREA_ID] = Vue.createApp(vTop);
58      this.instance[CURRENT_AREA_ID].mount($_CURRENT_CONTENT.find('.v-top').get()[0]);
59    },
60    destroy() {
61      this.instance[PREV_AREA_ID].unmount();
62    },
63  };
64  const vTopBnr = Vue.defineComponent({
65    name: 'v-top-bnr',
66    template: '#v-top-bnr',
67    setup(props) {
68      let slide = undefined;
69      const slideEl = Vue.ref(null);
70      const current = Vue.ref(0);
71      const total = Vue.ref(0);
72      Vue.onMounted(() => {
73        total.value = $('.js-bnr_item').length;
74        slide =
75          slideEl.value &&
76          new Swiper(slideEl.value, {
77            init: true,
78            speed: 800,
79            direction: 'horizontal',
80            slidesPerView: 1,
81            spaceBetween: 10,
82            // effect: 'fade',
83            rewind: true,
84            // autoHeight: true,
85            loopAdditionalSlides: 1,
86            touchStartPreventDefault: false,
87            followFinger: false,
88            preloadImages: false,
89            slideActiveClass: 'is-slide-current',
90            slideDuplicateActiveClass: 'is-slide-current is-clone',
91            slideNextClass: 'is-next',
92            slideDuplicateNextClass: 'is-next is-clone',
93            slidePrevClass: 'is-prev',
94            slideDuplicatePrevClass: 'is-prev is-clone',
95            containerModifierClass: 'is-slide-',
96            wrapperClass: 'js-bnr_list',
97            slideClass: 'js-bnr_item',
98            pagination: total.value > 1 && {
99              el: '.js-bnr_pagination',
100              bulletClass: 'p-bnr__pagination-item',
101              type: 'bullets',
102              clickable: true,
103              bulletActiveClass: 'is-current',
104            },
105            on: {
106              init() {
107                this.update();
108              },
109              slideChange() {
110                current.value = this.realIndex;
111              },
112            },
113          });
114      });
115      Vue.onUnmounted(() => {
116        var _slide, _slide$destroy;
117        (_slide = slide) === null || _slide === void 0 ? void 0 : (_slide$destroy = _slide.destroy) === null || _slide$destroy === void 0 ? void 0 : _slide$destroy.call(_slide);
118      });
119      return {
120        root,
121        slideEl,
122        current,
123        total,
124      };
125    },
126  });
127
128  const vTopHeadNews = Vue.defineComponent({
129    name: 'v-top-head-news',
130    template: '#v-top-head-news',
131    props: {
132      duration: {
133        default: 5000,
134        type: String || Number,
135      },
136    },
137    setup(props) {
138      const news = vStore.API.news;
139      let slide = undefined;
140      const slideEl = Vue.ref(null);
141      Vue.onMounted(() => {
142        slide =
143          slideEl.value &&
144          new Swiper(slideEl.value, {
145            init: true,
146            speed: typeof props.duration === 'number' ? props.duration : Number(props.duration),
147            direction: 'horizontal',
148            slidesPerView: 'auto',
149            spaceBetween: 0,
150            // effect: 'fade',
151            // rewind: true,
152            loop: news.data.length > 1,
153            // autoHeight: true,
154            loopAdditionalSlides: 1,
155            touchStartPreventDefault: false,
156            followFinger: false,
157            preloadImages: false,
158            slideActiveClass: 'is-slide-current',
159            slideDuplicateActiveClass: 'is-slide-current is-clone',
160            slideNextClass: 'is-next',
161            slideDuplicateNextClass: 'is-next is-clone',
162            slidePrevClass: 'is-prev',
163            slideDuplicatePrevClass: 'is-prev is-clone',
164            containerModifierClass: 'is-slide-',
165            wrapperClass: 'js-head_news_list',
166            slideClass: 'js-head_news_item',
167            on: {
168              init() {
169                this.update();
170              },
171            },
172            autoplay: news.data.length > 1 && {
173              delay: 0,
174              disableOnInteraction: false,
175            },
176          });
177      });
178      Vue.onUnmounted(() => {
179        var _slide2, _slide2$destroy;
180        (_slide2 = slide) === null || _slide2 === void 0 ? void 0 : (_slide2$destroy = _slide2.destroy) === null || _slide2$destroy === void 0 ? void 0 : _slide2$destroy.call(_slide2);
181      });
182      return {
183        root,
184        slideEl,
185        articles: news.data.slice(0, 5),
186      };
187    },
188  });
189
190  const vTop = Vue.defineComponent({
191    components: {
192      vTopHeadNews,
193      vTopBnr,
194    },
195    name: 'Top',
196    setup(props, context) {
197      var _SPECIAL_DATA;
198      // ========== INITIAL AREA ==========
199      const init = Vue.ref(false);
200      const show = Vue.ref(false);
201      const state = Vue.ref(vStore.state);
202      Vue.onMounted(() => {
203        init.value = true;
204        Vue.nextTick(() => {
205          Lazy.update();
206          show.value = true;
207        });
208      });
209
210      // op
211      OP.init();
212
213      // scroll
214      const special = Vue.ref(false);
215      let change = true;
216      function ease(x) {
217        return 1 - Math.cos((x * Math.PI) / 2);
218      }
219      const areaEl = Vue.ref(null);
220      const scrollRatio = Vue.ref(0);
221      function scroll() {
222        const areaHeight = $(areaEl.value).innerHeight() - winH * 2;
223        const scrollY = window.scrollY;
224        const ratio = Math.ceil((scrollY / areaHeight) * 1000) / 1000;
225        scrollRatio.value = ease(ratio);
226        if (ratio >= 1) {
227          if (change) {
228            change = false;

229            ToSpecial();
230          }
231        }
232      }
233
234      function ToSpecial() {
235        if (special.value) {
236          Pjax.changePage(''.concat(root.value, '/special/'));
237        }
238      }
239      if (typeof SPECIAL_DATA !== 'undefined' && ((_SPECIAL_DATA = SPECIAL_DATA) === null || _SPECIAL_DATA === void 0 ? void 0 : _SPECIAL_DATA.length) > 0) {
240        special.value = true;
241        Vue.onMounted(() => {
242          window.addEventListener('scroll', scroll);
243        });
244        Vue.onUnmounted(() => {
245          window.removeEventListener('scroll', scroll);
246        });
247      }
248      return {
249        root: root,
250        show,
251        special,
252        ToSpecial,
253        areaEl,
254        scrollRatio,
255      };
256    },
257  });
258})();