You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

654 lines
20 KiB

/*
* # Semantic - Transition
* http://github.com/jlukic/semantic-ui/
*
*
* Copyright 2013 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
;(function ( $, window, document, undefined ) {
$.fn.transition = function() {
var
$allModules = $(this),
moduleSelector = $allModules.selector || '',
time = new Date().getTime(),
performance = [],
moduleArguments = arguments,
query = moduleArguments[0],
queryArguments = [].slice.call(arguments, 1),
methodInvoked = (typeof query === 'string'),
requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame
|| function(callback) { setTimeout(callback, 0); },
invokedResponse
;
$allModules
.each(function() {
var
$module = $(this),
element = this,
// set at run time
settings,
instance,
error,
className,
metadata,
animationEnd,
animationName,
namespace,
moduleNamespace,
module
;
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;
className = settings.className;
namespace = settings.namespace;
metadata = settings.metadata;
moduleNamespace = 'module-' + namespace;
animationEnd = module.get.animationEvent();
animationName = module.get.animationName();
instance = $module.data(moduleNamespace);
if(instance === undefined) {
module.instantiate();
}
if(methodInvoked) {
methodInvoked = module.invoke(query);
}
// no internal method was found matching query or query not made
if(methodInvoked === false) {
module.animate();
}
},
instantiate: function() {
module.verbose('Storing instance of module', module);
instance = module;
$module
.data(moduleNamespace, instance)
;
},
destroy: function() {
module.verbose('Destroying previous module for', element);
$module
.removeData(moduleNamespace)
;
},
animate: function(overrideSettings) {
settings = overrideSettings || settings;
module.debug('Preparing animation', settings.animation);
if(module.is.animating()) {
if(settings.queue) {
module.queue(settings.animation);
}
return false;
}
module.save.conditions();
module.set.duration(settings.duration);
module.set.animating();
module.repaint();
$module
.addClass(className.transition)
.addClass(settings.animation)
.one(animationEnd, module.complete)
;
if(!module.has.direction() && module.can.transition()) {
module.set.direction();
}
if(!module.can.animate()) {
module.restore.conditions();
module.error(error.noAnimation);
return false;
}
module.show();
module.debug('Starting tween', settings.animation, $module.attr('class'));
},
queue: function(animation) {
module.debug('Queueing animation of', animation);
instance.queuing = true;
$module
.one(animationEnd, function() {
instance.queuing = false;
module.animate.apply(this, settings);
})
;
},
complete: function () {
module.verbose('CSS animation complete', settings.animation);
if(!module.is.looping()) {
if($module.hasClass(className.outward)) {
module.restore.conditions();
module.hide();
}
else if($module.hasClass(className.inward)) {
module.restore.conditions();
module.show();
}
else {
module.restore.conditions();
}
module.remove.animating();
}
$.proxy(settings.complete, this)();
},
repaint: function(fakeAssignment) {
module.verbose('Forcing repaint event');
fakeAssignment = element.offsetWidth;
},
has: {
direction: function(animation) {
animation = animation || settings.animation;
if( $module.hasClass(className.inward) || $module.hasClass(className.outward) ) {
return true;
}
}
},
set: {
animating: function() {
$module.addClass(className.animating);
},
direction: function() {
if($module.is(':visible')) {
module.debug('Automatically determining the direction of animation', 'Outward');
$module
.addClass(className.outward)
.removeClass(className.inward)
;
}
else {
module.debug('Automatically determining the direction of animation', 'Inward');
$module
.addClass(className.inward)
.removeClass(className.outward)
;
}
},
looping: function() {
module.debug('Transition set to loop');
$module
.addClass(className.looping)
;
},
duration: function(duration) {
duration = duration || settings.duration;
duration = (typeof duration == 'number')
? duration + 'ms'
: duration
;
module.verbose('Setting animation duration', duration);
$module
.css({
'-webkit-animation-duration': duration,
'-moz-animation-duration': duration,
'-ms-animation-duration': duration,
'-o-animation-duration': duration,
'animation-duration': duration
})
;
}
},
save: {
conditions: function() {
module.cache = {
className : $module.attr('class'),
style : $module.attr('style')
};
module.verbose('Saving original attributes', module.cache);
}
},
restore: {
conditions: function() {
if(typeof module.cache === undefined) {
module.error(error.cache);
return false;
}
if(module.cache.className) {
$module.attr('class', module.cache.className);
}
else {
$module.removeAttr('class');
}
if(module.cache.style) {
$module.attr('style', module.cache.style);
}
else {
$module.removeAttr('style');
}
if(module.is.looping()) {
module.remove.looping();
}
module.verbose('Restoring original attributes', module.cache);
}
},
remove: {
animating: function() {
$module.removeClass(className.animating);
},
looping: function() {
module.debug('Transitions are no longer looping');
$module
.removeClass(className.looping)
;
module.repaint();
}
},
get: {
settings: function(animation, duration, complete) {
// single settings object
if($.isPlainObject(animation)) {
return $.extend(true, {}, $.fn.transition.settings, animation);
}
// all arguments provided
else if(typeof complete == 'function') {
return $.extend(true, {}, $.fn.transition.settings, {
animation : animation,
complete : complete,
duration : duration
});
}
// only duration provided
else if(typeof duration == 'string' || typeof duration == 'number') {
return $.extend(true, {}, $.fn.transition.settings, {
animation : animation,
duration : duration
});
}
// duration is actually settings object
else if(typeof duration == 'object') {
return $.extend(true, {}, $.fn.transition.settings, duration, {
animation : animation
});
}
// duration is actually callback
else if(typeof duration == 'function') {
return $.extend(true, {}, $.fn.transition.settings, {
animation : animation,
complete : duration
});
}
// only animation provided
else {
return $.extend(true, {}, $.fn.transition.settings, {
animation : animation
});
}
return $.fn.transition.settings;
},
animationName: function() {
var
element = document.createElement('div'),
animations = {
'animation' :'animationName',
'OAnimation' :'oAnimationName',
'MozAnimation' :'mozAnimationName',
'WebkitAnimation' :'webkitAnimationName'
},
animation
;
for(animation in animations){
if( element.style[animation] !== undefined ){
module.verbose('Determining animation vendor name property', animations[animation]);
return animations[animation];
}
}
return false;
},
animationEvent: function() {
var
element = document.createElement('div'),
animations = {
'animation' :'animationend',
'OAnimation' :'oAnimationEnd',
'MozAnimation' :'mozAnimationEnd',
'WebkitAnimation' :'webkitAnimationEnd'
},
animation
;
for(animation in animations){
if( element.style[animation] !== undefined ){
module.verbose('Determining animation vendor end event', animations[animation]);
return animations[animation];
}
}
return false;
}
},
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')),
currentAnimation = $clone.css(animationName),
inAnimation = $clone.addClass(className.inward).css(animationName)
;
if(currentAnimation != inAnimation) {
module.debug('In/out transitions exist');
$clone.remove();
return true;
}
else {
module.debug('Static animation found');
$clone.remove();
return false;
}
}
},
is: {
animating: function() {
return $module.hasClass(className.animating);
},
looping: function() {
return $module.hasClass(className.looping);
},
visible: function() {
return $module.is(':visible');
}
},
hide: function() {
module.verbose('Hiding element');
$module
.removeClass(className.visible)
.addClass(className.transition)
.addClass(className.hidden)
;
module.repaint();
},
show: function() {
module.verbose('Showing element');
$module
.removeClass(className.hidden)
.addClass(className.transition)
.addClass(className.visible)
;
module.repaint();
},
start: function() {
module.verbose('Starting animation');
$module.removeClass(className.disabled);
},
stop: function() {
module.debug('Stopping animation');
$module.addClass(className.disabled);
},
toggle: function() {
module.debug('Toggling play status');
$module.toggleClass(className.disabled);
},
setting: function(name, value) {
if(value !== undefined) {
if( $.isPlainObject(name) ) {
$.extend(true, settings, name);
}
else {
settings[name] = value;
}
}
else {
return settings[name];
}
},
internal: function(name, value) {
if(value !== undefined) {
if( $.isPlainObject(name) ) {
$.extend(true, module, name);
}
else {
module[name] = value;
}
}
else {
return module[name];
}
},
debug: function() {
if(settings.debug) {
if(settings.performance) {
module.performance.log(arguments);
}
else {
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
module.debug.apply(console, arguments);
}
}
},
verbose: function() {
if(settings.verbose && settings.debug) {
if(settings.performance) {
module.performance.log(arguments);
}
else {
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
module.verbose.apply(console, arguments);
}
}
},
error: function() {
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
module.error.apply(console, arguments);
},
performance: {
log: function(message) {
var
currentTime,
executionTime,
previousTime
;
if(settings.performance) {
currentTime = new Date().getTime();
previousTime = time || currentTime;
executionTime = currentTime - previousTime;
time = currentTime;
performance.push({
'Element' : element,
'Name' : message[0],
'Arguments' : [].slice.call(message, 1) || '',
'Execution Time' : executionTime
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
},
display: function() {
var
title = settings.name + ':',
totalTime = 0
;
time = false;
clearTimeout(module.performance.timer);
$.each(performance, function(index, data) {
totalTime += data['Execution Time'];
});
title += ' ' + totalTime + 'ms';
if(moduleSelector) {
title += ' \'' + moduleSelector + '\'';
}
if($allModules.size() > 1) {
title += ' ' + '(' + $allModules.size() + ')';
}
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
console.groupCollapsed(title);
if(console.table) {
console.table(performance);
}
else {
$.each(performance, function(index, data) {
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
});
}
console.groupEnd();
}
performance = [];
}
},
invoke: function(query, passedArguments, context) {
var
maxDepth,
found,
response
;
passedArguments = passedArguments || queryArguments;
context = element || context;
if(typeof query == 'string' && instance !== undefined) {
query = query.split(/[\. ]/);
maxDepth = query.length - 1;
$.each(query, function(depth, value) {
var camelCaseValue = (depth != maxDepth)
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
: query
;
if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
instance = instance[value];
}
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) {
instance = instance[camelCaseValue];
}
else if( instance[value] !== undefined ) {
found = instance[value];
return false;
}
else if( instance[camelCaseValue] !== undefined ) {
found = instance[camelCaseValue];
return false;
}
else {
return false;
}
});
}
if ( $.isFunction( found ) ) {
response = found.apply(context, passedArguments);
}
else if(found !== undefined) {
response = found;
}
if($.isArray(invokedResponse)) {
invokedResponse.push(response);
}
else if(typeof invokedResponse == 'string') {
invokedResponse = [invokedResponse, response];
}
else if(response !== undefined) {
invokedResponse = response;
}
return found || false;
}
};
module.initialize();
})
;
return (invokedResponse !== undefined)
? invokedResponse
: this
;
};
$.fn.transition.settings = {
// module info
name : 'Transition',
// debug content outputted to console
debug : true,
// verbose debug output
verbose : true,
// performance data output
performance : true,
// event namespace
namespace : 'transition',
// animation complete event
complete : function() {},
// animation duration
animation : 'fade',
duration : '700ms',
// queue up animations
queue : true,
className : {
transition : 'ui transition',
animating : 'animating',
looping : 'looping',
loading : 'loading',
disabled : 'disabled',
hidden : 'hidden',
visible : 'visible',
inward : 'in',
outward : 'out'
},
// possible errors
error: {
noAnimation : 'There is no css animation matching the one you specified.',
method : 'The method you called is not defined'
}
};
})( jQuery, window , document );