PageRenderTime 60ms CodeModel.GetById 24ms RepoModel.GetById 1ms app.codeStats 0ms

/public/altair/bower_components/uikit/js/components/slideset.js

https://gitlab.com/dima-antonenko/projectX
JavaScript | 503 lines | 338 code | 160 blank | 5 comment | 78 complexity | d2efc25ae0eafcb1d95ebdbc1f256b41 MD5 | raw file
  1. /*! UIkit 2.21.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
  2. (function(addon) {
  3. var component;
  4. if (window.UIkit) {
  5. component = addon(UIkit);
  6. }
  7. if (typeof define == "function" && define.amd) {
  8. define("uikit-slideset", ["uikit"], function(){
  9. return component || addon(UIkit);
  10. });
  11. }
  12. })(function(UI){
  13. "use strict";
  14. var Animations;
  15. UI.component('slideset', {
  16. defaults: {
  17. default : 1,
  18. animation : 'fade',
  19. duration : 200,
  20. filter : '',
  21. delay : false,
  22. controls : false,
  23. autoplay : false,
  24. autoplayInterval : 7000,
  25. pauseOnHover : true
  26. },
  27. sets: [],
  28. boot: function() {
  29. // auto init
  30. UI.ready(function(context) {
  31. UI.$("[data-uk-slideset]", context).each(function(){
  32. var ele = UI.$(this);
  33. if(!ele.data("slideset")) {
  34. var plugin = UI.slideset(ele, UI.Utils.options(ele.attr("data-uk-slideset")));
  35. }
  36. });
  37. });
  38. },
  39. init: function() {
  40. var $this = this;
  41. this.activeSet = false;
  42. this.list = this.element.find('.uk-slideset');
  43. this.nav = this.element.find('.uk-slideset-nav');
  44. this.controls = this.options.controls ? UI.$(this.options.controls) : this.element;
  45. UI.$win.on("resize load", UI.Utils.debounce(function() {
  46. $this.updateSets();
  47. }, 100));
  48. $this.list.addClass('uk-grid-width-1-'+$this.options.default);
  49. ['xlarge', 'large', 'medium', 'small'].forEach(function(bp) {
  50. if (!$this.options[bp]) {
  51. return;
  52. }
  53. $this.list.addClass('uk-grid-width-'+bp+'-1-'+$this.options[bp]);
  54. });
  55. this.on("click.uikit.slideset", '[data-uk-slideset-item]', function(e) {
  56. e.preventDefault();
  57. if ($this.animating) {
  58. return;
  59. }
  60. var set = UI.$(this).attr('data-uk-slideset-item');
  61. if ($this.activeSet === set) return;
  62. switch(set) {
  63. case 'next':
  64. case 'previous':
  65. $this[set=='next' ? 'next':'previous']();
  66. break;
  67. default:
  68. $this.show(parseInt(set, 10));
  69. }
  70. });
  71. this.controls.on('click.uikit.slideset', '[data-uk-filter]', function(e) {
  72. var ele = UI.$(this);
  73. if (ele.parent().hasClass('uk-slideset')) {
  74. return;
  75. }
  76. e.preventDefault();
  77. if ($this.animating || $this.currentFilter == ele.attr('data-uk-filter')) {
  78. return;
  79. }
  80. $this.updateFilter(ele.attr('data-uk-filter'));
  81. $this._hide().then(function(){
  82. $this.updateSets(true, true);
  83. });
  84. });
  85. this.on('swipeRight swipeLeft', function(e) {
  86. $this[e.type=='swipeLeft' ? 'next' : 'previous']();
  87. });
  88. this.updateFilter(this.options.filter);
  89. this.updateSets();
  90. this.element.on({
  91. mouseenter: function() { if ($this.options.pauseOnHover) $this.hovering = true; },
  92. mouseleave: function() { $this.hovering = false; }
  93. });
  94. // Set autoplay
  95. if (this.options.autoplay) {
  96. this.start();
  97. }
  98. },
  99. updateSets: function(animate, force) {
  100. var $this = this, visible = this.visible, i;
  101. this.visible = this.getVisibleOnCurrenBreakpoint();
  102. if (visible == this.visible && !force) {
  103. return;
  104. }
  105. this.children = this.list.children().hide();
  106. this.items = this.getItems();
  107. this.sets = array_chunk(this.items, this.visible);
  108. for (i=0;i<this.sets.length;i++) {
  109. this.sets[i].css({'display': 'none'});
  110. }
  111. // update nav
  112. if (this.nav.length && this.nav.empty()) {
  113. for (i=0;i<this.sets.length;i++) {
  114. this.nav.append('<li data-uk-slideset-item="'+i+'"><a></a></li>');
  115. }
  116. this.nav[this.nav.children().length==1 ? 'addClass':'removeClass']('uk-invisible');
  117. }
  118. this.activeSet = false;
  119. this.show(0, !animate);
  120. },
  121. updateFilter: function(currentfilter) {
  122. var $this = this, filter;
  123. this.currentFilter = currentfilter;
  124. this.controls.find('[data-uk-filter]').each(function(){
  125. filter = UI.$(this);
  126. if (!filter.parent().hasClass('uk-slideset')) {
  127. if (filter.attr('data-uk-filter') == $this.currentFilter) {
  128. filter.addClass('uk-active');
  129. } else {
  130. filter.removeClass('uk-active');
  131. }
  132. }
  133. });
  134. },
  135. getVisibleOnCurrenBreakpoint: function() {
  136. var breakpoint = null,
  137. tmp = UI.$('<div style="position:absolute;height:1px;top:-1000px;width:100px"><div></div></div>').appendTo('body'),
  138. testdiv = tmp.children().eq(0),
  139. breakpoints = this.options;
  140. ['xlarge', 'large', 'medium', 'small'].forEach(function(bp) {
  141. if (!breakpoints[bp] || breakpoint) {
  142. return;
  143. }
  144. tmp.attr('class', 'uk-grid-width-'+bp+'-1-2').width();
  145. if (testdiv.width() == 50) {
  146. breakpoint = bp;
  147. }
  148. });
  149. tmp.remove();
  150. return this.options[breakpoint] || this.options['default'];
  151. },
  152. getItems: function() {
  153. var items = [], filter;
  154. if (this.currentFilter) {
  155. filter = this.currentFilter || [];
  156. if (typeof(filter) === 'string') {
  157. filter = filter.split(/,/).map(function(item){ return item.trim(); });
  158. }
  159. this.children.each(function(index){
  160. var ele = UI.$(this), f = ele.attr('data-uk-filter'), infilter = filter.length ? false : true;
  161. if (f) {
  162. f = f.split(/,/).map(function(item){ return item.trim(); });
  163. filter.forEach(function(item){
  164. if (f.indexOf(item) > -1) infilter = true;
  165. });
  166. }
  167. if(infilter) items.push(ele[0]);
  168. });
  169. items = UI.$(items);
  170. } else {
  171. items = this.list.children();
  172. }
  173. return items;
  174. },
  175. show: function(setIndex, noanimate, dir) {
  176. var $this = this;
  177. if (this.activeSet === setIndex || this.animating) {
  178. return;
  179. }
  180. dir = dir || (setIndex < this.activeSet ? -1:1);
  181. var current = this.sets[this.activeSet] || [],
  182. next = this.sets[setIndex],
  183. animation = this._getAnimation();
  184. if (noanimate || !UI.support.animation) {
  185. animation = Animations.none;
  186. }
  187. this.animating = true;
  188. if (this.nav.length) {
  189. this.nav.children().removeClass('uk-active').eq(setIndex).addClass('uk-active');
  190. }
  191. animation.apply($this, [current, next, dir]).then(function(){
  192. UI.Utils.checkDisplay(next, true);
  193. $this.children.hide().removeClass('uk-active');
  194. next.addClass('uk-active').css({'display': '', 'opacity':''});
  195. $this.animating = false;
  196. $this.activeSet = setIndex;
  197. UI.Utils.checkDisplay(next, true);
  198. $this.trigger('show.uk.slideset', [next]);
  199. });
  200. },
  201. _getAnimation: function() {
  202. var $this = this,
  203. animation = Animations[this.options.animation] || Animations.none;
  204. if (!UI.support.animation) {
  205. animation = Animations.none;
  206. }
  207. return animation;
  208. },
  209. _hide: function() {
  210. var $this = this,
  211. current = this.sets[this.activeSet] || [],
  212. animation = this._getAnimation();
  213. this.animating = true;
  214. return animation.apply($this, [current, [], 1]).then(function(){
  215. $this.animating = false;
  216. });
  217. },
  218. next: function() {
  219. this.show(this.sets[this.activeSet + 1] ? (this.activeSet + 1) : 0, false, 1);
  220. },
  221. previous: function() {
  222. this.show(this.sets[this.activeSet - 1] ? (this.activeSet - 1) : (this.sets.length - 1), false, -1);
  223. },
  224. start: function() {
  225. this.stop();
  226. var $this = this;
  227. this.interval = setInterval(function() {
  228. if (!$this.hovering && !$this.animating) $this.next();
  229. }, this.options.autoplayInterval);
  230. },
  231. stop: function() {
  232. if (this.interval) clearInterval(this.interval);
  233. }
  234. });
  235. Animations = {
  236. 'none': function() {
  237. var d = UI.$.Deferred();
  238. d.resolve();
  239. return d.promise();
  240. },
  241. 'fade': function(current, next) {
  242. return coreAnimation.apply(this, ['uk-animation-fade', current, next]);
  243. },
  244. 'slide-bottom': function(current, next) {
  245. return coreAnimation.apply(this, ['uk-animation-slide-bottom', current, next]);
  246. },
  247. 'slide-top': function(current, next) {
  248. return coreAnimation.apply(this, ['uk-animation-slide-top', current, next]);
  249. },
  250. 'slide-vertical': function(current, next, dir) {
  251. var anim = ['uk-animation-slide-top', 'uk-animation-slide-bottom'];
  252. if (dir == -1) {
  253. anim.reverse();
  254. }
  255. return coreAnimation.apply(this, [anim, current, next]);
  256. },
  257. 'slide-horizontal': function(current, next, dir) {
  258. var anim = ['uk-animation-slide-right', 'uk-animation-slide-left'];
  259. if (dir == -1) {
  260. anim.reverse();
  261. }
  262. return coreAnimation.apply(this, [anim, current, next, dir]);
  263. },
  264. 'scale': function(current, next) {
  265. return coreAnimation.apply(this, ['uk-animation-scale-up', current, next]);
  266. }
  267. };
  268. UI.slideset.animations = Animations;
  269. // helpers
  270. function coreAnimation(cls, current, next, dir) {
  271. var d = UI.$.Deferred(),
  272. delay = (this.options.delay === false) ? Math.floor(this.options.duration/2) : this.options.delay,
  273. $this = this, clsIn, clsOut, release, i;
  274. dir = dir || 1;
  275. this.element.css('min-height', this.element.height());
  276. if (next[0]===current[0]) {
  277. d.resolve();
  278. return d.promise();
  279. }
  280. if (typeof(cls) == 'object') {
  281. clsIn = cls[0];
  282. clsOut = cls[1] || cls[0];
  283. } else {
  284. clsIn = cls;
  285. clsOut = clsIn;
  286. }
  287. release = function() {
  288. if (current && current.length) {
  289. current.hide().removeClass(clsOut+' uk-animation-reverse').css({'opacity':'', 'animation-delay': '', 'animation':''});
  290. }
  291. if (!next.length) {
  292. d.resolve();
  293. return;
  294. }
  295. for (i=0;i<next.length;i++) {
  296. next.eq(dir == 1 ? i:(next.length - i)-1).css('animation-delay', (i*delay)+'ms');
  297. }
  298. next.addClass(clsIn)[dir==1 ? 'last':'first']().one(UI.support.animation.end, function() {
  299. next.removeClass(''+clsIn+'').css({opacity:'', display:'', 'animation-delay':'', 'animation':''});
  300. d.resolve();
  301. $this.element.css('min-height', '');
  302. }).end().css('display', '');
  303. };
  304. if (next.length) {
  305. next.css('animation-duration', this.options.duration+'ms');
  306. }
  307. if (current && current.length) {
  308. current.css('animation-duration', this.options.duration+'ms')[dir==1 ? 'last':'first']().one(UI.support.animation.end, function() {
  309. release();
  310. });
  311. for (i=0;i<current.length;i++) {
  312. (function (index, ele){
  313. setTimeout(function(){
  314. ele.css('display', 'none').css('display', '').css('opacity', 0).addClass(clsOut+' uk-animation-reverse');
  315. }.bind(this), i * delay);
  316. })(i, current.eq(dir == 1 ? i:(current.length - i)-1));
  317. }
  318. } else {
  319. release();
  320. }
  321. return d.promise();
  322. }
  323. function array_chunk(input, size) {
  324. var x, i = 0, c = -1, l = input.length || 0, n = [];
  325. if (size < 1) return null;
  326. while (i < l) {
  327. x = i % size;
  328. if(x) {
  329. n[c][x] = input[i];
  330. } else {
  331. n[++c] = [input[i]];
  332. }
  333. i++;
  334. }
  335. i = 0;
  336. l = n.length;
  337. while (i < l) {
  338. n[i] = jQuery(n[i]);
  339. i++;
  340. }
  341. return n;
  342. }
  343. });