jquery_sortable_tree 3.0.0

data/app/assets/javascripts/expandable_tree/restorable.js.coffee

@@ -0,0 +1,125 @@
+window.is_restorable_tree = true
+
+class @TSTconst
+  @_name        = 'TST'
+  @delimiter    = ';'
+  @separator    = '|'
+  @re           = -> new RegExp(@cookie_name() + '\\' + @separator)
+  @hash_prefix  = -> @cookie_name() + @separator
+  @cookie_scope = -> $('.sortable_tree').data('cookie_scope') || $('.sortable_tree').data('cookie-scope')
+  @cookie_name  = ->
+    return @_name unless @cookie_scope()
+    @_name + '_' + @cookie_scope()
+
+# ====================================
+# Helpers
+# ====================================
+@_get_hash = -> document.location.hash
+@_set_hash = (str) ->
+  window.skip_expandable_tree_hashchange = true
+  document.location.hash = str
+
+@_uniqueArray = (arr = []) ->
+  output = {}
+  output[item] = item for item in arr
+  val for key, val of output
+
+@_compactArray = (array) -> array.filter (e) -> return e
+
+@_nested_set_hash_arr = (hash) ->
+    return [] unless hash
+    [prefix, arr] = hash.split(TSTconst.separator)
+    _compactArray _uniqueArray arr.split(TSTconst.delimiter)
+
+# ====================================
+# Helpers Fn
+# ====================================
+@nested_tree_get_path = ->
+  hash = _get_hash()
+  return false unless hash.match(TSTconst.re())
+  _nested_set_hash_arr(hash)
+
+@hash_and_cookie_accordance = ->
+  if window.is_cookie_restoreable_tree
+    hash = _get_hash()
+    if hash.length is 0
+      $.removeCookie( TSTconst.cookie_name() )
+    else
+      return false unless hash.match(TSTconst.re())
+      str = hash.split(TSTconst.separator)[1]
+      $.cookie(TSTconst.cookie_name(), str, { expires: 14 })
+
+  false
+
+@nested_tree_path_remove = (id) ->
+  hash  = _get_hash()
+  return false unless hash.match(TSTconst.re())
+
+  arr   = _nested_set_hash_arr(hash)
+  index = arr.indexOf(id+'')
+  return hash_and_cookie_accordance() if index is -1
+
+  arr.splice(index, 1)
+  str = _uniqueArray(arr).join(TSTconst.delimiter)
+
+  if str.length is 0
+    _set_hash('')
+  else
+    _set_hash(TSTconst.hash_prefix() + str)
+  
+  hash_and_cookie_accordance()
+
+  true
+
+@nested_tree_path_add = (id) ->
+  str  = id
+  hash = _get_hash()
+
+  if hash.match(TSTconst.re())
+    arr = _nested_set_hash_arr(hash)
+    arr.push(id)
+    arr = _uniqueArray arr
+    str = arr.join(TSTconst.delimiter)
+
+  _set_hash(TSTconst.hash_prefix() + str)
+  hash_and_cookie_accordance()
+
+# ====================================
+# Restore Fn
+# ====================================
+@load_nested_nodes = (arr, expand_node_url) ->
+  if arr.length is 0
+    window.skip_expandable_tree_hashchange = false
+    return false
+
+  id         = arr.shift()
+  tree       = $('.sortable_tree')
+  node       = $("[data-node-id=#{id}]")
+  ctrl_items = $('i.handle, b.expand', tree)
+
+  if node.length is 0
+    load_nested_nodes(arr, expand_node_url)
+  else
+    $.ajax
+      type:     'POST'
+      dataType: 'html'
+      data:     { id: id }
+      url:      expand_node_url
+
+      beforeSend: (xhr) ->
+        ctrl_items.hide()
+        window.skip_expandable_tree_hashchange = true
+
+      success: (data, status, xhr) ->
+        ctrl_items.show()
+        append_children_to_node(node, data)
+        load_nested_nodes(arr, expand_node_url)
+
+      error: (xhr, status, error) ->
+        try
+          console.log error
+
+@restore_nested_tree = (sortable_tree, expand_node_url) ->
+  arr  = nested_tree_get_path()
+  return false unless arr
+  load_nested_nodes(arr, expand_node_url)

data/app/assets/javascripts/nested_sortable/inline_operations.js.coffee

