Merge pull request #63 from wearejust/feature/enable_drag_n_drop

Feature: Enable drag ’n drop feature
pix-digital · Jun 1, 2017 · f9932a6 · f9932a6
2 parents a2446dc + 1fbc710
commit f9932a6
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -27,3 +27,62 @@ pix_sortable_behavior:
             AppBundle/Entity/Baz: [ group ]
 
 ```
+
+#### Use a draggable list instead of up/down buttons
+In order to use a draggable list instead of up/down buttons, change the template in the ```move``` action to ```AppBundle:Admin:_sort_drag_drop.html.twig```.
+
+```php
+<?php
+
+    // ClientAdmin.php
+    protected function configureListFields(ListMapper $listMapper)
+    {
+        $listMapper
+            ->addIdentifier('name')
+            ->add('enabled')
+            ->add('_action', null, array(
+                'actions' => array(
+                    'move' => array(
+                        'template' => 'AppBundle:Admin:_sort_drag_drop.html.twig',
+                        'enable_top_bottom_buttons' => true, //optional
+                    ),
+                ),
+            ))
+        ;
+    }
+```    
+Also include the JavaScript needed for this to work, in your ```theme.yml``` file, add these two lines:
+```yml
+    //...
+    javascripts:
+        - bundles/pixsortablebehavior/js/jquery-ui.min.js // if you haven't got jQuery UI yet.
+        - bundles/pixsortablebehavior/js/init.js
+```
+
+Adding the JavaScript and the template, will give you the possibility to drag items in a tablelist.
+In case you need it, this plugin fires to jQuery events when dragging is done on the ```$(document)``` element, so if you want to add custom notification, that is possible.
+```
+pixSortableBehaviorBundle.success
+pixSortableBehaviorBundle.error
+```
+#### Disable top and bottom buttons
+```php
+<?php
+
+    // ClientAdmin.php
+    protected function configureListFields(ListMapper $listMapper)
+    {
+        $listMapper
+            ->addIdentifier('name')
+            ->add('enabled')
+            ->add('_action', null, array(
+                'actions' => array(
+                    'move' => array(
+                        'template' => 'AppBundle:Admin:_sort.html.twig',
+                        'enable_top_bottom_buttons' => true,
+                    ),
+                ),
+            ))
+        ;
+    }
+```    
diff --git a/Resources/public/js/init.js b/Resources/public/js/init.js
@@ -0,0 +1,54 @@
+$(function() {
+    $('.sonata-ba-list tbody').draggableTable();
+});
+
+$.fn.draggableTable = function (settings) {
+    $(this).each(function (index, item) {
+        item = $(item);
+        var instance = item.data('DraggableTable');
+        if (!instance) {
+            item.data('DraggableTable', new DraggableTable(this, settings));
+        }
+    });
+};
+
+var DraggableTable = function () {
+    this.init.apply(this, arguments);
+};
+
+DraggableTable.prototype.init = function (node, settings) {
+    $(node).sortable({
+        'handle': '.js-sortable-move',
+        'axis': 'y',
+        'cancel': 'input,textarea,select,option,button:not(.js-sortable-move)',
+        'tolerance': 'pointer',
+        'revert': 100,
+        'cursor': 'move',
+        'zIndex': 1,
+        'helper': function(e, ui) {
+            ui.css('width','100%');
+            ui.children().each(function() {
+                var item = $(this);
+                item.width(item.width());
+            });
+            return ui;
+        },
+        'update': function(event, ui) {
+            var moved = $(ui.item).find('.js-sortable-move');
+            var newPosition = ui.item.index();
+
+            $.ajax({
+                'type': 'GET',
+                'url': moved.data('url').replace('NEW_POSITION', newPosition),
+                'dataType': 'json',
+                'success': function(data) {
+                    $(document).trigger("pixSortableBehaviorBundle.success", [data]);
+                },
+                'error': function(data) {
+                    $(document).trigger("pixSortableBehaviorBundle.error",[data]);
+                }
+            });
+
+        }
+    }).disableSelection();
+};
diff --git a/Resources/public/js/jquery-ui.min.js b/Resources/public/js/jquery-ui.min.js
diff --git a/Resources/views/Default/_sort.html.twig b/Resources/views/Default/_sort.html.twig
@@ -1,8 +1,9 @@
 {% if admin.isGranted('EDIT', object) and admin.hasRoute('edit') %}
     {% set current_position = currentObjectPosition(object) %}
     {% set last_position    = lastPosition(object) %}
+    {% set enable_top_bottom_buttons = field_description.options.actions.move.enable_top_bottom_buttons ?? true %}
 
-    {% if current_position < last_position %}
+    {% if enable_top_bottom_buttons and current_position < last_position %}
         <a class="btn btn-sm btn-default" href="{{ admin.generateObjectUrl('move', object, {'position': 'bottom'}) }}" title="{{ 'move_to_bottom'|trans }}">
             <i class="fa fa-angle-double-down"></i>
         </a>
@@ -20,7 +21,7 @@
         </a>
     {% endif %}
 
-    {% if current_position > 0 %}
+    {% if enable_top_bottom_buttons and current_position > 0 %}
         <a class="btn btn-sm btn-default" href="{{ admin.generateObjectUrl('move', object, {'position': 'top'}) }}" title="{{ 'move_to_top'|trans }}">
             <i class="fa fa-angle-double-up"></i>
         </a>

diff --git a/Resources/views/Default/_sort_drag_drop.html.twig b/Resources/views/Default/_sort_drag_drop.html.twig
@@ -0,0 +1,23 @@
+{% if admin.isGranted('EDIT', object) and admin.hasRoute('edit') %}
+    {% set current_position = currentObjectPosition(object) %}
+    {% set last_position    = lastPosition(object) %}
+    {% set enable_top_bottom_buttons = field_description.options.actions.move.enable_top_bottom_buttons ?? true %}
+
+
+    <span class="btn btn-sm btn-default js-sortable-move" data-url="{{ admin.generateObjectUrl('move', object, {'position': 'NEW_POSITION'}) }}">
+        <i class="fa fa-arrows"></i>
+    </span>
+
+    {% if enable_top_bottom_buttons and current_position < last_position %}
+        <a class="btn btn-sm btn-default" href="{{ admin.generateObjectUrl('move', object, {'position': 'bottom'}) }}" title="{{ 'move_to_bottom'|trans }}">
+            <i class="fa fa-angle-double-down"></i>
+        </a>
+    {% endif %}
+
+    {% if enable_top_bottom_buttons and current_position > 0 %}
+        <a class="btn btn-sm btn-default" href="{{ admin.generateObjectUrl('move', object, {'position': 'top'}) }}" title="{{ 'move_to_top'|trans }}">
+            <i class="fa fa-angle-double-up"></i>
+        </a>
+    {% endif %}
+
+{% endif %}
diff --git a/Services/PositionHandler.php b/Services/PositionHandler.php
@@ -136,6 +136,12 @@ public function getPosition($object, $movePosition, $lastPosition)
                     $newPosition = $lastPosition;
                 }
                 break;
+
+            default:
+                if (is_numeric($movePosition)) {
+                    $newPosition = $movePosition;
+                }
+
         }
 
         return $newPosition;