the_sortable_tree 2.3.3 → 2.4.0

data/README.md

@@ -1,13 +1,15 @@
 # TheSortableTree v2.3.3
 
+[![Code Climate](https://codeclimate.com/github/the-teacher/the_sortable_tree.png)](https://codeclimate.com/github/the-teacher/the_sortable_tree)
+
 > tested with rails 3.2.13 + haml 4
 
 Nested Set + Drag&Drop GUI. Very fast! Best render helper! **2000 nodes/sec**. Ready for rails 4 ([RubyGems](http://rubygems.org/gems/the_sortable_tree))
 
-### Test Application
+### Dummy Application
 
-* [spec/the_sortable_tree_app](https://github.com/the-teacher/the_sortable_tree/tree/master/spec/the_sortable_tree_app)
-* [spec/the_sortable_tree_app/README.md](https://github.com/the-teacher/the_sortable_tree/blob/master/spec/the_sortable_tree_app/README.md)
+* [spec/dummy_app](https://github.com/the-teacher/the_sortable_tree/tree/master/spec/dummy_app)
+* [spec/dummy_app/README.md](https://github.com/the-teacher/the_sortable_tree/blob/master/spec/dummy_app/README.md)
 
 ## Sortable tree. Drag&Drop GUI
 
@@ -19,7 +21,11 @@ Nested Set + Drag&Drop GUI. Very fast! Best render helper! **2000 nodes/sec**. R
 
 ## Render Nested Options
 
-![Render tree](https://raw.github.com/the-teacher/the_sortable_tree/master/docs/nested_options.jpg)
+![Nested options](https://raw.github.com/the-teacher/the_sortable_tree/master/docs/nested_options.jpg)
+
+## Expandable tree
+
+![Expandable](https://raw.github.com/the-teacher/the_sortable_tree/master/docs/expandable.jpg)
 
 ## Keywords
 

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

@@ -0,0 +1,33 @@
+@_arrays_diff = (a, b) -> b.filter (i) -> return !(a.indexOf(i) > -1)
+
+@expandable_tree_hashchange = (hash_event) ->
+  if window.skip_expandable_tree_hashchange
+    window.skip_expandable_tree_hashchange = false
+    return true
+
+  hash_and_cookie_accordance()
+  
+  oEvent  = hash_event.originalEvent
+  new_url = oEvent.newURL
+  old_url = oEvent.oldURL
+
+  new_hash = new_url.split('#')[1]
+  old_hash = old_url.split('#')[1]
+
+  return false unless ('#'+new_hash).match(TSTconst.re()) or ('#'+old_hash).match(TSTconst.re())
+
+  new_arr = _nested_set_hash_arr(new_hash)
+  old_arr = _nested_set_hash_arr(old_hash)
+  
+  diff_ids = if new_arr.length >= old_arr.length
+    _arrays_diff(old_arr, new_arr)
+  else
+    _arrays_diff(new_arr, old_arr)
+
+  for id in diff_ids
+    btn = $("[data-node-id=#{id}] > .item .expand")
+    btn.click()
+    setTimeout -> window.skip_expandable_tree_hashchange = false
+
+$(window).bind 'hashchange', (hash_event) ->
+  expandable_tree_hashchange(hash_event)

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

@@ -1,3 +1,29 @@
+# ----------------------------------------
+# Restorable Helpers
+# ----------------------------------------
+@add_to_restorable_path = (node) ->
+  if window.is_restorable_tree
+    id = node.data('node-id')
+    nested_tree_path_add(id)
+    return true
+  false
+
+@remove_from_restorable_path = (node) ->
+  if window.is_restorable_tree
+    id = node.data('node-id')
+    nested_tree_path_remove(id)
+    return true
+  false
+
+# ----------------------------------------
+# Main Helpers
+# ----------------------------------------
+@nested_tree_toggle = (button) ->
+  if button.hasClass('minus')
+    button.removeClass('minus').addClass('plus').html('+')
+  else
+    button.removeClass('plus').addClass('minus').html('–')
+
 @append_children_to_node = (node, html) ->
   html = html.trim()
   item = node.children('.item')
@@ -8,43 +34,71 @@
     button.addClass 'empty'
 
   if html.length > 0
-    button.removeClass('plus').addClass('minus').html('–')
     item.after html
-    
+    nested_tree_toggle(button)
+    add_to_restorable_path(node)
 
-@upload_nodes_children = (node, expand_node_url, tree_type = 'expandable') ->
-  node_id = node.attr 'id'
+@upload_nodes_children = (node, expand_node_url) ->
+  node_id    = node.data('node-id')
+  tree       = $('.sortable_tree')
+  ctrl_items = $('i.handle, b.expand', tree)
 
   $.ajax
     type:     'POST'
     dataType: 'html'
+    data:     { id: node_id }
     url:      expand_node_url
-    data:
-      id: node_id
-      tree_type: tree_type
 
     beforeSend: (xhr) ->
-      $('.sortable_tree i.handle').hide()
-      $('.sortable_tree b.expand').hide()
+      ctrl_items.hide()
+      window.skip_expandable_tree_hashchange = true
 
     success: (data, status, xhr) ->
-      $('.sortable_tree i.handle').show()
-      $('.sortable_tree b.expand').show()
+      ctrl_items.show()
       append_children_to_node(node, data)
 
     error: (xhr, status, error) ->
-      console.log error
+      try
+        console.log error
+
+@init_expandable_tree = ->
+  sortable_tree = $('ol.sortable_tree')
+  return false if sortable_tree.length is 0
 
-$ ->
-  for sortable_tree in $('ol.sortable_tree')
-    sortable_tree   = $ sortable_tree
-    expand_node_url = sortable_tree.data('expand_node_url')
-    tree_type       = sortable_tree.data('tree_type')
+  window.is_restorable_tree         ||= false
+  window.is_cookie_restoreable_tree   = sortable_tree.data('cookie_store') || sortable_tree.data('cookie-store')
+
+  if window.is_cookie_restoreable_tree
+    steps = $.cookie(TSTconst.cookie_name())
+    _set_hash(TSTconst.hash_prefix() + steps) if steps
+
+  expand_node_url = sortable_tree.data('expand_node_url') || sortable_tree.data('expand-node-url')
+
+  # Now it's designed only for one tree
+  restore_nested_tree(sortable_tree, expand_node_url) if window.is_restorable_tree
+
+  sortable_tree.on 'click', '.expand.minus', (e) ->
+    button = $ @
+    node   = button.parent().parent()
+    nested_tree_toggle(button)
+    remove_from_restorable_path(node)
+    node.children('.nested_set').hide()
+    false
+
+  sortable_tree.on 'click', '.expand.plus', (e) ->
+    button     = $ @
+    node       = button.parent().parent()
+    nested_set = node.children('.nested_set')
+    
+    if nested_set.length is 0
+      upload_nodes_children(node, expand_node_url)
+    else
+      nested_set.show()
+      nested_tree_toggle(button)
+      add_to_restorable_path(node)
 
-    pluses = $ '.expand.plus', sortable_tree
+    false
 
-    pluses.live 'click', (e) ->
-      node = $(@).parent().parent()
-      upload_nodes_children(node, expand_node_url, tree_type)
+  true
 
-      false
+$ -> init_expandable_tree()

data/app/assets/javascripts/expandable_tree/jquery.cookie.coffee

@@ -0,0 +1,68 @@
+#!
+# * jQuery Cookie Plugin v1.3.1
+# * https://github.com/carhartl/jquery-cookie
+# *
+# * Copyright 2013 Klaus Hartl
+# * Released under the MIT license
+# 
+((factory) ->
+  if typeof define is "function" and define.amd
+    # AMD. Register as anonymous module.
+    define ["jquery"], factory
+  else
+    # Browser globals.
+    factory jQuery
+) ($) ->
+  pluses = /\+/g
+
+  raw     = (s) -> s
+  decoded = (s) -> decodeURIComponent s.replace(pluses, " ")
+  converted = (s) ->
+    # This is a quoted cookie as according to RFC2068, unescape
+    s = s.slice(1, -1).replace(/\\"/g, "\"").replace(/\\\\/g, "\\")  if s.indexOf("\"") is 0
+    try
+      return (if config.json then JSON.parse(s) else s)
+
+  
+  config = $.cookie = (key, value, options) ->
+    # write
+    if value isnt `undefined`
+      options = $.extend({}, config.defaults, options)
+      
+      if typeof options.expires is "number"
+        days = options.expires
+        t    = options.expires = new Date()
+        t.setDate t.getDate() + days
+      
+      value = (if config.json then JSON.stringify(value) else String(value))
+      
+      # use expires attribute, max-age is not supported by IE
+      return (document.cookie = [(if config.raw then key else encodeURIComponent(key)), "=", (if config.raw then value else encodeURIComponent(value)), (if options.expires then "; expires=" + options.expires.toUTCString() else ""), (if options.path then "; path=" + options.path else ""), (if options.domain then "; domain=" + options.domain else ""), (if options.secure then "; secure" else "")].join(""))
+    
+    # read
+    decode  = (if config.raw then raw else decoded)
+    cookies = document.cookie.split("; ")
+    result  = (if key then `undefined` else {})
+
+    i = 0
+    l = cookies.length
+
+    while i < l
+      parts  = cookies[i].split("=")
+      name   = decode parts.shift()
+      cookie = decode parts.join("=")
+      if key and key is name
+        result = converted(cookie)
+        break
+      result[name] = converted(cookie)  unless key
+      i++
+    result
+
+  config.defaults = {}
+
+  $.removeCookie = (key, options) ->
+    if $.cookie(key) isnt `undefined`
+      # Must not alter options, thus extending a fresh object...
+      $.cookie key, '', $.extend({}, options, expires: -1)
+      return true
+    false

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/jquery.ui.nestedSortable.js

@@ -19,6 +19,7 @@
 			disableNesting: 'ui-nestedSortable-no-nesting',
 			errorClass: 'ui-nestedSortable-error',
 			listType: 'ol',
+			listClass: 'nested_set',
 			maxLevels: 0,
 			noJumpFix: 0
 		},
@@ -128,6 +129,7 @@
 			}
 
 			newList = document.createElement(o.listType);
+			$(newList).addClass(o.listClass)
 
 			this.beyondMaxLevels = 0;
 

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

@@ -18,37 +18,43 @@
     error: (xhr, status, error) ->
       console.log error
 
-$ ->
-  for sortable_tree in $('ol.sortable_tree')
-    sortable_tree = $ sortable_tree
-    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
-      item_id   = item.attr('id')
-      prev_id   = item.prev().attr('id')
-      next_id   = item.next().attr('id')
-      parent_id = item.parent().parent().attr('id')
-      
-      rebuild_sortable_tree(rebuild_url, item_id, parent_id, prev_id, next_id)
+@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()

data/app/assets/stylesheets/expandable_tree.css.scss

@@ -1,10 +1,16 @@
 .sortable_tree{
+  &.expandable{
+    h4{
+      margin-left: 50px;
+    }
+  }
+
   .expand{
     float: left;
     cursor: pointer;
 
-    border: 1px solid gray;
-    color: gray;
+    border: 1px solid lightgray;
+    color: lightgray;
 
     font-size: 13px;
     font-weight: normal;

data/app/assets/stylesheets/sortable_tree.css.scss

@@ -28,10 +28,12 @@
   }
 
   h4{
-    margin: 0; 
+    margin-left: 30px;
+
     a{
       color: #333;
       font-size: 14px;
+      margin-left: 0;
       &:hover{ background: #eee; }
     }
   }
@@ -42,7 +44,7 @@
   }
 
   .handle{
-    background: transparent url(/assets/iconza/icons/move.png);
+    background: transparent image-url("iconza/icons/move.png");
     background-position: center center;
 
     width: 16px;
@@ -51,7 +53,7 @@
     float: left;
     cursor: move;
 
-    &:hover{ background: transparent url(/assets/iconza/icons/red_move.png); }
+    &:hover{ background: transparent image-url("iconza/icons/red_move.png"); }
   }
 
   .item{
@@ -90,16 +92,16 @@
       overflow: hidden; zoom: 1;
 
       &.new{
-        background: transparent url(/assets/iconza/icons/add.png) no-repeat scroll center center;
-        &:hover{ background: transparent url(/assets/iconza/icons/red_add.png) no-repeat scroll center center; }
+        background: transparent image-url("iconza/icons/add.png") no-repeat scroll center center;
+        &:hover{ background: transparent image-url("iconza/icons/red_add.png") no-repeat scroll center center; }
       }
       &.edit{
-        background: transparent url(/assets/iconza/icons/edit.png) no-repeat scroll center center;
-        &:hover{ background: transparent url(/assets/iconza/icons/red_edit.png) no-repeat scroll center center; }
+        background: transparent image-url("iconza/icons/edit.png") no-repeat scroll center center;
+        &:hover{ background: transparent image-url("iconza/icons/red_edit.png") no-repeat scroll center center; }
       }
       &.delete{
-        background: transparent url(/assets/iconza/icons/delete.png) no-repeat scroll center center;
-        &:hover{ background: transparent url(/assets/iconza/icons/red_delete.png) no-repeat scroll center center; }
+        background: transparent image-url("iconza/icons/delete.png") no-repeat scroll center center;
+        &:hover{ background: transparent image-url("iconza/icons/red_delete.png") no-repeat scroll center center; }
       }
     }
   }

data/app/controllers/the_sortable_tree_controller.rb

@@ -1,7 +1,7 @@
 module TheSortableTreeController
-  # include TheSortableTreeController::ReversedRebuild
   # include TheSortableTreeController::Rebuild
   # include TheSortableTreeController::ExpandNode
+  # include TheSortableTreeController::ReversedRebuild
   
   module DefineVariablesMethod
     public
@@ -18,15 +18,16 @@ module TheSortableTreeController
   module ExpandNode
     include DefineVariablesMethod
     def expand_node
-      id = params[:id].to_i
-      render :text => "Do nothing" and return unless id
+      id   = params[:id].to_i
+      return render(nothing: true) unless id
+      sort = (params[:tree_sort] == 'reversed') ? 'reversed_' : nil
 
       variable, collection, klass = self.the_define_common_variables
-      variable = self.instance_variable_set(variable, klass.find(id))
-      @children = variable.children
+      variable  = self.instance_variable_set(variable, klass.find(id))
+      @children = variable.children.send("#{sort}nested_set")
 
-      render :text => nil and return if @children.count.zero? 
-      render :layout => false, :template => "#{collection}/expand_children"
+      return render(nothing: :true) if @children.count.zero?
+      render layout: false, template: "#{collection}/expand_node"
     end
   end
 
@@ -39,7 +40,7 @@ module TheSortableTreeController
       prev_id   = params[:prev_id].to_i
       next_id   = params[:next_id].to_i
 
-      render :text => "Do nothing" and return if parent_id.zero? && prev_id.zero? && next_id.zero?
+      return render(nothing: true, status: :no_content) if parent_id.zero? && prev_id.zero? && next_id.zero?
 
       variable, collection, klass = self.the_define_common_variables
       variable = self.instance_variable_set(variable, klass.find(id))
@@ -52,7 +53,7 @@ module TheSortableTreeController
         variable.move_to_left_of klass.find(next_id)
       end
 
-      render(:nothing => true)
+      render(nothing: true, status: :ok)
     end
   end
   
@@ -65,7 +66,7 @@ module TheSortableTreeController
       prev_id   = params[:prev_id].to_i
       next_id   = params[:next_id].to_i
 
-      render :text => "Do nothing" and return if parent_id.zero? && prev_id.zero? && next_id.zero?
+      return render(nothing: true, status: :no_content) if parent_id.zero? && prev_id.zero? && next_id.zero?
 
       variable, collection, klass = self.the_define_common_variables
       variable = self.instance_variable_set(variable, klass.find(id))
@@ -78,7 +79,7 @@ module TheSortableTreeController
         variable.move_to_right_of klass.find(next_id)
       end
 
-      render(:nothing => true)
+      render(nothing: true, status: :ok)
     end
   end
 end

data/app/helpers/render_expandable_tree_helper.rb

@@ -13,12 +13,10 @@ module RenderExpandableTreeHelper
 
       def render_node(h, options)
         @h, @options = h, options
-
         node = options[:node]
-        # –
 
         "
-          <li id='#{ node.id }_#{ options[:klass] }'>
+          <li data-node-id='#{ node.id }'>
             <div class='item'>
               <i class='handle'></i>
               <b class='expand plus'>+</b>

data/app/helpers/render_sortable_tree_helper.rb

@@ -13,11 +13,10 @@ module RenderSortableTreeHelper
 
       def render_node(h, options)
         @h, @options = h, options
-
         node = options[:node]
 
         "
-          <li id='#{ node.id }_#{ options[:klass] }'>
+          <li data-node-id='#{ node.id }'>
             <div class='item'>
               <i class='handle'></i>
               #{ show_link }

data/lib/the_sortable_tree/version.rb

@@ -1,3 +1,3 @@
 module TheSortableTree
-  VERSION = "2.3.3"
+  VERSION = "2.4.0"
 end

data/spec/{the_sortable_tree_app → dummy_app}/Gemfile

@@ -1,6 +1,6 @@
 source 'http://rubygems.org'
 
-gem 'rails'
+gem 'rails', '~> 4.0.0'
 gem 'sqlite3'
 
 gem 'json'