jquery_sortable_tree 3.0.0

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

@@ -0,0 +1,26 @@
+.sortable_tree{
+  &.expandable{
+    h4{
+      margin-left: 50px;
+    }
+  }
+
+  .expand{
+    float: left;
+    cursor: pointer;
+
+    border: 1px solid lightgray;
+    color: lightgray;
+
+    font-size: 13px;
+    font-weight: normal;
+    line-height: 13px;
+    text-align: center;
+    
+    width: 13px;
+    height: 13px;
+    margin: 3px 10px 0 0;
+
+    &.empty{ display:none !important; }
+  }
+}

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

@@ -0,0 +1,25 @@
+.nested_options{
+  padding: 3px;
+  font-size: 18px;
+  font-family: Arial;
+  border: 1px solid gray;
+
+  option{
+    color: black; padding: 3px;
+    &.selected{ font-weight: bold; color: red; }
+  }
+
+  @for $i from 1 through 2{
+    .l_#{$i}{
+      padding-left: #{($i - 1)*15}px;
+      font-size: #{(100 - $i * 10) + '%'};
+    }
+  }
+
+  @for $i from 3 through 10{
+    .l_#{$i}{
+      padding-left: #{($i - 1)*15}px;
+      font-size: 70%;
+    }
+  }
+}

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

