source: public/vendors/nestable/jquery.nestable.js@ 8fdb18e

Last change on this file since 8fdb18e was 7304c7f, checked in by beratkjufliju <kufliju@…>, 3 years ago

added user authentication, create & forgot password methods and blades
  • Property mode set to 100644
File size: 17.2 KB
Line 
1/*!
2 * Nestable jQuery Plugin - Copyright (c) 2012 David Bushell - http://dbushell.com/
3 * Dual-licensed under the BSD or MIT licenses
4 */
5;(function($, window, document, undefined)
6{
7 var hasTouch = 'ontouchstart' in document;
8
9 /**
10 * Detect CSS pointer-events property
11 * events are normally disabled on the dragging element to avoid conflicts
12 * https://github.com/ausi/Feature-detection-technique-for-pointer-events/blob/master/modernizr-pointerevents.js
13 */
14 var hasPointerEvents = (function()
15 {
16 var el = document.createElement('div'),
17 docEl = document.documentElement;
18 if (!('pointerEvents' in el.style)) {
19 return false;
20 }
21 el.style.pointerEvents = 'auto';
22 el.style.pointerEvents = 'x';
23 docEl.appendChild(el);
24 var supports = window.getComputedStyle && window.getComputedStyle(el, '').pointerEvents === 'auto';
25 docEl.removeChild(el);
26 return !!supports;
27 })();
28
29 var defaults = {
30 listNodeName : 'ol',
31 itemNodeName : 'li',
32 rootClass : 'dd',
33 listClass : 'dd-list',
34 itemClass : 'dd-item',
35 dragClass : 'dd-dragel',
36 handleClass : 'dd-handle',
37 collapsedClass : 'dd-collapsed',
38 placeClass : 'dd-placeholder',
39 noDragClass : 'dd-nodrag',
40 emptyClass : 'dd-empty',
41 expandBtnHTML : '<button data-action="expand" type="button">Expand</button>',
42 collapseBtnHTML : '<button data-action="collapse" type="button">Collapse</button>',
43 group : 0,
44 maxDepth : 5,
45 threshold : 20
46 };
47
48 function Plugin(element, options)
49 {
50 this.w = $(document);
51 this.el = $(element);
52 this.options = $.extend({}, defaults, options);
53 this.init();
54 }
55
56 Plugin.prototype = {
57
58 init: function()
59 {
60 var list = this;
61
62 list.reset();
63
64 list.el.data('nestable-group', this.options.group);
65
66 list.placeEl = $('<div class="' + list.options.placeClass + '"/>');
67
68 $.each(this.el.find(list.options.itemNodeName), function(k, el) {
69 list.setParent($(el));
70 });
71
72 list.el.on('click', 'button', function(e) {
73 if (list.dragEl) {
74 return;
75 }
76 var target = $(e.currentTarget),
77 action = target.data('action'),
78 item = target.parent(list.options.itemNodeName);
79 if (action === 'collapse') {
80 list.collapseItem(item);
81 }
82 if (action === 'expand') {
83 list.expandItem(item);
84 }
85 });
86
87 var onStartEvent = function(e)
88 {
89 var handle = $(e.target);
90 if (!handle.hasClass(list.options.handleClass)) {
91 if (handle.closest('.' + list.options.noDragClass).length) {
92 return;
93 }
94 handle = handle.closest('.' + list.options.handleClass);
95 }
96
97 if (!handle.length || list.dragEl) {
98 return;
99 }
100
101 list.isTouch = /^touch/.test(e.type);
102 if (list.isTouch && e.touches.length !== 1) {
103 return;
104 }
105
106 e.preventDefault();
107 list.dragStart(e.touches ? e.touches[0] : e);
108 };
109
110 var onMoveEvent = function(e)
111 {
112 if (list.dragEl) {
113 e.preventDefault();
114 list.dragMove(e.touches ? e.touches[0] : e);
115 }
116 };
117
118 var onEndEvent = function(e)
119 {
120 if (list.dragEl) {
121 e.preventDefault();
122 list.dragStop(e.touches ? e.touches[0] : e);
123 }
124 };
125
126 if (hasTouch) {
127 list.el[0].addEventListener('touchstart', onStartEvent, false);
128 window.addEventListener('touchmove', onMoveEvent, false);
129 window.addEventListener('touchend', onEndEvent, false);
130 window.addEventListener('touchcancel', onEndEvent, false);
131 }
132
133 list.el.on('mousedown', onStartEvent);
134 list.w.on('mousemove', onMoveEvent);
135 list.w.on('mouseup', onEndEvent);
136
137 },
138
139 serialize: function()
140 {
141 var data,
142 depth = 0,
143 list = this;
144 step = function(level, depth)
145 {
146 var array = [ ],
147 items = level.children(list.options.itemNodeName);
148 items.each(function()
149 {
150 var li = $(this),
151 item = $.extend({}, li.data()),
152 sub = li.children(list.options.listNodeName);
153 if (sub.length) {
154 item.children = step(sub, depth + 1);
155 }
156 array.push(item);
157 });
158 return array;
159 };
160 data = step(list.el.find(list.options.listNodeName).first(), depth);
161 return data;
162 },
163
164 serialise: function()
165 {
166 return this.serialize();
167 },
168
169 reset: function()
170 {
171 this.mouse = {
172 offsetX : 0,
173 offsetY : 0,
174 startX : 0,
175 startY : 0,
176 lastX : 0,
177 lastY : 0,
178 nowX : 0,
179 nowY : 0,
180 distX : 0,
181 distY : 0,
182 dirAx : 0,
183 dirX : 0,
184 dirY : 0,
185 lastDirX : 0,
186 lastDirY : 0,
187 distAxX : 0,
188 distAxY : 0
189 };
190 this.isTouch = false;
191 this.moving = false;
192 this.dragEl = null;
193 this.dragRootEl = null;
194 this.dragDepth = 0;
195 this.hasNewRoot = false;
196 this.pointEl = null;
197 },
198
199 expandItem: function(li)
200 {
201 li.removeClass(this.options.collapsedClass);
202 li.children('[data-action="expand"]').hide();
203 li.children('[data-action="collapse"]').show();
204 li.children(this.options.listNodeName).show();
205 },
206
207 collapseItem: function(li)
208 {
209 var lists = li.children(this.options.listNodeName);
210 if (lists.length) {
211 li.addClass(this.options.collapsedClass);
212 li.children('[data-action="collapse"]').hide();
213 li.children('[data-action="expand"]').show();
214 li.children(this.options.listNodeName).hide();
215 }
216 },
217
218 expandAll: function()
219 {
220 var list = this;
221 list.el.find(list.options.itemNodeName).each(function() {
222 list.expandItem($(this));
223 });
224 },
225
226 collapseAll: function()
227 {
228 var list = this;
229 list.el.find(list.options.itemNodeName).each(function() {
230 list.collapseItem($(this));
231 });
232 },
233
234 setParent: function(li)
235 {
236 if (li.children(this.options.listNodeName).length) {
237 li.prepend($(this.options.expandBtnHTML));
238 li.prepend($(this.options.collapseBtnHTML));
239 }
240 li.children('[data-action="expand"]').hide();
241 },
242
243 unsetParent: function(li)
244 {
245 li.removeClass(this.options.collapsedClass);
246 li.children('[data-action]').remove();
247 li.children(this.options.listNodeName).remove();
248 },
249
250 dragStart: function(e)
251 {
252 var mouse = this.mouse,
253 target = $(e.target),
254 dragItem = target.closest(this.options.itemNodeName);
255
256 this.placeEl.css('height', dragItem.height());
257
258 mouse.offsetX = e.offsetX !== undefined ? e.offsetX : e.pageX - target.offset().left;
259 mouse.offsetY = e.offsetY !== undefined ? e.offsetY : e.pageY - target.offset().top;
260 mouse.startX = mouse.lastX = e.pageX;
261 mouse.startY = mouse.lastY = e.pageY;
262
263 this.dragRootEl = this.el;
264
265 this.dragEl = $(document.createElement(this.options.listNodeName)).addClass(this.options.listClass + ' ' + this.options.dragClass);
266 this.dragEl.css('width', dragItem.width());
267
268 dragItem.after(this.placeEl);
269 dragItem[0].parentNode.removeChild(dragItem[0]);
270 dragItem.appendTo(this.dragEl);
271
272 $(document.body).append(this.dragEl);
273 this.dragEl.css({
274 'left' : e.pageX - mouse.offsetX,
275 'top' : e.pageY - mouse.offsetY
276 });
277 // total depth of dragging item
278 var i, depth,
279 items = this.dragEl.find(this.options.itemNodeName);
280 for (i = 0; i < items.length; i++) {
281 depth = $(items[i]).parents(this.options.listNodeName).length;
282 if (depth > this.dragDepth) {
283 this.dragDepth = depth;
284 }
285 }
286 },
287
288 dragStop: function(e)
289 {
290 var el = this.dragEl.children(this.options.itemNodeName).first();
291 el[0].parentNode.removeChild(el[0]);
292 this.placeEl.replaceWith(el);
293
294 this.dragEl.remove();
295 this.el.trigger('change');
296 if (this.hasNewRoot) {
297 this.dragRootEl.trigger('change');
298 }
299 this.reset();
300 },
301
302 dragMove: function(e)
303 {
304 var list, parent, prev, next, depth,
305 opt = this.options,
306 mouse = this.mouse;
307
308 this.dragEl.css({
309 'left' : e.pageX - mouse.offsetX,
310 'top' : e.pageY - mouse.offsetY
311 });
312
313 // mouse position last events
314 mouse.lastX = mouse.nowX;
315 mouse.lastY = mouse.nowY;
316 // mouse position this events
317 mouse.nowX = e.pageX;
318 mouse.nowY = e.pageY;
319 // distance mouse moved between events
320 mouse.distX = mouse.nowX - mouse.lastX;
321 mouse.distY = mouse.nowY - mouse.lastY;
322 // direction mouse was moving
323 mouse.lastDirX = mouse.dirX;
324 mouse.lastDirY = mouse.dirY;
325 // direction mouse is now moving (on both axis)
326 mouse.dirX = mouse.distX === 0 ? 0 : mouse.distX > 0 ? 1 : -1;
327 mouse.dirY = mouse.distY === 0 ? 0 : mouse.distY > 0 ? 1 : -1;
328 // axis mouse is now moving on
329 var newAx = Math.abs(mouse.distX) > Math.abs(mouse.distY) ? 1 : 0;
330
331 // do nothing on first move
332 if (!mouse.moving) {
333 mouse.dirAx = newAx;
334 mouse.moving = true;
335 return;
336 }
337
338 // calc distance moved on this axis (and direction)
339 if (mouse.dirAx !== newAx) {
340 mouse.distAxX = 0;
341 mouse.distAxY = 0;
342 } else {
343 mouse.distAxX += Math.abs(mouse.distX);
344 if (mouse.dirX !== 0 && mouse.dirX !== mouse.lastDirX) {
345 mouse.distAxX = 0;
346 }
347 mouse.distAxY += Math.abs(mouse.distY);
348 if (mouse.dirY !== 0 && mouse.dirY !== mouse.lastDirY) {
349 mouse.distAxY = 0;
350 }
351 }
352 mouse.dirAx = newAx;
353
354 /**
355 * move horizontal
356 */
357 if (mouse.dirAx && mouse.distAxX >= opt.threshold) {
358 // reset move distance on x-axis for new phase
359 mouse.distAxX = 0;
360 prev = this.placeEl.prev(opt.itemNodeName);
361 // increase horizontal level if previous sibling exists and is not collapsed
362 if (mouse.distX > 0 && prev.length && !prev.hasClass(opt.collapsedClass)) {
363 // cannot increase level when item above is collapsed
364 list = prev.find(opt.listNodeName).last();
365 // check if depth limit has reached
366 depth = this.placeEl.parents(opt.listNodeName).length;
367 if (depth + this.dragDepth <= opt.maxDepth) {
368 // create new sub-level if one doesn't exist
369 if (!list.length) {
370 list = $('<' + opt.listNodeName + '/>').addClass(opt.listClass);
371 list.append(this.placeEl);
372 prev.append(list);
373 this.setParent(prev);
374 } else {
375 // else append to next level up
376 list = prev.children(opt.listNodeName).last();
377 list.append(this.placeEl);
378 }
379 }
380 }
381 // decrease horizontal level
382 if (mouse.distX < 0) {
383 // we can't decrease a level if an item preceeds the current one
384 next = this.placeEl.next(opt.itemNodeName);
385 if (!next.length) {
386 parent = this.placeEl.parent();
387 this.placeEl.closest(opt.itemNodeName).after(this.placeEl);
388 if (!parent.children().length) {
389 this.unsetParent(parent.parent());
390 }
391 }
392 }
393 }
394
395 var isEmpty = false;
396
397 // find list item under cursor
398 if (!hasPointerEvents) {
399 this.dragEl[0].style.visibility = 'hidden';
400 }
401 this.pointEl = $(document.elementFromPoint(e.pageX - document.body.scrollLeft, e.pageY - (window.pageYOffset || document.documentElement.scrollTop)));
402 if (!hasPointerEvents) {
403 this.dragEl[0].style.visibility = 'visible';
404 }
405 if (this.pointEl.hasClass(opt.handleClass)) {
406 this.pointEl = this.pointEl.parent(opt.itemNodeName);
407 }
408 if (this.pointEl.hasClass(opt.emptyClass)) {
409 isEmpty = true;
410 }
411 else if (!this.pointEl.length || !this.pointEl.hasClass(opt.itemClass)) {
412 return;
413 }
414
415 // find parent list of item under cursor
416 var pointElRoot = this.pointEl.closest('.' + opt.rootClass),
417 isNewRoot = this.dragRootEl.data('nestable-id') !== pointElRoot.data('nestable-id');
418
419 /**
420 * move vertical
421 */
422 if (!mouse.dirAx || isNewRoot || isEmpty) {
423 // check if groups match if dragging over new root
424 if (isNewRoot && opt.group !== pointElRoot.data('nestable-group')) {
425 return;
426 }
427 // check depth limit
428 depth = this.dragDepth - 1 + this.pointEl.parents(opt.listNodeName).length;
429 if (depth > opt.maxDepth) {
430 return;
431 }
432 var before = e.pageY < (this.pointEl.offset().top + this.pointEl.height() / 2);
433 parent = this.placeEl.parent();
434 // if empty create new list to replace empty placeholder
435 if (isEmpty) {
436 list = $(document.createElement(opt.listNodeName)).addClass(opt.listClass);
437 list.append(this.placeEl);
438 this.pointEl.replaceWith(list);
439 }
440 else if (before) {
441 this.pointEl.before(this.placeEl);
442 }
443 else {
444 this.pointEl.after(this.placeEl);
445 }
446 if (!parent.children().length) {
447 this.unsetParent(parent.parent());
448 }
449 if (!this.dragRootEl.find(opt.itemNodeName).length) {
450 this.dragRootEl.append('<div class="' + opt.emptyClass + '"/>');
451 }
452 // parent root list has changed
453 if (isNewRoot) {
454 this.dragRootEl = pointElRoot;
455 this.hasNewRoot = this.el[0] !== this.dragRootEl[0];
456 }
457 }
458 }
459
460 };
461
462 $.fn.nestable = function(params)
463 {
464 var lists = this,
465 retval = this;
466
467 lists.each(function()
468 {
469 var plugin = $(this).data("nestable");
470
471 if (!plugin) {
472 $(this).data("nestable", new Plugin(this, params));
473 $(this).data("nestable-id", new Date().getTime());
474 } else {
475 if (typeof params === 'string' && typeof plugin[params] === 'function') {
476 retval = plugin[params]();
477 }
478 }
479 });
480
481 return retval || lists;
482 };
483
484})(window.jQuery || window.Zepto, window, document);
Note: See TracBrowser for help on using the repository browser.