@@ -0,0 +1,56 @@
+$ ->
+  @edit_node = (event) ->
+    event.preventDefault()
+    sortable_tree = $(this).parents('ol.sortable_tree')
+    edit_link = $(this)
+    h4 = $(this).parent()
+    $(this).hide()
+    url = $(this).attr('href')
+    text = $(this).text()
+    edit_box = $("<input type='text' id='#edit_box' data-url='#{url}' value='#{text}' style='width: 200px;' class='form-control' />")
+    edit_box.appendTo(h4.parent())
+    edit_box.focus()
+    edit_done = ->
+      hide_input_box = ->
+        edit_link.show()
+        edit_box.remove()
+
+      if edit_box.val().trim().length > 0
+        data = {}
+        attributes = {}
+        title_field = 'title'
+        title_field = sortable_tree.data('title') if sortable_tree.data('title')
+        attributes[title_field] = edit_box.val()
+        data[sortable_tree.data('model')] = attributes
+        $.ajax(
+          type: 'PUT'
+          data: data
+          url: edit_link.attr('href')
+          success: ->
+            edit_link.text(edit_box.val())
+            hide_input_box()
+          error: hide_input_box
+        )
+      else
+        hide_input_box()
+    edit_box.on 'keypress', (event)->
+      $(this).trigger('focusout') if event.which == 13
+    edit_box.on 'focusout', edit_done
+
+  # Adding new item to the list
+  $('ol.sortable_tree').siblings('form').on 'ajax:success', (event, data, status, xhr) ->
+    sortable_tree = $(this).siblings('ol.sortable_tree')
+    $(this).find('input[type=text]').val('')
+    list_item = $(this).siblings('ol.fake-node').find('li.node').clone()
+    list_item.find('h4 > a').text(data.name)
+    list_item.find('a.delete, a.edit').attr 'href', (index, attr) ->
+      attr.replace(':id', data.id)
+    list_item.data('node-id', data.id)
+    list_item.attr('data-node-id', data.id)
+    list_item.appendTo(sortable_tree)
+
+  # remove items that deleted
+  $('ol.sortable_tree').on 'ajax:success', '.controls a.delete', -> $(this).parent().parent().remove()
+
+  # edit clicked item
+  $('ol.sortable_tree').on 'click', 'h4 > a.edit', @edit_node

data/app/assets/javascripts/nested_sortable/jquery.ui.nestedSortable.js

