PageRenderTime 49ms CodeModel.GetById 16ms RepoModel.GetById 1ms app.codeStats 0ms

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

https://gitlab.com/dima-antonenko/projectX
JavaScript | 482 lines | 320 code | 156 blank | 6 comment | 93 complexity | cd65924092d856e76923240401573355 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-slider", ["uikit"], function(){
  9. return component || addon(UIkit);
  10. });
  11. }
  12. })(function(UI){
  13. "use strict";
  14. var dragging, delayIdle, anchor, dragged, store = {};
  15. UI.component('slider', {
  16. defaults: {
  17. center : false,
  18. threshold : 10,
  19. infinite : true,
  20. activecls : 'uk-active'
  21. },
  22. boot: function() {
  23. // init code
  24. UI.ready(function(context) {
  25. setTimeout(function(){
  26. UI.$("[data-uk-slider]", context).each(function(){
  27. var ele = UI.$(this);
  28. if (!ele.data("slider")) {
  29. UI.slider(ele, UI.Utils.options(ele.attr('data-uk-slider')));
  30. }
  31. });
  32. }, 0);
  33. });
  34. },
  35. init: function() {
  36. var $this = this;
  37. this.container = this.element.find('.uk-slider');
  38. this.focus = 0;
  39. UI.$win.on("resize load", UI.Utils.debounce(function() {
  40. $this.resize(true);
  41. }, 100));
  42. this.on("click.uikit.slider", '[data-uk-slider-item]', function(e) {
  43. e.preventDefault();
  44. var item = UI.$(this).attr('data-uk-slider-item');
  45. if ($this.focus == item) return;
  46. switch(item) {
  47. case 'next':
  48. case 'previous':
  49. $this[item=='next' ? 'next':'previous']();
  50. break;
  51. default:
  52. $this.updateFocus(parseInt(slide, 10));
  53. }
  54. });
  55. this.container.on('touchstart mousedown', function(evt) {
  56. if (evt.originalEvent && evt.originalEvent.touches) {
  57. evt = evt.originalEvent.touches[0];
  58. }
  59. // ignore right click button
  60. if (evt.button && evt.button==2 || !$this.active) {
  61. return;
  62. }
  63. anchor = UI.$(evt.target).is('a') ? UI.$(evt.target) : UI.$(evt.target).parents('a:first');
  64. dragged = false;
  65. if (anchor.length) {
  66. anchor.one('click', function(e){
  67. if (dragged) e.preventDefault();
  68. });
  69. }
  70. delayIdle = function(e) {
  71. dragged = true;
  72. dragging = $this;
  73. store = {
  74. touchx : parseInt(e.pageX, 10),
  75. dir : 1,
  76. focus : $this.focus,
  77. base : $this.options.center ? 'center':'area'
  78. };
  79. if (e.originalEvent && e.originalEvent.touches) {
  80. e = e.originalEvent.touches[0];
  81. }
  82. dragging.element.data({
  83. 'pointer-start': {x: parseInt(e.pageX, 10), y: parseInt(e.pageY, 10)},
  84. 'pointer-pos-start': $this.pos
  85. });
  86. $this.container.addClass('uk-drag');
  87. delayIdle = false;
  88. };
  89. delayIdle.x = parseInt(evt.pageX, 10);
  90. delayIdle.threshold = $this.options.threshold;
  91. });
  92. this.resize(true);
  93. this.on('display.uk.check', function(){
  94. if ($this.element.is(":visible")) {
  95. $this.resize(true);
  96. }
  97. });
  98. // prevent dragging links + images
  99. this.element.find('a,img').attr('draggable', 'false');
  100. },
  101. resize: function(focus) {
  102. var $this = this, pos = 0, maxheight = 0, item, width, cwidth, size;
  103. this.items = this.container.children().filter(':visible');
  104. this.vp = this.element[0].getBoundingClientRect().width;
  105. this.container.css({'min-width': '', 'min-height': ''});
  106. this.items.each(function(idx){
  107. item = UI.$(this);
  108. size = item.css({'left': '', 'width':''})[0].getBoundingClientRect();
  109. width = size.width;
  110. cwidth = item.width();
  111. maxheight = Math.max(maxheight, size.height);
  112. item.css({'left': pos, 'width':width}).data({'idx':idx, 'left': pos, 'width': width, 'cwidth':cwidth, 'area': (pos+width), 'center':(pos - ($this.vp/2 - cwidth/2))});
  113. pos += width;
  114. });
  115. this.container.css({'min-width': pos, 'min-height': maxheight});
  116. if (this.options.infinite && pos <= (2*this.vp) && !this.itemsResized) {
  117. // fill with cloned items
  118. this.container.children().each(function(idx){
  119. $this.container.append($this.items.eq(idx).clone(true).attr('id', ''));
  120. }).each(function(idx){
  121. $this.container.append($this.items.eq(idx).clone(true).attr('id', ''));
  122. });
  123. this.itemsResized = true;
  124. return this.resize();
  125. }
  126. this.cw = pos;
  127. this.pos = 0;
  128. this.active = pos >= this.vp;
  129. this.container.css({
  130. '-ms-transform': '',
  131. '-webkit-transform': '',
  132. 'transform': ''
  133. });
  134. this.updateFocus(0);
  135. },
  136. updatePos: function(pos) {
  137. this.pos = pos;
  138. this.container.css({
  139. '-ms-transform': 'translateX('+pos+'px)',
  140. '-webkit-transform': 'translateX('+pos+'px)',
  141. 'transform': 'translateX('+pos+'px)'
  142. });
  143. },
  144. updateFocus: function(idx, dir) {
  145. if (!this.active) {
  146. return;
  147. }
  148. dir = dir || (idx > this.focus ? 1:-1);
  149. var $this = this, item = this.items.eq(idx), area, i;
  150. if (this.options.infinite) {
  151. this.infinite(idx, dir);
  152. }
  153. if (this.options.center) {
  154. this.updatePos(item.data('center')*-1);
  155. this.items.filter('.'+this.options.activecls).removeClass(this.options.activecls);
  156. item.addClass(this.options.activecls);
  157. } else {
  158. if (this.options.infinite) {
  159. this.updatePos(item.data('left')*-1);
  160. } else {
  161. area = 0;
  162. for (i=idx;i<this.items.length;i++) {
  163. area += this.items.eq(i).data('width');
  164. }
  165. if (area > this.vp) {
  166. this.updatePos(item.data('left')*-1);
  167. } else {
  168. if (dir == 1) {
  169. area = 0;
  170. for (i=this.items.length-1;i>=0;i--) {
  171. area += this.items.eq(i).data('width');
  172. if (area >= this.vp) {
  173. idx = i;
  174. break;
  175. }
  176. }
  177. this.updatePos(this.items.eq(idx).data('left')*-1);
  178. }
  179. }
  180. }
  181. }
  182. this.focus = idx;
  183. this.trigger('focusitem.uk.slider', [idx,this.items.eq(idx),this]);
  184. },
  185. next: function() {
  186. var focus = this.items[this.focus + 1] ? (this.focus + 1) : (this.options.infinite ? 0:this.focus);
  187. this.updateFocus(focus, 1);
  188. },
  189. previous: function() {
  190. var focus = this.items[this.focus - 1] ? (this.focus - 1) : (this.options.infinite ? (this.items[this.focus - 1] ? this.items-1:this.items.length-1):this.focus);
  191. this.updateFocus(focus, -1);
  192. },
  193. infinite: function(baseidx, direction) {
  194. var $this = this, item = this.items.eq(baseidx), i, z = baseidx, move = [], lastvisible, area = 0;
  195. if (direction == 1) {
  196. for (i=0;i<this.items.length;i++) {
  197. if (z != baseidx) {
  198. area += this.items.eq(z).data('width');
  199. move.push(this.items.eq(z));
  200. }
  201. if (area > this.vp) {
  202. break;
  203. }
  204. z = z+1 == this.items.length ? 0:z+1;
  205. }
  206. if (move.length) {
  207. move.forEach(function(itm){
  208. var left = item.data('area');
  209. itm.css({'left': left}).data({
  210. 'left' : left,
  211. 'area' : (left+itm.data('width')),
  212. 'center': (left - ($this.vp/2 - itm.data('cwidth')/2))
  213. });
  214. item = itm;
  215. });
  216. }
  217. } else {
  218. for (i=this.items.length-1;i >-1 ;i--) {
  219. area += this.items.eq(z).data('width');
  220. if (z != baseidx) {
  221. move.push(this.items.eq(z));
  222. }
  223. if (area > this.vp) {
  224. break;
  225. }
  226. z = z-1 == -1 ? this.items.length-1:z-1;
  227. }
  228. if (move.length) {
  229. move.forEach(function(itm){
  230. var left = item.data('left') - itm.data('width');
  231. itm.css({'left': left}).data({
  232. 'left' : left,
  233. 'area' : (left+itm.data('width')),
  234. 'center': (left - ($this.vp/2 - itm.data('cwidth')/2))
  235. });
  236. item = itm;
  237. });
  238. }
  239. }
  240. }
  241. });
  242. // handle dragging
  243. UI.$doc.on('mousemove.uikit.slider touchmove.uikit.slider', function(e) {
  244. if (e.originalEvent && e.originalEvent.touches) {
  245. e = e.originalEvent.touches[0];
  246. }
  247. if (delayIdle && Math.abs(e.pageX - delayIdle.x) > delayIdle.threshold) {
  248. if (!window.getSelection().toString()) {
  249. delayIdle(e);
  250. } else {
  251. dragging = delayIdle = false;
  252. }
  253. }
  254. if (!dragging) {
  255. return;
  256. }
  257. var x, xDiff, pos, dir, focus, item, next, diff, i, z, itm;
  258. if (e.clientX || e.clientY) {
  259. x = e.clientX;
  260. } else if (e.pageX || e.pageY) {
  261. x = e.pageX - document.body.scrollLeft - document.documentElement.scrollLeft;
  262. }
  263. focus = store.focus;
  264. xDiff = x - dragging.element.data('pointer-start').x;
  265. pos = dragging.element.data('pointer-pos-start') + xDiff;
  266. dir = x > dragging.element.data('pointer-start').x ? -1:1;
  267. item = dragging.items.eq(store.focus);
  268. if (dir == 1) {
  269. diff = item.data('left') + Math.abs(xDiff);
  270. for (i=0,z=store.focus;i<dragging.items.length;i++) {
  271. itm = dragging.items.eq(z);
  272. if (z != store.focus && itm.data('left') < diff && itm.data('area') > diff) {
  273. focus = z;
  274. break;
  275. }
  276. z = z+1 == dragging.items.length ? 0:z+1;
  277. }
  278. } else {
  279. diff = item.data('left') - Math.abs(xDiff);
  280. for (i=0,z=store.focus;i<dragging.items.length;i++) {
  281. itm = dragging.items.eq(z);
  282. if (z != store.focus && itm.data('area') <= item.data('left') && itm.data('center') < diff) {
  283. focus = z;
  284. break;
  285. }
  286. z = z-1 == -1 ? dragging.items.length-1:z-1;
  287. }
  288. }
  289. if (dragging.options.infinite && focus!=store._focus) {
  290. dragging.infinite(focus, dir);
  291. }
  292. dragging.updatePos(pos);
  293. store.dir = dir;
  294. store._focus = focus;
  295. store.touchx = parseInt(e.pageX, 10);
  296. store.diff = diff;
  297. });
  298. UI.$doc.on('mouseup.uikit.slider touchend.uikit.slider', function(e) {
  299. if (dragging) {
  300. dragging.container.removeClass('uk-drag');
  301. var item = dragging.items.eq(store.focus), itm, focus = false, i, z;
  302. if (store.dir == 1) {
  303. for (i=0,z=store.focus;i<dragging.items.length;i++) {
  304. itm = dragging.items.eq(z);
  305. if (z != store.focus && itm.data('left') > store.diff) {
  306. focus = z;
  307. break;
  308. }
  309. z = z+1 == dragging.items.length ? 0:z+1;
  310. }
  311. } else {
  312. for (i=0,z=store.focus;i<dragging.items.length;i++) {
  313. itm = dragging.items.eq(z);
  314. if (z != store.focus && itm.data('left') < store.diff) {
  315. focus = z;
  316. break;
  317. }
  318. z = z-1 == -1 ? dragging.items.length-1:z-1;
  319. }
  320. }
  321. dragging.updateFocus(focus!==false ? focus:store._focus);
  322. }
  323. dragging = delayIdle = false;
  324. });
  325. return UI.slider;
  326. });