richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
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
1839cc7579
commit
3e7bd24ea7
7 changed files with 34 additions and 26 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

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

4
src/modules/behavior/form.js
View File

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

4
src/modules/dimmer.js
View File

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

4
src/modules/dropdown.js
View File

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

4
src/modules/modal.js
View File

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

4
src/modules/popup.js
View File

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

36
src/modules/transition.js
View File

@ -101,6 +101,10 @@ $.fn.transition = function() {
animate: function(overrideSettings) { animate: function(overrideSettings) {
settings = overrideSettings || settings; settings = overrideSettings || settings;
if(!module.is.supported()) {
module.error(error.support);
return false;
}
module.debug('Preparing animation', settings.animation); module.debug('Preparing animation', settings.animation);
if(module.is.animating()) { if(module.is.animating()) {
if(settings.queue) { if(settings.queue) {
@ -120,7 +124,7 @@ $.fn.transition = function() {
if(!module.has.direction() && module.can.transition()) { if(!module.has.direction() && module.can.transition()) {
module.set.direction(); module.set.direction();
} }
if(!module.can.animate()) {
if(!module.has.transitionAvailable) {
module.restore.conditions(); module.restore.conditions();
module.error(error.noAnimation); module.error(error.noAnimation);
return false; return false;
@ -172,6 +176,16 @@ $.fn.transition = function() {
if( $module.hasClass(className.inward) || $module.hasClass(className.outward) ) { if( $module.hasClass(className.inward) || $module.hasClass(className.outward) ) {
return true; 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){ for(animation in animations){
if( element.style[animation] !== undefined ){ 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]; return animations[animation];
} }
} }
@ -352,7 +366,7 @@ $.fn.transition = function() {
; ;
for(animation in animations){ for(animation in animations){
if( element.style[animation] !== undefined ){ 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]; return animations[animation];
} }
} }
@ -362,16 +376,6 @@ $.fn.transition = function() {
}, },
can: { 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() { transition: function() {
var var
$clone = $('<div>').addClass( $module.attr('class') ).appendTo($('body')), $clone = $('<div>').addClass( $module.attr('class') ).appendTo($('body')),
@ -400,6 +404,9 @@ $.fn.transition = function() {
}, },
visible: function() { visible: function() {
return $module.is(':visible'); return $module.is(':visible');
},
supported: function() {
return(animationName !== false && animationEnd !== false);
} }
}, },
@ -645,7 +652,8 @@ $.fn.transition.settings = {
// possible errors // possible errors
error: { error: {
noAnimation : 'There is no css animation matching the one you specified.', 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'
} }
}; };

Write Preview
Loading…
Cancel
Save