Merge pull request #2760 from brkcvn/master
Loading converted to alpine.js
This commit is contained in:
commit
59a01dd5f8
@ -6,6 +6,7 @@
|
||||
v-show="show"
|
||||
tabindex="-1"
|
||||
role="dialog"
|
||||
data-modal-handle
|
||||
:aria-hidden="!show">
|
||||
<div class="w-full my-10 m-auto flex flex-col px-2 sm:px-0" :class="modalDialogClass ? modalDialogClass : 'max-w-md'">
|
||||
<slot name="modal-content">
|
||||
|
@ -6,6 +6,7 @@
|
||||
v-show="show"
|
||||
tabindex="-1"
|
||||
role="dialog"
|
||||
data-modal-handle
|
||||
:aria-hidden="!show">
|
||||
<div class="w-full my-10 m-auto flex flex-col px-2 sm:px-0" :class="modalDialogClass ? modalDialogClass : 'max-w-md'">
|
||||
<slot name="modal-content">
|
||||
|
@ -27,7 +27,12 @@
|
||||
|
||||
@stack('menu_start')
|
||||
|
||||
<div data-real-menu class="w-70 h-screen flex hidden fixed top-0 js-menu z-20 xl:z-10 transition-all ltr:-left-80 rtl:-right-80 xl:ltr:left-0 xl:rtl:right-0">
|
||||
<div
|
||||
x-data="{ }"
|
||||
x-init="setTimeout(() => $refs.realMenu.classList.remove('hidden'), 1000)"
|
||||
x-ref="realMenu"
|
||||
class="w-70 h-screen flex hidden fixed top-0 js-menu z-20 xl:z-10 transition-all ltr:-left-80 rtl:-right-80 xl:ltr:left-0 xl:rtl:right-0"
|
||||
>
|
||||
<div class="w-14 py-7 px-1 bg-lilac-900 z-10 menu-scroll overflow-y-auto overflow-x-hidden">
|
||||
<div
|
||||
data-tooltip-target="tooltip-profile"
|
||||
|
@ -11,7 +11,12 @@
|
||||
|
||||
@stack('menu_start')
|
||||
|
||||
<div data-real-menu class="w-70 h-screen flex hidden fixed top-0 js-menu z-20 xl:z-10 transition-all ltr:-left-80 rtl:-right-80 xl:ltr:left-0 xl:rtl:right-0">
|
||||
<div
|
||||
x-data="{ }"
|
||||
x-init="setTimeout(() => $refs.realMenu.classList.remove('hidden'), 1000)"
|
||||
x-ref="realMenu"
|
||||
class="w-70 h-screen flex hidden fixed top-0 js-menu z-20 xl:z-10 transition-all ltr:-left-80 rtl:-right-80 xl:ltr:left-0 xl:rtl:right-0"
|
||||
>
|
||||
<div class="w-14 py-7 px-1 bg-lilac-900 z-10 menu-scroll overflow-y-auto overflow-x-hidden">
|
||||
<div
|
||||
data-tooltip-target="tooltip-profile"
|
||||
|
@ -1,4 +1,9 @@
|
||||
<div data-absolute-loading-content class="absolute w-full lg:flex items-start justify-center bg-body top-0 bottom-0 left-0 right-0 z-50">
|
||||
<div
|
||||
x-data="{ }"
|
||||
x-init="document.querySelector('[data-modal-handle]') ? document.querySelector('[data-modal-handle]').classList.add('invisible'): null, setTimeout(() => $refs.loadingAbsoluteContent.remove(), 1000), setTimeout(() => document.querySelector('[data-modal-handle]') ? document.querySelector('[data-modal-handle]').classList.remove('invisible') : null , 1010)"
|
||||
x-ref="loadingAbsoluteContent"
|
||||
class="absolute w-full lg:flex items-start justify-center bg-body top-0 bottom-0 left-0 right-0 z-50"
|
||||
>
|
||||
<img src="{{ asset('public/img/akaunting-loading.gif') }}" class="w-28 h-28" alt="Akaunting" />
|
||||
</div>
|
||||
<!--data attr added because for none vue.js pages-->
|
@ -1,4 +1,9 @@
|
||||
<div data-loading-content class="fixed w-full lg:w-4/5 h-screen flex items-center justify-center bg-body top-0 bottom-0 ltr:right-0 rtl:left-0 -mx-1 z-50">
|
||||
<div
|
||||
x-data="{ }"
|
||||
x-init="document.querySelector('[data-modal-handle]') ? document.querySelector('[data-modal-handle]').classList.add('invisible'): null, setTimeout(() => $refs.loadingContent.remove(), 1000), setTimeout(() => document.querySelector('[data-modal-handle]') ? document.querySelector('[data-modal-handle]').classList.remove('invisible') : null , 1010)"
|
||||
x-ref="loadingContent"
|
||||
class="fixed w-full lg:w-4/5 h-screen flex items-center justify-center bg-body top-0 bottom-0 ltr:right-0 rtl:left-0 -mx-1 z-50"
|
||||
>
|
||||
<img src="{{ asset('public/img/akaunting-loading.gif') }}" class="w-28 h-28 lg:-mt-16" alt="Akaunting" />
|
||||
</div>
|
||||
<!--data attr added because for none vue.js pages-->
|
||||
|
@ -1,4 +1,9 @@
|
||||
<div data-loading-menu class="w-70 h-screen hidden lg:flex fixed top-0 js-menu z-20 transition-all ltr:-left-80 rtl:-right-80 xl:ltr:left-0 xl:rtl:right-0">
|
||||
<div
|
||||
x-data="{ }"
|
||||
x-init="setTimeout(() => $refs.loadingMenu.remove(), 1000)"
|
||||
x-ref="loadingMenu"
|
||||
class="w-70 h-screen hidden lg:flex fixed top-0 js-menu z-20 transition-all ltr:-left-80 rtl:-right-80 xl:ltr:left-0 xl:rtl:right-0"
|
||||
>
|
||||
<div class="w-14 py-7 px-1 bg-lilac-900 z-10 menu-scroll overflow-y-auto overflow-x-hidden">
|
||||
<div class="flex flex-col items-center justify-center mb-7 cursor-pointer">
|
||||
<span class="w-7 h-7 flex items-center justify-center text-2xl">
|
||||
@ -73,32 +78,3 @@
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@push('scripts_start')
|
||||
<script type="text/javascript">
|
||||
let loading_menu_html = document.querySelectorAll('[data-loading-menu]');
|
||||
let loading_html = document.querySelectorAll('[data-loading-content]');
|
||||
let loading_absolute_html = document.querySelectorAll('[data-absolute-loading-content]');
|
||||
let menu_html = document.querySelector('[data-real-menu]');
|
||||
let timer = 1000;
|
||||
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
setTimeout(() => {
|
||||
loading_menu_html[0].remove();
|
||||
menu_html.classList.remove('hidden');
|
||||
}, timer);
|
||||
|
||||
if (loading_html.length) {
|
||||
setTimeout(() => {
|
||||
loading_html[0].remove();
|
||||
}, timer);
|
||||
}
|
||||
|
||||
if (loading_absolute_html.length) {
|
||||
setTimeout(() => {
|
||||
loading_absolute_html[0].remove();
|
||||
}, timer);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
Loading…
x
Reference in New Issue
Block a user