[#1277] First semi working front end for re-ordering resources

ckan/public/base/javascript/modules/resource-reorder.js

@@ -0,0 +1,116 @@
+/* Module for the resource form. Handles validation and updating the form
+ * with external data such as from a file upload.
+ */
+this.ckan.module('resource-reorder', function($, _) {
+  return {
+    options: {
+      form: {
+        method: 'POST',
+        file: 'file',
+        params: []
+      },
+      i18n: {
+        label: _('Reorder resources'),
+        save: _('Save order'),
+        cancel: _('Cancel')
+      }
+    },
+    template: {
+      title: '<h1></h1>',
+      button: [
+        '<a href="javascript:;" class="btn">',
+        '<i class="icon-reorder"></i>',
+        '<span></span>',
+        '</a>'
+      ].join('\n'),
+      form_actions: [
+        '<div class="form-actions">',
+        '<a href="javascript:;" class="cancel btn pull-left"></a>',
+        '<a href="javascript:;" class="save btn btn-primary disabled"></a>',
+        '</div>'
+      ].join('\n'),
+      handle: [
+        '<a href="javascript:;" class="handle">',
+        '<i class="icon-move"></i>',
+        '</a>'
+      ].join('\n')
+    },
+    is_reordering: false,
+
+    initialize: function() {
+      jQuery.proxyAll(this, /_on/);
+
+      this.html_title = $(this.template.title)
+        .text(this.i18n('label'))
+        .insertBefore(this.el)
+        .hide();
+      var button = $(this.template.button)
+        .on('click', this._onHandleStartReorder)
+        .appendTo('.page_primary_action');
+      $('span', button).text(this.i18n('label'));
+
+      this.html_form_actions = $(this.template.form_actions)
+        .hide()
+        .insertAfter(this.el);
+      $('.save', this.html_form_actions)
+        .text(this.i18n('save'))
+        .on('click', this._onHandleSave);
+      $('.cancel', this.html_form_actions)
+        .text(this.i18n('cancel'))
+        .on('click', this._onHandleCancel);
+
+      this.html_handles = $(this.template.handle)
+        .hide()
+        .appendTo($('.resource-item', this.el));
+
+      this.el
+        .sortable()
+        .on('change', this._onSortOrderChanged)
+        .sortable('disable');
+
+    },
+
+    _onHandleStartReorder: function() {
+      if (!this.is_reordering) {
+        this.html_form_actions
+          .add(this.html_handles)
+          .add(this.html_title)
+          .show();
+        this.el
+          .addClass('reordering')
+          .sortable('enable');
+        $('.page_primary_action').hide();
+        this.is_reordering = true;
+      }
+    },
+
+    _onHandleCancel: function() {
+      if (this.is_reordering) {
+        this.html_form_actions
+          .add(this.html_handles)
+          .add(this.html_title)
+          .hide();
+        this.el
+          .removeClass('reordering')
+          .sortable('disable');
+        $('.page_primary_action').show();
+        this.is_reordering = false;
+      }
+    },
+
+    _onSortOrderChanged: function() {
+      $('.save', this.html_form_actions).removeClass('disabled')
+    },
+
+    _onHandleSave: function() {
+      if (!$('.save', this.html_form_actions).hasClass('disabled')) {
+        var order = [];
+        $('.resource-item', this.el).each(function() {
+          order.push($(this).data('id'));
+        });
+        console.log(order);
+      }
+    }
+
+  };
+});

ckan/public/base/javascript/resource.config

@@ -32,6 +32,7 @@ ckan =
     modules/table-selectable-rows.js
     modules/resource-form.js
     modules/resource-upload-field.js
+    modules/resource-reorder.js
     modules/follow.js
     modules/activity-stream.js
     modules/dashboard.js

ckan/public/base/less/dataset.less

@@ -93,6 +93,45 @@
   right: 10px;
 }
 
+.resource-list.reordering {
+  .resource-item {
+    border: 1px solid @moduleHeadingBorderColor;
+    margin-bottom: 10px;
+    cursor: move;
+    .handle {
+      display: block;
+      position: absolute;
+      color: @moduleHeadingActionTextColor;
+      left: -31px;
+      top: 50%;
+      margin-top: -15px;
+      width: 30px;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      border: 1px solid @moduleHeadingBorderColor;
+      border-width: 1px 0 1px 1px;
+      background-color: @moduleBackgroundColor;
+      .border-radius(20px 0 0 20px);
+      &:hover {
+        text-decoration: none;
+      }
+    }
+    &:hover .handle {
+      background-color: @layoutBackgroundColor;
+    }
+    &.ui-sortable-helper {
+      background-color: @layoutBackgroundColor;
+      border: 1px solid @layoutLinkColor;
+      .handle {
+        background-color: @layoutBackgroundColor;
+        border-color: @layoutLinkColor;
+        color: @navLinkColor;
+      }
+    }
+  }
+}
+
 // Dataset Forms
 
 .dataset-resource-form .dataset-form-resource-types {

ckan/templates/package/resources.html

@@ -1,5 +1,7 @@
 {% extends "package/edit_base.html" %}
 
+{% set has_reorder = c.pkg_dict and c.pkg_dict.resources and c.pkg_dict.resources|length > 0 %}
+
 {% block subtitle %}{{ _('Resources') }} - {{ h.dataset_display_name(pkg) }}{% endblock %}
 
 {% block page_primary_action %}
@@ -8,7 +10,7 @@
 
 {% block primary_content_inner %}
   {% if pkg.resources %}
-    <ul class="resource-list">
+    <ul class="resource-list"{% if has_reorder %} data-module="resource-reorder"{% endif %}>
       {% for resource in pkg.resources %}
         {% snippet 'package/snippets/resource_item.html', pkg=pkg, res=resource, url_is_edit=true %}
       {% endfor %}
@@ -19,3 +21,10 @@
     {% endtrans %}
   {% endif %}
 {% endblock %}
+
+{% block scripts %}
+  {{ super() }}
+  {% if has_reorder %}
+    {% resource 'vendor/reorder' %}
+  {% endif %}
+{% endblock %}

ckan/templates/package/snippets/resource_item.html

@@ -2,7 +2,7 @@
 {% set url_action = 'resource_edit' if url_is_edit and can_edit else 'resource_read' %}
 {% set url = h.url_for(controller='package', action=url_action, id=pkg.name, resource_id=res.id) %}
 
-<li class="resource-item">
+<li class="resource-item" data-id="{{ res.id }}">
   {% block resource_item_title %}
   <a class="heading" href="{{ url }}" title="{{ res.name or res.description }}">
     {{ h.resource_display_name(res) | truncate(50) }}<span class="format-label" property="dc:format" data-format="{{ res.format.lower() or 'data' }}">{{ res.format }}</span>