javascript 简单的整页

Posted 2021-05-03

//begin screen
	+b.screen
		+e.SECTION.section.is-active
		+e.SECTION.section.is-hidden
		+e.SECTION.section.is-hidden
		+e.SECTION.section.is-hidden
		+e.SECTION.section.is-hidden
//end screen

.screen
   position: relative
   height: 100vh
   background-color: #363738
   color: #ffffff
   &__section
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100vh
      &.is-active
         opacity: 1
         pointer-events: auto
      &.is-hidden
         opacity: 0
         pointer-events: none
      &:nth-child(1)
         z-index: 1
         background: blue
      &:nth-child(2)
         z-index: 2
         background: crimson
      &:nth-child(3)
         z-index: 3
         background: yellow
      &:nth-child(4)
         z-index: 4
         background: rebeccapurple
      &:nth-child(5)
         z-index: 5
         background: #000

import { TimelineMax, TweenMax } from 'gsap';
import 'hammerjs';
import WheelIndicator from 'wheel-indicator';
import { $body, $document, $footer, $main, $window, css, Resp } from '../_helpers';
// import { HeaderAPI } from './header';

class Screen {
  constructor() {
    this.$container = $('.screen');
    this.$section = this.$container.find('section');
    this.sectionLength = this.$section.length;

    this.freezeScrollUp = false;
    this.freezeScrollDown = false;
    this.scrollAnim = false;

    if (this.$container.length) this.init();
  }

  async init() {
    if (!Resp.isDesk) {
      setTimeout(() => {
        this.$container.css('height', window.innerHeight);
        this.$section.css('height', window.innerHeight);
      }, 300);
    }
    this.initScroll();
    this.scrollEvent();
  }

  initScroll() {
    const _this = this;

    this.pageScroll = new WheelIndicator({
      elem: window
    });

    this.indicator = new WheelIndicator({
      elem: this.$container.get(0),
      callback(e) {
        if (e.direction === 'up') {
          if (_this.freezeScrollUp) return;
          _this.goPrevSection();
        } else if (e.direction === 'down') {
          if (_this.freezeScrollDown) return;
          _this.goNextSection();
          if (_this.activeSection === _this.sectionLength - 1) {
            _this.goOut();
          }
        }
      }
    });

    this.mc = new Hammer(this.$container.get(0));
    this.mc.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
    this.mc.on('swipeup swipedown', (e) => {
      if (e.type === 'swipedown') {
        if (_this.freezeScrollUp) return;
        _this.goPrevSection();
      } else if (e.type === 'swipeup') {
        if (_this.freezeScrollDown) return;
        _this.goNextSection();
        if (_this.activeSection === _this.sectionLength - 1) {
          _this.goOut();
        }
      }
    });
  }

  goIn() {
    const _this = this;
    $body.addClass(css.overflow);
    TweenMax.to($main, 1, {
      y: 0,
      onStart() {
        _this.scrollIndicator.turnOff();
        _this.mcScroll.get('swipe').set({ enable: false });
        _this.freezeScrollUp = true;
        _this.indicator.turnOn();
        _this.mc.get('swipe').set({ enable: true });
        _this.removeScrollController();
        _this.pageScroll.setOptions({
          preventMouse: true
        });
        $footer.css('margin-top', '');
      },
      onComplete() {
        _this.freezeScrollUp = false;
      }
    });
  }

  goOut() {
    const _this = this;
    $body.removeClass(css.overflow);
    TweenMax.to($main, 1, {
      y: -window.innerHeight,
      onStart() {
        // _this.patternAPI.stop();
      },
      onComplete() {
        _this.scrollController();
        _this.indicator.turnOff();
        _this.mc.get('swipe').set({ enable: false });
        _this.pageScroll.setOptions({
          preventMouse: false
        });
        $footer.css('margin-top', -window.innerHeight);
      }
    });
  }

  scrollController() {
    this.freezeScrollUp = false;
    this.checkScroll();
    $window.on('scroll', this.checkScroll.bind(this));
  }

  checkScroll() {
    if ($window.scrollTop() > 0) {
      this.freezeScrollUp = true;
      this.scrollIndicator.turnOff();
      this.mcScroll.get('swipe').set({ enable: false });
    } else {
      this.scrollIndicator.turnOn();
      this.mcScroll.get('swipe').set({ enable: true });
      setTimeout(() => {
        this.freezeScrollUp = false;
      }, 50);
    }
  }

