sortable_nested_set 0.1.26 → 0.2.2

data/lib/sortable_nested_set/handles_sortable_nested_set.rb

@@ -1,6 +1,3 @@
-require 'sortable_element_for_nested_set'
-include SortableElementForNestedSet
-
 module SortableNestedSet
   def self.included(base)
     base.extend ClassMethods
@@ -8,146 +5,68 @@ module SortableNestedSet
 
   module ClassMethods
     def handles_sortable_nested_set
-      handles_sorting_of_nested_set
-
       class_eval do
-        define_method(:sns_category_controller) { controller_name }
         define_method(:sns_category_id_field) { "#{controller_name.singularize}_id" }
         define_method(:sns_category_class) { controller_name.classify.constantize }
-        define_method(:sns_items_type) {sns_category_class.sns_items_type }
-        define_method(:sns_item_class) {sns_items_type.to_s.classify.constantize }
+        define_method(:sns_items_type) { sns_category_class.sns_items_type }
+        define_method(:sns_item_class) { sns_items_type.to_s.classify.constantize }
       end
 
-      include(SortableNestedSet::InstanceMethods)
+      include InstanceMethods
     end
   end
 
   module InstanceMethods
     def sns_add_subcategory
-      redirect_to :controller => sns_category_controller, :action => :new, sns_category_id_field => params[:id]
+      redirect_to :action => :new, sns_category_id_field => params[:id]
     end
 
     def sns_add_item
       redirect_to :controller => sns_items_type, :action => :new, sns_category_id_field => params[:id]
     end
 
-    def sns_sort_categories
-      category = sns_category_class.find(params[:moved])
-      new_pos = position_of(:moved).in_tree(:menu)
-
-      # Ambiguous moves occur when a category is dropped outside the menu AND
-      # a :root parameter is specified. In this case, move the element to the
-      # :root category in the database and also put it at the end with javascript.
-      ambiguous_move = nil
-
-      begin
-        category.transaction do
-          if new_pos[:parent]
-            category.move_to_child_of(new_pos[:parent])
-          elsif params[:root].nil?
-            category.move_to_root
-          else
-            root_id = params[:root].to_i
-            ambiguous_move = params[:menu]['0']['id'] == params[:moved] ? :top : :bottom
-
-            if ambiguous_move == :bottom
-              category.move_to_child_of(params[:root])
-            else
-              category.move_to_left_of(sns_category_class.find(params[:root]).sns_subcategories.first)
-            end
-          end unless category.parent_id === new_pos[:parent]
+    def sns_sort
+      matches = params[:moved].match(/(\w+)_(\d+)$/)
+      moved_type = matches[1]
+      moved_id = matches[2].to_i
+      moved_parent = nil
+      tree = {} # category_id => [children of move_type]
 
-          begin
-            if new_pos[:move_to_right_of]
-              category.move_to_right_of(new_pos[:move_to_right_of])
-            else
-              category.move_to_left_of(new_pos[:move_to_left_of])
-            end
-          rescue ActiveRecord::RecordNotFound
-            # FIXME error raised when making first child
-          end unless ambiguous_move
+      for node in params[:tree].scan(/(\w+)\[(\d+)\]=(\w+)/)
+        type = node[0]
+        next unless type == moved_type
 
-          raise category.errors.full_messages.to_sentence unless category.valid?
-        end
-      rescue => err
-        render :update do |page|
-          page.alert err.message
-          page.reload # TODO return to original location with javascript
-        end
-      else
-        render :update do |page|
-          page.assign :categoryElement, page.literal("$('category_#{category.id}')")
-
-          if ambiguous_move
-            page.assign :rootElement, page.literal("$('subcategories_#{root_id}')")
-            page.remove "category_#{category.id}"
-
-            # there is a placeholder at index 0
-            page << (ambiguous_move == :top ?
-                     'rootElement.insertBefore(categoryElement, rootElement.childElements()[1])' :
-                     'rootElement.insert(categoryElement)')
+        id = node[1].to_i
+        parent = (node[2] == 'root') ? nil : node[2].to_i
 
