Skip to content

Commit

Permalink
Adding a more consistent control over show/hide timing, attempting to f…
Browse files Browse the repository at this point in the history 
…ix #281
  • Loading branch information
@thednp
thednp committed Jun 1, 2019
1 parent 45faddf commit 4cdfd23
Show file tree
Hide file tree
Showing 4 changed files with 140 additions and 129 deletions.
134 changes: 69 additions & 65 deletions dist/bootstrap-native-v4.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1026,6 +1026,7 @@
modalTrigger = 'modalTrigger',
paddingRight = 'paddingRight',
modalBackdropString = 'modal-backdrop',
isAnimating = 'isAnimating',
// determine modal, triggering element
btnCheck = element[getAttribute](dataTarget)||element[getAttribute]('href'),
checkModal = queryElement( btnCheck ),
Expand All @@ -1044,9 +1045,12 @@
this[animation] = hasClass(modal, 'fade') ? true : false;
this[content] = options[content]; // JavaScript only

// set an initial state of the modal
modal[isAnimating] = false;

// bind, constants, event targets and other vars
var self = this, relatedTarget = null,
bodyIsOverflowing, scrollBarWidth, overlay, overlayDelay,
bodyIsOverflowing, scrollBarWidth, overlay, overlayDelay, modalTimer,