@@ -0,0 +1,358 @@
+/*
+ * jQuery UI Nested Sortable
+ * v 1.3.4 / 28 apr 2011
+ * http://mjsarfatti.com/sandbox/nestedSortable
+ *
+ * Depends:
+ *	 jquery.ui.sortable.js 1.8+
+ *
+ * License CC BY-SA 3.0
+ * Copyright 2010-2011, Manuele J Sarfatti
+ */
+
+(function($) {
+
+	$.widget("ui.nestedSortable", $.extend({}, $.ui.sortable.prototype, {
+
+		options: {
+			tabSize: 20,
+			disableNesting: 'ui-nestedSortable-no-nesting',
+			errorClass: 'ui-nestedSortable-error',
+			listType: 'ol',
+			listClass: 'nested_set',
+			maxLevels: 0,
+			noJumpFix: 0
+		},
+
+		_create: function(){
+			if (this.noJumpFix == false)
+				this.element.height(this.element.height());
+			this.element.data('sortable', this.element.data('nestedSortable'));
+			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
+					&&	!$.contains(this.placeholder[0], itemElement) //no action if the item moved is the parent of the item checked
+					&& (this.options.type == 'semi-dynamic' ? !$.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;
+				}
+			}
+
+			var parentItem = (this.placeholder[0].parentNode.parentNode && $(this.placeholder[0].parentNode.parentNode).closest('.ui-sortable').length) ? $(this.placeholder[0].parentNode.parentNode) : null;
+			var level = this._getLevel(this.placeholder);
+			var childLevels = this._getChildLevels(this.helper);
+			var previousItem = this.placeholder[0].previousSibling ? $(this.placeholder[0].previousSibling) : null;
+			if (previousItem != null) {
+				while (previousItem[0].nodeName.toLowerCase() != 'li' || previousItem[0] == this.currentItem[0]) {
+					if (previousItem[0].previousSibling) {
+						previousItem = $(previousItem[0].previousSibling);
+					} else {
+						previousItem = null;
+						break;
+					}
+				}
+			}
+
+			newList = document.createElement(o.listType);
+			$(newList).addClass(o.listClass)
+
+			this.beyondMaxLevels = 0;
+
+			// If the item is moved to the left, send it to its parent level
+			if (parentItem != null && this.positionAbs.left < parentItem.offset().left) {
+				parentItem.after(this.placeholder[0]);
+				this._clearEmpty(parentItem[0]);
+				this._trigger("change", event, this._uiHash());
+			}
+			// If the item is below another one and is moved to the right, make it a children of it
+			else if (previousItem != null && this.positionAbs.left > previousItem.offset().left + o.tabSize) {
+				this._isAllowed(previousItem, level+childLevels+1);
+				if (!previousItem.children(o.listType).length) {
+					previousItem[0].appendChild(newList);
+				}
+				previousItem.children(o.listType)[0].appendChild(this.placeholder[0]);
+				this._trigger("change", event, this._uiHash());
+			}
+			else {
+				this._isAllowed(parentItem, level+childLevels);
+			}
+
+			//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;
+
+		},
+
+		_mouseStop: function(event, noPropagation) {
+
+			// If the item is in a position not allowed, send it back
+			if (this.beyondMaxLevels) {
+				var parent = this.placeholder.parent().closest(this.options.items);
+				
+				for (var i = this.beyondMaxLevels - 1; i > 0; i--) {
+					parent = parent.parent().closest(this.options.items);
+				}
+
+				this.placeholder.removeClass(this.options.errorClass);
+				parent.after(this.placeholder);
+				this._trigger("change", event, this._uiHash());
+			}
+
+			$.ui.sortable.prototype._mouseStop.apply(this, arguments);
+
+		},
+
+		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('&');
+
+		},
+
+		toHierarchy: function(o) {
+
+			o = o || {};
+			var sDepth = o.startDepthCount || 0;
+			var ret = [];
+
+			$(this.element).children('li').each(function() {
+				var level = _recursiveItems($(this));
+				ret.push(level);
+			});
+
+			return ret;
+
+			function _recursiveItems(li) {
+				var id = ($(li).attr(o.attribute || 'id') || '').match(o.expression || (/(.+)[-=_](.+)/));
+				if (id != null) {
+					var item = {"id" : id[2]};
+					if ($(li).children(o.listType).children('li').length > 0) {
+						item.children = [];
+						$(li).children(o.listType).children('li').each(function () {
+							var level = _recursiveItems($(this));
+							item.children.push(level);
+						});
+					}
+					return item;
+				}
+			}
+        },
+
+		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);
+			});
+
+			function _sortByLeft(a,b) {
+				return a['left'] - b['left'];
+			}
+			ret = ret.sort(_sortByLeft);
+
+			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(o.attribute || '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];
+				}
+
+				if (id != null) {
+						ret.push({"item_id": id[2], "parent_id": pid, "depth": depth, "left": left, "right": right});
+				}
+
+				return left = right + 1;
+			}
+
+		},
+
+		_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]);
+			}
+
+		},
+
+		_getLevel: function(item) {
+
+			var level = 1;
+
+			if (this.options.listType) {
+					var list = item.closest(this.options.listType);
+					while (!list.is('.ui-sortable')/* && level < this.options.maxLevels*/) {
+							level++;
+							list = list.parent().closest(this.options.listType);
+					}
+			}
+
+			return level;
+		},
+
+		_getChildLevels: function(parent, depth) {
+			var self = this,
+			    o = this.options,
+			    result = 0;
+			depth = depth || 0;
+
+			$(parent).children(o.listType).children(o.items).each(function (index, child) {
+					result = Math.max(self._getChildLevels(child, depth + 1), result);
+			});
+
+			return depth ? result + 1 : result;
+		},
+
+		_isAllowed: function(parentItem, levels) {
+			var o = this.options
+			// Are we trying to nest under a no-nest or are we nesting too deep?
+			if (parentItem == null || !(parentItem.hasClass(o.disableNesting))) {
+				if (o.maxLevels < levels && o.maxLevels != 0) {
+					this.placeholder.addClass(o.errorClass);
+					this.beyondMaxLevels = levels - o.maxLevels;
+				} else {
+					this.placeholder.removeClass(o.errorClass);
+					this.beyondMaxLevels = 0;
+				}
+			} else {
+				this.placeholder.addClass(o.errorClass);
+				if (o.maxLevels < levels && o.maxLevels != 0) {
+					this.beyondMaxLevels = levels - o.maxLevels;
+				} else {
+					this.beyondMaxLevels = 1;
+				}
+			}
+		}
+
+	}));
+
+	$.ui.nestedSortable.prototype.options = $.extend({}, $.ui.sortable.prototype.options, $.ui.nestedSortable.prototype.options);
+})(jQuery);

data/app/assets/javascripts/render_tree_helper.js.coffee

