reordenar articulos arrastrando y soltando

app/assets/images/arrows-alt-v.svg

@@ -0,0 +1,3 @@
+<!-- CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/
+https://github.com/FortAwesome/Font-Awesome/blob/master/svgs/solid/arrows-alt-v.svg -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"/></svg>

app/assets/javascripts/application.js

@@ -2,4 +2,5 @@
 //= require turbolinks
 //= require zepto/dist/zepto.min.js
 //= require input-tag/input-tag.js
+//= require table-dragger/dist/table-dragger
 //= require_tree .

app/assets/javascripts/order.js

@@ -0,0 +1,16 @@
+$(document).on('turbolinks:load', function() {
+  var table = document.querySelector('.table-draggable');
+
+  if (table == null) return;
+
+  tableDragger(table, {
+    mode: 'row',
+    onlyBody: true,
+    dragHandler: '.handle'
+  }).on('drop', function(from, to, el, mode) {
+    // TODO: Detenerse al llegar al elemento que se movió
+    $('.reorder').val(function(i,v) { return i; });
+
+    $('.submit-reorder').removeClass('d-none');
+  });
+});

app/assets/stylesheets/application.scss

@@ -235,3 +235,9 @@ svg {
     color: $white;
   }
 }
+
+.handle {
+  img {
+    height: 1rem;
+  }
+}

app/views/posts/index.haml

@@ -25,42 +25,49 @@
     - if @posts.present?
       .row
         .col
-          %table.table.table-condensed
+          = form_tag site_posts_reorder_path, method: :post do
-            %tbody
+            = submit_tag t('posts.reorder'), class: 'btn submit-reorder d-none'
-              - @posts.each do |post|
+            -# TODO: Permitir cambiar el idioma
-                - next unless policy(post).show?
+            %table.table.table-condensed.table-draggable
-                -#
+              %tbody
-                  saltearse el post a menos que esté en la categoría por
+                - @posts.each_with_index do |post, i|
-                  la que estamos filtrando
+                  - next unless policy(post).show?
-                - if @category
+                  -#
-                  - next unless post.attributes.include? :categories
+                    saltearse el post a menos que esté en la categoría por
-                  - next unless post.categories.value.include?(@category)
+                    la que estamos filtrando
-                %tr
+                  - if @category
-                  %td
+                    - next unless post.attributes.include? :categories
-                    = link_to post.title.value,
+                    - next unless post.categories.value.include?(@category)
-                      site_post_path(@site, post.id)
+                  %tr
-                    - if post.attributes.include? :draft
+                    %td
-                      - if post.draft.value
+                      .handle
-                        %span.badge.badge-primary
+                        = image_tag 'arrows-alt-v.svg'
-                          = post_label_t(:draft, post: post)
+                      = hidden_field 'post[reorder]', '', value: i, class: 'reorder'
-                    - if post.attributes.include? :categories
+                    %td
-                      - unless post.categories.value.empty?
+                      = link_to post.title.value,
-                        %br
+                        site_post_path(@site, post.id)
-                        %small
+                      - if post.attributes.include? :draft
-                          - post.categories.value.each do |c|
+                        - if post.draft.value
-                            = link_to c, site_posts_path(@site, category: c)
+                          %span.badge.badge-primary
+                            = post_label_t(:draft, post: post)
+                      - if post.attributes.include? :categories
+                        - unless post.categories.value.empty?
+                          %br
+                          %small
+                            - post.categories.value.each do |c|
+                              = link_to c, site_posts_path(@site, category: c)
 
-                  %td= post.date.value.strftime('%F')
+                    %td= post.date.value.strftime('%F')
-                  %td
+                    %td
-                    - if policy(post).edit?
+                      - if policy(post).edit?
-                      = link_to t('posts.edit'),
+                        = link_to t('posts.edit'),
-                      edit_site_post_path(@site, post.id),
+                        edit_site_post_path(@site, post.id),
-                      class: 'btn'
+                        class: 'btn'
-                    - if policy(post).destroy?
+                      - if policy(post).destroy?
-                      = link_to t('posts.destroy'),
+                        = link_to t('posts.destroy'),
-                        site_post_path(@site, post.id),
+                          site_post_path(@site, post.id),
-                        class: 'btn',
+                          class: 'btn',
-                        method: :delete,
+                          method: :delete,
-                        data: { confirm: t('posts.confirm_destroy') }
+                          data: { confirm: t('posts.confirm_destroy') }
     - else
       %h2= t('posts.none')

config/locales/en.yml

@@ -347,7 +347,7 @@ en:
       required:
         label: ' (required)'
         feedback: 'This field cannot be empty!'
-    reorder_posts: 'Reorder posts'
+    reorder: 'Reorder posts'
     sort:
       by: 'Sort by'
       order: 'order'

config/locales/es.yml

@@ -357,7 +357,7 @@ es:
       required:
         label: ' (requerido)'
         feedback: '¡Este campo no puede estar vacío!'
-    reorder_posts: 'Reordenar artículos'
+    reorder: 'Reordenar artículos'
     sort:
       by: 'Ordenar por'
       order: 'posición'
@@ -366,7 +366,7 @@ es:
     content: 'Cuerpo del artículo'
     categories: 'Todos'
     dropdown: 'Desplegar el menú'
-    new: 'Empezar un artículo nuevo'
+    new: 'Crear artículo'
     new_with_template: 'Comenzar %{template}'
     index: 'Artículos'
     edit: 'Editar'

package.json

@@ -6,7 +6,7 @@
     "@rails/webpacker": "^4.0.7",
     "commonmark": "^0.29.0",
     "input-tag": "https://0xacab.org/sutty/input-tag.git",