-            page.visual_effect 'highlight', "category_#{category.id}"
-          else
-            page.assign :elderSibling, page.literal('categoryElement.nextElementSibling')
-            page.assign :parent, page.literal('categoryElement.parentNode')
+        moved_parent = parent if id == moved_id
 
-            page << <<EOF
-            if (elderSibling && elderSibling.hasClassName('placeholder')) {
-              elderSibling.remove();
-              parent.insertBefore(elderSibling, categoryElement);
-            }
-
-            /* WORKAROUND DEFECT: after dragdrop, z-index not abided by */
-            categoryElement.style.removeProperty('z-index');
-EOF
-          end
-        end
+        tree[parent] ||= []
+        tree[parent] << id
       end
-    end
 
-    def sns_sort_items
-      container = params.find { |key, val| key =~ /items_\d+/ }
-
-      params[container.first].each_with_index do |id, index|
-        category_id = container.first.match(/items_(\d+)/)[1]
-        sns_item_class.update(id, sns_category_id_field => category_id, :position => index + 1)
-      end if container
-
-      render :update do |page|
-        id = "item_#{params[:moved]}"
-        page << "$('#{id}').style.removeProperty('z-index')"
+      if moved_type == sns_items_type.to_s.singularize
+        item = sns_item_class.find(moved_id)
+        item.remove_from_list
+        item.update_attribute(sns_category_id_field, moved_parent)
+        item.insert_at(tree[moved_parent].index(moved_id))
+      else
+        moved_type.classify.constantize.find(moved_id).move(moved_parent, tree[moved_parent])
       end
-    end
 
-    def sns_toggle
-      render :update do |page|
-        page["items_#{params[:id]}"].toggle
-        page["subcategories_#{params[:id]}"].toggle
-        page.replace_html "toggle_#{params[:id]}",
-                          :partial => 'sortable_nested_set/toggle',
-                          :locals => { :category_type => params[:category_type],
-                                       :id => params[:id],
-                                       :state => (params[:state] == :open ? :closed : :open) }
-      end
+      render :nothing => true
     end
 
     def sns_destroy_category
       @category = sns_category_class.find(params[:id])
       @category.destroy
-
-      render :update do |page|
-        page["category_#{@category.id}"].remove
-      end
+      render 'sortable_nested_set/sns_destroy_category'
     end
 
     def sns_destroy_item
       @item = sns_item_class.find(params[:id])
       @item.destroy
-
-      render :update do |page|
-        page["item_#{@item.id}"].remove
-      end
+      render 'sortable_nested_set/sns_destroy_item'
     end
   end
 end

data/lib/sortable_nested_set/routes.rb

@@ -15,8 +15,7 @@ module ActionDispatch::Routing
         end
 
         collection do
-          put :sns_sort_categories
-          put :sns_sort_items
+          put :sns_sort
         end
       end
 

data/lib/sortable_nested_set.rb

@@ -1,4 +1,4 @@
-require 'sortable_nested_set/engine' if defined? Rails && Rails::VERSION::MAJOR == 3
+require 'sortable_nested_set/engine'
 require 'sortable_nested_set/acts_as_sortable_nested_set'
 require 'sortable_nested_set/handles_sortable_nested_set'
 require 'sortable_nested_set/routes'

data/public/javascripts/jquery.hoverIntent.minified.js