@@ -0,0 +1,82 @@
+@_escape = (str) ->
+  str
+  .replace(/&/g, '&')
+  .replace(/>/g, '>')
+  .replace(/</g, '&lt;')
+  .replace(/"/g, '&quot;')
+
+@_unescape = (str) ->
+  str
+  .replace(/&amp;/g, '&')
+  .replace(/&gt;/g, '>')
+  .replace(/&lt;/g, '<')
+  .replace(/&quot;/g, '"')
+
+@render_tree = (tree, options = {}) ->
+  html = ''
+
+  opts =
+    id:    'id'
+    node:  null
+    root:  false
+    level: 0
+    boost: []
+
+  # JQuery hash merge
+  $.extend opts, options
+
+  # Define Boost Only Once
+  unless opts['boost'].length is 0
+    boost = []
+    for node in tree
+      num  = node.parent_id || 0
+      item = boost[num]
+      boost[num] = [] unless item instanceof Array
+      boost[num].push node
+
+    opts['boost'] = boost
+
+  unless opts.node
+    # render root nodes
+    roots = opts['boost'][0]
+
+    # select roots
+    # for node in tree
+    #   roots.push node if node.parent_id is null
+
+    # roots is empty, but tree is not empty
+    # I should select nodes with minimal parent_id
+    # they will be roots
+    # order by lft, should be made at server side
+    min_elem = tree[0]
+    if roots.length is 0 and tree.length isnt 0
+      for elem in tree
+        min_elem = elem if elem.parent_id < min_elem.parent_id
+      # select roots witn min parent_id
+      for elem in tree
+        if elem.parent_id is min_elem.parent_id
+          roots.push elem
+
+    # render tree
+    for node in roots
+      $.extend opts, { node: node, root: false, level: opts.level + 1 }
+      children_html = render_tree tree, opts
+      html += opts.render_node(node, children_html, opts)
+  else
+    # render children nodes
+    children      = []
+    children_html = ''
+    children      = boost[opts.node.id]
+
+    # select children
+    # for elem in tree
+    #   children.push elem if elem.parent_id is opts.node.id
+
+    # render children nodes
+    for node in children
+      $.extend opts, { node: node, root: false, level: opts.level + 1 }
+      children_html = render_tree tree, opts
+      html += opts.render_node(node, children_html, opts)
+  
+  # result html
+  html

data/app/assets/javascripts/sortable_tree/initializer.js

@@ -0,0 +1,3 @@
+//= require nested_sortable/jquery.ui.nestedSortable
+//= require sortable_tree/sortable_tree
+//= require nested_sortable/inline_operations

data/app/assets/javascripts/sortable_tree/sortable_tree.js.coffee

@@ -0,0 +1,60 @@
+@rebuild_sortable_tree = (rebuild_url, item_id, parent_id, prev_id, next_id) ->
+  $.ajax
+    type:     'POST'
+    dataType: 'script'
+    url:      rebuild_url
+    data:
+      id:        item_id
+      parent_id: parent_id
+      prev_id:   prev_id
+      next_id:   next_id
+
+    beforeSend: (xhr) ->
+      $('.sortable_tree i.handle').hide()
+
+    success: (data, status, xhr) ->
+      $('.sortable_tree i.handle').show()
+
+    error: (xhr, status, error) ->
+      console.log error
+
+@init_sortable_tree = ->
+  sortable_tree = $('ol.sortable_tree')
+  return false if sortable_tree.length is 0
+
+  rebuild_url = sortable_tree.data('rebuild_url') || sortable_tree.data('rebuild-url')
+  max_levels  = sortable_tree.data('max_levels')  || sortable_tree.data('max-levels')
+
+  ############################################
+  # Initialize Sortable Tree
+  ############################################
+  sortable_tree.nestedSortable
+    items:            'li'
+    helper:           'clone'
+    handle:           'i.handle'
+    tolerance:        'pointer'
+    maxLevels:        max_levels
+    revert:           250
+    tabSize:          25
+    opacity:          0.6
+    placeholder:      'placeholder'
+    disableNesting:   'no-nest'
+    toleranceElement: '> div'
+    forcePlaceholderSize: true
+
+  ############################################
+  # Sortable Update Event
+  ############################################
+  sortable_tree.on "sortupdate", (event, ui) =>
+    item      = ui.item
+    attr_name = 'node-id'
+    item_id   = item.data(attr_name)
+    prev_id   = item.prev().data(attr_name)
+    next_id   = item.next().data(attr_name)
+    parent_id = item.parent().parent().data(attr_name)
+
+    rebuild_sortable_tree(rebuild_url, item_id, parent_id, prev_id, next_id)
+
+  true
+
+$ -> init_sortable_tree()