@@ -0,0 +1,108 @@
+.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-left: 30px;
+
+    a{
+      color: #333;
+      font-size: 14px;
+      margin-left: 0;
+      &:hover{ background: #eee; }
+    }
+  }
+
+  p{
+    margin-right: 75px;
+    padding: 5px;
+  }
+
+  .handle{
+    background: transparent image-url("iconza/icons/move.png");
+    background-position: center center;
+
+    width: 16px;
+    height: 16px;
+    margin: 3px 10px 0 0;
+    float: left;
+    cursor: move;
+
+    &:hover{ background: transparent image-url("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 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 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 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/assets/stylesheets/tree.css.scss

@@ -0,0 +1,35 @@
+.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: black;
+    font-size: 14px;
+
+    &:hover {
+      color: black;
+      background: #ddd;
+    }
+  }
+
+  .item{
+    padding: 5px;
+    background: #eee;
+    margin-bottom: 5px;
+    border-radius: 3px;
+    &:hover{ background: #ddd; }
+  }
+}

data/app/controllers/jquery_sortable_tree_controller.rb

@@ -0,0 +1,93 @@
+module JquerySortableTreeController
+  module DefineVariablesMethod
+    def sortable_model
+      @sortable_model ||= self.class.to_s.split(':').last.sub(/Controller/, '').singularize.constantize
+    end
+
+    def sortable_collection
+      @sortable_collection ||= self.class.to_s.split(':').last.sub(/Controller/,'').underscore.downcase
+    end
+
+    def the_define_common_variables
+      ["@#{sortable_collection.singularize}", sortable_collection, sortable_model]
+    end
+
+    def id
+      @id ||= params[:id].to_i
+    end
+
+    def parent_id
+      @parent_id ||= params[:parent_id].to_i
+    end
+
+    def sort
+      @sort ||= params[:tree_sort] == 'reversed' ? 'reversed_nested_set' : 'nested_set'
+    end
+
+    def prev_id
+      @prev_id ||= params[:prev_id].to_i
+    end
+
+    def next_id
+      @next_id ||= params[:next_id].to_i
+    end
+
+    def move_to_prev
+      @move_to_prev ||= params[:tree_sort] == 'reversed' ? :move_to_left_of : :move_to_right_of
+    end
+
+    def move_to_next
+      @move_to_next ||= params[:tree_sort] == 'reversed' ? :move_to_right_of : :move_to_left_of
+    end
+
+    def move_to_parent
+      :move_to_child_of
+    end
+
+    def object_to_rebuild
+      self.sortable_model.find(id)
+    end
+
+    def move_to_nowhere?
+      parent_id.zero? && prev_id.zero? && next_id.zero?
+    end
+
+    def prev_next_parent
+      return 'prev' unless prev_id.zero?
+      return 'next' unless next_id.zero?
+      return 'parent' unless parent_id.zero?
+    end
+
+    def move_to
+      send("move_to_#{prev_next_parent}")
+    end
+
+    def node_id
+      send("#{prev_next_parent}_id")
+    end
+
+    def node
+      sortable_model.find(node_id)
+    end
+  end
+
+  module ExpandNode
+    include DefineVariablesMethod
+
+    def expand_node
+      @children = object_to_rebuild.children.send(sort) if id && sort
+      return render(nothing: true, status: :no_content) if !@children || @children.count.zero?
+      render layout: false, template: "#{sortable_collection}/expand_node"
+    end
+  end
+
+  module Rebuild
+    include DefineVariablesMethod
+
+    def rebuild
+      return render(nothing: true, status: :no_content) if move_to_nowhere?
+      object_to_rebuild.send(move_to, node)
+      render(nothing: true, status: :ok)
+    end
+  end
+end

data/app/helpers/jquery_sortable_tree_helper/render_expandable_tree_helper.rb

@@ -0,0 +1,27 @@
+# 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 JquerySortableTreeHelper
+  module RenderExpandableTreeHelper
+    class Render < JquerySortableTreeHelper::RenderSortableTreeHelper::Render
+      attr_accessor :h, :options
+
+      def initialize(h, options)
+        @h, @options = h, options
+      end
+
+      def div_item
+        h.content_tag(:div, handle + expand_button + edit_link + controls, class: :item)
+      end
+
+      def expand_button
+        h.content_tag(:b, '+', class: 'expand plus')
+      end
+    end
+  end
+end

data/app/helpers/jquery_sortable_tree_helper/render_indented_options_helper.rb

@@ -0,0 +1,37 @@
+module JquerySortableTreeHelper
+  module RenderIndentedOptionsHelper
+    class Render
+      attr_accessor :h, :options
+
+      def initialize(h, options)
+        @h, @options = h, options
+      end
+
+      def render_node
+        h.content_tag(:option, title, tag_options) + children
+      end
+
+      def title
+        "\u202f" * (@options[:spacing] || 3).to_i * (@options[:level]-1) + node.send(@options[:title])
+      end
+
+      def tag_options
+        html_options = { value: node.id }
+
+        if options[:selected] == node
+          html_options[:selected] = 'selected'
+          html_options[:class] = 'selected'
+        end
+        html_options
+      end
+
+      def node
+        @options[:node]
+      end
+
+      def children
+        @options[:children].html_safe
+      end
+    end
+  end
+end

data/app/helpers/jquery_sortable_tree_helper/render_nested_options_helper.rb

@@ -0,0 +1,29 @@
+module JquerySortableTreeHelper
+  module RenderNestedOptionsHelper
+    class Render
+      attr_accessor :h, :options
+
+      def initialize(h, options)
+        @h, @options = h, options
+      end
+
+      def render_node
+        @h.content_tag(:option, options[:node].send(options[:title]), tag_options) + children
+      end
+
+      def children
+        @options[:children].html_safe
+      end
+
+      def tag_options
+        opts = { class: "l_#{@options[:level]}", value: @options[:node][:id] }
+
+        if @options[:selected] == @options[:node]
+          opts[:class] += ' selected'
+          opts[:selected] = :selected
+        end
+        opts
+      end
+    end
+  end
+end

data/app/helpers/jquery_sortable_tree_helper/render_sortable_tree_helper.rb

@@ -0,0 +1,65 @@
+# 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 JquerySortableTreeHelper
+  module RenderSortableTreeHelper
+    class Render
+      attr_accessor :h, :options
+
+      def initialize(h, options)
+        @h, @options = h, options
+      end
+
+      def render_node
+        return h.content_tag(:li, div_item + children,
+          class: :node,
+          data: { node_id: options[:node].id }
+        )
+      end
+
+      def div_item
+        h.content_tag(:div, handle + edit_link + controls, class: :item)
+      end
+
+      def handle
+        h.content_tag(:i, '', class: :handle)
+      end
+
+      def edit_link
+        h.content_tag(:h4, h.link_to(options[:node].send(options[:title]), show_path, class: :edit))
+      end
+
+      def show_link
+        h.content_tag(:h4,
+                      h.link_to(options[:node].send(options[:title]),
+                      h.url_for(options[:namespace] + [options[:node]]))
+        )
+      end
+
+      def controls
+        link_options = {
+          class: :delete,
+          method: :delete,
+          data: {
+            confirm: I18n.t('are_you_sure', default: 'Are you sure?'),
+            remote: true
+          }
+        }
+        h.content_tag(:div, h.link_to('', show_path, link_options), class: :controls)
+      end
+
+      def children
+        h.content_tag(:ol, options[:children].html_safe, class: :nested_set) unless options[:children].blank?
+      end
+
+      def show_path
+        h.url_for(controller: (options[:controller] || (options[:klass] && options[:klass].pluralize)), action: :show, id: options[:node].id, format: :json)
+      end
+    end
+  end
+end

data/app/helpers/jquery_sortable_tree_helper/render_tree_helper.rb

@@ -0,0 +1,23 @@
+# 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 JquerySortableTreeHelper
+  module RenderTreeHelper
+    class Render < JquerySortableTreeHelper::RenderSortableTreeHelper::Render
+      attr_accessor :h, :options
+
+      def initialize(h, options)
+        @h, @options = h, options
+      end
+
+      def div_item
+        h.content_tag(:div, show_link, class: :item)
+      end
+    end
+  end
+end

data/app/helpers/jquery_sortable_tree_helper.rb

@@ -0,0 +1,142 @@
+module JquerySortableTreeHelper
+  # Ilya Zykin, zykin-ilya@ya.ru, Russia [Ivanovo, Saint Petersburg] 2009-2014
+  # github.com/the-teacher
+  TREE_RENDERERS = {
+    tree: RenderTreeHelper,
+    sortable: RenderSortableTreeHelper,
+    expandable: RenderExpandableTreeHelper,
+    nested_options: RenderNestedOptionsHelper,
+    indented_options: RenderIndentedOptionsHelper
+  }.freeze
+
+  ###############################################
+  # Common Base Methods
+  ###############################################
+
+  def define_class_of_elements_of tree
+    case
+      when tree.is_a?(ActiveRecord::Relation) then tree.name.to_s.underscore.downcase
+      when tree.empty?                        then nil
+      else tree.first.class.to_s.underscore.downcase
+    end
+  end
+
+  def build_tree_html context, render_module, options = {}
+    render_module::Render.new(context, options).render_node
+  end
+
+  ###############################################
+  # Shortcuts
+  ###############################################
+
+  def just_tree(tree, options = {})
+    build_server_tree(tree, { type: :tree }.merge!(options))
+  end
+
+  def base_data
+    {
+      model: params[:controller].singularize,
+      title: 'title',
+      max_levels: 5,
+      parent_id: params[:parent_id],
+      rebuild_url: send("rebuild_#{params[:controller]}_url"),
+      url: url_for(controller: params[:controller], action: :show, id: ':id', format: :json)
+    }
+  end
+
+  def space(height)
+    content_tag(:div, ' '.html_safe, style: "height: #{height}px;")
+  end
+
+  def fake_node(options)
+    OpenStruct.new(options[:title] => '', id: ':id', children: nil)
+  end
+
+  def sortable_tree(tree, options = {})
+    space(20) +
+    add_new_node_form(base_data.merge(options)) +
+    content_tag(:ol, build_tree_html(self, TREE_RENDERERS[:sortable], base_options.merge(options).merge({ node: fake_node(options) })), class: 'fake-node hidden', style: 'display: none;') +
+    content_tag(:ol, build_server_tree(tree, { type: :sortable }.merge!(options)),
+                class: 'sortable_tree',
+                data: base_data.merge(options.slice(:parent_id, :model, :rebuild_url, :title, :max_levels))
+    )
+  end
+
+  def form_for_options(options)
+    {
+      html: { id: "new-#{options[:model]}-form" },
+      url: send("#{options[:model].pluralize}_path", format: :json),
+      method: :post,
+      remote: true
+    }
+  end
+
+  def add_new_node_form(options)
+    capture do
+      form_for(options[:model].to_sym, form_for_options(options)) do |f|
+        title_field = f.text_field options[:title].to_sym, required: true, class: 'form-control', placeholder: I18n.t('sortable_tree.title_of_new_node', default: "The #{options[:title]} of new #{options[:model]}")
+        concat content_tag(:div, title_field, class: 'form-group')
+        concat f.hidden_field :parent_id, value: options[:parent_id]
+      end
+    end
+  end
+
+  def nested_options(tree, options = {})
+    build_server_tree(tree, { type: :nested_options }.merge!(options))
+  end
+
+  def indented_options(tree, options = {})
+    build_server_tree(tree, { type: :indented_options }.merge!(options))
+  end
+
+  def expandable_tree(tree, options = {})
+    build_server_tree(tree, { type: :expandable }.merge!(options))
+  end
+
+  ###############################################
+  # Server Side Render Tree Helper
+  ###############################################
+
+  def base_options
+    {
+      id: :id,
+      title: :title,
+      node: nil,
+      type: :tree,
+      root: false,
+      level: 0,
+      namespace: [],
+      controller: params[:controller]
+    }
+  end
+
+  def build_children(tree, opts)
+    children = (opts[:boost][opts[:node].id.to_i] || [])
+    children.reduce('') { |r, elem| r + build_server_tree(tree, opts.merge(node: elem, root: false, level: opts[:level].next)) }
+  end
+
+  def roots(tree)
+    min_parent_id = tree.map(&:parent_id).compact.min
+    tree.select { |e| e.parent_id == min_parent_id }
+  end
+
+  def merge_base_options(tree, options)
+    opts = base_options.merge(options)
+    opts[:namespace] = [*opts[:namespace]]
+    opts[:render_module] ||= TREE_RENDERERS[opts[:type]]
+    opts[:klass] ||= define_class_of_elements_of(tree)
+    opts[:boost] ||= tree.group_by { |item| item.parent_id.to_i }
+    opts
+  end
+
+  def build_server_tree(tree, options = {})
+    tree = [*tree]
+    opts = merge_base_options(tree, options)
+
+    if opts[:node]
+      raw build_tree_html(self, opts[:render_module], opts.merge(children: build_children(tree, opts)))
+    else
+      raw (roots(tree) || []).reduce('') { |r, root| r + build_server_tree(tree, opts.merge(node: root, root: true, level: opts[:level].next)) }
+    end
+  end
+end

data/app/inputs/indented_collection_select_input.rb

@@ -0,0 +1,12 @@
+class IndentedCollectionSelectInput < SimpleForm::Inputs::CollectionSelectInput
+  def input
+    label_method, value_method = detect_collection_methods
+    collection.map! do |o|
+      depth_method = options[:depth_method] || :depth
+      spacing = (options[:spacing] || 3).to_i
+      label = "\u202f" * spacing * o.send(depth_method) + o.send(label_method)
+      [label, o.send(value_method)]
+    end
+    super
+  end
+end

data/lib/fake.example

@@ -0,0 +1,44 @@
+book = {
+  'Programs' => {
+    'Lexical Structure' => [
+      'Comments',
+      'Documentation',
+      'Whitespace',
+      'Literals',
+      'Identifiers'
+    ]
+  }
+}
+
+def create_hub user, title
+  obj          = user.send(:hubs).new
+  obj.title    = title
+  obj.hub_type = :book
+  obj.state    = :published
+  obj.save!
+  obj
+end
+
+def build_page_tree user, book, parent_obj = nil
+  book.each_pair do |key, value|
+    obj = create_hub(user, key)
+    obj.move_to_child_of(parent_obj) if parent_obj
+    parent_obj = obj
+
+    if value.is_a? Hash
+      build_page_tree(user, value, parent_obj)
+    end
+
+    if value.is_a? Array
+      value.each do |key|
+        obj = create_hub(user, key)
+        obj.move_to_child_of(parent_obj)
+      end
+    end
+
+  end
+end
+
+build_page_tree(User.first, book)
+
+Hub.roots.of_(:book).last.self_and_descendants