@@ -0,0 +1,10 @@
+/**
+* hoverIntent r5 // 2007.03.27 // jQuery 1.1.2
+* <http://cherne.net/brian/resources/jquery.hoverIntent.html>
+* 
+* @param  f  onMouseOver function || An object with configuration options
+* @param  g  onMouseOut function  || Nothing (use configuration options object)
+* @return    The object (aka "this") that called hoverIntent, and the event object
+* @author    Brian Cherne <brian@cherne.net>
+*/
+(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY;};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev]);}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev]);};var handleHover=function(e){var p=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;while(p&&p!=this){try{p=p.parentNode;}catch(e){p=this;}}if(p==this){return false;}var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);}if(e.type=="mouseover"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob);},cfg.timeout);}}};return this.mouseover(handleHover).mouseout(handleHover);};})(jQuery);

data/public/javascripts/jquery.ui.nestedSortable.js

@@ -0,0 +1,291 @@
+/*
+ * jQuery UI Nested Sortable 1.2.1
+ *
+ * Copyright 2010, Manuele J Sarfatti
+ *
+ * http://mjsarfatti.com/sandbox/nestedSortable
+ *
+ * Depends:
+ *	 jquery.ui.core.js 1.8+
+ *	 jquery.ui.widget.js 1.8+
+ *	 jquery.ui.sortable.js 1.8+
+ */
+(function($) {
+
+	$.widget("ui.nestedSortable", $.extend({}, $.ui.sortable.prototype, {
+
+		options: {
+			tabSize: 20,
+			disableNesting: 'ui-nestedSortable-no-nesting',
+			errorClass: 'ui-nestedSortable-error',
+			listType: 'ol'
+		},
+
+		_create: function(){
+			this.element.data('sortable', this.element.data('sortableTree'));
+			return $.ui.sortable.prototype._create.apply(this, arguments);
+		},
+
+		_mouseDrag: function(event) {
+
+			//Compute the helpers position
+			this.position = this._generatePosition(event);
+			this.positionAbs = this._convertPositionTo("absolute");
+
+			if (!this.lastPositionAbs) {
+				this.lastPositionAbs = this.positionAbs;
+			}
+
+			//Do scrolling
+			if(this.options.scroll) {
+				var o = this.options, scrolled = false;
+				if(this.scrollParent[0] != document && this.scrollParent[0].tagName != 'HTML') {
+
+					if((this.overflowOffset.top + this.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity)
+						this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop + o.scrollSpeed;
+					else if(event.pageY - this.overflowOffset.top < o.scrollSensitivity)
+						this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop - o.scrollSpeed;
+
+					if((this.overflowOffset.left + this.scrollParent[0].offsetWidth) - event.pageX < o.scrollSensitivity)
+						this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft + o.scrollSpeed;
+					else if(event.pageX - this.overflowOffset.left < o.scrollSensitivity)
+						this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft - o.scrollSpeed;
+
+				} else {
+
+					if(event.pageY - $(document).scrollTop() < o.scrollSensitivity)
+						scrolled = $(document).scrollTop($(document).scrollTop() - o.scrollSpeed);
+					else if($(window).height() - (event.pageY - $(document).scrollTop()) < o.scrollSensitivity)
+						scrolled = $(document).scrollTop($(document).scrollTop() + o.scrollSpeed);
+
+					if(event.pageX - $(document).scrollLeft() < o.scrollSensitivity)
+						scrolled = $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed);
+					else if($(window).width() - (event.pageX - $(document).scrollLeft()) < o.scrollSensitivity)
+						scrolled = $(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed);
+
+				}
+
+				if(scrolled !== false && $.ui.ddmanager && !o.dropBehaviour)
+					$.ui.ddmanager.prepareOffsets(this, event);
+			}
+
+			//Regenerate the absolute position used for position checks
+			this.positionAbs = this._convertPositionTo("absolute");
+
+			//Set the helper position
+			if(!this.options.axis || this.options.axis != "y") this.helper[0].style.left = this.position.left+'px';
+			if(!this.options.axis || this.options.axis != "x") this.helper[0].style.top = this.position.top+'px';
+
+			//Rearrange
+			for (var i = this.items.length - 1; i >= 0; i--) {
+
+				//Cache variables and intersection, continue if no intersection
+				var item = this.items[i], itemElement = item.item[0], intersection = this._intersectsWithPointer(item);
+				if (!intersection) continue;
+
+				if(itemElement != this.currentItem[0] //cannot intersect with itself
+					&&	this.placeholder[intersection == 1 ? "next" : "prev"]()[0] != itemElement //no useless actions that have been done before
+					&&	!$.ui.contains(this.placeholder[0], itemElement) //no action if the item moved is the parent of the item checked
+					&& (this.options.type == 'semi-dynamic' ? !$.ui.contains(this.element[0], itemElement) : true)
+					//&& itemElement.parentNode == this.placeholder[0].parentNode // only rearrange items within the same container
+				) {
+
+					this.direction = intersection == 1 ? "down" : "up";
+
+					if (this.options.tolerance == "pointer" || this._intersectsWithSides(item)) {
+						this._rearrange(event, item);
+					} else {
+						break;
+					}
+
+					// Clear emtpy ul's/ol's
+					this._clearEmpty(itemElement);
+
+					this._trigger("change", event, this._uiHash());
+					break;
+				}
+			}
+
+			// Get the real previous item
+			itemBefore = this.placeholder[0].previousSibling;
+			while (itemBefore != null) {
+				if (itemBefore.nodeType == 1 && itemBefore != this.currentItem[0]) {
+					break;
+				} else {
+					itemBefore = itemBefore.previousSibling;
+				}
+			}
+
+			parentItem = this.placeholder[0].parentNode.parentNode;
+			newList = document.createElement(o.listType);
+
+			// Make/delete nested ul's/ol's
+			if (parentItem != null && parentItem.nodeName == 'LI' && this.positionAbs.left < $(parentItem).offset().left) {
+				$(parentItem).after(this.placeholder[0]);
+				this._clearEmpty(parentItem);
+			} else if (itemBefore != null && itemBefore.nodeName == 'LI' && this.positionAbs.left > $(itemBefore).offset().left + this.options.tabSize) {
+				if (!($(itemBefore).hasClass(this.options.disableNesting))) {
+					if ($(this.placeholder[0]).hasClass(this.options.errorClass)) {
+						$(this.placeholder[0]).css('marginLeft', 0).removeClass(this.options.errorClass);
+					}
+					if (itemBefore.children[1] == null) {
+						itemBefore.appendChild(newList);
+					}
+					itemBefore.children[1].appendChild(this.placeholder[0]);
+				} else {
+					$(this.placeholder[0]).addClass(this.options.errorClass).css('marginLeft', this.options.tabSize);
+				}
+			} else if (itemBefore != null) {
+				if ($(this.placeholder[0]).hasClass(this.options.errorClass)) {
+					$(this.placeholder[0]).css('marginLeft', 0).removeClass(this.options.errorClass);
+				}
+				$(itemBefore).after(this.placeholder[0]);
+			} else {
+				if ($(this.placeholder[0]).hasClass(this.options.errorClass)) {
+					$(this.placeholder[0]).css('marginLeft', 0).removeClass(this.options.errorClass);
+				}
+			}
+
+			//Post events to containers
+			this._contactContainers(event);
+
+			//Interconnect with droppables
+			if($.ui.ddmanager) $.ui.ddmanager.drag(this, event);
+
+			//Call callbacks
+			this._trigger('sort', event, this._uiHash());
+
+			this.lastPositionAbs = this.positionAbs;
+			return false;
+
+		},
+
+		serialize: function(o) {
+
+			var items = this._getItemsAsjQuery(o && o.connected);
+			var str = []; o = o || {};
+
+			$(items).each(function() {
+				var res = ($(o.item || this).attr(o.attribute || 'id') || '').match(o.expression || (/(.+)[-=_](.+)/));
+				var pid = ($(o.item || this).parent(o.listType).parent('li').attr(o.attribute || 'id') || '').match(o.expression || (/(.+)[-=_](.+)/));
+				if(res) str.push((o.key || res[1]+'['+(o.key && o.expression ? res[1] : res[2])+']')+'='+(pid ? (o.key && o.expression ? pid[1] : pid[2]) : 'root'));
+			});
+
+			if(!str.length && o.key) {
+				str.push(o.key + '=');
+			}
+
+			return str.join('&');
+
+		},
+
+		toArray: function(o) {
+
+			o = o || {};
+			var sDepth = o.startDepthCount || 0;
+			var ret = [];
+			var left = 2;
+
+			ret.push({"item_id": 'root', "parent_id": 'none', "depth": sDepth, "left": '1', "right": ($('li', this.element).length + 1) * 2});
+
+			$(this.element).children('li').each(function() {
+				left = _recursiveArray($(this), sDepth + 1, left);
+			});
+
+			return ret;
+
+			function _recursiveArray(item, depth, left) {
+
+				right = left + 1;
+
+				if ($(item).children(o.listType).children('li').length > 0) {
+					depth ++;
+					$(item).children(o.listType).children('li').each(function() {
+						right = _recursiveArray($(this), depth, right);
+					});
+					depth --;
+				}
+
+				id = $(item).attr('id').match(o.expression || (/(.+)[-=_](.+)/));
+
+				if (depth === sDepth + 1) pid = 'root';
+				else {
+					parentItem = $(item).parent(o.listType).parent('li').attr('id').match(o.expression || (/(.+)[-=_](.+)/));
+					pid = parentItem[2];
+				}
+
+				ret.push({"item_id": id[2], "parent_id": pid, "depth": depth, "left": left, "right": right});
+
+				return left = right + 1;
+			}
+
+		},
+
+		_createPlaceholder: function(that) {
+
+			var self = that || this, o = self.options;
+
+			if(!o.placeholder || o.placeholder.constructor == String) {
+				var className = o.placeholder;
+				o.placeholder = {
+					element: function() {
+
+						var el = $(document.createElement(self.currentItem[0].nodeName))
+							.addClass(className || self.currentItem[0].className+" ui-sortable-placeholder")
+							.removeClass("ui-sortable-helper")[0];
+
+						if(!className)
+							el.style.visibility = "hidden";
+
+						return el;
+					},
+					update: function(container, p) {
+
+						// 1. If a className is set as 'placeholder option, we don't force sizes - the class is responsible for that
+						// 2. The option 'forcePlaceholderSize can be enabled to force it even if a class name is specified
+						if(className && !o.forcePlaceholderSize) return;
+
+						//If the element doesn't have an actual height by itself (without styles coming from a stylesheet), it receives the inline height from the dragged item
+						if(!p.height() || p.css('height') == 'auto') { p.height(self.currentItem.height()); };
+						if(!p.width()) { p.width(self.currentItem.width()); };
+					}
+				};
+			}
+
+			//Create the placeholder
+			self.placeholder = $(o.placeholder.element.call(self.element, self.currentItem));
+
+			//Append it after the actual current item
+			self.currentItem.after(self.placeholder);
+
+			//Update the size of the placeholder (TODO: Logic to fuzzy, see line 316/317)
+			o.placeholder.update(self, self.placeholder);
+
+		},
+
+		_clear: function(event, noPropagation) {
+
+			$.ui.sortable.prototype._clear.apply(this, arguments);
+
+			// Clean last empty ul/ol
+			for (var i = this.items.length - 1; i >= 0; i--) {
+				var item = this.items[i].item[0];
+				this._clearEmpty(item);
+			}
+			return true;
+
+		},
+
+		_clearEmpty: function(item) {
+
+			if (item.children[1] && item.children[1].children.length == 0) {
+				item.removeChild(item.children[1]);
+			}
+
+		}
+
+	}));
+
+	$.ui.nestedSortable.prototype.options = $.extend({}, $.ui.sortable.prototype.options, $.ui.nestedSortable.prototype.options);
+
+})(jQuery);

