| | |
| | | /*! |
| | | * 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); |
| | | } |
| | | }; |
| | | /*!
|
| | | * 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); |