uikit-sass-rails 1.3.0 → 1.4.0

data/vendor/assets/javascripts/uikit/components/nestable.js

@@ -1,28 +1,30 @@
-/*! UIkit 2.11.1 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
+/*! UIkit 2.20.3 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
 /*
  * Based on Nestable jQuery Plugin - Copyright (c) 2012 David Bushell - http://dbushell.com/
  */
- (function(addon) {
+(function(addon) {
 
-     var component;
+    var component;
 
-     if (jQuery && jQuery.UIkit) {
-         component = addon(jQuery, jQuery.UIkit);
-     }
+    if (window.UIkit) {
+        component = addon(UIkit);
+    }
 
-     if (typeof define == "function" && define.amd) {
-         define("uikit-nestable", ["uikit"], function(){
-             return component || addon(jQuery, jQuery.UIkit);
-         });
-     }
+    if (typeof define == "function" && define.amd) {
+        define("uikit-nestable", ["uikit"], function(){
+            return component || addon(UIkit);
+        });
+    }
+
+})(function(UI) {
 
- })(function($, UI) {
+    "use strict";
 
     var hasTouch     = 'ontouchstart' in window,
-        html         = $("html"),
+        html         = UI.$html,
         touchedlists = [],
         $win         = UI.$win,
-        draggingElement;
+        draggingElement, dragSource;
 
     /**
      * Detect CSS pointer-events property
@@ -31,7 +33,7 @@
      */
     var hasPointerEvents = (function() {
 
-        var el    = document.createElement('div'), docEl = document.documentElement;
+        var el = document.createElement('div'), docEl = document.documentElement;
 
         if (!('pointerEvents' in el.style)) {
             return false;
@@ -58,27 +60,59 @@
     UI.component('nestable', {
 
         defaults: {
-            prefix          : 'uk',
+            prefix          : 'uk-',
             listNodeName    : 'ul',
             itemNodeName    : 'li',
-            listBaseClass   : '{prefix}-nestable',
-            listClass       : '{prefix}-nestable-list',
-            listitemClass   : '{prefix}-nestable-list-item',
-            itemClass       : '{prefix}-nestable-item',
-            dragClass       : '{prefix}-nestable-list-dragged',
-            movingClass     : '{prefix}-nestable-moving',
-            handleClass     : '{prefix}-nestable-handle',
-            collapsedClass  : '{prefix}-collapsed',
-            placeClass      : '{prefix}-nestable-placeholder',
-            noDragClass     : '{prefix}-nestable-nodrag',
-            emptyClass      : '{prefix}-nestable-empty',
+            listBaseClass   : '{prefix}nestable',
+            listClass       : '{prefix}nestable-list',
+            listitemClass   : '{prefix}nestable-list-item',
+            itemClass       : '{prefix}nestable-item',
+            dragClass       : '{prefix}nestable-list-dragged',
+            movingClass     : '{prefix}nestable-moving',
+            handleClass     : '{prefix}nestable-handle',
+            collapsedClass  : '{prefix}collapsed',
+            placeClass      : '{prefix}nestable-placeholder',
+            noDragClass     : '{prefix}nestable-nodrag',
+            emptyClass      : '{prefix}nestable-empty',
             group           : 0,
             maxDepth        : 10,
             threshold       : 20
         },
 
-        init: function()
-        {
+        boot: function() {
+
+            // adjust document scrolling
+            UI.$html.on('mousemove touchmove', function(e) {
+
+                if (draggingElement) {
+
+
+                    var top = draggingElement.offset().top;
+
+                    if (top < UI.$win.scrollTop()) {
+                        UI.$win.scrollTop(UI.$win.scrollTop() - Math.ceil(draggingElement.height()/2));
+                    } else if ( (top + draggingElement.height()) > (window.innerHeight + UI.$win.scrollTop()) ) {
+                        UI.$win.scrollTop(UI.$win.scrollTop() + Math.ceil(draggingElement.height()/2));
+                    }
+                }
+            });
+
+            // init code
+            UI.ready(function(context) {
+
+                UI.$("[data-uk-nestable]", context).each(function(){
+
+                    var ele = UI.$(this);
+
+                    if(!ele.data("nestable")) {
+                        var plugin = UI.nestable(ele, UI.Utils.options(ele.attr("data-uk-nestable")));
+                    }
+                });
+            });
+        },
+
+        init: function() {
+
             var $this = this;
 
             Object.keys(this.options).forEach(function(key){
@@ -102,10 +136,10 @@
             this.element.data("nestable-id", "ID"+(new Date().getTime())+"RAND"+(Math.ceil(Math.random() *100000)));
             this.reset();
             this.element.data('nestable-group', this.options.group);
-            this.placeEl = $('<div class="' + this.options.placeClass + '"/>');
+            this.placeEl = UI.$('<div class="' + this.options.placeClass + '"/>');
 
             this.find(this.options.itemNodeName).each(function() {
-                $this.setParent($(this));
+                $this.setParent(UI.$(this));
             });
 
             this.on('click', '[data-nestable-action]', function(e) {
@@ -116,7 +150,7 @@
 
                 e.preventDefault();
 
-                var target = $(e.currentTarget),
+                var target = UI.$(e.currentTarget),
                     action = target.data('nestableAction'),
                     item   = target.closest($this.options.itemNodeName);
                 if (action === 'collapse') {
@@ -132,7 +166,7 @@
 
             var onStartEvent = function(e) {
 
-                var handle = $(e.target);
+                var handle = UI.$(e.target);
 
                 if (!handle.hasClass($this.options.handleClass)) {
                     if (handle.closest('.' + $this.options.noDragClass).length) {
@@ -145,14 +179,14 @@
                 }
                 e.preventDefault();
                 $this.dragStart(hasTouch ? e.touches[0] : e);
-                $this.trigger('uk.nestable.start', [$this]);
+                $this.trigger('start.uk.nestable', [$this]);
             };
 
             var onMoveEvent = function(e) {
                 if ($this.dragEl) {
                     e.preventDefault();
                     $this.dragMove(hasTouch ? e.touches[0] : e);
-                    $this.trigger('uk.nestable.move', [$this]);
+                    $this.trigger('move.uk.nestable', [$this]);
                 }
             };
 
@@ -160,7 +194,6 @@
                 if ($this.dragEl) {
                     e.preventDefault();
                     $this.dragStop(hasTouch ? e.touches[0] : e);
-                    $this.trigger('uk.nestable.stop', [$this]);
                 }
 
                 draggingElement = false;
@@ -183,21 +216,30 @@
 
             var data,
                 depth = 0,
-                list  = this;
+                list  = this,
                 step  = function(level, depth) {
 
                     var array = [ ], items = level.children(list.options.itemNodeName);
 
                     items.each(function() {
 
-                        var li   = $(this),
-                            item = $.extend({}, li.data()),
-                            sub  = li.children(list.options.listNodeName);
+                        var li    = UI.$(this),
+                            item  = {}, attribute,
+                            sub   = li.children(list.options.listNodeName);
+
+                        for (var i = 0; i < li[0].attributes.length; i++) {
+                            attribute = li[0].attributes[i];
+                            if (attribute.name.indexOf('data-') === 0) {
+                                item[attribute.name.substr(5)] = UI.Utils.str2json(attribute.value);
+                            }
+                        }
 
                         if (sub.length) {
                             item.children = step(sub, depth + 1);
                         }
+
                         array.push(item);
+
                     });
                     return array;
                 };
@@ -209,18 +251,17 @@
 
         list: function(options) {
 
-            var data = [],
-                list = this,
+            var data  = [],
+                list  = this,
                 depth = 0,
-                options = $.extend({}, list.options, options),
-                step = function(level, depth, parent) {
+                step  = function(level, depth, parent) {
 
                     var items = level.children(options.itemNodeName);
 
                     items.each(function(index) {
-                        var li = $(this),
-                            item = $.extend({parent_id: (parent ? parent : null), depth: depth, order: index}, li.data()),
-                            sub = li.children(options.listNodeName);
+                        var li   = UI.$(this),
+                            item = UI.$.extend({parent_id: (parent ? parent : null), depth: depth, order: index}, li.data()),
+                            sub  = li.children(options.listNodeName);
 
                         data.push(item);
 
@@ -230,6 +271,8 @@
                     });
                 };
 
+            options = UI.$.extend({}, list.options, options);
+
             step(list.element, depth);
 
             return data;
@@ -264,9 +307,8 @@
             this.pointEl    = null;
 
             for (var i=0; i<touchedlists.length; i++) {
-                if (!touchedlists[i].children().length) {
-                    touchedlists[i].append(this.tplempty);
-                }
+
+                this.checkEmptyList(touchedlists[i]);
             }
 
             touchedlists = [];
@@ -290,14 +332,14 @@
         expandAll: function() {
             var list = this;
             this.find(list.options.itemNodeName).each(function() {
-                list.expandItem($(this));
+                list.expandItem(UI.$(this));
             });
         },
 
         collapseAll: function() {
             var list = this;
             this.find(list.options.itemNodeName).each(function() {
-                list.collapseItem($(this));
+                list.collapseItem(UI.$(this));
             });
         },
 
@@ -314,7 +356,7 @@
 
         dragStart: function(e) {
             var mouse    = this.mouse,
-                target   = $(e.target),
+                target   = UI.$(e.target),
                 dragItem = target.closest(this.options.itemNodeName),
                 offset   = dragItem.offset();
 
@@ -328,7 +370,7 @@
 
             this.dragRootEl = this.element;
 
-            this.dragEl = $(document.createElement(this.options.listNodeName)).addClass(this.options.listClass + ' ' + this.options.dragClass);
+            this.dragEl = UI.$(document.createElement(this.options.listNodeName)).addClass(this.options.listClass + ' ' + this.options.dragClass);
             this.dragEl.css('width', dragItem.width());
 
             draggingElement = this.dragEl;
@@ -341,7 +383,7 @@
             dragItem[0].parentNode.removeChild(dragItem[0]);
             dragItem.appendTo(this.dragEl);
 
-            $(document.body).append(this.dragEl);
+            UI.$body.append(this.dragEl);
 
             this.dragEl.css({
                 left : offset.left,
@@ -352,7 +394,7 @@
             var i, depth,
                 items = this.dragEl.find(this.options.itemNodeName);
             for (i = 0; i < items.length; i++) {
-                depth = $(items[i]).parents(this.options.listNodeName).length;
+                depth = UI.$(items[i]).parents(this.options.listNodeName).length;
                 if (depth > this.dragDepth) {
                     this.dragDepth = depth;
                 }
@@ -362,23 +404,29 @@
         },
 
         dragStop: function(e) {
+
             // fix for zepto.js
             //this.placeEl.replaceWith(this.dragEl.children(this.options.itemNodeName + ':first').detach());
-            var el = this.dragEl.children(this.options.itemNodeName).first();
+            var el   = this.dragEl.children(this.options.itemNodeName).first(),
+                root = this.placeEl.parents('.'+this.options.listBaseClass+':first');
+
             el[0].parentNode.removeChild(el[0]);
+
             this.placeEl.replaceWith(el);
 
             this.dragEl.remove();
 
-            if (this.tmpDragOnSiblings[0]!=el[0].previousSibling || this.tmpDragOnSiblings[0]!=el[0].previousSibling) {
+            if (this.element[0] !== root[0]) {
 
-                this.element.trigger('uk.nestable.change',[el, this.hasNewRoot ? "added":"moved"]);
+                root.trigger('change.uk.nestable',[el, "added", root, root.data('nestable')]);
+                this.element.trigger('change.uk.nestable', [el, "removed", this.element, this]);
 
-                if (this.hasNewRoot) {
-                    this.dragRootEl.trigger('uk.nestable.change', [el, "removed"]);
-                }
+            } else {
+                this.element.trigger('change.uk.nestable',[el, "moved", this.element, this]);
             }
 
+            this.trigger('stop.uk.nestable', [this, el]);
+
             this.reset();
 
             html.removeClass(this.options.movingClass);
@@ -451,7 +499,7 @@
                     if (depth + this.dragDepth <= opt.maxDepth) {
                         // create new sub-level if one doesn't exist
                         if (!list.length) {
-                            list = $('<' + opt.listNodeName + '/>').addClass(opt.listClass);
+                            list = UI.$('<' + opt.listNodeName + '/>').addClass(opt.listClass);
                             list.append(this.placeEl);
                             prev.append(list);
                             this.setParent(prev);
@@ -482,7 +530,7 @@
             if (!hasPointerEvents) {
                 this.dragEl[0].style.visibility = 'hidden';
             }
-            this.pointEl = $(document.elementFromPoint(e.pageX - document.body.scrollLeft, e.pageY - (window.pageYOffset || document.documentElement.scrollTop)));
+            this.pointEl = UI.$(document.elementFromPoint(e.pageX - document.body.scrollLeft, e.pageY - (window.pageYOffset || document.documentElement.scrollTop)));
             if (!hasPointerEvents) {
                 this.dragEl[0].style.visibility = 'visible';
             }
@@ -493,7 +541,7 @@
 
                 var nestableitem = this.pointEl.closest('.'+opt.itemClass);
 
-                if(nestableitem.length) {
+                if (nestableitem.length) {
                     this.pointEl = nestableitem.closest(opt.itemNodeName);
                 }
             }
@@ -502,7 +550,7 @@
                 isEmpty = true;
             } else if (this.pointEl.data('nestable') && !this.pointEl.children().length) {
                 isEmpty = true;
-                this.pointEl = $(this.tplempty).appendTo(this.pointEl);
+                this.pointEl = UI.$(this.tplempty).appendTo(this.pointEl);
             } else if (!this.pointEl.length || !this.pointEl.hasClass(opt.listitemClass)) {
                 return;
             }
@@ -510,15 +558,15 @@
             // find parent list of item under cursor
             var pointElRoot = this.element,
                 tmpRoot     = this.pointEl.closest('.'+this.options.listBaseClass),
-                isNewRoot   = pointElRoot[0] !== this.pointEl.closest('.'+this.options.listBaseClass)[0],
-                $newRoot    = tmpRoot;
+                isNewRoot   = pointElRoot[0] !== this.pointEl.closest('.'+this.options.listBaseClass)[0];
 
             /**
              * move vertical
              */
             if (!mouse.dirAx || isNewRoot || isEmpty) {
+
                 // check if groups match if dragging over new root
-                if (isNewRoot && opt.group !== $newRoot.data('nestable-group')) {
+                if (isNewRoot && opt.group !== tmpRoot.data('nestable-group')) {
                     return;
                 } else {
                     touchedlists.push(pointElRoot);
@@ -548,9 +596,8 @@
                     if(!parent.data("nestable")) this.unsetParent(parent.parent());
                 }
 
-                if (!this.dragRootEl.find(opt.itemNodeName).length && !this.dragRootEl.children().length) {
-                    this.dragRootEl.append(this.tplempty);
-                }
+                this.checkEmptyList(this.dragRootEl);
+                this.checkEmptyList(pointElRoot);
 
                 // parent root list has changed
                 if (isNewRoot) {
@@ -558,38 +605,18 @@
                     this.hasNewRoot = this.element[0] !== this.dragRootEl[0];
                 }
             }
-        }
-
-    });
-
-    // adjust document scrolling
-    $('html').on('mousemove touchmove', function(e) {
-
-        if (draggingElement) {
+        },
 
+        checkEmptyList: function(list) {
 
-            var top = draggingElement.offset().top;
+            list  = list ? UI.$(list) : this.element;
 
-            if (top < UI.$win.scrollTop()) {
-                UI.$win.scrollTop(UI.$win.scrollTop() - Math.ceil(draggingElement.height()/2));
-            } else if ( (top + draggingElement.height()) > (window.innerHeight + UI.$win.scrollTop()) ) {
-                UI.$win.scrollTop(UI.$win.scrollTop() + Math.ceil(draggingElement.height()/2));
+            if (!list.children().length) {
+                list.find('.'+this.options.emptyClass).remove().end().append(this.tplempty);
             }
         }
-    });
 
-    // init code
-    UI.ready(function(context) {
-
-        $("[data-uk-nestable]", context).each(function(){
-
-            var ele = $(this);
-
-            if(!ele.data("nestable")) {
-                 var plugin = UI.nestable(ele, UI.Utils.options(ele.attr("data-uk-nestable")));
-            }
-        });
     });
 
     return UI.nestable;
-});
+});