@ -1,5 +1,5 @@
/ * !
/ * !
* Native JavaScript for Bootstrap v4 . 0. 4 ( https : //thednp.github.io/bootstrap.native/)
* Native JavaScript for Bootstrap v4 . 0. 6 ( https : //thednp.github.io/bootstrap.native/)
* Copyright 2015 - 2021 © dnp _theme
* Copyright 2015 - 2021 © dnp _theme
* Licensed under MIT ( https : //github.com/thednp/bootstrap.native/blob/master/LICENSE)
* Licensed under MIT ( https : //github.com/thednp/bootstrap.native/blob/master/LICENSE)
* /
* /
@ -1467,19 +1467,26 @@
}
}
}
}
const modalOpenClass = 'modal-open' ;
const modalBackdropClass = 'modal-backdrop' ;
const modalBackdropClass = 'modal-backdrop' ;
const offcanvasBackdropClass = 'offcanvas-backdrop' ;
const modalActiveSelector = ` .modal. ${ showClass } ` ;
const modalActiveSelector = ` .modal. ${ showClass } ` ;
const offcanvasActiveSelector = ` .offcanvas. ${ showClass } ` ;
const offcanvasActiveSelector = ` .offcanvas. ${ showClass } ` ;
const overlay = document . createElement ( 'div' ) ;
const overlay = document . createElement ( 'div' ) ;
overlay . setAttribute ( 'class' , ` ${ modalBackdropClass } ` ) ;
function getCurrentOpen ( ) {
function getCurrentOpen ( ) {
return queryElement ( ` ${ modalActiveSelector } , ${ offcanvasActiveSelector } ` ) ;
return queryElement ( ` ${ modalActiveSelector } , ${ offcanvasActiveSelector } ` ) ;
}
}
function appendOverlay ( hasFade ) {
function toggleOverlayType ( isModal ) {
const targetClass = isModal ? modalBackdropClass : offcanvasBackdropClass ;
[ modalBackdropClass , offcanvasBackdropClass ] . forEach ( ( c ) => {
removeClass ( overlay , c ) ;
} ) ;
addClass ( overlay , targetClass ) ;
}
function appendOverlay ( hasFade , isModal ) {
toggleOverlayType ( isModal ) ;
document . body . appendChild ( overlay ) ;
document . body . appendChild ( overlay ) ;
if ( hasFade ) addClass ( overlay , fadeClass ) ;
if ( hasFade ) addClass ( overlay , fadeClass ) ;
}
}
@ -1499,7 +1506,6 @@
if ( ! currentOpen ) {
if ( ! currentOpen ) {
removeClass ( overlay , fadeClass ) ;
removeClass ( overlay , fadeClass ) ;
removeClass ( bd , modalOpenClass ) ;
bd . removeChild ( overlay ) ;
bd . removeChild ( overlay ) ;
resetScrollbar ( ) ;
resetScrollbar ( ) ;
}
}
@ -1518,7 +1524,6 @@
const modalString = 'modal' ;
const modalString = 'modal' ;
const modalComponent = 'Modal' ;
const modalComponent = 'Modal' ;
const modalSelector = ` . ${ modalString } ` ;
const modalSelector = ` . ${ modalString } ` ;
// const modalActiveSelector = `.${modalString}.${showClass}`;
const modalToggleSelector = ` [ ${ dataBsToggle } =" ${ modalString } "] ` ;
const modalToggleSelector = ` [ ${ dataBsToggle } =" ${ modalString } "] ` ;
const modalDismissSelector = ` [ ${ dataBsDismiss } =" ${ modalString } "] ` ;
const modalDismissSelector = ` [ ${ dataBsDismiss } =" ${ modalString } "] ` ;
const modalStaticClass = ` ${ modalString } -static ` ;
const modalStaticClass = ` ${ modalString } -static ` ;
@ -1567,8 +1572,11 @@
}
}
function afterModalHide ( self ) {
function afterModalHide ( self ) {
const { triggers } = self ;
const { triggers , options } = self ;
removeOverlay ( ) ;
if ( ! getCurrentOpen ( ) ) {
if ( options . backdrop ) removeOverlay ( ) ;
resetScrollbar ( ) ;
}
self . element . style . paddingRight = '' ;
self . element . style . paddingRight = '' ;
self . isAnimating = false ;
self . isAnimating = false ;
@ -1594,9 +1602,8 @@
element . style . display = 'block' ;
element . style . display = 'block' ;
setModalScrollbar ( self ) ;
setModalScrollbar ( self ) ;
if ( ! queryElement( modalActiveSelector ) ) {
if ( ! getCurrentOpen( ) ) {
document . body . style . overflow = 'hidden' ;
document . body . style . overflow = 'hidden' ;
addClass ( document . body , modalOpenClass ) ;
}
}
addClass ( element , showClass ) ;
addClass ( element , showClass ) ;
@ -1609,16 +1616,15 @@
function beforeModalHide ( self , force ) {
function beforeModalHide ( self , force ) {
const {
const {
element , relatedTarget, hasFade ,
element , options, relatedTarget, hasFade ,
} = self ;
} = self ;
const currentOpen = getCurrentOpen ( ) ;
element . style . display = '' ;
element . style . display = '' ;
// force can also be the transitionEvent object, we wanna make sure it's not
// force can also be the transitionEvent object, we wanna make sure it's not
// call is not forced and overlay is visible
// call is not forced and overlay is visible
if ( ! force && hasFade && hasClass ( overlay , showClass )
if ( options . backdrop && ! force && hasFade && hasClass ( overlay , showClass )
&& ! currentOpen ) { // AND no modal is visible
&& ! getCurrentOpen( ) ) { // AND no modal is visible
hideOverlay ( ) ;
hideOverlay ( ) ;
emulateTransitionEnd ( overlay , ( ) => afterModalHide ( self ) ) ;
emulateTransitionEnd ( overlay , ( ) => afterModalHide ( self ) ) ;
} else {
} else {
@ -1666,7 +1672,8 @@
if ( self . isAnimating ) return ;
if ( self . isAnimating ) return ;
const { isStatic , modalDialog } = self ;
const { options , isStatic , modalDialog } = self ;
const { backdrop } = options ;
const { target } = e ;
const { target } = e ;
const selectedText = document . getSelection ( ) . toString ( ) . length ;
const selectedText = document . getSelection ( ) . toString ( ) . length ;
const targetInsideDialog = modalDialog . contains ( target ) ;
const targetInsideDialog = modalDialog . contains ( target ) ;
@ -1676,7 +1683,7 @@
addClass ( element , modalStaticClass ) ;
addClass ( element , modalStaticClass ) ;
self . isAnimating = true ;
self . isAnimating = true ;
emulateTransitionEnd ( modalDialog , ( ) => staticTransitionEnd ( self ) ) ;
emulateTransitionEnd ( modalDialog , ( ) => staticTransitionEnd ( self ) ) ;
} else if ( dismiss || ( ! selectedText && ! isStatic && ! targetInsideDialog ) ) {
} else if ( dismiss || ( ! selectedText && ! isStatic && ! targetInsideDialog && backdrop ) ) {
self . relatedTarget = dismiss || null ;
self . relatedTarget = dismiss || null ;
self . hide ( ) ;
self . hide ( ) ;
e . preventDefault ( ) ;
e . preventDefault ( ) ;
@ -1734,8 +1741,9 @@
show ( ) {
show ( ) {
const self = this ;
const self = this ;
const {
const {
element , isAnimating, hasFade , relatedTarget ,
element , options, isAnimating, hasFade , relatedTarget ,
} = self ;
} = self ;
const { backdrop } = options ;
let overlayDelay = 0 ;
let overlayDelay = 0 ;
if ( hasClass ( element , showClass ) && ! isAnimating ) return ;
if ( hasClass ( element , showClass ) && ! isAnimating ) return ;
@ -1744,8 +1752,6 @@
element . dispatchEvent ( showModalEvent ) ;
element . dispatchEvent ( showModalEvent ) ;
if ( showModalEvent . defaultPrevented ) return ;
if ( showModalEvent . defaultPrevented ) return ;
self . isAnimating = true ;
// we elegantly hide any opened modal/offcanvas
// we elegantly hide any opened modal/offcanvas
const currentOpen = getCurrentOpen ( ) ;
const currentOpen = getCurrentOpen ( ) ;
if ( currentOpen && currentOpen !== element ) {
if ( currentOpen && currentOpen !== element ) {
@ -1755,18 +1761,24 @@
that . hide ( ) ;
that . hide ( ) ;
}
}
if ( ! queryElement ( ` . ${ modalBackdropClass } ` ) ) {
self . isAnimating = true ;
appendOverlay ( hasFade ) ;
}
overlayDelay = getElementTransitionDuration ( overlay ) ;
if ( ! hasClass ( overlay , showClass ) ) {
if ( backdrop ) {
showOverlay ( ) ;
if ( ! currentOpen && ! hasClass ( overlay , showClass ) ) {
appendOverlay ( hasFade , 1 ) ;
} else {
toggleOverlayType ( 1 ) ;
}
}
overlayDelay = getElementTransitionDuration ( overlay ) ;
if ( ! currentOpen ) {
if ( ! hasClass ( overlay , showClass ) ) showOverlay ( ) ;
setTimeout ( ( ) => beforeModalShow ( self ) , overlayDelay ) ;
setTimeout ( ( ) => beforeModalShow ( self ) , overlayDelay ) ;
} else beforeModalShow ( self ) ;
} else {
beforeModalShow ( self ) ;
if ( currentOpen && hasClass ( overlay , showClass ) ) {
hideOverlay ( ) ;
}
}
}
}
hide ( force ) {
hide ( force ) {
@ -1863,7 +1875,6 @@
const { element , options } = self ;
const { element , options } = self ;
if ( ! options . scroll ) {
if ( ! options . scroll ) {
addClass ( document . body , modalOpenClass ) ;
document . body . style . overflow = 'hidden' ;
document . body . style . overflow = 'hidden' ;
setOffCanvasScrollbar ( self ) ;
setOffCanvasScrollbar ( self ) ;
}
}
@ -1909,15 +1920,15 @@
const self = element [ offcanvasComponent ] ;
const self = element [ offcanvasComponent ] ;
if ( ! self ) return ;
if ( ! self ) return ;
const { options , open, triggers } = self ;
const { options , triggers } = self ;
const { target } = e ;
const { target } = e ;
const trigger = target . closest ( offcanvasToggleSelector ) ;
const trigger = target . closest ( offcanvasToggleSelector ) ;
if ( trigger && trigger . tagName === 'A' ) e . preventDefault ( ) ;
if ( trigger && trigger . tagName === 'A' ) e . preventDefault ( ) ;
if ( open && ( ( ! element . contains ( target ) && options . backdrop
if ( ( ! element . contains ( target ) && options . backdrop
&& ( ! trigger || ( trigger && ! triggers . includes ( trigger ) ) ) )
&& ( ! trigger || ( trigger && ! triggers . includes ( trigger ) ) ) )
|| offCanvasDismiss . contains ( target ) ) ) {
|| offCanvasDismiss . contains ( target ) ) {
self . relatedTarget = target === offCanvasDismiss ? offCanvasDismiss : null ;
self . relatedTarget = target === offCanvasDismiss ? offCanvasDismiss : null ;
self . hide ( ) ;
self . hide ( ) ;
}
}
@ -1965,7 +1976,6 @@
element . removeAttribute ( ariaModal ) ;
element . removeAttribute ( ariaModal ) ;
element . removeAttribute ( 'role' ) ;
element . removeAttribute ( 'role' ) ;
element . style . visibility = '' ;
element . style . visibility = '' ;
self . open = false ;
self . isAnimating = false ;
self . isAnimating = false ;
if ( triggers . length ) {
if ( triggers . length ) {
@ -1979,7 +1989,6 @@
if ( options . backdrop ) removeOverlay ( ) ;
if ( options . backdrop ) removeOverlay ( ) ;
if ( ! options . scroll ) {
if ( ! options . scroll ) {
resetScrollbar ( ) ;
resetScrollbar ( ) ;
removeClass ( document . body , modalOpenClass ) ;
}
}
}
}
@ -2005,7 +2014,6 @@
. filter ( ( btn ) => getTargetElement ( btn ) === element ) ;
. filter ( ( btn ) => getTargetElement ( btn ) === element ) ;
// additional instance property
// additional instance property
self . open = false ;
self . isAnimating = false ;
self . isAnimating = false ;
self . scrollbarWidth = measureScrollbar ( ) ;
self . scrollbarWidth = measureScrollbar ( ) ;
@ -2017,7 +2025,8 @@
// ========================
// ========================
toggle ( ) {
toggle ( ) {
const self = this ;
const self = this ;
return self . open ? self . hide ( ) : self . show ( ) ;
if ( hasClass ( self . element , showClass ) ) self . hide ( ) ;
else self . show ( ) ;
}
}
show ( ) {
show ( ) {
@ -2027,7 +2036,7 @@
} = self ;
} = self ;
let overlayDelay = 0 ;
let overlayDelay = 0 ;
if ( self. open || isAnimating ) return ;
if ( hasClass( element , showClass ) || isAnimating ) return ;
showOffcanvasEvent . relatedTarget = relatedTarget || null ;
showOffcanvasEvent . relatedTarget = relatedTarget || null ;
element . dispatchEvent ( showOffcanvasEvent ) ;
element . dispatchEvent ( showOffcanvasEvent ) ;
@ -2043,12 +2052,13 @@
that . hide ( ) ;
that . hide ( ) ;
}
}
self . open = true ;
self . isAnimating = true ;
self . isAnimating = true ;
if ( options . backdrop ) {
if ( options . backdrop ) {
if ( ! queryElement( ` . ${ modalBackdropClass } ` ) ) {
if ( ! currentOpen ) {
appendOverlay ( 1 ) ;
appendOverlay ( 1 ) ;
} else {
toggleOverlayType ( ) ;
}
}
overlayDelay = getElementTransitionDuration ( overlay ) ;
overlayDelay = getElementTransitionDuration ( overlay ) ;
@ -2056,14 +2066,19 @@
if ( ! hasClass ( overlay , showClass ) ) showOverlay ( ) ;
if ( ! hasClass ( overlay , showClass ) ) showOverlay ( ) ;
setTimeout ( ( ) => beforeOffcanvasShow ( self ) , overlayDelay ) ;
setTimeout ( ( ) => beforeOffcanvasShow ( self ) , overlayDelay ) ;
} else beforeOffcanvasShow ( self ) ;
} else {
beforeOffcanvasShow ( self ) ;
if ( currentOpen && hasClass ( overlay , showClass ) ) {
hideOverlay ( ) ;
}
}
}
}
hide ( force ) {
hide ( force ) {
const self = this ;
const self = this ;
const { element , isAnimating , relatedTarget } = self ;
const { element , isAnimating , relatedTarget } = self ;
if ( ! self. open || isAnimating ) return ;
if ( ! hasClass( element , showClass ) || isAnimating ) return ;
hideOffcanvasEvent . relatedTarget = relatedTarget || null ;
hideOffcanvasEvent . relatedTarget = relatedTarget || null ;
element . dispatchEvent ( hideOffcanvasEvent ) ;
element . dispatchEvent ( hideOffcanvasEvent ) ;
@ -3483,7 +3498,7 @@
constructor : Tooltip ,
constructor : Tooltip ,
} ;
} ;
var version = "4.0. 4 ";
var version = "4.0. 6 ";
// import { alertInit } from '../components/alert-native.js';
// import { alertInit } from '../components/alert-native.js';
// import { buttonInit } from '../components/button-native.js';
// import { buttonInit } from '../components/button-native.js';