#home
  .hero-unit
    %h1 jQuery Sortable
    %p A flexible, opinionated sorting plugin for jQuery
    %p
      %a.btn.btn-large.btn-primary(href="https://github.com/johnny/jquery-sortable")
        %i.icon-eye-open.icon-white
        View on GitHub
      %a.btn.btn-large.btn-success(href="js/jquery-sortable.js")
        %i.icon-hdd.icon-white
        Download
        (v#{File.read("VERSION").strip})
    %p
      %small
        Download
        %a(href="js/jquery-sortable-min.js") minified
        version
        (#{file_kb("source/js/jquery-sortable-min.js")} kb, gzipped ~#{file_kb("source/js/jquery-sortable-min.js.gz")} kb)
#features
  .page-header
    %h1 Features
  .row
    .span6
      %h3 So what does it do?
      %ul
        %li Sorts any items in any container
        %li Fully supports nested containers
        %li Connect lists
        %li Callbacks and events (see docs)
        %li Pure drag/drop lists
        %li Vertical and horizontal sorting
      %h3 Why another sortable plugin?
      %p
        you might ask.
        Aren't there
        %a(href="#alternatives") many
        others?
      %p
        %strong The answer is: nested lists.
        None of the other solutions had a decent support for nested lists.
        %a(href="http://mjsarfatti.com/sandbox/nestedSortable/") nestedSortable
        relies on a fixed width hierarchy.
        Others mimic the way jQuery UI does
        %a(href="http://jqueryui.com/demos/sortable/") sortables
        and therefore require ugly
        %a(href="https://github.com/jquery/jquery-ui/pull/555") hacks
        that suffer from sudden jumps.
      %h3 The opinionated part
      %p
        This plugin does one and only one thing:
        %strong sorting
        \. If you need animations or autoscrolling, do them
        %a(href="#connected") yourself
        \.
      %p
        Moreover this plugin assumes that the placeholder has zero height/width.
        As a result, the item dimensions may be cached.
        %small This might change in the future, if need be.
      %h3 Compatibility
      %p
        %code jquery-sortable.js
        has been tested with the following browsers
      %ul
        %li Firefox >= 3.5
        %li Chrome
        %li IE > 7
        %li Safari >= 6
        %li Opera
        %li Konqueror
      %p
        If you confirmed, that it works on other browsers please
        %a(href="mailto:jvadev@gmail.com") tell me
        \.
    .span6
      %h3
        Show it to me!
        %small
          With default options.
      %p
        %span.label.label-info Heads Up!
        There is no on-the-fly creation of sublists.
        Only list items that contain a sublist are drop targets.
      %ol.default.vertical
        %li
          First
          %ol
        %li
          Second
          %ol
        %li
          Third
          %ol
            %li First
            %li Second
            %li
              Third
              %ol
                %li First
                %li Second
              %ol
                %li First
                %li Second
        %li Fourth
        %li Fifth
        %li Sixth
#getting-started
  .page-header
    %h1 Getting started
  %p Making a list sortable consists of 3 easy steps
  .row
    .span4
      %h3 Add styles
      %pre(lang="css")= escape_file("css/example.css")
      %p
        %small
          Look
          %a(href="https://github.com/johnny/jquery-sortable/blob/master/source/css/jquery-sortable.css.sass") here
          for a complete example
    .span4
      %h3 Define your HTML
      %pre(lang="html")= escape_file("example.html")
    .span4
      %h3 Call the initializer
      %pre(lang="js")= escape_file("js/examples/basic.js")

#examples
  .page-header
    %h1 Examples
  #connected
    = partial "simple_with_animation"
  #handle
    = partial "simple_with_no_drop"
  #nested
    = partial "nested_with_switch"
  #limited-target
    = partial "limited_drop_targets"
  #bootstrap
    = partial "nested_bootstrap"
  #serialization
    = partial "serialization"
  #table
    = partial "table"
#docs
  .page-header
    %h1 Documentation
  %h2 jQuery API
  %p
    The
    %code sortable()
    method must be invoked on valid containers,
    meaning they must match the
    %code containerSelector
    option.
  .row
    .span6
      %h3
        %code .sortable([options])
      %p
        Instantiate sortable on each matched element.
        The available options are divided into
        %a(href="#group-options") group options
        and
        %a(href="#container-options") container options
        \.
      %p
        Group options are shared between all member containers and
        are set on the first instantiation of a member container.
        Subsequent instantiations of further containers in the same group do not change the group options.
      %p
        Container options can be set seperately for each member of a group.
    .span6
      %h3
        %code .sortable("enable")
      %p Enable all instantiated sortables in the set of matched elements
      %h3
        %code .sortable("disable")
      %p Disable all instantiated sortables in the set of matched elements
      %h3
        %code .sortable("refresh")
      %p Reset all cached element dimensions
      %h3
        %code .sortable("destroy")
      %p Remove the sortable plugin from the set of matched elements
      %h3
        %code .sortable("serialize")
      %p
        Serialize all selected containers. Returns a
        %code jQuery
        object . Use
        %code .get()
        to retrieve the array, if needed.
  %h2#group-options Group options
  %table.table.table-striped.table-bordered.docs
    %thead
      %tr
        %th Option
        %th Default
        %th Description
    %tbody
      = render_options('group') do |option, default, description|
        %td
          %code= option
        %td
          %pre(lang="js")= default
        %td= description
  %h2#container-options Container options
  %table.table.table-striped.table-bordered.docs
    %thead
      %tr
        %th Option
        %th Default
        %th Description
    %tbody
      = render_options('container') do |option, default, description|
        %td
          %code= option
        %td
          %pre(lang="js")= default
        %td= description

#alternatives
  .page-header
    %h1 Alternatives
  %p Listed in alphabetical order
  %ul
    %li
      %a(href="https://github.com/voidberg/html5sortable") HTML5 Sortable
      (uses native dnd events, supports IE5.5+)
    %li
      %a(href="http://jqueryui.com/demos/sortable/") jQuery UI sortable
    %li
      %a(href="http://dbushell.github.com/Nestable/") Nestable
      (requires no jQuery UI)
    %li
      %a(href="https://github.com/ilikenwf/nestedSortable") nestedSortable
      (an extension of jQuery UI)
    %li
      %a(href="https://github.com/RubaXa/Sortable") RubaXa's Sortable
      (supports touch devices and AngularJS)
    %li
      %a(href="http://yuilibrary.com/yui/docs/sortable/") YUI sortable

%footer.footer
  :markdown
    Created by
    [Jonas von Andrian](https://github.com/johnny).

    jquery-sortable.js is released under the
    [Modified BSD License](http://www.xfree86.org/3.3.6/COPYRIGHT2.html#5).

    Built with [Bootstrap](http://twitter.github.com/bootstrap/).
    Icons from [Glyphicons Free](http://glyphicons.com/).