Page.js

gistfile1.txt

import GSAP from 'gsap'
import each from 'lodash/each'
import map from 'lodash/map'

import Prefix from 'prefix'

import Title from 'animations/Title'
import Gallery from 'animations/Gallery'


export default class Page {
    constructor ({
        element,
        elements,
        id
    }) {
        this.selector = element
        this.selectorChildren = {
            ...elements,
          animationsTitles: '[data-animation="title"]',
          animationsGallery: '[data-animation="image-gallery"]'  }
        this.id = id

        this.transformPrefix = Prefix('transform')

    }

    create() {
        this.element = document.querySelector(this.selector);
        this.elements = {};

        this.scroll = {
          current: 0,
          target: 0,
          last: 0,
          limit: 0
        }


        each(this.selectorChildren, (entry, key) => {
          if (
            entry instanceof window.HTMLElement ||
            entry instanceof window.NodeList ||
            Array.isArray(entry)
          ) {
            this.elements[key] = entry;
          } else {
            this.elements[key] = document.querySelectorAll(entry);

            if (this.elements[key].length === 0) {
              this.elements[key] = null;
            } else if (this.elements[key].length === 1) {
              this.elements[key] = document.querySelector(entry);
            }
          }
        })

        this.createAnimations()
     }

     createAnimations() {
      this.animations = [];

      // Titles

      this.animationsTitles = map(this.elements.animationsTitles, (element) => {
        return new Title({
          element,
        });
      });

      this.animations.push(...this.animationsTitles);

      // gallery

    this.animationsGallery = map(this.elements.animationsGallery, (element) => {
      return new Gallery({
        element,
      });
    });

    this.animations.push(...this.animationsGallery);

    }

    show(animation) {

      if (window.location.pathname === '/about') {

        console.log('set about test')
        const link = "about"
        const preview = document.getElementById("nav-about"); //getElementById instead of querySelectorAll
        preview.setAttribute("data-template", link);

      }

      if (window.location.pathname === '/') {

        console.log('set home test')
        const link = "home"
        const preview = document.getElementById("nav-about"); //getElementById instead of querySelectorAll
        preview.setAttribute("data-template", link);

      }
      return new Promise((resolve) => {

        if (animation) {
          this.animationIn = animation;
          console.log('Show passed animation')
        } else {
          console.log('Show template animation')
          this.animationIn = GSAP.timeline();

          this.animationIn.fromTo(
            this.element,
            {

              autoAlpha: 0,
            },
            {
              // delay is set-up here to show the home delay in refreshing spotify data
              delay: 2,
              autoAlpha: 1,
            }
          );
        }

        this.animationIn.call((_) => {
          this.addEventListeners();

          resolve();
        });
      });
    }

     hide () {
        return new Promise(resolve => {
          this.destroy();
          // console.log('hiding function')

          this.animationOut = GSAP.timeline()

          this.animationOut.to(this.element, {
                autoAlpha: 0,
                onComplete: resolve
            })
        })
    }


    onResize() {
      if (this.elements.wrapper) {
        // console.log(this.elements)
        // console.log('wrapper height ' + this.elements.wrapper.clientHeight)
        this.scroll.limit =
          this.elements.wrapper.clientHeight - window.innerHeight;
      }

      each(this.animations, (animation) => animation.onResize());
      // console.log('onResize')
    }

    onWheel({ pixelY }) {
      this.scroll.target += pixelY;
    }

   update() {
    this.scroll.target = GSAP.utils.clamp(
      0,
      this.scroll.limit,
      this.scroll.target
    );

    this.scroll.current = GSAP.utils.interpolate(
      this.scroll.current,
      this.scroll.target,
      0.1
    );

    if (this.scroll.current < 0.01) {
      this.scroll.current = 0;
    }

    if (this.elements.wrapper) {
      this.elements.wrapper.style[
        this.transformPrefix
      ] = `translateY(-${this.scroll.current}px)`;
    }
  }



    addEventListeners () {

  }

    removeEventListeners () {

    }

    destroy() {
      this.removeEventListeners();
    }
}