Laravel 11, Vuexy Admin 10.3, by admin@koneko.mx
This commit is contained in:
101
modules/Admin/Resources/assets/vendor/js/_template-customizer/_template-customizer.html
vendored
Normal file
101
modules/Admin/Resources/assets/vendor/js/_template-customizer/_template-customizer.html
vendored
Normal file
@ -0,0 +1,101 @@
|
||||
<div id="template-customizer" class="bg-card">
|
||||
<a href="javascript:void(0)" class="template-customizer-open-btn" tabindex="-1"></a>
|
||||
|
||||
<div class="p-6 m-0 lh-1 border-bottom template-customizer-header position-relative py-4">
|
||||
<h6 class="template-customizer-t-panel_header mb-1"></h6>
|
||||
<p class="template-customizer-t-panel_sub_header mb-0 small"></p>
|
||||
<div class="d-flex align-items-center gap-2 position-absolute end-0 top-0 mt-6 me-5">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="template-customizer-reset-btn text-heading"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="bottom"
|
||||
title="Reset Customizer"
|
||||
><i class="ti ti-refresh ti-lg"></i
|
||||
><span class="badge rounded-pill bg-danger badge-dot badge-notifications d-none"></span
|
||||
></a>
|
||||
<a href="javascript:void(0)" class="template-customizer-close-btn fw-light text-heading" tabindex="-1">
|
||||
<i class="ti ti-x ti-lg"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="template-customizer-inner pt-6">
|
||||
<!-- Theming -->
|
||||
<div class="template-customizer-theming">
|
||||
<h5 class="m-0 px-6 py-6">
|
||||
<span class="template-customizer-t-theming_header bg-label-primary rounded-1 py-1 px-3 small"></span>
|
||||
</h5>
|
||||
|
||||
<!-- Style -->
|
||||
<div class="m-0 px-6 pb-6 template-customizer-style w-100">
|
||||
<label for="customizerStyle" class="form-label d-block template-customizer-t-style_label mb-2"></label>
|
||||
<div class="row px-1 template-customizer-styles-options"></div>
|
||||
</div>
|
||||
|
||||
<!-- Themes -->
|
||||
<div class="m-0 px-6 template-customizer-themes w-100">
|
||||
<label for="customizerTheme" class="form-label template-customizer-t-theme_label mb-2"></label>
|
||||
<div class="row px-1 template-customizer-themes-options"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/ Theming -->
|
||||
|
||||
<!-- Layout -->
|
||||
<div class="template-customizer-layout">
|
||||
<hr class="m-0 px-6 my-6" />
|
||||
<h5 class="m-0 px-6 pb-6">
|
||||
<span class="template-customizer-t-layout_header bg-label-primary rounded-2 py-1 px-3 small"></span>
|
||||
</h5>
|
||||
|
||||
<!-- Layout(Menu) -->
|
||||
<div class="m-0 px-6 pb-6 d-block template-customizer-layouts">
|
||||
<label for="customizerStyle" class="form-label d-block template-customizer-t-layout_label mb-2"></label>
|
||||
<div class="row px-1 template-customizer-layouts-options">
|
||||
<!--? Uncomment If using offcanvas layout -->
|
||||
<!-- <div class="col-12">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="layoutRadios" id="layoutRadios-offcanvas"
|
||||
value="static-offcanvas">
|
||||
<label class="form-check-label template-customizer-t-layout_offcanvas"
|
||||
for="layoutRadios-offcanvas"></label>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="col-12">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="layoutRadios" id="layoutRadios-fixed_offcanvas"
|
||||
value="fixed-offcanvas">
|
||||
<label class="form-check-label template-customizer-t-layout_fixed_offcanvas"
|
||||
for="layoutRadios-fixed_offcanvas"></label>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Header Options for Horizontal -->
|
||||
<div class="m-0 px-6 pb-6 template-customizer-headerOptions w-100">
|
||||
<label for="customizerHeader" class="form-label template-customizer-t-layout_header_label mb-2"></label>
|
||||
<div class="row px-1 template-customizer-header-options"></div>
|
||||
</div>
|
||||
|
||||
<!-- Fixed navbar -->
|
||||
<div class="m-0 px-6 pb-6 template-customizer-layoutNavbarOptions w-100">
|
||||
<label for="customizerNavbar" class="form-label template-customizer-t-layout_navbar_label mb-2"></label>
|
||||
<div class="row px-1 template-customizer-navbar-options"></div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="m-0 px-6 pb-6 template-customizer-content w-100">
|
||||
<label for="customizerContent" class="form-label template-customizer-t-content_label mb-2"></label>
|
||||
<div class="row px-1 template-customizer-content-options"></div>
|
||||
</div>
|
||||
|
||||
<!-- Directions -->
|
||||
<div class="m-0 px-6 pb-6 template-customizer-directions w-100">
|
||||
<label for="customizerDirection" class="form-label template-customizer-t-direction_label mb-2"></label>
|
||||
<div class="row px-1 template-customizer-directions-options"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/ Layout -->
|
||||
</div>
|
||||
</div>
|
||||
342
modules/Admin/Resources/assets/vendor/js/_template-customizer/_template-customizer.scss
vendored
Normal file
342
modules/Admin/Resources/assets/vendor/js/_template-customizer/_template-customizer.scss
vendored
Normal file
@ -0,0 +1,342 @@
|
||||
/*
|
||||
* Template Customizer Style
|
||||
**/
|
||||
|
||||
$customizer-width: 400px;
|
||||
$customizer-width-sm: 300px;
|
||||
$customizer-hide-width: 1200px;
|
||||
$customizer-spacer: 20px;
|
||||
$customizer-font-size: inherit;
|
||||
|
||||
$open-btn-size: 38px;
|
||||
$open-btn-spacer: 0;
|
||||
$open-btn-font-size: 18px;
|
||||
$open-btn-top: 180px;
|
||||
$open-btn-top-md: 145px;
|
||||
|
||||
$open-btn-bg: var(--bs-primary);
|
||||
$open-btn-bg-dark: var(--bs-primary);
|
||||
$open-btn-color: #fff;
|
||||
$open-btn-border-radius: 0.375rem;
|
||||
$open-customizer-primary-color: var(--bs-primary);
|
||||
|
||||
#template-customizer {
|
||||
font-family: 'Public Sans', BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
|
||||
font-size: $customizer-font-size !important;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
z-index: 99999999;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
width: $customizer-width;
|
||||
-webkit-box-shadow: 0px 5px 30px 0px rgba(47, 43, 61, 0.18);
|
||||
box-shadow: 0px 5px 30px 0px rgba(47, 43, 61, 0.18);
|
||||
-webkit-transition: all 0.2s ease-in;
|
||||
-o-transition: all 0.2s ease-in;
|
||||
transition: all 0.2s ease-in;
|
||||
-webkit-transform: translateX($customizer-width + $customizer-spacer);
|
||||
-ms-transform: translateX($customizer-width + $customizer-spacer);
|
||||
transform: translateX($customizer-width + $customizer-spacer);
|
||||
|
||||
.dark-style & {
|
||||
-webkit-box-shadow: 0px 5px 30px 0px rgba(19, 17, 32, 0.24);
|
||||
box-shadow: 0px 5px 30px 0px rgba(19, 17, 32, 0.24);
|
||||
}
|
||||
|
||||
h5 {
|
||||
position: relative;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
> h5 {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: #d1d2d3 !important;
|
||||
}
|
||||
.form-label {
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
.form-check-label {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
&.template-customizer-open {
|
||||
-webkit-transition-delay: 0.1s;
|
||||
-o-transition-delay: 0.1s;
|
||||
transition-delay: 0.1s;
|
||||
-webkit-transform: none !important;
|
||||
-ms-transform: none !important;
|
||||
transform: none !important;
|
||||
|
||||
.custom-option.checked {
|
||||
color: $open-customizer-primary-color;
|
||||
border-width: 2px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.template-customizer-header {
|
||||
a:hover {
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
// Customizer button
|
||||
|
||||
.template-customizer-open-btn {
|
||||
position: absolute;
|
||||
top: $open-btn-top;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
top: $open-btn-top-md;
|
||||
}
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
display: block;
|
||||
width: $open-btn-size;
|
||||
height: $open-btn-size;
|
||||
border-top-left-radius: $open-btn-border-radius;
|
||||
border-bottom-left-radius: $open-btn-border-radius;
|
||||
background: $open-btn-bg;
|
||||
box-shadow: 0px 2px 6px 0px rgba(115, 103, 240, 0.3);
|
||||
color: $open-btn-color !important;
|
||||
text-align: center;
|
||||
font-size: $open-btn-font-size !important;
|
||||
line-height: $open-btn-size;
|
||||
opacity: 1;
|
||||
-webkit-transition: all 0.1s linear 0.2s;
|
||||
-o-transition: all 0.1s linear 0.2s;
|
||||
transition: all 0.1s linear 0.2s;
|
||||
-webkit-transform: translateX(-($open-btn-size + $customizer-spacer + $open-btn-spacer));
|
||||
-ms-transform: translateX(-($open-btn-size + $customizer-spacer + $open-btn-spacer));
|
||||
transform: translateX(-($open-btn-size + $customizer-spacer + $open-btn-spacer));
|
||||
|
||||
.dark-style & {
|
||||
background: $open-btn-bg-dark;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: block;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAABClJREFUaEPtmY1RFEEQhbsjUCIQIhAiUCNQIxAiECIQIxAiECIAIpAMhAiECIQI2vquZqnZvp6fhb3SK5mqq6Ju92b69bzXf6is+dI1t1+eAfztG5z1BsxsU0S+ici2iPB3vm5E5EpEDlSVv2dZswFIxv8UkZcNy+5EZGcuEHMCOBeR951uvVDVD53vVl+bE8DvDu8Pxtyo6ta/BsByg1R15Bwzqz5/LJgn34CZwfnPInI4BUB6/1hV0cSjVxcAM4PbcBZjL0XklIPN7Is3fLCkdQPpPYw/VNXj5IhPIvJWRIhSl6p60ULWBGBm30Vk123EwRxCuIzWkkjNrCZywith10ewE1Xdq4GoAjCz/RTXW44Ynt+LyBEfT43kYfbj86J3w5Q32DNcRQDpwF+dkQXDMey8xem0L3TEqB4g3PZWad8agBMRgZPeu96D1/C2Zbh3X0p80Op1xxloztN48bMQQNoc7+eLEuAoPSPiIDY4Ooo+E6ixeNXM+D3GERz2U3CIqMstLJUgJQDe+7eq6mub0NYEkLAKwEHkiBQDCZtddZCZ8d6r7JDwFkoARklHRPZUFVDVZWbwGuNrC4EfdOzFrRABh3Wnqhv+d70AEBLGFROPmeHlnM81G69UdSd6IUuM0GgUVn1uqWmg5EmMfBeEyB7Pe3txBkY+rGT8j0J+WXq/BgDkUCaqLgEAnwcRog0veMIqFAAwCy2wnw+bI2GaGboBgF9k5N0o0rUSGUb4eO0BeO9j/GYhkSHMHMTIqwGARX6p6a+nlPBl8kZuXMD9j6pKfF9aZuaFOdJCEL5D4eYb9wCYVCanrBmGyii/tIq+SLj/HQBCaM5bLzwfPqdQ6FpVHyra4IbuVbXaY7dETC2ESPNNWiIOi69CcdgSMXsh4tNSUiklMgwmC0aNd08Y5WAES6HHehM4gu97wyhBgWpgqXsrASglprDy7CwhehMZOSbK6JMSma+Fio1KltCmlBIj7gfZOGx8ppQSXrhzFnOhJ/31BDkjFHRvOd09x0mRBA9SFgxUgHpQg0q0t5ymPMlL+EnldFTfDA0NAmf+OTQ0X0sRouf7NNkYGhrOYNrxtIaGg83MNzVDSe3LXLhP7O/yrCsCz1zlWTpjWkuZAOBpX3yVnLqI1yLCOKU6qMrmP7SSrUEw54XF4WBIK5FxCMOr3lVsfGqNSmPzBXUnJTIX1jyVBq9wO6UObOpgC5GjO98vFKnTdQMZXxEsWZlDiCZMIxAbNxQOqlpVZtobejBaZNoBnRDzMFpkxvTQOD36BlrcySZuI6p1ACB6LU3wWuf5581+oHfD1vi89bz3nFUC8Nm7ZlP3nKkFbM4bWPt/MSFwklprYItwt6cmvpWJ2IVcQBCz6bLysSCv3SaANCiTsnaNRrNRqMXVVT1/BrAqz/buu/Y38Ad3KC5PARej0QAAAABJRU5ErkJggg==');
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
// Customizer Hidden
|
||||
.customizer-hide & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[dir='rtl'] & {
|
||||
border-radius: 0;
|
||||
border-top-right-radius: $open-btn-border-radius;
|
||||
border-bottom-right-radius: $open-btn-border-radius;
|
||||
|
||||
&::before {
|
||||
margin-left: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.template-customizer-open .template-customizer-open-btn {
|
||||
opacity: 0;
|
||||
-webkit-transition-delay: 0s;
|
||||
-o-transition-delay: 0s;
|
||||
transition-delay: 0s;
|
||||
-webkit-transform: none !important;
|
||||
-ms-transform: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
// Customizer inner
|
||||
.template-customizer-inner {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
-o-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
> div:first-child {
|
||||
> hr:first-of-type {
|
||||
display: none !important;
|
||||
}
|
||||
> h5:first-of-type {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Theme
|
||||
.template-customizer-themes-inner {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
-o-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.template-customizer-theme-item {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 1 100%;
|
||||
flex: 1 1 100%;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
padding: 0 24px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
z-index: -1; // Put the input behind the label so it doesn't overlay text
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
input ~ span {
|
||||
opacity: 0.25;
|
||||
-webkit-transition: all 0.2s;
|
||||
-o-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.template-customizer-theme-checkmark {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 12px;
|
||||
border-right: 1px solid;
|
||||
border-bottom: 1px solid;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.2s;
|
||||
-o-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
|
||||
[dir='rtl'] & {
|
||||
border-right: none;
|
||||
border-left: 1px solid;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
input:checked:not([disabled]) ~ span,
|
||||
&:hover input:not([disabled]) ~ span {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input:checked:not([disabled]) ~ span .template-customizer-theme-checkmark {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.template-customizer-theme-colors {
|
||||
span {
|
||||
display: block;
|
||||
margin: 0 1px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
|
||||
}
|
||||
}
|
||||
|
||||
&.template-customizer-loading .template-customizer-inner,
|
||||
&.template-customizer-loading-theme .template-customizer-themes-inner {
|
||||
opacity: 0.2;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: $customizer-hide-width) {
|
||||
#template-customizer {
|
||||
display: none;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
#template-customizer {
|
||||
width: $customizer-width-sm;
|
||||
-webkit-transform: translateX($customizer-width-sm + $customizer-spacer);
|
||||
-ms-transform: translateX($customizer-width-sm + $customizer-spacer);
|
||||
transform: translateX($customizer-width-sm + $customizer-spacer);
|
||||
}
|
||||
}
|
||||
|
||||
.layout-menu-100vh #template-customizer {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
// RTL
|
||||
//
|
||||
|
||||
[dir='rtl'] {
|
||||
#template-customizer {
|
||||
right: auto;
|
||||
left: 0;
|
||||
-webkit-transform: translateX(-($customizer-width + $customizer-spacer));
|
||||
-ms-transform: translateX(-($customizer-width + $customizer-spacer));
|
||||
transform: translateX(-($customizer-width + $customizer-spacer));
|
||||
}
|
||||
|
||||
#template-customizer .template-customizer-open-btn {
|
||||
right: 0;
|
||||
left: auto;
|
||||
-webkit-transform: translateX($open-btn-size + $customizer-spacer + $open-btn-spacer);
|
||||
-ms-transform: translateX($open-btn-size + $customizer-spacer + $open-btn-spacer);
|
||||
transform: translateX($open-btn-size + $customizer-spacer + $open-btn-spacer);
|
||||
}
|
||||
|
||||
#template-customizer .template-customizer-close-btn {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#template-customizer .template-customizer-layouts-options[disabled] {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// ! FIX: mode switch position in RTL
|
||||
[dir='rtl'] {
|
||||
.template-customizer-t-style_switch_light {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
7
modules/Admin/Resources/assets/vendor/js/bootstrap.js
vendored
Normal file
7
modules/Admin/Resources/assets/vendor/js/bootstrap.js
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
import * as bootstrap from 'bootstrap'
|
||||
|
||||
try {
|
||||
window.bootstrap = bootstrap
|
||||
} catch (e) {}
|
||||
|
||||
export { bootstrap }
|
||||
73
modules/Admin/Resources/assets/vendor/js/dropdown-hover.js
vendored
Normal file
73
modules/Admin/Resources/assets/vendor/js/dropdown-hover.js
vendored
Normal file
@ -0,0 +1,73 @@
|
||||
// Add onHover event for dropdowns
|
||||
|
||||
;(function ($) {
|
||||
if (!$ || !$.fn) return
|
||||
|
||||
const SELECTOR = '[data-bs-toggle=dropdown][data-trigger=hover]'
|
||||
const TIMEOUT = 150
|
||||
|
||||
function openDropdown($i) {
|
||||
let t = $i.data('dd-timeout')
|
||||
|
||||
if (t) {
|
||||
clearTimeout(t)
|
||||
t = null
|
||||
$i.data('dd-timeout', t)
|
||||
}
|
||||
|
||||
if ($i.attr('aria-expanded') !== 'true') $i.dropdown('toggle')
|
||||
}
|
||||
|
||||
function closeDropdown($i) {
|
||||
let t = $i.data('dd-timeout')
|
||||
|
||||
if (t) clearTimeout(t)
|
||||
|
||||
t = setTimeout(() => {
|
||||
let t2 = $i.data('dd-timeout')
|
||||
|
||||
if (t2) {
|
||||
clearTimeout(t2)
|
||||
t2 = null
|
||||
$i.data('dd-timeout', t2)
|
||||
}
|
||||
|
||||
if ($i.attr('aria-expanded') === 'true') $i.dropdown('toggle')
|
||||
}, TIMEOUT)
|
||||
|
||||
$i.data('dd-timeout', t)
|
||||
}
|
||||
|
||||
$(function () {
|
||||
$('body')
|
||||
.on('mouseenter', `${SELECTOR}, ${SELECTOR} ~ .dropdown-menu`, function () {
|
||||
const $toggle = $(this).hasClass('dropdown-toggle') ? $(this) : $(this).prev('.dropdown-toggle')
|
||||
const $dropdown = $(this).hasClass('dropdown-menu') ? $(this) : $(this).next('.dropdown-menu')
|
||||
|
||||
if (window.getComputedStyle($dropdown[0], null).getPropertyValue('position') === 'static') return
|
||||
|
||||
// Set hovered flag
|
||||
if ($(this).is(SELECTOR)) {
|
||||
$(this).data('hovered', true)
|
||||
}
|
||||
|
||||
openDropdown($(this).hasClass('dropdown-toggle') ? $(this) : $(this).prev('.dropdown-toggle'))
|
||||
})
|
||||
.on('mouseleave', `${SELECTOR}, ${SELECTOR} ~ .dropdown-menu`, function () {
|
||||
const $toggle = $(this).hasClass('dropdown-toggle') ? $(this) : $(this).prev('.dropdown-toggle')
|
||||
const $dropdown = $(this).hasClass('dropdown-menu') ? $(this) : $(this).next('.dropdown-menu')
|
||||
|
||||
if (window.getComputedStyle($dropdown[0], null).getPropertyValue('position') === 'static') return
|
||||
|
||||
// Remove hovered flag
|
||||
if ($(this).is(SELECTOR)) {
|
||||
$(this).data('hovered', false)
|
||||
}
|
||||
|
||||
closeDropdown($(this).hasClass('dropdown-toggle') ? $(this) : $(this).prev('.dropdown-toggle'))
|
||||
})
|
||||
.on('hide.bs.dropdown', function (e) {
|
||||
if ($(this).find(SELECTOR).data('hovered')) e.preventDefault()
|
||||
})
|
||||
})
|
||||
})(window.jQuery)
|
||||
1151
modules/Admin/Resources/assets/vendor/js/helpers.js
vendored
Normal file
1151
modules/Admin/Resources/assets/vendor/js/helpers.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
206
modules/Admin/Resources/assets/vendor/js/mega-dropdown.js
vendored
Normal file
206
modules/Admin/Resources/assets/vendor/js/mega-dropdown.js
vendored
Normal file
@ -0,0 +1,206 @@
|
||||
const TIMEOUT = 150
|
||||
|
||||
class MegaDropdown {
|
||||
constructor(element, options = {}) {
|
||||
this._onHover = options.trigger === 'hover' || element.getAttribute('data-trigger') === 'hover'
|
||||
|
||||
this._container = MegaDropdown._findParent(element, 'mega-dropdown')
|
||||
if (!this._container) return
|
||||
|
||||
this._menu = this._container.querySelector('.dropdown-toggle ~ .dropdown-menu')
|
||||
if (!this._menu) return
|
||||
|
||||
element.setAttribute('aria-expanded', 'false')
|
||||
|
||||
this._el = element
|
||||
this._bindEvents()
|
||||
}
|
||||
|
||||
open() {
|
||||
if (this._timeout) {
|
||||
clearTimeout(this._timeout)
|
||||
this._timeout = null
|
||||
}
|
||||
if (this._focusTimeout) {
|
||||
clearTimeout(this._focusTimeout)
|
||||
this._focusTimeout = null
|
||||
}
|
||||
|
||||
if (this._el.getAttribute('aria-expanded') !== 'true') {
|
||||
this._triggerEvent('show')
|
||||
this._container.classList.add('show')
|
||||
this._menu.classList.add('show')
|
||||
this._el.setAttribute('aria-expanded', 'true')
|
||||
this._el.focus()
|
||||
this._triggerEvent('shown')
|
||||
}
|
||||
}
|
||||
|
||||
close(force) {
|
||||
if (this._timeout) {
|
||||
clearTimeout(this._timeout)
|
||||
this._timeout = null
|
||||
}
|
||||
if (this._focusTimeout) {
|
||||
clearTimeout(this._focusTimeout)
|
||||
this._focusTimeout = null
|
||||
}
|
||||
|
||||
if (this._onHover && !force) {
|
||||
this._timeout = setTimeout(() => {
|
||||
if (this._timeout) {
|
||||
clearTimeout(this._timeout)
|
||||
this._timeout = null
|
||||
}
|
||||
this._close()
|
||||
}, TIMEOUT)
|
||||
} else {
|
||||
this._close()
|
||||
}
|
||||
}
|
||||
|
||||
toggle() {
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
this._el.getAttribute('aria-expanded') === 'true' ? this.close(true) : this.open()
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this._unbindEvents()
|
||||
this._el = null
|
||||
|
||||
if (this._timeout) {
|
||||
clearTimeout(this._timeout)
|
||||
this._timeout = null
|
||||
}
|
||||
|
||||
if (this._focusTimeout) {
|
||||
clearTimeout(this._focusTimeout)
|
||||
this._focusTimeout = null
|
||||
}
|
||||
}
|
||||
|
||||
_close() {
|
||||
if (this._el.getAttribute('aria-expanded') === 'true') {
|
||||
this._triggerEvent('hide')
|
||||
this._container.classList.remove('show')
|
||||
this._menu.classList.remove('show')
|
||||
this._el.setAttribute('aria-expanded', 'false')
|
||||
this._triggerEvent('hidden')
|
||||
}
|
||||
}
|
||||
|
||||
_bindEvents() {
|
||||
this._elClickEvnt = e => {
|
||||
e.preventDefault()
|
||||
this.toggle()
|
||||
}
|
||||
this._el.addEventListener('click', this._elClickEvnt)
|
||||
|
||||
this._bodyClickEvnt = e => {
|
||||
if (!this._container.contains(e.target) && this._container.classList.contains('show')) {
|
||||
this.close(true)
|
||||
}
|
||||
}
|
||||
document.body.addEventListener('click', this._bodyClickEvnt, true)
|
||||
|
||||
this._menuClickEvnt = e => {
|
||||
if (e.target.classList.contains('mega-dropdown-link')) {
|
||||
this.close(true)
|
||||
}
|
||||
}
|
||||
this._menu.addEventListener('click', this._menuClickEvnt, true)
|
||||
|
||||
this._focusoutEvnt = () => {
|
||||
if (this._focusTimeout) {
|
||||
clearTimeout(this._focusTimeout)
|
||||
this._focusTimeout = null
|
||||
}
|
||||
|
||||
if (this._el.getAttribute('aria-expanded') !== 'true') return
|
||||
|
||||
this._focusTimeout = setTimeout(() => {
|
||||
if (
|
||||
document.activeElement.tagName.toUpperCase() !== 'BODY' &&
|
||||
MegaDropdown._findParent(document.activeElement, 'mega-dropdown') !== this._container
|
||||
) {
|
||||
this.close(true)
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
this._container.addEventListener('focusout', this._focusoutEvnt, true)
|
||||
|
||||
if (this._onHover) {
|
||||
this._enterEvnt = () => {
|
||||
if (window.getComputedStyle(this._menu, null).getPropertyValue('position') === 'static') return
|
||||
this.open()
|
||||
}
|
||||
this._leaveEvnt = () => {
|
||||
if (window.getComputedStyle(this._menu, null).getPropertyValue('position') === 'static') return
|
||||
this.close()
|
||||
}
|
||||
|
||||
this._el.addEventListener('mouseenter', this._enterEvnt)
|
||||
this._menu.addEventListener('mouseenter', this._enterEvnt)
|
||||
this._el.addEventListener('mouseleave', this._leaveEvnt)
|
||||
this._menu.addEventListener('mouseleave', this._leaveEvnt)
|
||||
}
|
||||
}
|
||||
|
||||
_unbindEvents() {
|
||||
if (this._elClickEvnt) {
|
||||
this._el.removeEventListener('click', this._elClickEvnt)
|
||||
this._elClickEvnt = null
|
||||
}
|
||||
if (this._bodyClickEvnt) {
|
||||
document.body.removeEventListener('click', this._bodyClickEvnt, true)
|
||||
this._bodyClickEvnt = null
|
||||
}
|
||||
if (this._menuClickEvnt) {
|
||||
this._menu.removeEventListener('click', this._menuClickEvnt, true)
|
||||
this._menuClickEvnt = null
|
||||
}
|
||||
if (this._focusoutEvnt) {
|
||||
this._container.removeEventListener('focusout', this._focusoutEvnt, true)
|
||||
this._focusoutEvnt = null
|
||||
}
|
||||
if (this._enterEvnt) {
|
||||
this._el.removeEventListener('mouseenter', this._enterEvnt)
|
||||
this._menu.removeEventListener('mouseenter', this._enterEvnt)
|
||||
this._enterEvnt = null
|
||||
}
|
||||
if (this._leaveEvnt) {
|
||||
this._el.removeEventListener('mouseleave', this._leaveEvnt)
|
||||
this._menu.removeEventListener('mouseleave', this._leaveEvnt)
|
||||
this._leaveEvnt = null
|
||||
}
|
||||
}
|
||||
|
||||
static _findParent(el, cls) {
|
||||
if (el.tagName.toUpperCase() === 'BODY') return null
|
||||
el = el.parentNode
|
||||
while (el.tagName.toUpperCase() !== 'BODY' && !el.classList.contains(cls)) {
|
||||
el = el.parentNode
|
||||
}
|
||||
return el.tagName.toUpperCase() !== 'BODY' ? el : null
|
||||
}
|
||||
|
||||
_triggerEvent(event) {
|
||||
if (document.createEvent) {
|
||||
let customEvent
|
||||
|
||||
if (typeof Event === 'function') {
|
||||
customEvent = new Event(event)
|
||||
} else {
|
||||
customEvent = document.createEvent('Event')
|
||||
customEvent.initEvent(event, false, true)
|
||||
}
|
||||
|
||||
this._container.dispatchEvent(customEvent)
|
||||
} else {
|
||||
this._container.fireEvent(`on${event}`, document.createEventObject())
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.MegaDropdown = MegaDropdown
|
||||
export { MegaDropdown }
|
||||
991
modules/Admin/Resources/assets/vendor/js/menu.js
vendored
Normal file
991
modules/Admin/Resources/assets/vendor/js/menu.js
vendored
Normal file
@ -0,0 +1,991 @@
|
||||
const TRANSITION_EVENTS = ['transitionend', 'webkitTransitionEnd', 'oTransitionEnd']
|
||||
// const TRANSITION_PROPERTIES = ['transition', 'MozTransition', 'webkitTransition', 'WebkitTransition', 'OTransition']
|
||||
const DELTA = 5
|
||||
|
||||
class Menu {
|
||||
constructor(el, config = {}, _PS = null) {
|
||||
this._el = el
|
||||
this._horizontal = config.orientation === 'horizontal'
|
||||
this._animate = config.animate !== false
|
||||
this._accordion = config.accordion !== false
|
||||
this._showDropdownOnHover = Boolean(config.showDropdownOnHover)
|
||||
this._closeChildren = Boolean(config.closeChildren)
|
||||
this._rtl = document.documentElement.getAttribute('dir') === 'rtl' || document.body.getAttribute('dir') === 'rtl'
|
||||
|
||||
this._onOpen = config.onOpen || (() => {})
|
||||
this._onOpened = config.onOpened || (() => {})
|
||||
this._onClose = config.onClose || (() => {})
|
||||
this._onClosed = config.onClosed || (() => {})
|
||||
|
||||
this._psScroll = null
|
||||
this._topParent = null
|
||||
this._menuBgClass = null
|
||||
|
||||
el.classList.add('menu')
|
||||
el.classList[this._animate ? 'remove' : 'add']('menu-no-animation')
|
||||
|
||||
if (!this._horizontal) {
|
||||
el.classList.add('menu-vertical')
|
||||
el.classList.remove('menu-horizontal')
|
||||
|
||||
const PerfectScrollbarLib = _PS || window.PerfectScrollbar
|
||||
|
||||
if (PerfectScrollbarLib) {
|
||||
this._scrollbar = new PerfectScrollbarLib(el.querySelector('.menu-inner'), {
|
||||
suppressScrollX: true,
|
||||
wheelPropagation: !Menu._hasClass('layout-menu-fixed layout-menu-fixed-offcanvas')
|
||||
})
|
||||
|
||||
window.Helpers.menuPsScroll = this._scrollbar
|
||||
} else {
|
||||
el.querySelector('.menu-inner').classList.add('overflow-auto')
|
||||
}
|
||||
} else {
|
||||
el.classList.add('menu-horizontal')
|
||||
el.classList.remove('menu-vertical')
|
||||
|
||||
this._inner = el.querySelector('.menu-inner')
|
||||
const container = this._inner.parentNode
|
||||
|
||||
this._prevBtn = el.querySelector('.menu-horizontal-prev')
|
||||
if (!this._prevBtn) {
|
||||
this._prevBtn = document.createElement('a')
|
||||
this._prevBtn.href = '#'
|
||||
this._prevBtn.className = 'menu-horizontal-prev'
|
||||
container.appendChild(this._prevBtn)
|
||||
}
|
||||
|
||||
this._wrapper = el.querySelector('.menu-horizontal-wrapper')
|
||||
if (!this._wrapper) {
|
||||
this._wrapper = document.createElement('div')
|
||||
this._wrapper.className = 'menu-horizontal-wrapper'
|
||||
this._wrapper.appendChild(this._inner)
|
||||
container.appendChild(this._wrapper)
|
||||
}
|
||||
|
||||
this._nextBtn = el.querySelector('.menu-horizontal-next')
|
||||
if (!this._nextBtn) {
|
||||
this._nextBtn = document.createElement('a')
|
||||
this._nextBtn.href = '#'
|
||||
this._nextBtn.className = 'menu-horizontal-next'
|
||||
container.appendChild(this._nextBtn)
|
||||
}
|
||||
|
||||
this._innerPosition = 0
|
||||
this.update()
|
||||
}
|
||||
|
||||
// Add data attribute for bg color class of menu
|
||||
const menuClassList = el.classList
|
||||
|
||||
for (let i = 0; i < menuClassList.length; i++) {
|
||||
if (menuClassList[i].startsWith('bg-')) {
|
||||
this._menuBgClass = menuClassList[i]
|
||||
}
|
||||
}
|
||||
el.setAttribute('data-bg-class', this._menuBgClass)
|
||||
|
||||
// Switch to vertical menu on small screen for horizontal menu layout on page load
|
||||
if (this._horizontal && window.innerWidth < window.Helpers.LAYOUT_BREAKPOINT) {
|
||||
this.switchMenu('vertical')
|
||||
} else {
|
||||
this._bindEvents()
|
||||
}
|
||||
|
||||
// Link menu instance to element
|
||||
el.menuInstance = this
|
||||
}
|
||||
|
||||
_bindEvents() {
|
||||
// Click Event
|
||||
this._evntElClick = e => {
|
||||
// Find top parent element
|
||||
if (e.target.closest('ul') && e.target.closest('ul').classList.contains('menu-inner')) {
|
||||
const menuItem = Menu._findParent(e.target, 'menu-item', false)
|
||||
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
if (menuItem) this._topParent = menuItem.childNodes[0]
|
||||
}
|
||||
|
||||
const toggleLink = e.target.classList.contains('menu-toggle')
|
||||
? e.target
|
||||
: Menu._findParent(e.target, 'menu-toggle', false)
|
||||
|
||||
if (toggleLink) {
|
||||
e.preventDefault()
|
||||
|
||||
if (toggleLink.getAttribute('data-hover') !== 'true') {
|
||||
this.toggle(toggleLink)
|
||||
}
|
||||
}
|
||||
}
|
||||
if ((!this._showDropdownOnHover && this._horizontal) || !this._horizontal || window.Helpers.isMobileDevice)
|
||||
this._el.addEventListener('click', this._evntElClick)
|
||||
|
||||
this._evntWindowResize = () => {
|
||||
this.update()
|
||||
if (this._lastWidth !== window.innerWidth) {
|
||||
this._lastWidth = window.innerWidth
|
||||
this.update()
|
||||
}
|
||||
|
||||
const horizontalMenuTemplate = document.querySelector("[data-template^='horizontal-menu']")
|
||||
if (!this._horizontal && !horizontalMenuTemplate) this.manageScroll()
|
||||
}
|
||||
window.addEventListener('resize', this._evntWindowResize)
|
||||
|
||||
if (this._horizontal) {
|
||||
this._evntPrevBtnClick = e => {
|
||||
e.preventDefault()
|
||||
if (this._prevBtn.classList.contains('disabled')) return
|
||||
this._slide('prev')
|
||||
}
|
||||
this._prevBtn.addEventListener('click', this._evntPrevBtnClick)
|
||||
|
||||
this._evntNextBtnClick = e => {
|
||||
e.preventDefault()
|
||||
if (this._nextBtn.classList.contains('disabled')) return
|
||||
this._slide('next')
|
||||
}
|
||||
this._nextBtn.addEventListener('click', this._evntNextBtnClick)
|
||||
|
||||
this._evntBodyClick = e => {
|
||||
if (!this._inner.contains(e.target) && this._el.querySelectorAll('.menu-inner > .menu-item.open').length)
|
||||
this.closeAll()
|
||||
}
|
||||
document.body.addEventListener('click', this._evntBodyClick)
|
||||
|
||||
if (this._showDropdownOnHover) {
|
||||
/** ***********************************************
|
||||
* Horizontal Menu Mouse Over Event
|
||||
* ? e.target !== e.currentTarget condition to disable mouseover event on whole menu navbar
|
||||
* ? !e.target.parentNode.classList.contains('open') to disable mouseover events on icon, text and dropdown arrow
|
||||
*/
|
||||
this._evntElMouseOver = e => {
|
||||
if (e.target !== e.currentTarget && !e.target.parentNode.classList.contains('open')) {
|
||||
const toggleLink = e.target.classList.contains('menu-toggle') ? e.target : null
|
||||
|
||||
if (toggleLink) {
|
||||
e.preventDefault()
|
||||
|
||||
if (toggleLink.getAttribute('data-hover') !== 'true') {
|
||||
this.toggle(toggleLink)
|
||||
}
|
||||
}
|
||||
}
|
||||
e.stopPropagation()
|
||||
}
|
||||
if (this._horizontal && window.screen.width > window.Helpers.LAYOUT_BREAKPOINT) {
|
||||
this._el.addEventListener('mouseover', this._evntElMouseOver)
|
||||
}
|
||||
|
||||
/** ***********************************************
|
||||
* Horizontal Menu Mouse Out Event
|
||||
* ? e.target !== e.currentTarget condition to disable mouseout event on whole menu navbar
|
||||
* ? mouseOutEl.parentNode.classList.contains('open') to check if the mouseout element has open class or not
|
||||
* ? !mouseOutEl.classList.contains('menu-toggle') to check if mouseout was from single menu item and not from the one which has submenu
|
||||
* ? !mouseOverEl.parentNode.classList.contains('menu-link') to disable mouseout event for icon, text and dropdown arrow
|
||||
*/
|
||||
this._evntElMouseOut = e => {
|
||||
const mainEl = e.currentTarget
|
||||
const mouseOutEl = e.target
|
||||
const mouseOverEl = e.toElement || e.relatedTarget
|
||||
|
||||
// Find absolute parent of any menu item from which mouseout event triggered
|
||||
if (mouseOutEl.closest('ul') && mouseOutEl.closest('ul').classList.contains('menu-inner')) {
|
||||
this._topParent = mouseOutEl
|
||||
}
|
||||
|
||||
if (
|
||||
mouseOutEl !== mainEl &&
|
||||
(mouseOutEl.parentNode.classList.contains('open') || !mouseOutEl.classList.contains('menu-toggle')) &&
|
||||
mouseOverEl &&
|
||||
mouseOverEl.parentNode &&
|
||||
!mouseOverEl.parentNode.classList.contains('menu-link')
|
||||
) {
|
||||
// When mouse goes totally out of menu items, check mouse over element to confirm it's not the child of menu, once confirmed close the menu
|
||||
if (this._topParent && !Menu.childOf(mouseOverEl, this._topParent.parentNode)) {
|
||||
const toggleLink = this._topParent.classList.contains('menu-toggle') ? this._topParent : null
|
||||
|
||||
if (toggleLink) {
|
||||
e.preventDefault()
|
||||
|
||||
if (toggleLink.getAttribute('data-hover') !== 'true') {
|
||||
this.toggle(toggleLink)
|
||||
this._topParent = null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// When mouse enter the sub menu, check if it's child of the initially mouse overed menu item(Actual Parent),
|
||||
// if it's the parent do not close the sub menu else close the sub menu
|
||||
if (Menu.childOf(mouseOverEl, mouseOutEl.parentNode)) {
|
||||
return
|
||||
}
|
||||
const toggleLink = mouseOutEl.classList.contains('menu-toggle') ? mouseOutEl : null
|
||||
|
||||
if (toggleLink) {
|
||||
e.preventDefault()
|
||||
|
||||
if (toggleLink.getAttribute('data-hover') !== 'true') {
|
||||
this.toggle(toggleLink)
|
||||
}
|
||||
}
|
||||
}
|
||||
e.stopPropagation()
|
||||
}
|
||||
if (this._horizontal && window.screen.width > window.Helpers.LAYOUT_BREAKPOINT) {
|
||||
this._el.addEventListener('mouseout', this._evntElMouseOut)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
static childOf(/* child node */ c, /* parent node */ p) {
|
||||
// returns boolean
|
||||
if (c.parentNode) {
|
||||
while ((c = c.parentNode) && c !== p);
|
||||
return !!c
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
_unbindEvents() {
|
||||
if (this._evntElClick) {
|
||||
this._el.removeEventListener('click', this._evntElClick)
|
||||
this._evntElClick = null
|
||||
}
|
||||
|
||||
if (this._evntElMouseOver) {
|
||||
this._el.removeEventListener('mouseover', this._evntElMouseOver)
|
||||
this._evntElMouseOver = null
|
||||
}
|
||||
|
||||
if (this._evntElMouseOut) {
|
||||
this._el.removeEventListener('mouseout', this._evntElMouseOut)
|
||||
this._evntElMouseOut = null
|
||||
}
|
||||
|
||||
if (this._evntWindowResize) {
|
||||
window.removeEventListener('resize', this._evntWindowResize)
|
||||
this._evntWindowResize = null
|
||||
}
|
||||
|
||||
if (this._evntBodyClick) {
|
||||
document.body.removeEventListener('click', this._evntBodyClick)
|
||||
this._evntBodyClick = null
|
||||
}
|
||||
|
||||
if (this._evntInnerMousemove) {
|
||||
this._inner.removeEventListener('mousemove', this._evntInnerMousemove)
|
||||
this._evntInnerMousemove = null
|
||||
}
|
||||
|
||||
if (this._evntInnerMouseleave) {
|
||||
this._inner.removeEventListener('mouseleave', this._evntInnerMouseleave)
|
||||
this._evntInnerMouseleave = null
|
||||
}
|
||||
}
|
||||
|
||||
static _isRoot(item) {
|
||||
return !Menu._findParent(item, 'menu-item', false)
|
||||
}
|
||||
|
||||
static _findParent(el, cls, throwError = true) {
|
||||
if (el.tagName.toUpperCase() === 'BODY') return null
|
||||
el = el.parentNode
|
||||
while (el.tagName.toUpperCase() !== 'BODY' && !el.classList.contains(cls)) {
|
||||
el = el.parentNode
|
||||
}
|
||||
|
||||
el = el.tagName.toUpperCase() !== 'BODY' ? el : null
|
||||
|
||||
if (!el && throwError) throw new Error(`Cannot find \`.${cls}\` parent element`)
|
||||
|
||||
return el
|
||||
}
|
||||
|
||||
static _findChild(el, cls) {
|
||||
const items = el.childNodes
|
||||
const found = []
|
||||
|
||||
for (let i = 0, l = items.length; i < l; i++) {
|
||||
if (items[i].classList) {
|
||||
let passed = 0
|
||||
|
||||
for (let j = 0; j < cls.length; j++) {
|
||||
if (items[i].classList.contains(cls[j])) passed += 1
|
||||
}
|
||||
|
||||
if (cls.length === passed) found.push(items[i])
|
||||
}
|
||||
}
|
||||
|
||||
return found
|
||||
}
|
||||
|
||||
static _findMenu(item) {
|
||||
let curEl = item.childNodes[0]
|
||||
let menu = null
|
||||
|
||||
while (curEl && !menu) {
|
||||
if (curEl.classList && curEl.classList.contains('menu-sub')) menu = curEl
|
||||
curEl = curEl.nextSibling
|
||||
}
|
||||
|
||||
if (!menu) throw new Error('Cannot find `.menu-sub` element for the current `.menu-toggle`')
|
||||
|
||||
return menu
|
||||
}
|
||||
|
||||
// Has class
|
||||
static _hasClass(cls, el = window.Helpers.ROOT_EL) {
|
||||
let result = false
|
||||
|
||||
cls.split(' ').forEach(c => {
|
||||
if (el.classList.contains(c)) result = true
|
||||
})
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
open(el, closeChildren = this._closeChildren) {
|
||||
const item = this._findUnopenedParent(Menu._getItem(el, true), closeChildren)
|
||||
|
||||
if (!item) return
|
||||
|
||||
const toggleLink = Menu._getLink(item, true)
|
||||
|
||||
Menu._promisify(this._onOpen, this, item, toggleLink, Menu._findMenu(item))
|
||||
.then(() => {
|
||||
if (!this._horizontal || !Menu._isRoot(item)) {
|
||||
if (this._animate && !this._horizontal) {
|
||||
window.requestAnimationFrame(() => this._toggleAnimation(true, item, false))
|
||||
if (this._accordion) this._closeOther(item, closeChildren)
|
||||
} else if (this._animate) {
|
||||
this._toggleDropdown(true, item, closeChildren)
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
this._onOpened && this._onOpened(this, item, toggleLink, Menu._findMenu(item))
|
||||
} else {
|
||||
item.classList.add('open')
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
this._onOpened && this._onOpened(this, item, toggleLink, Menu._findMenu(item))
|
||||
if (this._accordion) this._closeOther(item, closeChildren)
|
||||
}
|
||||
} else {
|
||||
this._toggleDropdown(true, item, closeChildren)
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
this._onOpened && this._onOpened(this, item, toggleLink, Menu._findMenu(item))
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
close(el, closeChildren = this._closeChildren, _autoClose = false) {
|
||||
const item = Menu._getItem(el, true)
|
||||
const toggleLink = Menu._getLink(el, true)
|
||||
|
||||
if (!item.classList.contains('open') || item.classList.contains('disabled')) return
|
||||
|
||||
Menu._promisify(this._onClose, this, item, toggleLink, Menu._findMenu(item), _autoClose)
|
||||
.then(() => {
|
||||
if (!this._horizontal || !Menu._isRoot(item)) {
|
||||
if (this._animate && !this._horizontal) {
|
||||
window.requestAnimationFrame(() => this._toggleAnimation(false, item, closeChildren))
|
||||
} else {
|
||||
item.classList.remove('open')
|
||||
|
||||
if (closeChildren) {
|
||||
const opened = item.querySelectorAll('.menu-item.open')
|
||||
for (let i = 0, l = opened.length; i < l; i++) opened[i].classList.remove('open')
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
this._onClosed && this._onClosed(this, item, toggleLink, Menu._findMenu(item))
|
||||
}
|
||||
} else {
|
||||
this._toggleDropdown(false, item, closeChildren)
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
this._onClosed && this._onClosed(this, item, toggleLink, Menu._findMenu(item))
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
_closeOther(item, closeChildren) {
|
||||
const opened = Menu._findChild(item.parentNode, ['menu-item', 'open'])
|
||||
|
||||
for (let i = 0, l = opened.length; i < l; i++) {
|
||||
if (opened[i] !== item) this.close(opened[i], closeChildren)
|
||||
}
|
||||
}
|
||||
|
||||
toggle(el, closeChildren = this._closeChildren) {
|
||||
const item = Menu._getItem(el, true)
|
||||
// const toggleLink = Menu._getLink(el, true)
|
||||
|
||||
if (item.classList.contains('open')) this.close(item, closeChildren)
|
||||
else this.open(item, closeChildren)
|
||||
}
|
||||
|
||||
_toggleDropdown(show, item, closeChildren) {
|
||||
const menu = Menu._findMenu(item)
|
||||
const actualItem = item
|
||||
let subMenuItem = false
|
||||
|
||||
if (show) {
|
||||
if (Menu._findParent(item, 'menu-sub', false)) {
|
||||
subMenuItem = true
|
||||
item = this._topParent ? this._topParent.parentNode : item
|
||||
}
|
||||
|
||||
const wrapperWidth = Math.round(this._wrapper.getBoundingClientRect().width)
|
||||
const position = this._innerPosition
|
||||
const itemOffset = this._getItemOffset(item)
|
||||
const itemWidth = Math.round(item.getBoundingClientRect().width)
|
||||
|
||||
if (itemOffset - DELTA <= -1 * position) {
|
||||
this._innerPosition = -1 * itemOffset
|
||||
} else if (itemOffset + position + itemWidth + DELTA >= wrapperWidth) {
|
||||
if (itemWidth > wrapperWidth) {
|
||||
this._innerPosition = -1 * itemOffset
|
||||
} else {
|
||||
this._innerPosition = -1 * (itemOffset + itemWidth - wrapperWidth)
|
||||
}
|
||||
}
|
||||
|
||||
actualItem.classList.add('open')
|
||||
|
||||
const menuWidth = Math.round(menu.getBoundingClientRect().width)
|
||||
|
||||
if (subMenuItem) {
|
||||
if (
|
||||
itemOffset + this._innerPosition + menuWidth * 2 > wrapperWidth &&
|
||||
menuWidth < wrapperWidth &&
|
||||
menuWidth >= itemWidth
|
||||
) {
|
||||
menu.style.left = [this._rtl ? '100%' : '-100%']
|
||||
}
|
||||
} else if (
|
||||
itemOffset + this._innerPosition + menuWidth > wrapperWidth &&
|
||||
menuWidth < wrapperWidth &&
|
||||
menuWidth > itemWidth
|
||||
) {
|
||||
menu.style[this._rtl ? 'marginRight' : 'marginLeft'] = `-${menuWidth - itemWidth}px`
|
||||
}
|
||||
|
||||
this._closeOther(actualItem, closeChildren)
|
||||
this._updateSlider()
|
||||
} else {
|
||||
const toggle = Menu._findChild(item, ['menu-toggle'])
|
||||
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
toggle.length && toggle[0].removeAttribute('data-hover', 'true')
|
||||
item.classList.remove('open')
|
||||
menu.style[this._rtl ? 'marginRight' : 'marginLeft'] = null
|
||||
|
||||
if (closeChildren) {
|
||||
const opened = menu.querySelectorAll('.menu-item.open')
|
||||
|
||||
for (let i = 0, l = opened.length; i < l; i++) opened[i].classList.remove('open')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_slide(direction) {
|
||||
const wrapperWidth = Math.round(this._wrapper.getBoundingClientRect().width)
|
||||
const innerWidth = this._innerWidth
|
||||
let newPosition
|
||||
|
||||
if (direction === 'next') {
|
||||
newPosition = this._getSlideNextPos()
|
||||
|
||||
if (innerWidth + newPosition < wrapperWidth) {
|
||||
newPosition = wrapperWidth - innerWidth
|
||||
}
|
||||
} else {
|
||||
newPosition = this._getSlidePrevPos()
|
||||
|
||||
if (newPosition > 0) newPosition = 0
|
||||
}
|
||||
|
||||
this._innerPosition = newPosition
|
||||
this.update()
|
||||
}
|
||||
|
||||
_getSlideNextPos() {
|
||||
const wrapperWidth = Math.round(this._wrapper.getBoundingClientRect().width)
|
||||
const position = this._innerPosition
|
||||
let curItem = this._inner.childNodes[0]
|
||||
let left = 0
|
||||
|
||||
while (curItem) {
|
||||
if (curItem.tagName) {
|
||||
const curItemWidth = Math.round(curItem.getBoundingClientRect().width)
|
||||
|
||||
if (left + position - DELTA <= wrapperWidth && left + position + curItemWidth + DELTA >= wrapperWidth) {
|
||||
if (curItemWidth > wrapperWidth && left === -1 * position) left += curItemWidth
|
||||
break
|
||||
}
|
||||
|
||||
left += curItemWidth
|
||||
}
|
||||
|
||||
curItem = curItem.nextSibling
|
||||
}
|
||||
|
||||
return -1 * left
|
||||
}
|
||||
|
||||
_getSlidePrevPos() {
|
||||
const wrapperWidth = Math.round(this._wrapper.getBoundingClientRect().width)
|
||||
const position = this._innerPosition
|
||||
let curItem = this._inner.childNodes[0]
|
||||
let left = 0
|
||||
|
||||
while (curItem) {
|
||||
if (curItem.tagName) {
|
||||
const curItemWidth = Math.round(curItem.getBoundingClientRect().width)
|
||||
|
||||
if (left - DELTA <= -1 * position && left + curItemWidth + DELTA >= -1 * position) {
|
||||
if (curItemWidth <= wrapperWidth) left = left + curItemWidth - wrapperWidth
|
||||
break
|
||||
}
|
||||
|
||||
left += curItemWidth
|
||||
}
|
||||
|
||||
curItem = curItem.nextSibling
|
||||
}
|
||||
|
||||
return -1 * left
|
||||
}
|
||||
|
||||
static _getItem(el, toggle) {
|
||||
let item = null
|
||||
const selector = toggle ? 'menu-toggle' : 'menu-link'
|
||||
|
||||
if (el.classList.contains('menu-item')) {
|
||||
if (Menu._findChild(el, [selector]).length) item = el
|
||||
} else if (el.classList.contains(selector)) {
|
||||
item = el.parentNode.classList.contains('menu-item') ? el.parentNode : null
|
||||
}
|
||||
|
||||
if (!item) {
|
||||
throw new Error(`${toggle ? 'Toggable ' : ''}\`.menu-item\` element not found.`)
|
||||
}
|
||||
|
||||
return item
|
||||
}
|
||||
|
||||
static _getLink(el, toggle) {
|
||||
let found = []
|
||||
const selector = toggle ? 'menu-toggle' : 'menu-link'
|
||||
|
||||
if (el.classList.contains(selector)) found = [el]
|
||||
else if (el.classList.contains('menu-item')) found = Menu._findChild(el, [selector])
|
||||
|
||||
if (!found.length) throw new Error(`\`${selector}\` element not found.`)
|
||||
|
||||
return found[0]
|
||||
}
|
||||
|
||||
_findUnopenedParent(item, closeChildren) {
|
||||
let tree = []
|
||||
let parentItem = null
|
||||
|
||||
while (item) {
|
||||
if (item.classList.contains('disabled')) {
|
||||
parentItem = null
|
||||
tree = []
|
||||
} else {
|
||||
if (!item.classList.contains('open')) parentItem = item
|
||||
tree.push(item)
|
||||
}
|
||||
|
||||
item = Menu._findParent(item, 'menu-item', false)
|
||||
}
|
||||
|
||||
if (!parentItem) return null
|
||||
if (tree.length === 1) return parentItem
|
||||
|
||||
tree = tree.slice(0, tree.indexOf(parentItem))
|
||||
|
||||
for (let i = 0, l = tree.length; i < l; i++) {
|
||||
tree[i].classList.add('open')
|
||||
|
||||
if (this._accordion) {
|
||||
const openedItems = Menu._findChild(tree[i].parentNode, ['menu-item', 'open'])
|
||||
|
||||
for (let j = 0, k = openedItems.length; j < k; j++) {
|
||||
if (openedItems[j] !== tree[i]) {
|
||||
openedItems[j].classList.remove('open')
|
||||
|
||||
if (closeChildren) {
|
||||
const openedChildren = openedItems[j].querySelectorAll('.menu-item.open')
|
||||
for (let x = 0, z = openedChildren.length; x < z; x++) {
|
||||
openedChildren[x].classList.remove('open')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return parentItem
|
||||
}
|
||||
|
||||
_toggleAnimation(open, item, closeChildren) {
|
||||
const toggleLink = Menu._getLink(item, true)
|
||||
const menu = Menu._findMenu(item)
|
||||
|
||||
Menu._unbindAnimationEndEvent(item)
|
||||
|
||||
const linkHeight = Math.round(toggleLink.getBoundingClientRect().height)
|
||||
|
||||
item.style.overflow = 'hidden'
|
||||
|
||||
const clearItemStyle = () => {
|
||||
item.classList.remove('menu-item-animating')
|
||||
item.classList.remove('menu-item-closing')
|
||||
item.style.overflow = null
|
||||
item.style.height = null
|
||||
|
||||
if (!this._horizontal) this.update()
|
||||
}
|
||||
|
||||
if (open) {
|
||||
item.style.height = `${linkHeight}px`
|
||||
item.classList.add('menu-item-animating')
|
||||
item.classList.add('open')
|
||||
|
||||
Menu._bindAnimationEndEvent(item, () => {
|
||||
clearItemStyle()
|
||||
this._onOpened(this, item, toggleLink, menu)
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
item.style.height = `${linkHeight + Math.round(menu.getBoundingClientRect().height)}px`
|
||||
}, 50)
|
||||
} else {
|
||||
item.style.height = `${linkHeight + Math.round(menu.getBoundingClientRect().height)}px`
|
||||
item.classList.add('menu-item-animating')
|
||||
item.classList.add('menu-item-closing')
|
||||
|
||||
Menu._bindAnimationEndEvent(item, () => {
|
||||
item.classList.remove('open')
|
||||
clearItemStyle()
|
||||
|
||||
if (closeChildren) {
|
||||
const opened = item.querySelectorAll('.menu-item.open')
|
||||
for (let i = 0, l = opened.length; i < l; i++) opened[i].classList.remove('open')
|
||||
}
|
||||
|
||||
this._onClosed(this, item, toggleLink, menu)
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
item.style.height = `${linkHeight}px`
|
||||
}, 50)
|
||||
}
|
||||
}
|
||||
|
||||
static _bindAnimationEndEvent(el, handler) {
|
||||
const cb = e => {
|
||||
if (e.target !== el) return
|
||||
Menu._unbindAnimationEndEvent(el)
|
||||
handler(e)
|
||||
}
|
||||
|
||||
let duration = window.getComputedStyle(el).transitionDuration
|
||||
duration = parseFloat(duration) * (duration.indexOf('ms') !== -1 ? 1 : 1000)
|
||||
|
||||
el._menuAnimationEndEventCb = cb
|
||||
TRANSITION_EVENTS.forEach(ev => el.addEventListener(ev, el._menuAnimationEndEventCb, false))
|
||||
|
||||
el._menuAnimationEndEventTimeout = setTimeout(() => {
|
||||
cb({ target: el })
|
||||
}, duration + 50)
|
||||
}
|
||||
|
||||
_getItemOffset(item) {
|
||||
let curItem = this._inner.childNodes[0]
|
||||
let left = 0
|
||||
|
||||
while (curItem !== item) {
|
||||
if (curItem.tagName) {
|
||||
left += Math.round(curItem.getBoundingClientRect().width)
|
||||
}
|
||||
|
||||
curItem = curItem.nextSibling
|
||||
}
|
||||
|
||||
return left
|
||||
}
|
||||
|
||||
_updateSlider(wrapperWidth = null, innerWidth = null, position = null) {
|
||||
const _wrapperWidth = wrapperWidth !== null ? wrapperWidth : Math.round(this._wrapper.getBoundingClientRect().width)
|
||||
const _innerWidth = innerWidth !== null ? innerWidth : this._innerWidth
|
||||
const _position = position !== null ? position : this._innerPosition
|
||||
|
||||
if (_innerWidth < _wrapperWidth || window.innerWidth < window.Helpers.LAYOUT_BREAKPOINT) {
|
||||
this._prevBtn.classList.add('d-none')
|
||||
this._nextBtn.classList.add('d-none')
|
||||
} else {
|
||||
this._prevBtn.classList.remove('d-none')
|
||||
this._nextBtn.classList.remove('d-none')
|
||||
}
|
||||
if (_innerWidth > _wrapperWidth && window.innerWidth > window.Helpers.LAYOUT_BREAKPOINT) {
|
||||
if (_position === 0) this._prevBtn.classList.add('disabled')
|
||||
else this._prevBtn.classList.remove('disabled')
|
||||
|
||||
if (_innerWidth + _position <= _wrapperWidth) this._nextBtn.classList.add('disabled')
|
||||
else this._nextBtn.classList.remove('disabled')
|
||||
}
|
||||
}
|
||||
|
||||
static _promisify(fn, ...args) {
|
||||
const result = fn(...args)
|
||||
if (result instanceof Promise) {
|
||||
return result
|
||||
}
|
||||
if (result === false) {
|
||||
return Promise.reject()
|
||||
}
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
get _innerWidth() {
|
||||
const items = this._inner.childNodes
|
||||
let width = 0
|
||||
|
||||
for (let i = 0, l = items.length; i < l; i++) {
|
||||
if (items[i].tagName) {
|
||||
width += Math.round(items[i].getBoundingClientRect().width)
|
||||
}
|
||||
}
|
||||
|
||||
return width
|
||||
}
|
||||
|
||||
get _innerPosition() {
|
||||
return parseInt(this._inner.style[this._rtl ? 'marginRight' : 'marginLeft'] || '0px', 10)
|
||||
}
|
||||
|
||||
set _innerPosition(value) {
|
||||
this._inner.style[this._rtl ? 'marginRight' : 'marginLeft'] = `${value}px`
|
||||
return value
|
||||
}
|
||||
|
||||
static _unbindAnimationEndEvent(el) {
|
||||
const cb = el._menuAnimationEndEventCb
|
||||
|
||||
if (el._menuAnimationEndEventTimeout) {
|
||||
clearTimeout(el._menuAnimationEndEventTimeout)
|
||||
el._menuAnimationEndEventTimeout = null
|
||||
}
|
||||
|
||||
if (!cb) return
|
||||
|
||||
TRANSITION_EVENTS.forEach(ev => el.removeEventListener(ev, cb, false))
|
||||
el._menuAnimationEndEventCb = null
|
||||
}
|
||||
|
||||
closeAll(closeChildren = this._closeChildren) {
|
||||
const opened = this._el.querySelectorAll('.menu-inner > .menu-item.open')
|
||||
|
||||
for (let i = 0, l = opened.length; i < l; i++) this.close(opened[i], closeChildren)
|
||||
}
|
||||
|
||||
static setDisabled(el, disabled) {
|
||||
Menu._getItem(el, false).classList[disabled ? 'add' : 'remove']('disabled')
|
||||
}
|
||||
|
||||
static isActive(el) {
|
||||
return Menu._getItem(el, false).classList.contains('active')
|
||||
}
|
||||
|
||||
static isOpened(el) {
|
||||
return Menu._getItem(el, false).classList.contains('open')
|
||||
}
|
||||
|
||||
static isDisabled(el) {
|
||||
return Menu._getItem(el, false).classList.contains('disabled')
|
||||
}
|
||||
|
||||
update() {
|
||||
if (!this._horizontal) {
|
||||
if (this._scrollbar) {
|
||||
this._scrollbar.update()
|
||||
}
|
||||
} else {
|
||||
this.closeAll()
|
||||
|
||||
const wrapperWidth = Math.round(this._wrapper.getBoundingClientRect().width)
|
||||
const innerWidth = this._innerWidth
|
||||
let position = this._innerPosition
|
||||
|
||||
if (wrapperWidth - position > innerWidth) {
|
||||
position = wrapperWidth - innerWidth
|
||||
if (position > 0) position = 0
|
||||
this._innerPosition = position
|
||||
}
|
||||
|
||||
this._updateSlider(wrapperWidth, innerWidth, position)
|
||||
}
|
||||
}
|
||||
|
||||
manageScroll() {
|
||||
const { PerfectScrollbar } = window
|
||||
const menuInner = document.querySelector('.menu-inner')
|
||||
|
||||
if (window.innerWidth < window.Helpers.LAYOUT_BREAKPOINT) {
|
||||
if (this._scrollbar !== null) {
|
||||
// window.Helpers.menuPsScroll.destroy()
|
||||
this._scrollbar.destroy()
|
||||
this._scrollbar = null
|
||||
}
|
||||
menuInner.classList.add('overflow-auto')
|
||||
} else {
|
||||
if (this._scrollbar === null) {
|
||||
const menuScroll = new PerfectScrollbar(document.querySelector('.menu-inner'), {
|
||||
suppressScrollX: true,
|
||||
wheelPropagation: false
|
||||
})
|
||||
// window.Helpers.menuPsScroll = menuScroll
|
||||
this._scrollbar = menuScroll
|
||||
}
|
||||
menuInner.classList.remove('overflow-auto')
|
||||
}
|
||||
}
|
||||
|
||||
switchMenu(menu) {
|
||||
// Unbind Events
|
||||
this._unbindEvents()
|
||||
|
||||
// const html = document.documentElement
|
||||
const navbar = document.querySelector('nav.layout-navbar')
|
||||
const navbarCollapse = document.querySelector('#navbar-collapse')
|
||||
/* const fullNavbar = document.querySelector('.layout-navbar-full')
|
||||
const contentNavbar = document.querySelector('.layout-content-navbar')
|
||||
const contentWrapper = document.querySelector('.content-wrapper') */
|
||||
const asideMenuWrapper = document.querySelector('#layout-menu div')
|
||||
const asideMenu = document.querySelector('#layout-menu')
|
||||
const horzMenuClasses = ['layout-menu-horizontal', 'menu', 'menu-horizontal', 'container-fluid', 'flex-grow-0']
|
||||
const vertMenuClasses = ['layout-menu', 'menu', 'menu-vertical']
|
||||
const horzMenuWrapper = document.querySelector('.menu-horizontal-wrapper')
|
||||
const menuInner = document.querySelector('.menu-inner')
|
||||
const brand = document.querySelector('.app-brand')
|
||||
const menuToggler = document.querySelector('.layout-menu-toggle')
|
||||
const activeMenuItems = document.querySelectorAll('.menu-inner .active')
|
||||
/* const layoutPage = document.querySelector('.layout-page')
|
||||
const layoutContainer = document.querySelector('.layout-container')
|
||||
const content = document.querySelector('.container-fluid') */
|
||||
|
||||
// const { PerfectScrollbar } = window
|
||||
|
||||
if (menu === 'vertical') {
|
||||
this._horizontal = false
|
||||
asideMenuWrapper.insertBefore(brand, horzMenuWrapper)
|
||||
asideMenuWrapper.insertBefore(menuInner, horzMenuWrapper)
|
||||
asideMenuWrapper.classList.add('flex-column', 'p-0')
|
||||
asideMenu.classList.remove(...asideMenu.classList)
|
||||
asideMenu.classList.add(...vertMenuClasses, this._menuBgClass)
|
||||
brand.classList.remove('d-none', 'd-lg-flex')
|
||||
menuToggler.classList.remove('d-none')
|
||||
// if (PerfectScrollbar !== undefined) {
|
||||
// this._psScroll = new PerfectScrollbar(document.querySelector('.menu-inner'), {
|
||||
// suppressScrollX: true,
|
||||
// wheelPropagation: !Menu._hasClass('layout-menu-fixed layout-menu-fixed-offcanvas')
|
||||
// })
|
||||
// }
|
||||
|
||||
menuInner.classList.add('overflow-auto')
|
||||
|
||||
// Add open class to active items
|
||||
for (let i = 0; i < activeMenuItems.length - 1; ++i) {
|
||||
activeMenuItems[i].classList.add('open')
|
||||
}
|
||||
} else {
|
||||
this._horizontal = true
|
||||
navbar.children[0].insertBefore(brand, navbarCollapse)
|
||||
brand.classList.add('d-none', 'd-lg-flex')
|
||||
horzMenuWrapper.appendChild(menuInner)
|
||||
asideMenuWrapper.classList.remove('flex-column', 'p-0')
|
||||
asideMenu.classList.remove(...asideMenu.classList)
|
||||
asideMenu.classList.add(...horzMenuClasses, this._menuBgClass)
|
||||
menuToggler.classList.add('d-none')
|
||||
menuInner.classList.remove('overflow-auto')
|
||||
|
||||
// if (PerfectScrollbar !== undefined && this._psScroll !== null) {
|
||||
// this._psScroll.destroy()
|
||||
// this._psScroll = null
|
||||
// }
|
||||
|
||||
// Remove open class from active items
|
||||
for (let i = 0; i < activeMenuItems.length; ++i) {
|
||||
activeMenuItems[i].classList.remove('open')
|
||||
}
|
||||
}
|
||||
|
||||
this._bindEvents()
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (!this._el) return
|
||||
|
||||
this._unbindEvents()
|
||||
|
||||
const items = this._el.querySelectorAll('.menu-item')
|
||||
for (let i = 0, l = items.length; i < l; i++) {
|
||||
Menu._unbindAnimationEndEvent(items[i])
|
||||
items[i].classList.remove('menu-item-animating')
|
||||
items[i].classList.remove('open')
|
||||
items[i].style.overflow = null
|
||||
items[i].style.height = null
|
||||
}
|
||||
|
||||
const menus = this._el.querySelectorAll('.menu-menu')
|
||||
for (let i2 = 0, l2 = menus.length; i2 < l2; i2++) {
|
||||
menus[i2].style.marginRight = null
|
||||
menus[i2].style.marginLeft = null
|
||||
}
|
||||
|
||||
this._el.classList.remove('menu-no-animation')
|
||||
|
||||
if (this._wrapper) {
|
||||
this._prevBtn.parentNode.removeChild(this._prevBtn)
|
||||
this._nextBtn.parentNode.removeChild(this._nextBtn)
|
||||
this._wrapper.parentNode.insertBefore(this._inner, this._wrapper)
|
||||
this._wrapper.parentNode.removeChild(this._wrapper)
|
||||
this._inner.style.marginLeft = null
|
||||
this._inner.style.marginRight = null
|
||||
}
|
||||
|
||||
this._el.menuInstance = null
|
||||
delete this._el.menuInstance
|
||||
|
||||
this._el = null
|
||||
this._horizontal = null
|
||||
this._animate = null
|
||||
this._accordion = null
|
||||
this._showDropdownOnHover = null
|
||||
this._closeChildren = null
|
||||
this._rtl = null
|
||||
this._onOpen = null
|
||||
this._onOpened = null
|
||||
this._onClose = null
|
||||
this._onClosed = null
|
||||
if (this._scrollbar) {
|
||||
this._scrollbar.destroy()
|
||||
this._scrollbar = null
|
||||
}
|
||||
this._inner = null
|
||||
this._prevBtn = null
|
||||
this._wrapper = null
|
||||
this._nextBtn = null
|
||||
}
|
||||
}
|
||||
|
||||
window.Menu = Menu
|
||||
export { Menu }
|
||||
1399
modules/Admin/Resources/assets/vendor/js/template-customizer.js
vendored
Normal file
1399
modules/Admin/Resources/assets/vendor/js/template-customizer.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user