gistfile1.txt

import $$ from '../frontend-modules/dollar-dollar/dollar-dollar.js';
import compileTemplate from '../frontend-modules/simple-compile-template/simple-compile-template.js';
import appendHTML from '../frontend-modules/append-html/append-html.js';
import getClosest from '../frontend-modules/get-closest/get-closest.js';

import State from '../frontend-modules/simple-state/simple-state.js';

import template from './template.html';
import './test.less';


appendHTML(document.body, template);

// const deliveryModule = new State(state => {
//     let newHtml = compileTemplate(template, state);
    
//     while (document.body.firstChild) {
//         document.body.removeChild(document.body.firstChild);
//     }

//     appendHTML(document.body, newHtml);
// });

// deliveryModule.setState({
//     name: 'Aaron'
// });

// setInterval(() => {
//     const dateThing = new Date();

//     deliveryModule.setState({
//         name: dateThing.toLocaleTimeString()
//     });
// }, 1000);

// appendHTML(document.body, template);

let isTicking = false;
let lastKnownScroll = 0;

window.addEventListener('scroll', () => {
    if (isTicking) return;

    isTicking = true;
    tick();
});

function tick() {

    setTimeout(() => {
        lastKnownScroll = window.scrollY;
    }, 0);

    requestAnimationFrame(() => {
        // do UI updates
        console.log('updating', lastKnownScroll);
        isTicking = false;
    });
}


const removePanelOpenStates = () => 
    $$('.header').forEach(elm => {
        const parent = elm.parentNode;
        if (parent) parent.classList.remove('is-open');
    });

function removePanelActiveStates() {
    $$('.panel').forEach(elm => elm.classList.remove('is-active'));
}
function removeActiveOptionStates() {
    $$('.js-delivery-options li').forEach(elm => elm.classList.remove('is-chosen'));
}
function updateHeaderDetails( selectedOption, selectedPanel ) {
    selectedPanel.querySelector('.header span').innerText = selectedOption.innerText;

}
function clearHeaderSelectedDetails() {
    $$('.header span').forEach(elm => elm.innerText = '');
}

const deliveryModule = new State(state => {
    console.log('%c Debug State ', 'font-weight: bold; color: #a00000', state);

    if (state.choosing) {
        removePanelOpenStates();
        const parentSelected = state.openPanel.parentNode;
        if (parentSelected) parentSelected.classList.add('is-open');
        return;
    } else {
        removePanelOpenStates();
    }

    if (state.chosenOption) {
        removePanelActiveStates();
        removeActiveOptionStates();
        removePanelOpenStates();

        clearHeaderSelectedDetails();
        updateHeaderDetails(state.chosenOption, state.chosenPanel);

        state.chosenOption.classList.add('is-chosen');
        state.chosenPanel.classList.add('is-active');
    }

});

window.deliveryModule = deliveryModule;




// Update the state

$$('.header').forEach(elm => {
    elm.addEventListener('click', e => {

        e.stopPropagation();

        deliveryModule.setState({
            choosing: true,
            hasChosen: false,
            openPanel: e.target
        });

    });
});


$$('.js-delivery-options li').forEach(elm => {
    elm.addEventListener('click', e => {
        e.stopPropagation();


        deliveryModule.setState({
            choosing: false,
            hasChosen: true,
            openPanel: null,
            chosenOption: e.target,
            chosenPanel: getClosest(e.target, '.panel')
        });
        
    });
});


document.body.addEventListener('click', function() {
    console.log('bodyyy');
    if (!deliveryModule.state.choosing) return;

    deliveryModule.setState({
        choosing: false
    });
});