Merge pull request #2760 from brkcvn/master

Loading converted to alpine.js
This commit is contained in:
Cüneyt Şentürk 2022-11-21 17:27:33 +03:00 committed by GitHub
commit 59a01dd5f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 32 additions and 34 deletions

View File

@ -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">

View File

@ -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">

View File

@ -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"

View File

@ -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"

View File

@ -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-->

View File

@ -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-->

View File

@ -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