diff --git a/ckan/public/base/javascript/modules/resource-reorder.js b/ckan/public/base/javascript/modules/resource-reorder.js new file mode 100644 index 00000000000..ab28eda40fc --- /dev/null +++ b/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: '

', + button: [ + '', + '', + '', + '' + ].join('\n'), + form_actions: [ + '
', + '', + '', + '
' + ].join('\n'), + handle: [ + '', + '', + '' + ].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); + } + } + + }; +}); diff --git a/ckan/public/base/javascript/resource.config b/ckan/public/base/javascript/resource.config index b1a7302d9e8..3eb169835c8 100644 --- a/ckan/public/base/javascript/resource.config +++ b/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 diff --git a/ckan/public/base/less/dataset.less b/ckan/public/base/less/dataset.less index 29b07d6b8a1..d4c5f6ae1da 100644 --- a/ckan/public/base/less/dataset.less +++ b/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 { diff --git a/ckan/templates/package/resources.html b/ckan/templates/package/resources.html index e353d03f10b..1286db9f009 100644 --- a/ckan/templates/package/resources.html +++ b/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 %} -