<commit_before><template>
<v-touch id='root'
         @swiperight='enableNav'
         @swipeleft='disableNav'
         :swipe-options="{
             direction: 'horizontal'
         }">
    <hideable-header :showNav='showNav'/>
    <nav-bar :show='showNav'/>
    <main id='main-root'
          class='anim'
          :class='{ "push":  showNav }'
          :style='{ "color": color }'>
        <transition name='fade' mode='out-in'>
            <router-view class='main-router'/>
        </transition>
    </main>
</v-touch>
</template>

<script lang='ts'>
import Vue            from 'vue';
import * as Hammer    from 'hammerjs';

import NavBar         from "@/components/nav/NavBar.vue";
import HideableHeader from "@/components/nav/HideableHeader.vue";

import {
    makeNewFavicon,
    makeNewSelectionColor
} from '@/scripts/nav/DynamicColor';
import NavEventBus from '@/scripts/nav/NavEventBus';
import Events      from '@/scripts/nav/Events'

import Breakpoints from '@/style/ts/Breakpoints';
import Swatch      from '@/style/ts/Swatch';

export default Vue.extend({
    name: 'App',
    data() {
        return {
            showNav: false,
            previouslyOnTablet: false,
            color: Swatch.bright
        }
    },
    watch: {
        $route() {
            window.scrollTo(0, 0);
        }
    },
    computed: {
        shouldPush(): boolean {
            return this.showNav && Breakpoints.onLaptopOrUp();
        }
    },
    methods: {
        disableNav(e?: HammerInput) {
            if(e !== undefined &&
               e.pointerType !== 'touch') {
                return;
            }
            this.showNav = false;
        },
        enableNav(e?: HammerInput) {
            if(e !== undefined &&
               e.pointerType !== 'touch') {
                return;
            }
            this.showNav = true;
            NavEventBus.$emit(Events.openHeader);
        },
        toggleNav()  {
            this.showNav = !this.showNav;
            if (this.showNav) {
                NavEventBus.$emit(Events.openHeader);
            }
        },

        defaultNavState() {
            if (Breakpoints.onLaptopOrUp()) {
                NavEventBus.$emit(Events.openNav);
            } else {
                NavEventBus.$emit(Events.closeNav);
            }

            this.previouslyOnTablet = Breakpoints.onTabletOrDown();
        },

        enableNavIfBigger() {
            if (Breakpoints.onLaptopOrUp() &&
                this.previouslyOnTablet) {

                NavEventBus.$emit(Events.openNav);
            }

            this.previouslyOnTablet = Breakpoints.onTabletOrDown();
        },

        changeColor(color: Swatch) {
            this.color = color;
            makeNewFavicon(this.color);
            makeNewSelectionColor(this.color);
        },

    },
    created() {
        // needs to be set before navItems are created and mounted
        NavEventBus.$on(Events.changeColor, this.changeColor);
    },
    mounted() {
        NavEventBus.$on(Events.closeNav,  this.disableNav);
        NavEventBus.$on(Events.openNav,   this.enableNav);
        NavEventBus.$on(Events.toggleNav, this.toggleNav);

        window.addEventListener(Events.resize, this.enableNavIfBigger);

        this.defaultNavState();
    },
    beforeDestroy() {
        NavEventBus.$off(Events.changeColor, this.changeColor);

        NavEventBus.$off(Events.closeNav,  this.disableNav);
        NavEventBus.$off(Events.openNav,   this.enableNav);
        NavEventBus.$off(Events.toggleNav, this.toggleNav);

        window.removeEventListener(Events.resize, this.enableNavIfBigger);
    },
    components: {
        "nav-bar": NavBar,
        "hideable-header" : HideableHeader
    },
});
</script>

<style lang='scss' scoped>
@import '@/style/master.scss';

#root {
    font-family: 'Open Sans', sans-serif;
    min-height: 100vh;
    user-select: auto !important;
}


#main-root {
    padding-top: $header-height;
    //min-height: 100vh;
    max-width: 100vw;
}

.anim {
    transition: all $nav-animation-time ease;
}

