(function($){
var animations={
'move-up': {
timeout: 200
},
bounce: {
timeout: 100
},
'fade-in': {
timeout: 100
},
scale: {
timeout: 100
},
flip: {
timeout: 100
},
'fall-perspective': {
timeout: 100
},
};
var prefixes='Webkit Moz ms Ms O'.split(' ');
var docElemStyle=document.documentElement.style;
function getStyleProperty(propName){
if(!propName){
return;
}
if(typeof docElemStyle[ propName ]==='string'){
return propName;
}
propName=propName.charAt(0).toUpperCase() + propName.slice(1);
var prefixed;
for(var i=0, len=prefixes.length; i < len; i++){
prefixed=prefixes[i] + propName;
if(typeof docElemStyle[ prefixed ]==='string'){
return prefixed;
}}
}
var transitionProperty=getStyleProperty('transition');
var transitionEndEvent={
WebkitTransition: 'webkitTransitionEnd',
MozTransition: 'transitionend',
OTransition: 'otransitionend',
transition: 'transitionend'
}[ transitionProperty ];
function ItemsAnimations(el, options){
var self=this;
this.el=el;
this.$el=$(el);
this.options={
itemSelector: '',
scrollMonitor: false,
firstItemStatic: false
};
$.extend(this.options, options);
this.$el.data('itemsAnimations', this);
self.initialize();
}
$.fn.itemsAnimations=function(options){
if(typeof options==='string'){
var instance=$(this.get(0)).data('itemsAnimations');
if(!instance){
return false;
}
if(options==='instance'){
return instance;
}}else{
return new ItemsAnimations(this.get(0), options);
}}
ItemsAnimations.prototype={
initialize: function(){
var self=this;
this.queue=[];
this.queue_is_run=false;
this.watchers={};
this.animation=this.getAnimation();
if(!this.animation||($(window).width() < 768&&!this.$el.hasClass('enable-animation-mobile'))){
this.animationName='disabled';
this.animation=this.getAnimationByName('disabled');
}
if(this.options.firstItemStatic){
this.firstStatisItem=$(this.options.itemSelector + ':first', this.$el);
this.firstStatisItem.removeClass('item-animations-not-inited');
}
if(this.animationName=='disabled'){
$(this.options.itemSelector, this.$el).removeClass('item-animations-not-inited');
}},
initTimer: function(){
var self=this;
this.timer=document.createElement('div');
this.timer.className='items-animations-timer-element';
if(this.animation.timeout > 0){
this.timer.setAttribute("style",
"transition-duration: " + this.animation.timeout + "ms; -webkit-transition-duration: " + this.animation.timeout + "ms; -moz-transition-duration: " + this.animation.timeout + "ms; -o-transition-duration: " + this.animation.timeout + "ms;"
);
}
document.body.appendChild(this.timer);
this.timerCallback=function(){};
$(this.timer).bind(transitionEndEvent, function(event){
self.timerCallback();
});
this.timer.className +=' start-timer';
},
startTimer: function(callback){
setTimeout(callback, this.animation.timeout);
},
startTimerOld: function(callback){
this.timerCallback=callback;
if(this.timer.className.indexOf('start-timer')!=-1){
this.timer.className=this.timer.className.replace(' start-timer', '');
}else{
this.timer.className +=' start-timer';
}},
show: function($items, forceUseScrollMonitor){
var self=this;
if(forceUseScrollMonitor===undefined){
forceUseScrollMonitor=false;
}
if(this.animationName=='disabled'){
$(this.options.itemSelector, this.$el).removeClass('item-animations-not-inited');
return false;
}
if($items==undefined){
$items=$(this.options.itemSelector, this.$el);
}
$items.not('.item-animations-inited').each(function(index){
var $this=$(this);
if(self.options.firstItemStatic&&self.firstStatisItem&&self.firstStatisItem.get(0)==this){
$this.addClass('item-animations-inited');
return;
}
$this.addClass('item-animations-inited');
if((self.options.scrollMonitor||forceUseScrollMonitor)&&window.scrollMonitor!==undefined&&this.animationName!='disabled'){
var watcher=scrollMonitor.create(this, -50);
watcher.enterViewport(function(){
var watcher=this;
self.showItem($this, watcher);
});
self.watchers[ watcher.uid ]=watcher;
}else{
self.showItem($this);
}});
$(this.options.itemSelector, this.$el).not('.item-animations-inited').removeClass('item-animations-not-inited');
},
reinitItems: function($items){
$items.removeClass('start-animation item-animations-inited item-animations-loading before-start').addClass('item-animations-not-inited');
this.clear();
},
getAnimationName: function(){
var m=this.$el[0].className.match(/item-animation-(\S+)/);
if(!m){
return '';
}
return m[1];
},
getAnimation: function(){
this.animationName=this.getAnimationName();
return this.getAnimationByName(this.animationName);
},
getAnimationByName: function(name){
if(!name||animations[name]==undefined){
return false;
}
return animations[name];
},
showItem: function($item, watcher){
var self=this;
if($item.hasClass('item-animations-loading')){
return false;
}
$item.addClass('before-start');
function showItemCallback(){
if($item.length==0){
return false;
}
self.animate($item);
if(watcher!=undefined){
self.destroyWatcher(watcher);
}}
$item.addClass('item-animations-loading');
if(this.animation.timeout > 0){
this.queueAdd(showItemCallback, this.animation.timeout);
}else{
showItemCallback();
}},
destroyWatcher: function(watcher){
if(this.watchers[ watcher.uid ]!=undefined){
delete this.watchers[ watcher.uid ];
}
watcher.destroy();
},
animate: function($item, animation){
$item.bind(transitionEndEvent, function(event){
var target=event.target||event.srcElement;
if(target!=$item[0]){
return;
}
$item.unbind(transitionEndEvent);
$item.removeClass('before-start start-animation');
});
$item.removeClass('item-animations-loading item-animations-not-inited').addClass('start-animation');
},
queueAdd: function(callback, timeout){
var self=this;
this.queue.push({
callback: callback,
timeout: timeout
});
if(this.queue.length==1&&!this.queue_is_run){
this.startTimer(function(){
self.queueNext();
});
}},
queueNext: function(){
var self=this;
if(this.queue.length==0){
return false;
}
var next_action=this.queue.shift();
if(next_action==undefined){
return false;
}
this.queue_is_run=true;
next_action.callback();
this.startTimer(function(){
self.queue_is_run=false;
self.queueNext();
});
},
clear: function(){
this.queue=[];
this.queue_is_run=false;
for (var watcher_uid in this.watchers){
if(this.watchers.hasOwnProperty(watcher_uid)){
this.destroyWatcher(this.watchers[watcher_uid]);
}}
this.watchers=[];
}};})(jQuery);