From 05a8671fcef1be5ec81cc801cdf0d08d412d5624 Mon Sep 17 00:00:00 2001 From: jlukic Date: Tue, 30 Sep 2014 19:13:21 -0400 Subject: [PATCH] Swaps transition calls to consistent format across modules, looking into issues with dimmer/modal when hiding during show --- src/definitions/modules/modal.js | 44 +++++++----- src/definitions/modules/popup.js | 20 ++++-- src/definitions/modules/sticky.js | 3 +- src/definitions/modules/transition.js | 89 ++++++++++--------------- src/definitions/modules/transition.less | 2 +- 5 files changed, 81 insertions(+), 77 deletions(-) diff --git a/src/definitions/modules/modal.js b/src/definitions/modules/modal.js index 42879732f..2aca9f25b 100755 --- a/src/definitions/modules/modal.js +++ b/src/definitions/modules/modal.js @@ -223,7 +223,7 @@ $.fn.modal = function(parameters) { }, toggle: function() { - if( module.is.active() ) { + if( module.is.active() || module.is.animating() ) { module.hide(); } else { @@ -260,10 +260,14 @@ $.fn.modal = function(parameters) { if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { module.debug('Showing modal with css animations'); $module - .transition(settings.transition + ' in', settings.duration, function() { - $.proxy(settings.onVisible, element)(); - module.set.active(); - callback(); + .transition({ + animation : settings.transition + ' in', + duration : settings.duration, + complete : function() { + $.proxy(settings.onVisible, element)(); + module.set.active(); + callback(); + } }) ; } @@ -306,7 +310,7 @@ $.fn.modal = function(parameters) { }, hideDimmer: function() { - if( !module.is.active() ) { + if( !($dimmable.dimmer('is active') || $dimmable.dimmer('is animating')) ) { module.debug('Dimmer is not visible cannot hide'); return; } @@ -318,9 +322,6 @@ $.fn.modal = function(parameters) { } $dimmable.dimmer('hide', function() { if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { - $module - .transition('reset') - ; module.remove.screenHeight(); } module.remove.active(); @@ -332,7 +333,7 @@ $.fn.modal = function(parameters) { ? callback : function(){} ; - if( !module.is.active() ) { + if( !(module.is.active() || module.is.animating()) ) { module.debug('Cannot hide modal it is not active'); return; } @@ -340,12 +341,17 @@ $.fn.modal = function(parameters) { module.remove.keyboardShortcuts(); $.proxy(settings.onHide, element)(); if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { + console.log('hiding'); $module - .transition(settings.transition + ' out', settings.duration, function() { - $.proxy(settings.onHidden, element)(); - module.remove.active(); - module.restore.focus(); - callback(); + .transition({ + animation : settings.transition + ' out', + duration : settings.duration, + complete : function() { + $.proxy(settings.onHidden, element)(); + module.remove.active(); + module.restore.focus(); + callback(); + } }) ; } @@ -463,6 +469,12 @@ $.fn.modal = function(parameters) { active: function() { return $module.hasClass(className.active); }, + animating: function() { + return $module.transition('is supported') + ? $module.transition('is animating') + : $module.is(':visible') + ; + }, modernBrowser: function() { // appName for IE11 reports 'Netscape' can no longer use return !(window.ActiveXObject || "ActiveXObject" in window); @@ -717,7 +729,7 @@ $.fn.modal.settings = { name : 'Modal', namespace : 'modal', - debug : false, + debug : true, verbose : true, performance : true, diff --git a/src/definitions/modules/popup.js b/src/definitions/modules/popup.js index 5bec0de47..17bcbc2e6 100755 --- a/src/definitions/modules/popup.js +++ b/src/definitions/modules/popup.js @@ -325,9 +325,13 @@ $.fn.popup = function(parameters) { ; if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { $popup - .transition(settings.transition + ' in', settings.duration, function() { - module.bind.close(); - $.proxy(callback, element)(); + .transition({ + animation : settings.transition + ' in', + duration : settings.duration, + complete : function() { + module.bind.close(); + $.proxy(callback, element)(); + } }) ; } @@ -347,9 +351,13 @@ $.fn.popup = function(parameters) { module.debug('Hiding pop-up'); if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { $popup - .transition(settings.transition + ' out', settings.duration, function() { - module.reset(); - callback(); + .transition({ + animation : settings.transition + ' out', + duration : settings.duration, + complete : function() { + module.reset(); + callback(); + } }) ; } diff --git a/src/definitions/modules/sticky.js b/src/definitions/modules/sticky.js index 1d88d787a..08b4b3c7f 100755 --- a/src/definitions/modules/sticky.js +++ b/src/definitions/modules/sticky.js @@ -298,7 +298,8 @@ $.fn.sticky = function(parameters) { tagName = $container.get(0).tagName ; if(tagName === 'HTML' || tagName == 'body') { - module.error(error.container, tagName, $module); + // this can trigger for too many reasons + //module.error(error.container, tagName, $module); $container = $module.offsetParent(); } else { diff --git a/src/definitions/modules/transition.js b/src/definitions/modules/transition.js index b42116e4a..055088b03 100755 --- a/src/definitions/modules/transition.js +++ b/src/definitions/modules/transition.js @@ -59,21 +59,18 @@ $.fn.transition = function() { module = { initialize: function() { - // get settings - settings = module.get.settings.apply(element, moduleArguments); - module.verbose('Converted arguments into settings object', settings); - // set shortcuts - error = settings.error; + // get full settings + moduleNamespace = 'module-' + namespace; + settings = module.get.settings.apply(element, moduleArguments); className = settings.className; - namespace = settings.namespace; metadata = settings.metadata; - moduleNamespace = 'module-' + namespace; - eventNamespace = '.' + settings.namespace; animationEnd = module.get.animationEvent(); animationName = module.get.animationName(); - + error = settings.error; + namespace = settings.namespace; + eventNamespace = '.' + settings.namespace; instance = $module.data(moduleNamespace) || module; if(methodInvoked) { @@ -81,6 +78,7 @@ $.fn.transition = function() { } // no internal method was found matching query or query not made if(methodInvoked === false) { + module.verbose('Converted arguments into settings object', settings); module.animate(); module.instantiate(); } @@ -135,7 +133,7 @@ $.fn.transition = function() { module.debug('Preparing animation', settings.animation); if(module.is.animating() && settings.queue) { if(!settings.allowRepeats && module.has.direction() && module.is.occuring() && module.queuing !== true) { - module.error(error.repeated, settings.animation); + module.error(error.repeated); } else { module.queue(settings.animation); @@ -152,7 +150,7 @@ $.fn.transition = function() { reset: function() { module.debug('Resetting animation to beginning conditions'); - $module.off(animationEnd); + $module.off(animationEnd + eventNamespace); module.restore.conditions(); module.hide(); module.remove.animating(); @@ -183,6 +181,7 @@ $.fn.transition = function() { else if( module.is.inward() ) { module.verbose('Animation is outward, showing element'); module.restore.conditions(); + module.set.display(); module.show(); $.proxy(settings.onShow, this)(); } @@ -207,7 +206,6 @@ $.fn.transition = function() { }, set: { - animating: function(animation) { animation = animation || settings.animation; module.save.conditions(); @@ -225,19 +223,19 @@ $.fn.transition = function() { module.set.duration(settings.duration); module.debug('Starting tween', settings.animation, $module.attr('class')); }, - display: function() { var style = $module.attr('style') || '', displayType = module.get.displayType(), overrideStyle = style + ';display: ' + displayType + ' !important;' ; - module.verbose('Setting final visibility to', displayType); - $module - .attr('style', overrideStyle) - ; + if( $module.css('display') !== displayType ) { + module.verbose('Setting inline visibility to', displayType); + $module + .attr('style', overrideStyle) + ; + } }, - direction: function() { if($module.is(':visible') && !module.is.hidden()) { module.debug('Automatically determining the direction of animation', 'Outward'); @@ -254,14 +252,12 @@ $.fn.transition = function() { ; } }, - looping: function() { module.debug('Transition set to loop'); $module .addClass(className.looping) ; }, - duration: function(duration) { duration = duration || settings.duration; duration = (typeof duration == 'number') @@ -279,24 +275,20 @@ $.fn.transition = function() { }) ; }, - hidden: function() { if(!module.is.hidden()) { $module .addClass(className.transition) .addClass(className.hidden) ; - requestAnimationFrame(function() { - if($module.css('display') !== 'none') { - module.verbose('Overriding default display to hide element'); - $module - .css('display', 'none') - ; - } - }); + if($module.css('display') !== 'none') { + module.verbose('Overriding default display to hide element'); + $module + .css('display', 'none') + ; + } } }, - visible: function() { $module .addClass(className.transition) @@ -339,7 +331,7 @@ $.fn.transition = function() { } else { if(module.get.displayType() === 'block') { - module.verbose('Removing inline block style, element defaults to block'); + module.verbose('Removing inline style override, element defaults to block'); $module.removeAttr('style'); } } @@ -351,17 +343,14 @@ $.fn.transition = function() { }, remove: { - animating: function() { $module.removeClass(className.animating); }, - display: function() { if(module.displayType !== undefined) { $module.css('display', ''); } }, - duration: function() { $module .css({ @@ -373,15 +362,12 @@ $.fn.transition = function() { }) ; }, - hidden: function() { $module.removeClass(className.hidden); }, - visible: function() { $module.removeClass(className.visible); }, - looping: function() { module.debug('Transitions are no longer looping'); $module @@ -389,18 +375,14 @@ $.fn.transition = function() { ; module.forceRepaint(); }, - transition: function() { $module .removeClass(className.visible) .removeClass(className.hidden) ; } - }, - get: { - settings: function(animation, duration, complete) { // single settings object if(typeof animation == 'object') { @@ -442,7 +424,6 @@ $.fn.transition = function() { } return $.fn.transition.settings; }, - displayType: function() { if(module.displayType === undefined) { // create fake element to determine display state @@ -450,11 +431,9 @@ $.fn.transition = function() { } return module.displayType; }, - transitionExists: function(animation) { return $.fn.transition.exists[animation]; }, - animationName: function() { var element = document.createElement('div'), @@ -468,13 +447,11 @@ $.fn.transition = function() { ; for(animation in animations){ if( element.style[animation] !== undefined ){ - module.verbose('Determined animation vendor name property', animations[animation]); return animations[animation]; } } return false; }, - animationEvent: function() { var element = document.createElement('div'), @@ -488,7 +465,6 @@ $.fn.transition = function() { ; for(animation in animations){ if( element.style[animation] !== undefined ){ - module.verbose('Determined animation vendor end event', animations[animation]); return animations[animation]; } } @@ -552,7 +528,9 @@ $.fn.transition = function() { } $clone.remove(); module.save.displayType(displayType); - module.save.transitionExists(animation, transitionExists); + if(transitionExists === undefined) { + module.save.transitionExists(animation, transitionExists); + } } return transitionExists; } @@ -679,12 +657,12 @@ $.fn.transition = function() { performance.push({ 'Name' : message[0], 'Arguments' : [].slice.call(message, 1) || '', - 'Execution Time' : executionTime, - 'Element' : element + 'Element' : element, + 'Execution Time' : executionTime }); } clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 100); + module.performance.timer = setTimeout(module.performance.display, 600); }, display: function() { var @@ -718,6 +696,7 @@ $.fn.transition = function() { performance = []; } }, + // modified for transition to return invoke success invoke: function(query, passedArguments, context) { var object = instance, @@ -760,6 +739,7 @@ $.fn.transition = function() { else if(found !== undefined) { response = found; } + if($.isArray(returnedValue)) { returnedValue.push(response); } @@ -769,7 +749,10 @@ $.fn.transition = function() { else if(response !== undefined) { returnedValue = response; } - return found || false; + return (found !== undefined) + ? found + : false + ; } }; module.initialize(); @@ -805,7 +788,7 @@ $.fn.transition.settings = { onShow : function() {}, onHide : function() {}, - // whether animation can occur twice in a row + // whether EXACT animation can occur twice in a row allowRepeats : false, // animation duration diff --git a/src/definitions/modules/transition.less b/src/definitions/modules/transition.less index ba671677d..59a925312 100755 --- a/src/definitions/modules/transition.less +++ b/src/definitions/modules/transition.less @@ -57,11 +57,11 @@ /* Hidden */ .hidden.transition { display: none; + visibility: hidden; } /* Visible */ .visible.transition { - display: block !important; visibility: visible !important; backface-visibility: @backfaceVisibility; transform: @use3DAcceleration;