Changeset 5704

Timestamp:

05/28/08 09:36:28 (8 months ago)

Author:

paul.bakaus

Message:

treeview: fixed sortable tree component, made it up to date with UI

Location:

trunk/plugins/treeview

Files:

• demo/sortable.html (modified) (2 diffs)
• jquery.treeview.sortable.js (modified) (13 diffs)

trunk/plugins/treeview/demo/sortable.html

@@ -22 +22 @@
     <script src="../jquery.treeview.js" type="text/javascript"></script>
     <script src="../jquery.treeview.edit.js" type="text/javascript"></script>
+    
     <script src="../../../ui/ui.core.js" type="text/javascript" charset="utf-8"></script>
     <script src="../../../ui/ui.droppable.js" type="text/javascript" charset="utf-8"></script>
@@ -79 +80 @@
         this.each(function() {
             
-            $(this).treeview().sortable({
+            $(this).treeview().sortableTree({
                 connectWith: o.connectWith,
                 items: 'li',

trunk/plugins/treeview/jquery.treeview.sortable.js

@@ -21 +21 @@
     }
 
-    $.fn.extend({
-        sortable: function(options) {
-            
-            var args = Array.prototype.slice.call(arguments, 1);
-            
-            if (options == "serialize" || options == "toArray")
-                return $.data(this[0], "sortable")[options](arguments[1]);
-            
-            return this.each(function() {
-                if (typeof options == "string") {
-                    var sort = $.data(this, "sortable");
-                    if (sort) sort[options].apply(sort, args);
-
-                } else if(!$.data(this, "sortable"))
-                    new $.ui.sortable(this, options);
-            });
-        }
-    });
+
+    $.widget("ui.sortableTree", $.extend($.ui.mouse, {
+        init: function() {
+
+            //Initialize needed constants
+            var self = this, o = this.options;
+            this.containerCache = {};
+            this.element.addClass("ui-sortableTree");
+            
+            //Get the items
+            this.refresh();
+            
+            //Let's determine the parent's offset
+            if(!(/(relative|absolute|fixed)/).test(this.element.css('position'))) this.element.css('position', 'relative');
+            this.offset = this.element.offset();
     
-    $.ui.sortable = function(element, options) {
-        //Initialize needed constants
-        var self = this;
-    
-        this.element = $(element);
-        this.containerCache = {};
-        
-        $.data(element, "sortable", this);
-        this.element.addClass("ui-sortable");
-
-        //Prepare the passed options
-        this.options = $.extend({}, options);
-        var o = this.options;
-        $.extend(o, {
-            items: this.options.items || '> *',
-            zIndex: this.options.zIndex || 1000,
-            startCondition: function() {
-                return !self.options.disabled;
-            }
-        });
-        
-        $(element).bind("setData.sortable", function(event, key, value){
-            self.options[key] = value;
-        }).bind("getData.sortable", function(event, key){
-            return self.options[key];
-        });
-        
-        //Get the items
-        this.refresh();
-        
-        //Let's determine the parent's offset
-        if(!(/(relative|absolute|fixed)/).test(this.element.css('position'))) this.element.css('position', 'relative');
-        this.offset = this.element.offset();
-
-        //Initialize mouse events for interaction
-        this.element.mouse({
-            executor: this,
-            delay: o.delay,
-            distance: o.distance || 1,
-            dragPrevention: o.prevention ? o.prevention.toLowerCase().split(',') : ['input','textarea','button','select','option'],
-            start: this.start,
-            stop: this.stop,
-            drag: this.drag,
-            condition: function(e) {
-
-                if(this.options.disabled || this.options.type == 'static') return false;
-
-                //Find out if the clicked node (or one of its parents) is a actual item in this.items
-                var currentItem = null, nodes = $(e.target).parents().each(function() { 
-                    if($.data(this, 'sortable-item')) {
-                        currentItem = $(this);
-                        return false;
-                    }
-                });
-                if($.data(e.target, 'sortable-item')) currentItem = $(e.target);
-                
-                if(!currentItem) return false;  
-                if(this.options.handle) {
-                    var validHandle = false;
-                    $(this.options.handle, currentItem).each(function() { if(this == e.target) validHandle = true; });
-                    if(!validHandle) return false;
-                }
-                    
-                this.currentItem = currentItem;
-                return true;
-
-            }
-        });
-        
-        //Prepare cursorAt
-        if(o.cursorAt && o.cursorAt.constructor == Array)
-            o.cursorAt = { left: o.cursorAt[0], top: o.cursorAt[1] };
-    };
-    
-    $.extend($.ui.sortable.prototype, {
+            //Initialize mouse events for interaction
+            this.mouseInit();
+            
+            //Prepare cursorAt
+            if(o.cursorAt && o.cursorAt.constructor == Array)
+                o.cursorAt = { left: o.cursorAt[0], top: o.cursorAt[1] };
+
+        },
         plugins: {},
         ui: function(inst) {
@@ -134 +64 @@
         serialize: function(o) {
             
-            var items = $(this.options.items, this.element).not('.ui-sortable-helper'); //Only the items of the sortable itself
+            var items = $(this.options.items, this.element).not('.ui-sortableTree-helper'); //Only the items of the sortable itself
             var str = []; o = o || {};
             
@@ -146 +76 @@
         },
         toArray: function(attr) {
-            var items = $(this.options.items, this.element).not('.ui-sortable-helper'); //Only the items of the sortable itself
+            var items = $(this.options.items, this.element).not('.ui-sortableTree-helper'); //Only the items of the sortable itself
             var ret = [];
 
@@ -153 +83 @@
         },
         enable: function() {
-            this.element.removeClass("ui-sortable-disabled");
+            this.element.removeClass("ui-sortableTree-disabled");
             this.options.disabled = false;
         },
         disable: function() {
-            this.element.addClass("ui-sortable-disabled");
+            this.element.addClass("ui-sortableTree-disabled");
             this.options.disabled = true;
         },
@@ -178 +108 @@
             var t = item.top,  b = t + item.height;
 
-            if(!this.intersectsWith(item.item.parents(".ui-sortable").data("sortable").containerCache)) return false;
+            if(!this.intersectsWith(item.item.parents(".ui-sortableTree").data("sortableTree").containerCache)) return false;
 
             if (!( t < y1 + (this.helperProportions.height / 2)        // Bottom Half
@@ -204 +134 @@
                     var cur = $(this.options.connectWith[i]);
                     for (var j = cur.length - 1; j >= 0; j--){
-                        var inst = $.data(cur[j], 'sortable');
+                        var inst = $.data(cur[j], 'sortableTree');
                         if(inst && !inst.options.disabled) {
                             queries.push($(inst.options.items, inst.element));
@@ -215 +145 @@
             for (var i = queries.length - 1; i >= 0; i--){
                 queries[i].each(function() {
-                    $.data(this, 'sortable-item', true); // Data for target checking (mouse manager)
+                    $.data(this, 'sortableTree-item', true); // Data for target checking (mouse manager)
                     items.push({
                         item: $(this),
@@ -239 +169 @@
         },
         destroy: function() {
+
             this.element
-                .removeClass("ui-sortable ui-sortable-disabled")
-                .removeData("sortable")
-                .unbind(".sortable")
-                .removeMouseInteraction();
+                .removeClass("ui-sortableTree ui-sortableTree-disabled")
+                .removeData("sortableTree")
+                .unbind(".sortableTree");
+            this.mouseDestroy();
             
             for ( var i = this.items.length - 1; i >= 0; i-- )
-                this.items[i].item.removeData("sortable-item");
+                this.items[i].item.removeData("sortableTree-item");
+                
         },
         contactContainers: function(e) {
@@ -285 +217 @@
             };          
         },
-        start: function(e,el) {
+        mouseStart: function(e,el) {
+
+            if(this.options.disabled || this.options.type == 'static') return false;
+
+            //Find out if the clicked node (or one of its parents) is a actual item in this.items
+            var currentItem = null, nodes = $(e.target).parents().each(function() { 
+                if($.data(this, 'sortableTree-item')) {
+                    currentItem = $(this);
+                    return false;
+                }
+            });
+            if($.data(e.target, 'sortableTree-item')) currentItem = $(e.target);
+            
+            if(!currentItem) return false;  
+            if(this.options.handle) {
+                var validHandle = false;
+                $(this.options.handle, currentItem).each(function() { if(this == e.target) validHandle = true; });
+                if(!validHandle) return false;
+            }
+                
+            this.currentItem = currentItem;
             
             var o = this.options;
@@ -294 +246 @@
             this.helper = typeof o.helper == 'function' ? $(o.helper.apply(this.element[0], [e, this.currentItem])) : this.currentItem.clone();
             if(!this.helper.parents('body').length) this.helper.appendTo("body"); //Add the helper to the DOM if that didn't happen already
-            this.helper.css({ position: 'absolute', clear: 'both' }).addClass('ui-sortable-helper'); //Position it absolutely and add a helper class
+            this.helper.css({ position: 'absolute', clear: 'both' }).addClass('ui-sortableTree-helper'); //Position it absolutely and add a helper class
             
             //Prepare variables for position generation
@@ -324 +276 @@
 
             this.dragging = true;
-            return false;
-            
-        },
-        stop: function(e) {
+            return true;
+            
+        },
+        mouseStop: function(e) {
 
             if(this.newPositionAt) this.options.sortIndication.remove.call(this.currentItem, this.newPositionAt); //remove sort indicator
@@ -363 +315 @@
             
         },
-        drag: function(e) {
+        mouseDrag: function(e) {
 
             //Compute the helpers position
@@ -411 +363 @@
             }
         }
+    }));
+    
+    $.extend($.ui.sortableTree, {
+        defaults: {
+            items: '> *',
+            zIndex: 1000,
+            distance: 1
+        },
+        getter: "serialize toArray"
     });