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