<template>
    <div
        class="loader"
        role="alert"
        aria-label="Loading new page"
        @click="captureClick"
        v-bind:class="[
            this.loaderColor,
            this.loaderPosition,
            this.allowPageInteraction ? 'allow-ui-interaction' : '',
        ]"></div>
</template>

<script>
export default {
    name: "loader",
    /* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem = 24px */
    props: {
        /* Color options: red, green, blue, white, black */
        loaderColor: {
            type: String,
        },
        /* Position options: center, right, left (OPTIONAL, do NOT use on btn-* classes) */
        loaderPosition: {
            type: String,
        },
        /* Set to true for loaders where UI interaction must be allowed to continue while the loader is active 
           (See example shop-list-button) */
        allowPageInteraction: {
            type: Boolean,
            default: false,
        },
    },
    methods: {
        captureClick(event) {
            if (!this.allowPageInteraction) {
                event.stopPropagation();
            }
        },
    },
};
</script>

<style lang="scss">
.loader {
    display: flex;
    pointer-events: all;

    //Open an overlay to prevent page interaction
    &:before {
        content: "";
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: transparent;
        z-index: 9999;
        cursor: default;
    }
    //Spinner basics
    &:after {
        content: "";
        mask: url(../../assets/img/icons/spinner.svg);
        mask-size: cover;
        position: relative;
        width: 1rem;
        height: 1rem;
        animation: rotation 1s infinite linear;
        @keyframes rotation {
            100% {
                transform: rotate(360deg);
            }
        }
    }
    //Spinner position
    &.center {
        right: 50%;
        transform: translateX(50%);
    }
    &.right {
        right: 1rem;
    }
    &.left {
        left: 1rem;
    }
    //Spinner color
    &:after {
        //Default spinner color (blue) if no other color is specified from the options below
        background-color: $blue;
    }
    &.red:after {
        background-color: $red;
    }
    &.green:after {
        background-color: $green;
    }
    &.white:after {
        background-color: $white;
    }
    &.black:after {
        background-color: $black;
    }
    &.allow-ui-interaction::before {
        //no-block to enable clicking on certain buttons with loaders while the loader is actives
        pointer-events: none;
    }
}
</style>