data/public/javascripts/sortable_nested_set.js

@@ -0,0 +1,67 @@
+$(document).ready(function() {
+  $.getScript('/javascripts/jquery.hoverIntent.minified.js', function() {
+    function linkHover() {
+      $(this).next().addClass('link_hover');
+    }
+
+    function linkUnhover() {
+      if (!$(this).next().hasClass('pop_up_hover'))
+        $(this).next().removeClass('link_hover');
+    }
+
+    function popUpHover() {
+      $(this).removeClass('link_hover');
+      $(this).addClass('pop_up_hover');
+    }
+
+    function popUpUnhover() {
+      $(this).removeClass('pop_up_hover');
+    }
+
+    var linkConfig = {
+      interval: 200,
+      out: linkUnhover,
+      over: linkHover,
+      sensitivity: 4,
+      timeout: 250
+    };
+
+    var popUpConfig = {
+      interval: 0,
+      out: popUpUnhover,
+      over: popUpHover,
+      sensitivity: 4,
+      timeout: 250
+    };
+
+    $('.mega_menu').hoverIntent(linkConfig);
+    $('.mega_menu_links').hoverIntent(popUpConfig);
+  });
+
+  $.getScript('/javascripts/jquery.ui.nestedSortable.js', function() {
+    $('#menu').nestedSortable({
+      disableNesting: 'item',
+      forcePlaceholderSize: true,
+      handle: '.handle',
+      items: 'li',
+      opacity: .6,
+      placeholder: 'placeholder',
+      tabSize: 25,
+      tolerance: 'pointer',
+      toleranceElement: '> div',
+      update: function(event, ui) {
+        $.ajax({
+          type: 'put',
+          url: this.getAttribute('data-url'),
+          data: { moved: ui.item[0].id, tree: $('#menu').nestedSortable('serialize') }
+        });
+      }
+    });
+  });
+
+  $('#menu .toggle').click(function() {
+    $(this).toggleClass('open');
+    $(this).toggleClass('closed');
+    $(this).parent().next('ol').toggle();
+  });
+});

