<script>
import Layout from "@/layout/main.vue"
import pageheader from "@/components/page-header.vue"

export default {
    name: "LOADING",
    components: {
        Layout, pageheader
    },
    mounted() {
    var control = document.querySelector('#show-loader');
    var elem = document.querySelector('.loader');
    var fadeInInterval, fadeOutInterval;

    if (control) {
      control.addEventListener('click', function () {
        if (!elem.classList.contains('is-active')) {
          clearInterval(fadeInInterval);
          clearInterval(fadeOutInterval);
          elem.fadeIn = function (timing) {
            var newValue = 0;
            elem.style.display = 'flex';
            elem.style.opacity = 0;
            fadeInInterval = setInterval(function () {
              if (newValue < 1) {
                newValue += 0.01;
              } else if (newValue === 1) {
                clearInterval(fadeInInterval);
              }
              elem.style.opacity = newValue;
            }, timing);
          }
          elem.fadeIn(3);
          setTimeout(function () {
            clearInterval(fadeInInterval);
            clearInterval(fadeOutInterval);
            elem.fadeOut = function (timing) {
              var newValue = 1;
              elem.style.opacity = 1;
              fadeOutInterval = setInterval(function () {
                if (newValue > 0) {
                  newValue -= 0.01;
                } else if (newValue < 0) {
                  elem.style.opacity = 0;
                  elem.style.display = 'none';
                  clearInterval(fadeOutInterval);
                }
                elem.style.opacity = newValue;
              }, timing);
            }
            elem.fadeOut(3);
          }, 4000)
        }
      });
    }
  }

}
</script>

<template>
    <Layout>
        <pageheader title="Loading" pageTitle="Pages" />
        <BRow>
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row mb-0">
                            <label class="col-form-label col-lg-3 col-sm-12 text-lg-end">Loader</label>
                            <div class="col-lg-6 col-md-9 col-sm-12">
                                <button class="btn btn-primary" id="show-loader">Loading</button>
                                <p class="text-muted mt-3 mb-0">click above button to open loader</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </BRow>
        <!-- Loader -->
        <div class="loader">
            <div class="p-4 text-center">
                <div class="custom-loader"></div>
                <h2 class="my-3 f-w-400">Loading..</h2>
                <p class="mb-0">Please wait while we get your information from the web</p>
            </div>
        </div>
    </Layout>
</template>