.push {
    @include on-laptop-or-up {
        padding-left: $nav-width;<commit_msg>force pinch-zoom to work on root<commit_after><template>
<v-touch id='root'
         refs='root'
         @swiperight='enableNav'
         @swipeleft='disableNav'
         :swipe-options="{
             direction: 'horizontal'
         }">
    <hideable-header :showNav='showNav'/>
    <nav-bar :show='showNav'/>
    <main id='main-root'
          class='anim'
          :class='{ "push":  showNav }'
          :style='{ "color": color }'>
        <transition name='fade' mode='out-in'>
            <router-view class='main-router'/>
        </transition>
    </main>
</v-touch>
</template>

<script lang='ts'>
import Vue            from 'vue';
import * as Hammer    from 'hammerjs';

import NavBar         from "@/components/nav/NavBar.vue";
import HideableHeader from "@/components/nav/HideableHeader.vue";

import {
    makeNewFavicon,
    makeNewSelectionColor
} from '@/scripts/nav/DynamicColor';
import NavEventBus from '@/scripts/nav/NavEventBus';
import Events      from '@/scripts/nav/Events'

import Breakpoints from '@/style/ts/Breakpoints';
import Swatch      from '@/style/ts/Swatch';

export default Vue.extend({
    name: 'App',
    data() {
        return {
            showNav: false,
            previouslyOnTablet: false,
            color: Swatch.bright
        }
    },
    watch: {
        $route() {
            window.scrollTo(0, 0);
        }
    },
    computed: {
        shouldPush(): boolean {
            return this.showNav && Breakpoints.onLaptopOrUp();
        }
    },
    methods: {
        disableNav(e?: HammerInput) {
            if(e !== undefined &&
               e.pointerType !== 'touch') {
                return;
            }
            this.showNav = false;
        },
        enableNav(e?: HammerInput) {
            if(e !== undefined &&
               e.pointerType !== 'touch') {
                return;
            }
            this.showNav = true;
            NavEventBus.$emit(Events.openHeader);
        },
        toggleNav()  {
            this.showNav = !this.showNav;
            if (this.showNav) {
                NavEventBus.$emit(Events.openHeader);
            }
        },

        defaultNavState() {
            if (Breakpoints.onLaptopOrUp()) {
                NavEventBus.$emit(Events.openNav);
            } else {
                NavEventBus.$emit(Events.closeNav);
            }

            this.previouslyOnTablet = Breakpoints.onTabletOrDown();
        },

        enableNavIfBigger() {
            if (Breakpoints.onLaptopOrUp() &&
                this.previouslyOnTablet) {

                NavEventBus.$emit(Events.openNav);
            }

            this.previouslyOnTablet = Breakpoints.onTabletOrDown();
        },

        changeColor(color: Swatch) {
            this.color = color;
            makeNewFavicon(this.color);
            makeNewSelectionColor(this.color);
        },

    },
    created() {
        // needs to be set before navItems are created and mounted
        NavEventBus.$on(Events.changeColor, this.changeColor);
    },
    mounted() {
        NavEventBus.$on(Events.closeNav,  this.disableNav);
        NavEventBus.$on(Events.openNav,   this.enableNav);
        NavEventBus.$on(Events.toggleNav, this.toggleNav);

        window.addEventListener(Events.resize, this.enableNavIfBigger);

        this.defaultNavState();
        //@ts-ignore
        this.$refs.root.disableAll();
        //@ts-ignore
        this.$refs.root.enable('swipe');
    },
    beforeDestroy() {
        NavEventBus.$off(Events.changeColor, this.changeColor);

        NavEventBus.$off(Events.closeNav,  this.disableNav);
        NavEventBus.$off(Events.openNav,   this.enableNav);
        NavEventBus.$off(Events.toggleNav, this.toggleNav);

        window.removeEventListener(Events.resize, this.enableNavIfBigger);
    },
    components: {
        "nav-bar": NavBar,
        "hideable-header" : HideableHeader
    },
});
</script>

<style lang='scss' scoped>
@import '@/style/master.scss';

#root {
    font-family: 'Open Sans', sans-serif;
    min-height: 100vh;
    user-select: auto !important;
    touch-action: pan-y pinch-zoom !important;
}


#main-root {
    padding-top: $header-height;
    //min-height: 100vh;
    max-width: 100vw;
}

.anim {
    transition: all $nav-animation-time ease;
}

.push {
    @include on-laptop-or-up {
        padding-left: $nav-width;
{'fraction_non_alphanumeric': 0.13584018801410105, 'fraction_numerical': 0.0025851938895417154, 'mean_word_length': 1.9247422680412372, 'pattern_counts': {'":': 6, '<': 31, '<?xml version=': 0, '>': 31, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2589316', 'n_tokens_mistral': 2622, 'n_tokens_neox': 2525, 'n_words': 437}