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.

361 lines
12 KiB

4 years ago
  1. /*!
  2. * animsition v4.0.2
  3. * A simple and easy jQuery plugin for CSS animated page transitions.
  4. * http://blivesta.github.io/animsition
  5. * License : MIT
  6. * Author : blivesta (http://blivesta.com/)
  7. */
  8. ;(function (factory) {
  9. 'use strict';
  10. if (typeof define === 'function' && define.amd) {
  11. define(['jquery'], factory);
  12. } else if (typeof exports === 'object') {
  13. module.exports = factory(require('jquery'));
  14. } else {
  15. factory(jQuery);
  16. }
  17. }(function ($) {
  18. 'use strict';
  19. var namespace = 'animsition';
  20. var __ = {
  21. init: function(options){
  22. options = $.extend({
  23. inClass : 'fade-in',
  24. outClass : 'fade-out',
  25. inDuration : 1500,
  26. outDuration : 800,
  27. linkElement : '.animsition-link',
  28. // e.g. linkElement : 'a:not([target="_blank"]):not([href^="#"])'
  29. loading : true,
  30. loadingParentElement : 'body', //animsition wrapper element
  31. loadingClass : 'animsition-loading',
  32. loadingInner : '', // e.g '<img src="loading.svg" />'
  33. timeout : false,
  34. timeoutCountdown : 5000,
  35. onLoadEvent : true,
  36. browser : [ 'animation-duration', '-webkit-animation-duration'],
  37. // "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
  38. // The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
  39. overlay : false,
  40. overlayClass : 'animsition-overlay-slide',
  41. overlayParentElement : 'body',
  42. transition : function(url){ window.location.href = url; }
  43. }, options);
  44. __.settings = {
  45. timer: false,
  46. data: {
  47. inClass: 'animsition-in-class',
  48. inDuration: 'animsition-in-duration',
  49. outClass: 'animsition-out-class',
  50. outDuration: 'animsition-out-duration',
  51. overlay: 'animsition-overlay'
  52. },
  53. events: {
  54. inStart: 'animsition.inStart',
  55. inEnd: 'animsition.inEnd',
  56. outStart: 'animsition.outStart',
  57. outEnd: 'animsition.outEnd'
  58. }
  59. };
  60. // Remove the "Animsition" in a browser
  61. // that does not support the "animaition-duration".
  62. var support = __.supportCheck.call(this, options);
  63. if(!support && options.browser.length > 0){
  64. if(!support || !this.length){
  65. // If do not have a console object to object window
  66. if (!('console' in window)) {
  67. window.console = {};
  68. window.console.log = function(str){ return str; };
  69. }
  70. if(!this.length) console.log('Animsition: Element does not exist on page.');
  71. if(!support) console.log('Animsition: Does not support this browser.');
  72. return __.destroy.call(this);
  73. }
  74. }
  75. var overlayMode = __.optionCheck.call(this, options);
  76. if (overlayMode && $('.' + options.overlayClass).length <= 0) {
  77. __.addOverlay.call(this, options);
  78. }
  79. if (options.loading && $('.' + options.loadingClass).length <= 0) {
  80. __.addLoading.call(this, options);
  81. }
  82. return this.each(function(){
  83. var _this = this;
  84. var $this = $(this);
  85. var $window = $(window);
  86. var $document = $(document);
  87. var data = $this.data(namespace);
  88. if (!data) {
  89. options = $.extend({}, options);
  90. $this.data(namespace, { options: options });
  91. if(options.timeout) __.addTimer.call(_this);
  92. if(options.onLoadEvent) {
  93. $window.on('load.' + namespace, function() {
  94. if(__.settings.timer) clearTimeout(__.settings.timer);
  95. __.in.call(_this);
  96. });
  97. }
  98. $window.on('pageshow.' + namespace, function(event) {
  99. if(event.originalEvent.persisted) __.in.call(_this);
  100. });
  101. // Firefox back button issue #4
  102. $window.on('unload.' + namespace, function() { });
  103. $document.on('click.' + namespace, options.linkElement, function(event) {
  104. event.preventDefault();
  105. var $self = $(this);
  106. var url = $self.attr('href');
  107. // middle mouse button issue #24
  108. // if(middle mouse button || command key || shift key || win control key)
  109. if (event.which === 2 || event.metaKey || event.shiftKey || navigator.platform.toUpperCase().indexOf('WIN') !== -1 && event.ctrlKey) {
  110. window.open(url, '_blank');
  111. } else {
  112. __.out.call(_this, $self, url);
  113. }
  114. });
  115. }
  116. }); // end each
  117. },
  118. addOverlay: function(options){
  119. $(options.overlayParentElement)
  120. .prepend('<div class="' + options.overlayClass + '"></div>');
  121. },
  122. addLoading: function(options){
  123. $(options.loadingParentElement)
  124. .append('<div class="' + options.loadingClass + '">' + options.loadingInner + '</div>');
  125. },
  126. removeLoading: function(){
  127. var $this = $(this);
  128. var options = $this.data(namespace).options;
  129. var $loading = $(options.loadingParentElement).children('.' + options.loadingClass);
  130. $loading.fadeOut().remove();
  131. },
  132. addTimer: function(){
  133. var _this = this;
  134. var $this = $(this);
  135. var options = $this.data(namespace).options;
  136. __.settings.timer = setTimeout(function(){
  137. __.in.call(_this);
  138. $(window).off('load.' + namespace);
  139. }, options.timeoutCountdown);
  140. },
  141. supportCheck: function(options){
  142. var $this = $(this);
  143. var props = options.browser;
  144. var propsNum = props.length;
  145. var support = false;
  146. if (propsNum === 0) {
  147. support = true;
  148. }
  149. for (var i = 0; i < propsNum; i++) {
  150. if (typeof $this.css(props[i]) === 'string') {
  151. support = true;
  152. break;
  153. }
  154. }
  155. return support;
  156. },
  157. optionCheck: function(options){
  158. var $this = $(this);
  159. var overlayMode;
  160. if(options.overlay || $this.data(__.settings.data.overlay)){
  161. overlayMode = true;
  162. } else {
  163. overlayMode = false;
  164. }
  165. return overlayMode;
  166. },
  167. animationCheck : function(data, stateClass, stateIn){
  168. var $this = $(this);
  169. var options = $this.data(namespace).options;
  170. var dataType = typeof data;
  171. var dataDuration = !stateClass && dataType === 'number';
  172. var dataClass = stateClass && dataType === 'string' && data.length > 0;
  173. if(dataDuration || dataClass){
  174. data = data;
  175. } else if(stateClass && stateIn) {
  176. data = options.inClass;
  177. } else if(!stateClass && stateIn) {
  178. data = options.inDuration;
  179. } else if(stateClass && !stateIn) {
  180. data = options.outClass;
  181. } else if(!stateClass && !stateIn) {
  182. data = options.outDuration;
  183. }
  184. return data;
  185. },
  186. in: function(){
  187. var _this = this;
  188. var $this = $(this);
  189. var options = $this.data(namespace).options;
  190. var thisInDuration = $this.data(__.settings.data.inDuration);
  191. var thisInClass = $this.data(__.settings.data.inClass);
  192. var inDuration = __.animationCheck.call(_this, thisInDuration, false, true);
  193. var inClass = __.animationCheck.call(_this, thisInClass, true, true);
  194. var overlayMode = __.optionCheck.call(_this, options);
  195. var outClass = $this.data(namespace).outClass;
  196. if(options.loading) __.removeLoading.call(_this);
  197. if(outClass) $this.removeClass(outClass);
  198. if(overlayMode) {
  199. __.inOverlay.call(_this, inClass, inDuration);
  200. } else {
  201. __.inDefault.call(_this, inClass, inDuration);
  202. }
  203. },
  204. inDefault: function(inClass, inDuration){
  205. var $this = $(this);
  206. $this
  207. .css({ 'animation-duration' : inDuration + 'ms' })
  208. .addClass(inClass)
  209. .trigger(__.settings.events.inStart)
  210. .animateCallback(function(){
  211. $this
  212. .removeClass(inClass)
  213. .css({ 'opacity' : 1 })
  214. .trigger(__.settings.events.inEnd);
  215. });
  216. },
  217. inOverlay: function(inClass, inDuration){
  218. var $this = $(this);
  219. var options = $this.data(namespace).options;
  220. $this
  221. .css({ 'opacity' : 1 })
  222. .trigger(__.settings.events.inStart);
  223. $(options.overlayParentElement)
  224. .children('.' + options.overlayClass)
  225. .css({ 'animation-duration' : inDuration + 'ms' })
  226. .addClass(inClass)
  227. .animateCallback(function(){
  228. $this
  229. .trigger(__.settings.events.inEnd);
  230. });
  231. },
  232. out: function($self, url){
  233. var _this = this;
  234. var $this = $(this);
  235. var options = $this.data(namespace).options;
  236. var selfOutClass = $self.data(__.settings.data.outClass);
  237. var thisOutClass = $this.data(__.settings.data.outClass);
  238. var selfOutDuration = $self.data(__.settings.data.outDuration);
  239. var thisOutDuration = $this.data(__.settings.data.outDuration);
  240. var isOutClass = selfOutClass ? selfOutClass : thisOutClass;
  241. var isOutDuration = selfOutDuration ? selfOutDuration : thisOutDuration;
  242. var outClass = __.animationCheck.call(_this, isOutClass, true, false);
  243. var outDuration = __.animationCheck.call(_this, isOutDuration, false, false);
  244. var overlayMode = __.optionCheck.call(_this, options);
  245. $this.data(namespace).outClass = outClass;
  246. if(overlayMode) {
  247. __.outOverlay.call(_this, outClass, outDuration, url);
  248. } else {
  249. __.outDefault.call(_this, outClass, outDuration, url);
  250. }
  251. },
  252. outDefault: function(outClass, outDuration, url){
  253. var $this = $(this);
  254. var options = $this.data(namespace).options;
  255. // (outDuration + 1) | #55 outDuration: 0 crashes on Safari only
  256. $this
  257. .css({ 'animation-duration' : (outDuration + 1) + 'ms' })
  258. .addClass(outClass)
  259. .trigger(__.settings.events.outStart)
  260. .animateCallback(function(){
  261. $this.trigger(__.settings.events.outEnd);
  262. options.transition(url);
  263. });
  264. },
  265. outOverlay: function(outClass, outDuration, url){
  266. var _this = this;
  267. var $this = $(this);
  268. var options = $this.data(namespace).options;
  269. var thisInClass = $this.data(__.settings.data.inClass);
  270. var inClass = __.animationCheck.call(_this, thisInClass, true, true);
  271. // (outDuration + 1) | #55 outDuration: 0 crashes animsition on Safari only
  272. $(options.overlayParentElement)
  273. .children('.' + options.overlayClass)
  274. .css({ 'animation-duration' : (outDuration + 1) + 'ms' })
  275. .removeClass(inClass)
  276. .addClass(outClass)
  277. .trigger(__.settings.events.outStart)
  278. .animateCallback(function(){
  279. $this.trigger(__.settings.events.outEnd);
  280. options.transition(url);
  281. });
  282. },
  283. destroy: function(){
  284. return this.each(function(){
  285. var $this = $(this);
  286. $(window).off('.'+ namespace);
  287. $this
  288. .css({'opacity': 1})
  289. .removeData(namespace);
  290. });
  291. }
  292. };
  293. $.fn.animateCallback = function(callback){
  294. var end = 'animationend webkitAnimationEnd';
  295. return this.each(function() {
  296. var $this = $(this);
  297. $this.on(end, function(){
  298. $this.off(end);
  299. return callback.call(this);
  300. });
  301. });
  302. };
  303. $.fn.animsition = function(method){
  304. if ( __[method] ) {
  305. return __[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
  306. } else if ( typeof method === 'object' || ! method ) {
  307. return __.init.apply( this, arguments );
  308. } else {
  309. $.error( 'Method ' + method + ' does not exist on jQuery.'+namespace);
  310. }
  311. };
  312. }));