caboose-cms 0.6.16 → 0.6.17

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,484 @@
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);