// also find fixed-top / fixed-bottom items
fixedItems = getElementsByClassName(HTML,fixedTop).concat(getElementsByClassName(HTML,fixedBottom)),
Expand Down Expand Up @@ -1109,34 +1113,15 @@
DOC[body].removeChild(overlay); overlay = null;
}
},
keydownHandlerToggle = function() {
if (hasClass(modal,showClass)) {
on(DOC, keydownEvent, keyHandler);
} else {
off(DOC, keydownEvent, keyHandler);
}
},
resizeHandlerToggle = function() {
if (hasClass(modal,showClass)) {
on(globalObject, resizeEvent, self.update);
} else {
off(globalObject, resizeEvent, self.update);
}
},
dismissHandlerToggle = function() {
if (hasClass(modal,showClass)) {
on(modal, clickEvent, dismissHandler);
} else {
off(modal, clickEvent, dismissHandler);
}
},
// triggers
triggerShow = function() {
resizeHandlerToggle();
dismissHandlerToggle();
keydownHandlerToggle();
setFocus(modal);
modal[isAnimating] = false;
bootstrapCustomEvent.call(modal, shownEvent, component, relatedTarget);

on(globalObject, resizeEvent, self.update);
on(modal, clickEvent, dismissHandler);
on(DOC, keydownEvent, keyHandler);
},
triggerHide = function() {
modal[style].display = '';
Expand All @@ -1150,14 +1135,17 @@
overlay && hasClass(overlay,'fade') ? (removeClass(overlay,showClass), emulateTransitionEnd(overlay,removeOverlay))
: removeOverlay();

resizeHandlerToggle();
dismissHandlerToggle();
keydownHandlerToggle();
off(globalObject, resizeEvent, self.update);
off(modal, clickEvent, dismissHandler);
off(DOC, keydownEvent, keyHandler);
}
}());
modal[isAnimating] = false;
},
// handlers
clickHandler = function(e) {
if ( modal[isAnimating] ) return;

var clickTarget = e[target];
clickTarget = clickTarget[hasAttribute](dataTarget) || clickTarget[hasAttribute]('href') ? clickTarget : clickTarget[parentNode];
if ( clickTarget === element && !hasClass(modal,showClass) ) {
Expand All @@ -1168,68 +1156,84 @@
}
},
keyHandler = function(e) {
if (self[keyboard] && e.which == 27 && hasClass(modal,showClass)) {
if ( modal[isAnimating] ) return;

if (self[keyboard] && e.which == 27 && hasClass(modal,showClass) ) {
self.hide();
}
},
dismissHandler = function(e) {
if ( modal[isAnimating] ) return;
var clickTarget = e[target];
if ( hasClass(modal,showClass) && (clickTarget[parentNode][getAttribute](dataDismiss) === component

if ( hasClass(modal,showClass) && ( clickTarget[parentNode][getAttribute](dataDismiss) === component
|| clickTarget[getAttribute](dataDismiss) === component
|| (clickTarget === modal && self[backdrop] !== staticString) ) ) {
|| clickTarget === modal && self[backdrop] !== staticString ) ) {
self.hide(); relatedTarget = null;
e[preventDefault]();
}
e[preventDefault]();
};

// public methods
this.toggle = function() {
if ( hasClass(modal,showClass) ) {this.hide();} else {this.show();}
};
this.show = function() {
bootstrapCustomEvent.call(modal, showEvent, component, relatedTarget);

// we elegantly hide any opened modal
var currentOpen = getElementsByClassName(DOC,component+' '+showClass)[0];
if (currentOpen && currentOpen !== modal) {
modalTrigger in currentOpen && currentOpen[modalTrigger][stringModal].hide();
stringModal in currentOpen && currentOpen[stringModal].hide();
}
if ( hasClass(modal,showClass) || modal[isAnimating] ) {return}

clearTimeout(modalTimer);
modalTimer = setTimeout(function(){
modal[isAnimating] = true;
bootstrapCustomEvent.call(modal, showEvent, component, relatedTarget);

// we elegantly hide any opened modal
var currentOpen = getElementsByClassName(DOC,component+' '+showClass)[0];
if (currentOpen && currentOpen !== modal) {
modalTrigger in currentOpen && currentOpen[modalTrigger][stringModal].hide();
stringModal in currentOpen && currentOpen[stringModal].hide();
}

if ( this[backdrop] ) {
!modalOverlay && createOverlay();
}
if ( self[backdrop] ) {
!modalOverlay && !overlay && createOverlay();
}

if ( overlay && modalOverlay && !hasClass(overlay,showClass)) {
overlay[offsetWidth]; // force reflow to enable trasition
overlayDelay = getTransitionDurationFromElement(overlay);
addClass(overlay, showClass);
}
if ( overlay && !hasClass(overlay,showClass) ) {
overlay[offsetWidth]; // force reflow to enable trasition
overlayDelay = getTransitionDurationFromElement(overlay);
addClass(overlay, showClass);
}

setTimeout( function() {
modal[style].display = 'block';
setTimeout( function() {
modal[style].display = 'block';

checkScrollbar();
setScrollbar();
checkScrollbar();
setScrollbar();

addClass(DOC[body],component+'-open');
addClass(modal,showClass);
modal[setAttribute](ariaHidden, false);
addClass(DOC[body],component+'-open');
addClass(modal,showClass);
modal[setAttribute](ariaHidden, false);

hasClass(modal,'fade') ? emulateTransitionEnd(modal, triggerShow) : triggerShow();
}, supportTransitions && overlay && overlayDelay ? overlayDelay : 0);
hasClass(modal,'fade') ? emulateTransitionEnd(modal, triggerShow) : triggerShow();
}, supportTransitions && overlay && overlayDelay ? overlayDelay : 1);
},1);
};
this.hide = function() {
bootstrapCustomEvent.call(modal, hideEvent, component);
overlay = queryElement('.'+modalBackdropString);
overlayDelay = overlay && getTransitionDurationFromElement(overlay);
if ( modal[isAnimating] || !hasClass(modal,showClass) ) {return}

removeClass(modal,showClass);
modal[setAttribute](ariaHidden, true);
clearTimeout(modalTimer);
modalTimer = setTimeout(function(){
modal[isAnimating] = true;
bootstrapCustomEvent.call(modal, hideEvent, component);
overlay = queryElement('.'+modalBackdropString);
overlayDelay = overlay && getTransitionDurationFromElement(overlay);

removeClass(modal,showClass);
modal[setAttribute](ariaHidden, true);

setTimeout(function(){
hasClass(modal,'fade') ? emulateTransitionEnd(modal, triggerHide) : triggerHide();
}, supportTransitions && overlay && overlayDelay ? overlayDelay : 1);
setTimeout(function(){
hasClass(modal,'fade') ? emulateTransitionEnd(modal, triggerHide) : triggerHide();
}, supportTransitions && overlay && overlayDelay ? overlayDelay : 2);
},2)
};
this.setContent = function( content ) {
queryElement('.'+component+'-content',modal)[innerHTML] = content;
Expand Down
Loading

0 comments on commit 4cdfd23

Please sign in to comment.