-    "table-dragger": "^1.0.2",
+    "table-dragger": "https://0xacab.org/sutty/table-dragger.git",
     "trix": "https://0xacab.org/sutty/trix.git",
     "zepto": "^1.2.0"
   },

yarn.lock

@@ -579,6 +579,14 @@
     "@babel/helper-regex" "^7.4.4"
     regexpu-core "^4.5.4"
 
+"@babel/polyfill@^7.4.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.7.0.tgz#e1066e251e17606ec7908b05617f9b7f8180d8f3"
+  integrity sha512-/TS23MVvo34dFmf8mwCisCbWGrfhbiWZSwBo6HkADTBhUa2Q/jWltyY/tpofz/b6/RIhqaqQcquptCirqIhOaQ==
+  dependencies:
+    core-js "^2.6.5"
+    regenerator-runtime "^0.13.2"
+
 "@babel/preset-env@^7.4.5":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.5.5.tgz#bc470b53acaa48df4b8db24a570d6da1fef53c9a"
@@ -1199,13 +1207,6 @@ babel-plugin-macros@^2.5.0:
     cosmiconfig "^5.2.0"
     resolve "^1.10.0"
 
-babel-runtime@^6.20.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.11.0"
-
 balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -1882,9 +1883,15 @@ core-js-compat@^3.1.1:
     browserslist "^4.6.6"
     semver "^6.3.0"
 
-core-js@^2.4.0:
+core-js@^2.6.5:
-  version "2.5.5"
+  version "2.6.10"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.5.tgz#b14dde936c640c0579a6b50cabcc132dd6127e3b"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.10.tgz#8a5b8391f8cc7013da703411ce5b585706300d7f"
+  integrity sha512-I39t74+4t+zau64EN1fE5v2W31Adtc/REhzWN+gWRRXg6WH5qAsZm62DHpQ1+Yhe4047T55jvzz7MUqF/dBBlA==
+
+core-js@^3.0.1:
+  version "3.3.6"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.3.6.tgz#6ad1650323c441f45379e176ed175c0d021eac92"
+  integrity sha512-u4oM8SHwmDuh5mWZdDg9UwNVq5s1uqq6ZDLLIs07VY+VJU91i3h4f3K/pgFvtUQPGdeStrZ+odKyfyt4EnKHfA==
 
 core-js@^3.1.3:
   version "3.2.1"
@@ -1962,12 +1969,6 @@ crossvent@1.5.4:
   dependencies:
     custom-event "1.0.0"
 
-crossvent@^1.5.5:
-  version "1.5.5"
-  resolved "https://registry.yarnpkg.com/crossvent/-/crossvent-1.5.5.tgz#ad20878e4921e9be73d9d6976f8b2ecd0f71a0b1"
-  dependencies:
-    custom-event "^1.0.0"
-
 crypto-browserify@^3.11.0:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
@@ -2179,10 +2180,6 @@ custom-event@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.0.tgz#2e4628be19dc4b214b5c02630c5971e811618062"
 
-custom-event@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"
-
 cyclist@~0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
@@ -2408,9 +2405,10 @@ dot-prop@^4.1.1:
   dependencies:
     is-obj "^1.0.0"
 
-dragula-with-animation@^3.7.2:
+dragula@^3.7.0:
   version "3.7.2"
-  resolved "https://registry.yarnpkg.com/dragula-with-animation/-/dragula-with-animation-3.7.2.tgz#9b992db2a274324325c70bb0cb752e77e1faa8af"
+  resolved "https://registry.yarnpkg.com/dragula/-/dragula-3.7.2.tgz#4a35c9d3981ffac1a949c29ca7285058e87393ce"
+  integrity sha1-SjXJ05gf+sGpScKcpyhQWOhzk84=
   dependencies:
     contra "1.9.4"
     crossvent "1.5.4"
@@ -5696,6 +5694,11 @@ querystringify@^2.1.1:
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e"
   integrity sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==
 
+ramda@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
+  integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==
+
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -5811,10 +5814,6 @@ regenerate@^1.4.0:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
   integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==
 
-regenerator-runtime@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
-
 regenerator-runtime@^0.13.2:
   version "0.13.3"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
@@ -6013,9 +6012,12 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
-rx@^4.1.0:
+rxjs@^6.5.2:
-  version "4.1.0"
+  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.3.tgz#510e26317f4db91a7eb1de77d9dd9ba0a4899a3a"
+  integrity sha512-wuYsAYYFdWTAnAaPoKGNhfpWwKZbJW+HgAJ+mImp+Epl7BG8oNWBCTyRM8gba9k4lk8BgWdoYm21Mo/RYhhbgA==
+  dependencies:
+    tslib "^1.9.0"
 
 safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
@@ -6622,14 +6624,15 @@ svgo@^1.0.0:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
-table-dragger@^1.0.2:
+"table-dragger@https://0xacab.org/sutty/table-dragger.git":
-  version "1.0.2"
+  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/table-dragger/-/table-dragger-1.0.2.tgz#981f46c62fd2899b3fc5e644055ea72831949707"
+  resolved "https://0xacab.org/sutty/table-dragger.git#a5199975398dca9b3a849f5d56220fd11e68733c"
   dependencies:
-    babel-runtime "^6.20.0"
+    "@babel/polyfill" "^7.4.0"
-    crossvent "^1.5.5"
+    core-js "^3.0.1"
-    dragula-with-animation "^3.7.2"
+    dragula "^3.7.0"
-    rx "^4.1.0"
+    ramda "^0.26.1"
+    rxjs "^6.5.2"
 
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"