index.js

gistfile1.txt

import NormalizeWheel from 'normalize-wheel';

import each from 'lodash/each'

import About from 'pages/About'
import Home from 'pages/Home'

class App {
    constructor () {
        this.createContent();
        this.createPages();

        this.addEventListeners();
        this.addLinkListeners();

        this.onResize();
        this.update();
    }

    createContent() {
        this.content = document.querySelector('.content');
        this.nav_wrapper = document.querySelector('.navigation_wrapper');
        this.template = this.content.getAttribute('data-template');
    }

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

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

        document.getElementById("tab_2").checked = true;
        document.getElementById("tab_1").checked = false;
      }

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

        var link2 = "home"
        var preview2 = document.getElementById("nav-about"); //getElementById instead of querySelectorAll
        preview2.setAttribute("data-template", link2);

        document.getElementById("tab_2").checked = false;
        document.getElementById("tab_1").checked = true ;
      }

        this.pages = {
            home: new Home(),
            about: new About(),
        }
        this.page = this.pages[this.template]
        this.page.create()
        this.page.show()

        // console.log(this.pages)
    }

    onPopState() {
      this.onChange({
        url: window.location.pathname,
        push: true,
      });
    }

    async onChange(url, push = true) {

        await this.page.hide()

        console.log('page hide')

        const request = await window.fetch(url)

        if  (request.status === 200) {
            const html = await request.text();
            const div = document.createElement('div')

            if (push) {
              window.history.pushState({}, '', url);
            }

            div.innerHTML = html

            const divContent = div.querySelector('.content')

            this.template = divContent.getAttribute('data-template')

            this.content.setAttribute('data-template', this.template)

            this.content.innerHTML = divContent.innerHTML

            this.page = this.pages[this.template];

            this.page.create()
            // console.log('create')
            this.onResize()
            // console.log('resize')
            this.page.show()
            // console.log('show')
            this.addLinkListeners();

        }
        else {
            console.log('Error')
        }
        // console.log(request)
    }

    onResize() {
      if (this.page && this.page.onResize) {
        this.page.onResize();
      }

      window.requestAnimationFrame((_) => {
        if (this.canvas && this.canvas.onResize) {
          this.canvas.onResize();
        }
      });
    }

    onWheel(e) {
      const normalizedWheel = NormalizeWheel(e);

      if (this.canvas && this.canvas.onWheel) {
        this.canvas.onWheel(normalizedWheel);
      }

      if (this.page && this.page.onWheel) {
        this.page.onWheel(normalizedWheel);
      }
    }


    /* Loop */
    update() {
      if (this.page && this.page.update) {
        this.page.update();
        this.onResize();
      }

      if (this.canvas && this.canvas.update) {
        this.canvas.update(this.page.scroll);
      }

      this.frame = window.requestAnimationFrame(this.update.bind(this));
    }


    /* Listeners */
    addEventListeners() {
      window.addEventListener('mousewheel', this.onWheel.bind(this));
      window.addEventListener('resize', this.onResize.bind(this))

    }

    addLinkListeners () {

        const links = document.querySelectorAll('.navigation_link_t')
        each(links, link => {
            link.onclick = event => {
                event.preventDefault()
                const  {href} = link
                this.onChange(href)
            }

        })
    }
}

new App()