From cf28f602c30e091ef4f6108ffcc588a0dd0b9f38 Mon Sep 17 00:00:00 2001 From: jlukic Date: Fri, 6 Mar 2015 15:54:52 -0500 Subject: [PATCH] Accordion can now close while opening --- src/definitions/modules/accordion.js | 63 ++++++++++++++++---------- src/definitions/modules/accordion.less | 2 +- 2 files changed, 40 insertions(+), 25 deletions(-) diff --git a/src/definitions/modules/accordion.js b/src/definitions/modules/accordion.js index 770554b28..f5532090d 100644 --- a/src/definitions/modules/accordion.js +++ b/src/definitions/modules/accordion.js @@ -124,10 +124,13 @@ $.fn.accordion = function(parameters) { : $(query).closest(selector.title) : $(this).closest(selector.title), $activeContent = $activeTitle.next($content), - contentIsOpen = $activeContent.is(':visible') + isAnimating = $activeContent.hasClass(className.animating), + isActive = $activeContent.hasClass(className.active), + isOpen = (isActive && !isAnimating), + isOpening = (!isActive && isAnimating) ; module.debug('Toggling visibility of content', $activeTitle); - if(contentIsOpen) { + if(isOpen || isOpening) { if(settings.collapsible) { module.close.call($activeTitle); } @@ -136,7 +139,7 @@ $.fn.accordion = function(parameters) { } } else { - module.open.call($activeTitle); + module.open.call($activeTitle); } }, @@ -147,11 +150,12 @@ $.fn.accordion = function(parameters) { ? $title.eq(query) : $(query).closest(selector.title) : $(this).closest(selector.title), - $activeContent = $activeTitle.next($content), - currentlyAnimating = $activeContent.is(':animated'), - currentlyActive = $activeContent.hasClass(className.active) + $activeContent = $activeTitle.next($content), + isAnimating = $activeContent.hasClass(className.animating), + isActive = $activeContent.hasClass(className.active), + isUnopen = (!isActive && !isAnimating) ; - if(!currentlyAnimating && !currentlyActive) { + if(isUnopen) { module.debug('Opening accordion content', $activeTitle); if(settings.exclusive) { module.closeOthers.call($activeTitle); @@ -159,23 +163,25 @@ $.fn.accordion = function(parameters) { $activeTitle .addClass(className.active) ; + $activeContent.addClass(className.animating); if(settings.animateChildren) { if($.fn.transition !== undefined && $module.transition('is supported')) { $activeContent .children() .transition({ - animation : 'fade in', + animation : 'fade in', + queue : false, useFailSafe : true, - debug : settings.debug, - verbose : settings.verbose, - duration : settings.duration + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration }) ; } else { $activeContent .children() - .stop() + .stop(true) .animate({ opacity: 1 }, settings.duration, module.resetOpacity) @@ -183,9 +189,10 @@ $.fn.accordion = function(parameters) { } } $activeContent - .stop() + .stop(true) .slideDown(settings.duration, settings.easing, function() { $activeContent + .removeClass(className.animating) .addClass(className.active) ; module.reset.display.call(this); @@ -204,16 +211,18 @@ $.fn.accordion = function(parameters) { : $(query).closest(selector.title) : $(this).closest(selector.title), $activeContent = $activeTitle.next($content), - isActive = $activeContent.hasClass(className.active) + isAnimating = $activeContent.hasClass(className.animating), + isActive = $activeContent.hasClass(className.active), + isOpening = (!isActive && isAnimating), + isClosing = (isActive && isAnimating) ; - if(isActive) { + if((isActive || isOpening) && !isClosing) { module.debug('Closing accordion content', $activeContent); $activeTitle .removeClass(className.active) ; $activeContent - .removeClass(className.active) - .show() + .addClass(className.animating) ; if(settings.animateChildren) { if($.fn.transition !== undefined && $module.transition('is supported')) { @@ -221,6 +230,7 @@ $.fn.accordion = function(parameters) { .children() .transition({ animation : 'fade out', + queue : false, useFailSafe : true, debug : settings.debug, verbose : settings.verbose, @@ -231,7 +241,7 @@ $.fn.accordion = function(parameters) { else { $activeContent .children() - .stop() + .stop(true) .animate({ opacity: 0 }, settings.duration, module.resetOpacity) @@ -239,8 +249,12 @@ $.fn.accordion = function(parameters) { } } $activeContent - .stop() + .stop(true) .slideUp(settings.duration, settings.easing, function() { + $activeContent + .removeClass(className.animating) + .removeClass(className.active) + ; module.reset.display.call(this); settings.onClose.call(this); settings.onChange.call(this); @@ -528,8 +542,8 @@ $.fn.accordion.settings = { closeNested : false, animateChildren : true, - duration : 500, - easing : 'easeOutQuint', + duration : 350, + easing : 'easeOutQuad', onOpen : function(){}, onClose : function(){}, @@ -540,7 +554,8 @@ $.fn.accordion.settings = { }, className : { - active : 'active' + active : 'active', + animating : 'animating' }, selector : { @@ -554,8 +569,8 @@ $.fn.accordion.settings = { // Adds easing $.extend( $.easing, { - easeOutQuint: function (x, t, b, c, d) { - return c*((t=t/d-1)*t*t*t*t + 1) + b; + easeOutQuad: function (x, t, b, c, d) { + return -c *(t/=d)*(t-2) + b; } }); diff --git a/src/definitions/modules/accordion.less b/src/definitions/modules/accordion.less index 50b9e5c6e..b544229b9 100755 --- a/src/definitions/modules/accordion.less +++ b/src/definitions/modules/accordion.less @@ -140,7 +140,7 @@ transition: @styledTitleTransition; } .ui.styled.accordion > .title:first-child, -.ui.styled.accordion > .accordion .title:first-child { +.ui.styled.accordion .accordion .title:first-child { border-top: none; }