Add button to allow better list dragging

When dealing with many lists with many links, it becomes hard for the
user to drag lists because it needs both scrolling and dragging.

Adds a button to collapse the links, allowing easier dragging and
dropping.

app/assets/javascripts/application.js

@@ -1,4 +1,5 @@
 //= require jquery-ui.sortable.min
+//= require jquery.clicktoggle
 //= require_tree .
 //= require_self
 

app/assets/javascripts/ordered_lists.js

@@ -5,8 +5,18 @@
 
   GOVUK.orderedLists = {
     init: function() {
-      var $listContainer = $('.curated-lists');
+      $('#switch-to-list-sorting').clickToggle(
+        function () {
+          $('body').addClass('list-drag-in-progress');
+          $(this).text('Done');
+        },
+        function () {
+          $('body').removeClass('list-drag-in-progress');
+          $(this).text('Sort lists')
+        }
+      );
 
+      var $listContainer = $('.curated-lists');
       $listContainer.sortable({
         stop: function(event, draggable) {
           var $lists = $listContainer.children();
@@ -22,8 +32,7 @@
           GOVUK.orderedLists.reindex($listsToUpdate, indexToUpdateFrom);
           GOVUK.publishing.unlockPublishing();
         },
-        placeholder: 'sortable-placeholder',
-        forcePlaceholderSize: true
+        placeholder: 'sortable-placeholder'
       });
     },
     reindex: function($lists, offset) {

app/assets/stylesheets/curated_lists.scss

@@ -82,6 +82,20 @@ html.js {
   cursor: move;
 }
 
+.list-drag-in-progress {
+  .curated-list {
+    display: none;
+  }
+
+  .links-table {
+    margin-bottom: 10px;
+  }
+
+  .sortable-placeholder {
+    height: 30px !important;
+  }
+}
+
 .curated-list {
   tr.untagged {
     background-color: #ffff99;

app/views/lists/_list_editor.html.erb

@@ -1,3 +1,13 @@
+<div style="text-align: right">
+  <button type="button"
+    id="switch-to-list-sorting"
+    data-toggle="button"
+    class="btn btn-default"
+    autocomplete="off">
+    Sort lists
+  </button>
+</div>
+
 <div class="curated-lists">
   <% lists.each do |list| %>
     <section

vendor/assets/javascripts/jquery.clicktoggle.js

@@ -0,0 +1,13 @@
+$.fn.clickToggle = function(a,b){
+  return this.each(function(){
+    var clicked = false;
+    $(this).bind("click",function(){
+      if (clicked) {
+        clicked = false;
+        return b.apply(this,arguments);
+      }
+      clicked = true;
+      return a.apply(this,arguments);
+    });
+  });
+};