* animsition v3.4.3
* http://blivesta.github.io/animsition/
* Licensed under MIT
* Author : blivesta
* http://blivesta.com/
*/
(function($) {
"use strict";
var namespace = "animsition";
var methods = {
init: function(options) {
options = $.extend({
inClass: "fade-in",
outClass: "fade-out",
inDuration: 1500,
outDuration: 800,
linkElement: ".animsition-link",
loading: true,
loadingParentElement: "body",
loadingClass: "animsition-loading",
unSupportCss: [ "animation-duration", "-webkit-animation-duration", "-o-animation-duration" ],
overlay: false,
overlayClass: "animsition-overlay-slide",
overlayParentElement: "body"
}, options);
var support = methods.supportCheck.call(this, options);
if (!support) {
if (!("console" in window)) {
window.console = {};
window.console.log = function(str) {
return str;
};
}
console.log("Animsition does not support this browser.");
return methods.destroy.call(this);
}
var overlayMode = methods.optionCheck.call(this, options);
if (overlayMode) {
methods.addOverlay.call(this, options);
}
if (options.loading) {
methods.addLoading.call(this, options);
}
return this.each(function() {
var _this = this;
var $this = $(this);
var $window = $(window);
var data = $this.data(namespace);
if (!data) {
options = $.extend({}, options);
$this.data(namespace, {
options: options
});
$window.on("load." + namespace + " pageshow." + namespace, function() {
methods.pageIn.call(_this);
});
$window.on("unload." + namespace, function() {});
$(options.linkElement).on("click." + namespace, function(event) {
event.preventDefault();
var $self = $(this);
methods.pageOut.call(_this, $self);
});
}
});
},
addOverlay: function(options) {
$(options.overlayParentElement).prepend('<div class="' + options.overlayClass + '"></div>');
},
addLoading: function(options) {
$(options.loadingParentElement).append('<div class="' + options.loadingClass + '"></div>');
},
removeLoading: function() {
var $this = $(this);
var options = $this.data(namespace).options;
var $loading = $(options.loadingParentElement).children("." + options.loadingClass);
$loading.fadeOut().remove();
},
supportCheck: function(options) {
var $this = $(this);
var props = options.unSupportCss;
var propsNum = props.length;
var support = false;
if (propsNum === 0) {
support = true;
}
for (var i = 0; i < propsNum; i++) {
if (typeof $this.css(props[i]) === "string") {
support = true;
break;
}
}
return support;
},
optionCheck: function(options) {
var $this = $(this);
var overlayMode;
if (options.overlay || $this.data("animsition-overlay")) {
overlayMode = true;
} else {
overlayMode = false;
}
return overlayMode;
},
animationCheck: function(data, stateClass, stateIn) {
var $this = $(this);
var options = $this.data(namespace).options;
var dataType = typeof data;
var dataDuration = !stateClass && dataType === "number";
var dataClass = stateClass && dataType === "string" && data.length > 0;
if (dataDuration || dataClass) {
data = data;
} else if (stateClass && stateIn) {
data = options.inClass;
} else if (!stateClass && stateIn) {
data = options.inDuration;
} else if (stateClass && !stateIn) {
data = options.outClass;
} else if (!stateClass && !stateIn) {
data = options.outDuration;
}
return data;
},
pageIn: function() {
var _this = this;
var $this = $(this);
var options = $this.data(namespace).options;
var thisInDuration = $this.data("animsition-in-duration");
var thisInClass = $this.data("animsition-in");
var inDuration = methods.animationCheck.call(_this, thisInDuration, false, true);
var inClass = methods.animationCheck.call(_this, thisInClass, true, true);
var overlayMode = methods.optionCheck.call(_this, options);
if (options.loading) {
methods.removeLoading.call(_this);
}
if (overlayMode) {
methods.pageInOverlay.call(_this, inClass, inDuration);
} else {
methods.pageInBasic.call(_this, inClass, inDuration);
}
},
pageInBasic: function(inClass, inDuration) {
var $this = $(this);
$this.css({
"animation-duration": inDuration / 1e3 + "s"
}).addClass(inClass).animateCallback(function() {
$this.removeClass(inClass).css({
opacity: 1
});
});
},
pageInOverlay: function(inClass, inDuration) {
var $this = $(this);
var options = $this.data(namespace).options;
$this.css({
opacity: 1
});
$(options.overlayParentElement).children("." + options.overlayClass).css({
"animation-duration": inDuration / 1e3 + "s"
}).addClass(inClass);
},
pageOut: function($self) {
var _this = this;
var $this = $(this);
var options = $this.data(namespace).options;
var selfOutClass = $self.data("animsition-out");
var thisOutClass = $this.data("animsition-out");
var selfOutDuration = $self.data("animsition-out-duration");
var thisOutDuration = $this.data("animsition-out-duration");
var isOutClass = selfOutClass ? selfOutClass : thisOutClass;
var isOutDuration = selfOutDuration ? selfOutDuration : thisOutDuration;
var outClass = methods.animationCheck.call(_this, isOutClass, true, false);
var outDuration = methods.animationCheck.call(_this, isOutDuration, false, false);
var overlayMode = methods.optionCheck.call(_this, options);
var url = $self.attr("href");
if (overlayMode) {
methods.pageOutOverlay.call(_this, outClass, outDuration, url);
} else {
methods.pageOutBasic.call(_this, outClass, outDuration, url);
}
},
pageOutBasic: function(outClass, outDuration, url) {
var $this = $(this);
$this.css({
"animation-duration": outDuration / 1e3 + "s"
}).addClass(outClass).animateCallback(function() {
location.href = url;
});
},
pageOutOverlay: function(outClass, outDuration, url) {
var _this = this;
var $this = $(this);
var options = $this.data(namespace).options;
var thisInClass = $this.data("animsition-in");
var inClass = methods.animationCheck.call(_this, thisInClass, true, true);
$(options.overlayParentElement).children("." + options.overlayClass).css({
"animation-duration": outDuration / 1e3 + "s"
}).removeClass(inClass).addClass(outClass).animateCallback(function() {
$this.css({
opacity: 0
});
location.href = url;
});
},
destroy: function() {
return this.each(function() {
var $this = $(this);
$(window).unbind("." + namespace);
$this.css({
opacity: 1
}).removeData(namespace);
});
}
};
$.fn.animateCallback = function(callback) {
var end = "animationend webkitAnimationEnd mozAnimationEnd oAnimationEnd MSAnimationEnd";
return this.each(function() {
$(this).bind(end, function() {
$(this).unbind(end);
return callback.call(this);
});
});
};
$.fn.animsition = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === "object" || !method) {
return methods.init.apply(this, arguments);
} else {
$.error("Method " + method + " does not exist on jQuery." + namespace);
}
};
})(jQuery);