Merge pull request #30 from sebastien-roch/drag-and-drop

MediaBundle: Implemented moving a media through drag-and-drop
Kunstmaan · Oct 24, 2014 · 618f437 · 618f437
2 parents 8dfb21a + 1bba20f
commit 618f437
Show file tree

Hide file tree

Showing 4 changed files with 154 additions and 12 deletions.
diff --git a/src/Kunstmaan/AdminBundle/Resources/public/scss/_main.scss b/src/Kunstmaan/AdminBundle/Resources/public/scss/_main.scss
@@ -91,10 +91,13 @@ body, .container-fluid{
     min-width: 960px;
 }
 body > .container-fluid{
-    height: auto;
+    height: 100%;
     min-height: 100%;
     padding: 0 0 0 20px;
     min-width: 960px;
+    display: table;
+    width: 100%;
+    box-sizing: border-box;
 }
 footer{
     position: absolute;
@@ -108,25 +111,30 @@ footer{
 
 .container-fluid{
     > .sidebar{
-        width: 235px;
-        float: left;
+        min-width: 235px;
+        display: table-cell;
+        vertical-align: top;
         padding: 70px 35px 67px 0;
         &.full_view{
-            width: 0;
-            opacity: 0;
-            padding-right: 0;
+            display: none;
         }
     }
     > .content{
         position: relative;
         min-height: 600px;
         height: auto;
-        overflow: hidden;
+        display: table-cell;
+        width: 100%;
+        vertical-align: top;
         margin: 0 0 40px 0;
         padding: 60px 20px 10px 20px;
         background: #fff;
         border-left: 1px solid #ddd;
         border-bottom: 1px solid #ddd;
+        &.full_view {
+            display: block;
+            width: auto;
+        }
         h1{
             margin-top: 0;
         }
@@ -1121,7 +1129,31 @@ h1, h2, h3, h4, h5, h6{
         word-wrap: break-word;
         text-decoration: none;
     }
+    &#file-list.dragging-over {
+        background: #2997CE;
+    }
+}
+
+a[data-folder-id] {
+    @include single_transition(all, .1s, ease-in-out);
+    &.move-success {
+        background-color: #C2F2C2;
+        box-shadow: 0 0 0 4px #C2F2C2;
+    }
+
+    &.move-failure {
+        background-color: #FFB0B0;
+        box-shadow: 0 0 0 4px #FFB0B0;
+    }
+
+    &.draggable-over {
+        background-color: #2997CE;
+        color: white;
+        text-shadow: none;
+        box-shadow: 0 0 0 4px #2997CE;
+    }
 }
+
 .list-block, .modal-body{
     ul{
         margin: 0 0 18px 17px;

diff --git a/src/Kunstmaan/MediaBundle/Controller/MediaController.php b/src/Kunstmaan/MediaBundle/Controller/MediaController.php
@@ -373,4 +373,34 @@ public function createModalAction(Request $request, $folderId, $type)
             $extraParams
         );
     }
+
+    /**
+     * @param Request $request
+     *
+     * @Route("move/", name="KunstmaanMediaBundle_media_move")
+     * @Method({"POST"})
+     *
+     * @return string
+     */
+    public function moveMedia(Request $request)
+    {
+        $mediaId = $request->request->get('mediaId');
+        $folderId = $request->request->get('folderId');
+
+        $response = array();
+        if (empty($mediaId) || empty($folderId)) {
+            return new JsonResponse(array('error' => array('title' => 'Missing media id or folder id')), 400);
+        }
+
+        $em = $this->getDoctrine()->getManager();
+        $mediaRepo = $em->getRepository('KunstmaanMediaBundle:Media');
+
+        $media = $mediaRepo->getMedia($mediaId);
+        $folder = $em->getRepository('KunstmaanMediaBundle:Folder')->getFolder($folderId);
+
+        $media->setFolder($folder);
+        $mediaRepo->save($media);
+
+        return new JsonResponse();
+    }
 }
diff --git a/src/Kunstmaan/MediaBundle/Resources/views/Folder/foldertreeview.html.twig b/src/Kunstmaan/MediaBundle/Resources/views/Folder/foldertreeview.html.twig
@@ -1,5 +1,5 @@
 <li id="folder-{{ mediaFolder.id }}" class="{% if mediaFolder.id in parentIds %}jstree-open{% endif %} {% if folder is not null and folder.id == mediaFolder.id %}active{% endif %}" rel="{{ mediaFolder.rel }}">
-    <a href="{{ path('KunstmaanMediaBundle_folder_show', { 'folderId': mediaFolder.id }) }}">{{ mediaFolder.name }}</a>
+    <a href="{{ path('KunstmaanMediaBundle_folder_show', { 'folderId': mediaFolder.id }) }}" data-folder-id="{{ mediaFolder.id }}">{{ mediaFolder.name }}</a>
     {% if mediaFolder.__children is not empty %}
     <ul>
         {% for mediaFolder in mediaFolder.__children %}

diff --git a/src/Kunstmaan/MediaBundle/Resources/views/Folder/show.html.twig b/src/Kunstmaan/MediaBundle/Resources/views/Folder/show.html.twig
@@ -77,7 +77,7 @@
                         {% for child in folder.children %}
                             <tr>
                                 <td>
-                                	<a href="{{ path('KunstmaanMediaBundle_folder_show', { 'folderId' :child.id }) }}" class="item">{{ child.name }}</a>
+                                	<a href="{{ path('KunstmaanMediaBundle_folder_show', { 'folderId' :child.id }) }}" class="item" data-folder-id="{{ child.id }}">{{ child.name }}</a>
                                 </td>
                             </tr>
                         {% else %}
@@ -105,7 +105,7 @@
                         {% for media in folder.media %}
                             {% include 'KunstmaanMediaBundle:Media:delete-modal.html.twig' %}
                             <li>
-                                <a class="thumbnail" href="{{ path('KunstmaanMediaBundle_media_show',  { 'mediaId' : media.id }) }}">
+                                <a class="thumbnail" href="{{ path('KunstmaanMediaBundle_media_show',  { 'mediaId' : media.id }) }}" data-media-id="{{ media.id }}">
                                     {% set handler = mediamanager.getHandler(media) %}
                                     {% set imageurl =  handler.getImageUrl(media, app.request.basePath) %}
                                     {% if imageurl is not empty and media.location == 'local' %}
@@ -144,7 +144,7 @@
        <script>
        $(function(){
 
-    		var dropbox = $('#imagegallery'),
+    		var dropbox = $('#file-list'),
     			message = $('.message', dropbox);
 
     		dropbox.filedrop({
@@ -198,7 +198,15 @@
 
     			afterAll:function(i,file,response){
     				window.location = '{{ path('KunstmaanMediaBundle_folder_show', { 'folderId' :folder.id }) }}';
-    			}
+    			},
+
+                dragOver: function() {
+                    dropbox.addClass('dragging-over');
+                },
+
+                dragLeave: function() {
+                    dropbox.removeClass('dragging-over');
+                }
 
     		});
 
@@ -214,6 +222,78 @@
     			$.data(file,preview);
     		}
 
+            // media are draggable to folders
+            function initDragAndDrop() {
+                var draggables = dropbox.find('> li');
+                draggables.draggable({
+                    revert: true,
+                    containment: 'document',
+                    cursorAt: {left: -10, top: -10},
+                })
+                // init droppables only if a drag starts
+                .on('dragstart', function(e) {
+                    initDroppables();
+                    draggables.off('dragstart');
+                });
+
+                // make folder links droppable
+                function initDroppables() {
+                    // only run it once
+                    if ($(document).data('droppable-initialized') === true) {
+                        console.log('already init');
+                        return;
+                    }
+                    $(document).data('droppable-initialized', true);
+
+                    $('a[data-folder-id]').droppable({
+                        hoverClass: 'draggable-over',
+                        tolerance: 'pointer',
+                        drop: function(event, ui) {
+                            var target = $(event.target);
+                            var folderId = target.data('folder-id');
+                            var mediaDraggable = ui.draggable.first();
+                            var mediaId = mediaDraggable.find('a[data-media-id]').first().data('media-id');
+                            $.ajax({
+                                url: '{{ path('KunstmaanMediaBundle_media_move') }}',
+                                type: 'POST',
+                                data: {
+                                    folderId: folderId,
+                                    mediaId: mediaId
+                                }
+                            }).done(function() {
+                                displayConfirmation(target);
+                            }).fail(function(xhr) {
+                                mediaDraggable.fadeIn(300);
+                                displayFailure(target, JSON.parse(xhr.responseText));
+                            });
+                            mediaDraggable.fadeOut(300);
+                        }
+                    });
+                }
+
+                function displayConfirmation(elem) {
+                    elem.addClass('move-success');
+                    setTimeout(function() {
+                        elem.removeClass('move-success');
+                    }, 400);
+                }
+
+                function displayFailure(elem, data) {
+                    elem.addClass('move-failure');
+                    elem.popover({
+                        content: data.error.title,
+                        placement: 'top',
+                        title: 'error'
+                    });
+                    elem.popover('show');
+                    setTimeout(function() {
+                        elem.removeClass('move-failure');
+                        elem.popover('destroy');
+                    }, 2000);
+                }
+            }
+            initDragAndDrop();
+
     	});
 
        </script>