the_sortable_tree 1.9.4 → 2.0.0

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.coffee

@@ -0,0 +1,54 @@
+@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
+
+$ ->
+  for sortable_tree in $('ol.sortable_tree')
+    sortable_tree = $ sortable_tree
+    rebuild_url   = sortable_tree.data('rebuild_url')
+    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)

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

@@ -0,0 +1,106 @@
+.sortable_tree{
+  margin: 0; padding: 0;
+  *{ margin: 0; padding: 0; }
+
+  ol{
+    margin: 0 0 0 13px;
+    padding: 0 0 0 15px;
+    border-left: 1px dashed gray;
+    list-style: none outside none;
+  }
+
+  li{
+    margin-bottom:5px;
+    position: relative;
+    list-style: none outside none;
+  }
+
+  a{
+    color:#000;
+    font-size:10pt;
+    font-weight:normal;
+    text-decoration:none;
+    line-height: 150%;
+    margin-left:30px;
+    margin-right:120px;
+    display:block;
+    &:hover{ text-decoration: underline; }
+  }
+
+  h4{
+    margin: 0; 
+    a{
+      color: #333;
+      font-size: 14px;
+      &:hover{ background: #eee; }
+    }
+  }
+
+  p{
+    margin-right: 75px;
+    padding: 5px;
+  }
+
+  .handle{
+    background: transparent url(/assets/iconza/icons/move.png);
+    background-position: center center;
+
+    width: 16px;
+    height: 16px;
+    margin: 3px 10px 0 0;
+    float: left;
+    cursor: move;
+
+    &:hover{ background: transparent url(/assets/iconza/icons/red_move.png); }
+  }
+
+  .item{
+    padding: 5px;
+    background: #f7f7f7;
+    border-radius: 3px;
+    margin-bottom: 5px;
+    &:hover{ background: #eee; }
+  }
+
+  .placeholder {
+    background-color: #EEF;
+    border: 1px dashed blue;
+  }
+
+  .ui-nestedSortable-error {
+    background: #FAA;
+    color: #8a1f11;
+  }
+
+  .controls{
+    position: absolute;
+    top: 1px; right: 10px;
+
+    a{
+      width: 20px;
+      height: 20px;
+      display: block;
+
+      float: left;
+      padding: 5px;
+      cursor: pointer;
+      position: relative;
+
+      margin: 0 0 5px 5px;
+      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; }
+      }
+      &.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; }
+      }
+      &.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; }
+      }
+    }
+  }
+}

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

@@ -1,38 +1,35 @@
 .tree{
-  * {
-    margin: 0; padding: 0;
-    list-style:none;
-  }
+  margin:0; padding:0;
+  *{ margin: 0; padding: 0; }
 
   ol{
+    margin: 0 0 0 13px;
+    padding: 0 0 0 15px;
+    border-left: 1px dashed gray;
+    list-style: none outside none;
+  }
 
-    margin: 0; padding: 0;
-    list-style:none;
-
-    &.nested_set {
-      list-style:none;
-      font-size: 16px;
-
-      li{
-        font-size: 0.9em;
-        line-height: 130%;
-        margin-bottom: 5px;
-        font-weight: bold;
-        list-style:none;
-        list-style-position: outside;
-      }
-
-      ol{
-        border-left: 1px dashed #AAA;
-        padding-left: 10px;
-        margin-left: 15px;
-        margin-top: 5px;
+  li{
+    margin-bottom:5px;
+    position: relative;
+    list-style: none outside none;
+  }
 
-        li{ font-weight: normal; }
-      }
+  a{
+    color: black;
+    font-size: 14px;
 
-      a:hover { color: #003A89 !important; }
-      a:visited { color: #809dc4; }  
+    &:hover {
+      color: black;
+      background: #ddd;
     }
   }
+
+  .item{
+    padding: 5px;
+    background: #eee;
+    margin-bottom: 5px;
+    border-radius: 3px;
+    &:hover{ background: #ddd; }
+  }
 }

data/app/controllers/the_sortable_tree_controller.rb

@@ -5,8 +5,9 @@ module TheSortableTreeController
   module DefineVariablesMethod
     public
     def the_define_common_variables
-      collection = self.class.to_s.split(':').last.sub(/Controller/,'').underscore.downcase                 # recipes
-      variable   = collection.singularize                                                                   # recipe  
+      collection = self.class.to_s.split(':').last.sub(/Controller/,'').underscore.downcase                 # 'recipes'
+      collection = self.respond_to?(:sortable_collection) ? self.sortable_collection : collection           # 'recipes'
+      variable   = collection.singularize                                                                   # 'recipe'
       klass      = self.respond_to?(:sortable_model) ? self.sortable_model : variable.classify.constantize  # Recipe
       ["@#{variable}", collection, klass]
     end

data/app/helpers/render_sortable_tree_helper.rb

@@ -0,0 +1,62 @@
+# DOC:
+# We use Helper Methods for tree building,
+# because it's faster than View Templates and Partials
+
+# SECURITY note
+# Prepare your data on server side for rendering
+# or use h.html_escape(node.content)
+# for escape potentially dangerous content
+module RenderSortableTreeHelper
+  module Render 
+    class << self
+      attr_accessor :h, :options
+
+      def render_node(h, options)
+        @h, @options = h, options
+
+        node = options[:node]
+
+        "
+          <li id='#{ node.id }_#{ options[:klass] }'>
+            <div class='item'>
+              <i class='handle'></i>
+              #{ show_link }
+              #{ controls }
+            </div>
+            #{ children }
+          </li>
+        "
+      end
+
+      def show_link
+        node = options[:node]
+        ns   = options[:namespace]
+        url  = h.url_for(ns + [node])
+        title_field = options[:title]
+
+        "<h4>#{ h.link_to(node.send(title_field), url) }</h4>"
+      end
+
+      def controls
+        node = options[:node]
+
+        edit_path = h.url_for(:controller => options[:klass].pluralize, :action => :edit, :id => node)
+        show_path = h.url_for(:controller => options[:klass].pluralize, :action => :show, :id => node)
+
+        "
+          <div class='controls'>
+            #{ h.link_to '', edit_path, :class => :edit }
+            #{ h.link_to '', show_path, :class => :delete, :data => { :confirm => 'Are you sure?' } }
+          </div>
+        "
+      end
+
+      def children
+        unless options[:children].blank?
+          "<ol class='nested_set'>#{ options[:children] }</ol>"
+        end
+      end
+
+    end
+  end
+end

data/app/helpers/render_tree_helper.rb

@@ -0,0 +1,45 @@
+# DOC:
+# We use Helper Methods for tree building,
+# because it's faster than View Templates and Partials
+
+# SECURITY note
+# Prepare your data on server side for rendering
+# or use h.html_escape(node.content)
+# for escape potentially dangerous content
+module RenderTreeHelper
+  class Render
+    class << self
+      attr_accessor :h, :options
+
+      def render_node(h, options)
+        @h, @options = h, options
+
+        node = options[:node]
+        "
+          <li>
+            <div class='item'>
+              #{ show_link }
+            </div>
+            #{ children }
+          </li>
+        "
+      end
+
+      def show_link
+        node = options[:node]
+        ns   = options[:namespace]
+        url  = h.url_for(ns + [node])
+        title_field = options[:title]
+
+        "<h4>#{ h.link_to(node.send(title_field), url) }</h4>"
+      end
+
+      def children
+        unless options[:children].blank?
+          "<ol>#{ options[:children] }</ol>"
+        end
+      end
+
+    end
+  end
+end