Browse Source

Fixes #285 Adds CSS transition support detection to usage of CSS transitions in other modules

pull/310/head
jlukic 11 years ago
parent
commit
3e7bd24ea7
7 changed files with 34 additions and 26 deletions
  1. 4
      spec/modal.commented.js
  2. 4
      src/modules/behavior/form.js
  3. 4
      src/modules/dimmer.js
  4. 4
      src/modules/dropdown.js
  5. 4
      src/modules/modal.js
  6. 4
      src/modules/popup.js
  7. 36
      src/modules/transition.js

4
spec/modal.commented.js

@ -261,7 +261,7 @@ $.fn.modal = function(parameters) {
module.set.position();
module.hideAll();
// #### Loose Coupling
if(settings.transition && $.fn.transition !== undefined) {
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
// Use dimmer plugin if available
$module
.transition(settings.transition + ' in', settings.duration, module.set.active)
@ -320,7 +320,7 @@ $.fn.modal = function(parameters) {
hideModal: function() {
module.debug('Hiding modal');
module.remove.keyboardShortcuts();
if(settings.transition && $.fn.transition !== undefined) {
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
$module
.transition(settings.transition + ' out', settings.duration, function() {
module.remove.active();

4
src/modules/behavior/form.js

@ -246,7 +246,7 @@ $.fn.form = function(fields, parameters) {
.html(errors[0])
;
if(!promptExists) {
if(settings.transition && $.fn.transition !== undefined) {
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
module.verbose('Displaying error with css transition', settings.transition);
$prompt.transition(settings.transition + ' in', settings.duration);
}
@ -279,7 +279,7 @@ $.fn.form = function(fields, parameters) {
;
if(settings.inline && $prompt.is(':visible')) {
module.verbose('Removing prompt for field', field);
if(settings.transition && $.fn.transition !== undefined) {
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
$prompt.transition(settings.transition + ' out', settings.duration, function() {
$prompt.remove();
});

4
src/modules/dimmer.js

@ -155,7 +155,7 @@ $.fn.dimmer = function(parameters) {
: function(){}
;
module.set.dimmed();
if($.fn.transition !== undefined && settings.useCSS) {
if(settings.useCSS && $.fn.transition !== undefined && $module.transition('is supported')) {
$dimmer
.transition({
animation : settings.transition + ' in',
@ -190,7 +190,7 @@ $.fn.dimmer = function(parameters) {
? callback
: function(){}
;
if($.fn.transition !== undefined && settings.useCSS) {
if(settings.useCSS && $.fn.transition !== undefined && $module.transition('is supported')) {
module.verbose('Hiding dimmer with css');
$dimmer
.transition({

4
src/modules/dropdown.js

@ -434,7 +434,7 @@ $.fn.dropdown = function(parameters) {
if(settings.transition == 'none') {
callback();
}
else if($.fn.transition !== undefined) {
else if($.fn.transition !== undefined && $module.transition('is supported')) {
$currentMenu.transition({
animation : settings.transition + ' in',
duration : settings.duration,
@ -482,7 +482,7 @@ $.fn.dropdown = function(parameters) {
callback = callback || function(){};
if(module.is.visible($currentMenu) ) {
module.verbose('Doing menu hide animation', $currentMenu);
if($.fn.transition !== undefined) {
if($.fn.transition !== undefined && $module.transition('is supported')) {
$currentMenu.transition({
animation : settings.transition + ' out',
duration : settings.duration,

4
src/modules/modal.js

@ -235,7 +235,7 @@ $.fn.modal = function(parameters) {
module.hideOthers(module.showModal);
}
else {
if(settings.transition && $.fn.transition !== undefined) {
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
$module
.transition(settings.transition + ' in', settings.duration, function() {
module.set.active();
@ -301,7 +301,7 @@ $.fn.modal = function(parameters) {
if( module.is.active() ) {
module.debug('Hiding modal');
module.remove.keyboardShortcuts();
if(settings.transition && $.fn.transition !== undefined) {
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
$module
.transition(settings.transition + ' out', settings.duration, function() {
module.remove.active();

4
src/modules/popup.js

@ -256,7 +256,7 @@ $.fn.popup = function(parameters) {
$module
.addClass(className.visible)
;
if(settings.transition && $.fn.transition !== undefined) {
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
$popup
.transition(settings.transition + ' in', settings.duration, function() {
module.bind.close();
@ -278,7 +278,7 @@ $.fn.popup = function(parameters) {
hide: function(callback) {
callback = callback || function(){};
module.debug('Hiding pop-up');
if(settings.transition && $.fn.transition !== undefined) {
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
$popup
.transition(settings.transition + ' out', settings.duration, function() {
module.reset();

36
src/modules/transition.js

@ -101,6 +101,10 @@ $.fn.transition = function() {
animate: function(overrideSettings) {
settings = overrideSettings || settings;
if(!module.is.supported()) {
module.error(error.support);
return false;
}
module.debug('Preparing animation', settings.animation);
if(module.is.animating()) {
if(settings.queue) {
@ -120,7 +124,7 @@ $.fn.transition = function() {
if(!module.has.direction() && module.can.transition()) {
module.set.direction();
}
if(!module.can.animate()) {
if(!module.has.transitionAvailable) {
module.restore.conditions();
module.error(error.noAnimation);
return false;
@ -172,6 +176,16 @@ $.fn.transition = function() {
if( $module.hasClass(className.inward) || $module.hasClass(className.outward) ) {
return true;
}
},
transitionAvailable: function() {
if($module.css(animationName) !== 'none') {
module.debug('CSS definition found');
return true;
}
else {
module.debug('Unable to find css definition');
return false;
}
}
},
@ -332,7 +346,7 @@ $.fn.transition = function() {
;
for(animation in animations){
if( element.style[animation] !== undefined ){
module.verbose('Determining animation vendor name property', animations[animation]);
module.verbose('Determined animation vendor name property', animations[animation]);
return animations[animation];
}
}
@ -352,7 +366,7 @@ $.fn.transition = function() {
;
for(animation in animations){
if( element.style[animation] !== undefined ){
module.verbose('Determining animation vendor end event', animations[animation]);
module.verbose('Determined animation vendor end event', animations[animation]);
return animations[animation];
}
}
@ -362,16 +376,6 @@ $.fn.transition = function() {
},
can: {
animate: function() {
if($module.css(animationName) !== 'none') {
module.debug('CSS definition found');
return true;
}
else {
module.debug('Unable to find css definition');
return false;
}
},
transition: function() {
var
$clone = $('<div>').addClass( $module.attr('class') ).appendTo($('body')),
@ -400,6 +404,9 @@ $.fn.transition = function() {
},
visible: function() {
return $module.is(':visible');
},
supported: function() {
return(animationName !== false && animationEnd !== false);
}
},
@ -645,7 +652,8 @@ $.fn.transition.settings = {
// possible errors
error: {
noAnimation : 'There is no css animation matching the one you specified.',
method : 'The method you called is not defined'
method : 'The method you called is not defined',
support : 'This browser does not support CSS animations'
}
};

Loading…
Cancel
Save