  removeScrollController() {
    $window.unbind('scroll', this.checkScroll);
  }

  scrollEvent() {
    const _this = this;

    this.scrollIndicator = new WheelIndicator({
      elem: document,
      preventMouse: false,
      callback(e) {
        if (e.direction === 'up') {
          if (_this.freezeScrollUp) return;
          _this.goIn();
        }
      }
    });
    this.scrollIndicator.turnOff();

    this.mcScroll = new Hammer($document.get(0), { touchAction: 'auto' });
    this.mcScroll.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
    this.mcScroll.on('swipedown', (e) => {
      if (e.type === 'swipedown') {
        if (_this.freezeScrollUp) return;
        _this.goIn();
      }
    });
    this.mcScroll.get('swipe').set({ enable: false });
  }

  get activeSection() {
    return this.$section.filter('.' + css.active).index();
  }

  async goToSection(currentIndex, nextIndex) {
    if (this.scrollAnim) return;
    if (nextIndex < 0 || nextIndex > this.sectionLength - 1) return;

    const _this = this;
    const $currentSection = this.$section.eq(currentIndex);
    const $nextSection = this.$section.eq(nextIndex);

    _this.scrollAnim = true;

    // if (nextIndex !== 0) {
    //   this.patternAPI.manualCursor = false;
    //   this.patternAPI.freezeCursor = true;
    // } else {
    //   this.patternAPI.freezeCursor = false;
    //   if ($nextSection.find('[data-video-target]').find('video').length) {
    //   } else {
    //     this.patternAPI.manualCursor = true;
    //   }
    // }

    new TimelineMax().add(() => { _this.scrollAnim = false; }, 0.75);

    //current section
    TweenMax.to($currentSection, 0.5, {
      alpha: 0,
      onComplete() {
        $currentSection.addClass(css.hidden);
      }
    });
    $currentSection.removeClass(css.active);

    // switch (currentIndex) {
    //   case 0:
    //     this.pauseVideo(0);
    //     break;
    //   case 1:
    //     break;
    //   case 2:
    //     this.freezeScrollUp = false;
    //     this.freezeScrollDown = false;
    //     break;
    //   case 3:
    //     this.pauseVideo(3);
    //     break;
    // }

    //next section
    TweenMax.to($nextSection, 1, {
      alpha: 1,
      onStart() {
        $nextSection.removeClass(css.hidden).addClass(css.active);
      }
    });

    // switch (nextIndex) {
    //   case 0:
    //     this.playVideo(0);
    //     Block1API.$container.removeClass(css.cursor);
    //     break;
    //   case 1:
    //     if ($nextSection.hasClass(css.hasAnim)) {
    //       Block2API.showHighlight();
    //       Block2API.tl.play();
    //     } else {
    //       Block2API.showHighlight(true);
    //       $nextSection.addClass(css.hasAnim);
    //       Block2API.startAnim();
    //     }
    //     break;
    //   case 2:
    //     if (currentIndex === 1) {
    //       this.freezeScrollUp = false;
    //       this.freezeScrollDown = true;
    //     } else if (currentIndex === 3) {
    //       this.freezeScrollUp = true;
    //       this.freezeScrollDown = false;
    //     }
    //     setTimeout(() => {
    //       this.patternAPI.stop();
    //     }, 1000);
    //     Block3API.sliderAnim = true;
    //     if (!$nextSection.hasClass(css.hasAnim)) {
    //       $nextSection.addClass(css.hasAnim);
    //       await Block3API.startAnim();
    //       Block3API.sliderAnim = false;
    //     } else {
    //       Block3API.reverseAnim();
    //       setTimeout(() => {
    //         Block3API.sliderAnim = false;
    //       }, Block3API.sliderDelay * 1000);
    //     }
    //     break;
    //   case 3:
    //     this.playVideo(3);
    //     if ($nextSection.hasClass(css.hasAnim)) {
    //       Block4API.initSlider();
    //     } else {
    //       Block3API.hideSection();
    //       $nextSection.addClass(css.hasAnim);
    //       Block4API.startAnim();
    //     }
    //     break;
    // }
  }

  goNextSection() {
    const currentIndex = this.activeSection;
    const nextIndex = currentIndex + 1;

    this.goToSection(currentIndex, nextIndex);
  }

  goPrevSection() {
    const currentIndex = this.activeSection;
    const nextIndex = currentIndex - 1;

    this.goToSection(currentIndex, nextIndex);
  }
}

export const ScreenAPI = new Screen();