Dev: Add support for drag-n-drop sorting for quick-menu

application/core/Survey_Common_Action.php

@@ -980,7 +980,16 @@ protected function renderQuickmenu(array $aData)
         $event->set('aData', $aData);
         $result = App()->getPluginManager()->dispatchEvent($event);
 
-        $aData['quickMenuItems'] = $result->get('quickMenuItems');
+        $quickMenuItems = $result->get('quickMenuItems');
+        if (!empty($quickMenuItems))
+        {
+            usort($quickMenuItems, function($b1, $b2) {
+                return (int) $b1['order'] > (int) $b2['order'];
+            });
+        }
+
+        $aData['quickMenuItems'] = $quickMenuItems;
+
 
         if ($aData['quickMenuItems'] === null)
         {

application/views/admin/super/quickmenu.php

@@ -13,28 +13,45 @@
 
     <?php foreach ($quickMenuItems as $quickMenuItem): ?>
         <div
-            <?php if ($quickMenuItem['openInNewTab']): ?>
-                target='_blank'
-            <?php endif; ?>
-
-            href='<?php echo $quickMenuItem['href']; ?>'
+            class='quick-menu-item'
             data-toggle="tooltip"
             data-title="<?php echo $quickMenuItem['tooltip']; ?>"
+            data-button-name="<?php echo $quickMenuItem['name']; ?>"
             data-placement="right"
             draggable="true"
             ondragstart="dragstart_handler(event);"
             ondragover="dragover_handler(event);"
             ondragleave="dragleave_handler(event);"
             ondrop="drop_handler(event);"
         >
-            <div class='quick-icon-wrapper' draggable="false">
-                <?php
-                    /* pointer-events none is necessary to prevent HTML draggable events from affecting
-                     * child elements. More info here: http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html
-                     */ ?>
-                <span class="<?php echo $quickMenuItem['iconClass']; ?>" style="pointer-events: none;" draggable="false"></span>
-            </div>
+            <a
+                href='<?php echo $quickMenuItem['href']; ?>'
+                <?php if ($quickMenuItem['openInNewTab']): ?>
+                    target='_blank'
+                <?php endif; ?>
+            >
+                <div class='quick-icon-wrapper' draggable="false">
+                    <?php
+                        /* pointer-events none is necessary to prevent HTML draggable events from affecting
+                         * child elements. More info here: http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html
+                         */ ?>
+                    <span class="<?php echo $quickMenuItem['iconClass']; ?>" style="pointer-events: none;" draggable="false"></span>
+                </div>
+            </a>
         </div>
     <?php endforeach; ?>
 </div>
+<script>
+    // TODO: Needs to be moved to ExtraQuickMenuItems plugin
+    var saveQuickMenuButtonOrderLink = '<?php
+        // Save order after drag-n-drop sorting
+        echo Yii::app()->createUrl(
+            'plugins/direct',
+            array(
+                'plugin' => 'ExtraQuickMenuItems',
+                'function' => 'saveOrder'
+            )
+        );
+        ?>';
 
+</script>

styles/Sea_Green/scripts/sidemenu.js

@@ -356,12 +356,9 @@ $(document).ready(function(){
           var windowswidth = window.innerWidth;
           var sideBodyWidth = sideBody.width();
           $( window ).resize(function() {
-              //console.log('sideBodyWidth before: '+sideBodyWidth);
-              //console.log( windowswidth - window.innerWidth);
               sideBody.width( sideBodyWidth - (windowswidth - window.innerWidth) );
               windowswidth = window.innerWidth;
               sideBodyWidth = sideBody.width();
-              //console.log('sideBodyWidth after: '+sideBodyWidth);
 
               if( sideBodyWidth < 1420 )
               {
@@ -433,19 +430,18 @@ var drop_delete_fn = function () {};
 
 /**
  * Drag-n-drop functionality for quick-menu
+ * @todo Add this to plugin ExtraQuickMenuItems? Needs to be on every admin page.
  */
 function dragstart_handler(ev) {
-    console.log("I'm dragging!");
-    console.log(ev.target);
 
     // Use to set a image during dragging
     //var img = new Image();
     //img.src = '/limesurvey/styles/Sea_Green/images/donate.png';
     //ev.dataTransfer.setDragImage(img, 10, 10);
+
     ev.dataTransfer.dropEffect = 'move';
     ev.dataTransfer.effectAllowed = 'move';
     var html = $(ev.target).prop('outerHTML');
-    //console.log('html', html);
     ev.dataTransfer.setData("text/plain", html);
 
     drop_delete_fn = function () {
@@ -455,11 +451,7 @@ function dragstart_handler(ev) {
 
 function dragover_handler(ev) {
     ev.preventDefault();
-
-    console.log("Dragging over me");
-    //console.log(ev);
     $(ev.target).css('background-color', 'black');
-
     return false;
 }
 
@@ -471,12 +463,9 @@ function dragleave_handler(ev) {
 
 function drop_handler(ev) {
     ev.preventDefault();
-    console.log("Dropped me");
     // TODO: Why is ev.target not <a>, but <div>?
-    var $target = $(ev.target).parent();
-    //console.log(ev);
+    var $target = $(ev.target).parent().parent();
     var data = ev.dataTransfer.getData("text");
-    //console.log(data);
     $target.after(data);
     $(ev.target).css('background-color', 'white');
     drop_delete_fn();
@@ -485,5 +474,20 @@ function drop_handler(ev) {
     $('.tooltip.fade').remove();
     doToolTip();
 
+    // Collect button name and order number
+    var data = {};
+    $('.quick-menu-item').each(function(i, item) {
+        var name = $(item).data('button-name');
+        data[name] = i;
+    });
+
+    $.ajax({
+        method: 'POST',
+        url: saveQuickMenuButtonOrderLink,
+        data: {buttons: data}
+    }).done(function(response) {
+        // Show save confirmation?
+    });
+
     //ev.dataTransfer.clearData();
 }