data/public/stylesheets/sortable_nested_set.css

@@ -0,0 +1,82 @@
+.mega_menu {
+  background: url(/images/mega_menu.png) no-repeat center;
+  cursor: pointer;
+  padding-left: 30px;
+}
+
+.mega_menu_links {
+  background: #ffc;
+  border: 1px solid #eea;
+  display: none;
+  padding: 0.5em;
+  position: absolute;
+  z-index: 1;
+}
+
+.mega_menu_links a:link, a:visited {
+  color: blue;
+  text-decoration: none;
+}
+
+.mega_menu_links a:hover {
+  color: green;
+}
+
+.link_hover {
+  display: block;
+}
+
+.pop_up_hover {
+  display: block;
+  border: 1px solid #cca;
+}
+
+.sortable, .sortable ol {
+  list-style-type: none;
+  margin: 0 0 0 25px;
+  padding: 0;
+}
+
+.sortable {
+  margin: 0;
+}
+
+.sortable li {
+  margin: 7px 0 0 0;
+  padding: 0;
+  position: relative;
+}
+
+.sortable .handle  {
+  cursor: move;
+  display: inline;
+  margin: 0;
+}
+
+.placeholder {
+  background-color: #cfcfcf;
+}
+
+.ui-nestedSortable-error {
+  background: #fbe3e4;
+  color: #8a1f11;
+}
+
+.toggle {
+  cursor: pointer;
+  padding-right: 1em;
+}
+
+#menu span.open {
+  background: url(/images/folder_open.png) no-repeat center;
+}
+
+#menu span.closed {
+  background: url(/images/folder_closed.png) no-repeat center;
+}
+
+a.lineage {
+  background: url(/images/folder_closed.png) no-repeat left;
+  padding-left: 9px;
+  padding-right: 5px;
+}