Briq
/
django-admin-sortable-fixwin
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactored sorting JS files to be includes so that server-side variables may be passed to them. 

Added 'after_sorting_js_callback_name' attribute to SortableAdminBase.
Added callback to be executed after sorting for each of the possible sorting scenarios.
Added custom template examples to add a callback to be executed when sorting is finished.
master
Brandon Taylor 2018-06-18 11:40:24 -04:00
parent fa8a5f12a8
commit e35f36b25a
10 changed files with 270 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
adminsortable/admin.py
View File

@ -32,6 +32,8 @@ class SortableAdminBase(object):
change_form_template_extends = 'admin/change_form.html'
change_list_template_extends = 'admin/change_list.html'
after_sorting_js_callback_name = None
def changelist_view(self, request, extra_context=None):
"""
If the model that inherits Sortable has more than one object,
@ -215,7 +217,8 @@ class SortableAdmin(SortableAdminBase, ModelAdmin):
'sortable_by_class_is_sortable': sortable_by_class_is_sortable,
'sortable_by_class_display_name': sortable_by_class_display_name,
'jquery_lib_path': jquery_lib_path,
'csrf_cookie_name': getattr(settings, 'CSRF_COOKIE_NAME', 'csrftoken')
'csrf_cookie_name': getattr(settings, 'CSRF_COOKIE_NAME', 'csrftoken'),
'after_sorting_js_callback_name': self.after_sorting_js_callback_name
})
return render(request, self.sortable_change_list_template, context)
@ -238,7 +241,8 @@ class SortableAdmin(SortableAdminBase, ModelAdmin):
'change_form_template_extends': self.change_form_template_extends,
'has_sortable_tabular_inlines': self.has_sortable_tabular_inlines,
'has_sortable_stacked_inlines': self.has_sortable_stacked_inlines,
'csrf_cookie_name': getattr(settings, 'CSRF_COOKIE_NAME', 'csrftoken')
'csrf_cookie_name': getattr(settings, 'CSRF_COOKIE_NAME', 'csrftoken'),
'after_sorting_js_callback_name': self.after_sorting_js_callback_name
})
return super(SortableAdmin, self).change_view(request, object_id,

101
adminsortable/static/adminsortable/js/admin.sortable.js → adminsortable/templates/adminsortable/admin.sortable.html
View File

@ -1,47 +1,54 @@
(function($){
$(function() {
jQuery('.sortable').sortable({
axis : 'y',
containment : 'parent',
tolerance : 'pointer',
items : 'li',
stop : function(event, ui) {
var indexes = [],
lineItems = ui.item.parent().find('> li');
lineItems.each(function(i) {
indexes.push($(this).find(':hidden[name="pk"]').val());
});
$.ajax({
url: ui.item.find('a.admin_sorting_url').attr('href'),
type: 'POST',
data: { indexes: indexes.join(',') },
success: function() {
// set icons based on position
lineItems.each(function(index, element) {
var icon = $(element).find('a.admin_sorting_url .fa');
icon.removeClass('fa-sort-desc fa-sort-asc fa-sort');
if (index === 0) {
icon.addClass('fa fa-sort-desc');
}
else if (index == lineItems.length - 1) {
icon.addClass('fa fa-sort-asc');
}
else {
icon.addClass('fa fa-sort');
}
});
ui.item.effect('highlight', {}, 1000);
}
});
}
}).click(function(e){
e.preventDefault();
});
});
})(django.jQuery);
<script>
(function($){
$(function() {
jQuery('.sortable').sortable({
axis : 'y',
containment : 'parent',
tolerance : 'pointer',
items : 'li',
stop : function(event, ui) {
var indexes = [],
lineItems = ui.item.parent().find('> li');
lineItems.each(function(i) {
indexes.push($(this).find(':hidden[name="pk"]').val());
});
$.ajax({
url: ui.item.find('a.admin_sorting_url').attr('href'),
type: 'POST',
data: { indexes: indexes.join(',') },
success: function() {
// set icons based on position
lineItems.each(function(index, element) {
var icon = $(element).find('a.admin_sorting_url .fa');
icon.removeClass('fa-sort-desc fa-sort-asc fa-sort');
if (index === 0) {
icon.addClass('fa fa-sort-desc');
}
else if (index == lineItems.length - 1) {
icon.addClass('fa fa-sort-asc');
}
else {
icon.addClass('fa fa-sort');
}
});
ui.item.effect('highlight', {}, 1000);
{% if after_sorting_js_callback_name %}
{# if a callback is defined in a custom template, execute it #}
window['{{ after_sorting_js_callback_name }}']();
{% endif %}
}
});
}
}).click(function(e){
e.preventDefault();
});
});
})(django.jQuery);
</script>

6
adminsortable/templates/adminsortable/change_form.html
View File

@ -7,17 +7,17 @@
{% url 'admin:jsi18n' as jsi18nurl %}
{% if has_sortable_tabular_inlines or has_sortable_stacked_inlines %}
<script type="text/javascript" src="{% static 'adminsortable/js/jquery-ui-django-admin.min.js' %}"></script>
<script src="{% static 'adminsortable/js/jquery-ui-django-admin.min.js' %}"></script>
<script src="{% static 'adminsortable/js/jquery.ui.touch-punch.min.js' %}"></script>
{% include 'adminsortable/csrf/jquery.django-csrf.html' with csrf_cookie_name=csrf_cookie_name %}
{% endif %}
{% if has_sortable_tabular_inlines %}
<script type="text/javascript" src="{% static 'adminsortable/js/admin.sortable.tabular.inlines.js' %}"></script>
{% include 'adminsortable/edit_inline/admin.sortable.stacked.inlines.html' with after_sorting_js_callback_name=after_sorting_js_callback_name %}
{% endif %}
{% if has_sortable_stacked_inlines %}
<script type="text/javascript" src="{% static 'adminsortable/js/admin.sortable.stacked.inlines.js' %}"></script>
{% include 'adminsortable/edit_inline/admin.sortable.tabular.inlines.html' with after_sorting_js_callback_name=after_sorting_js_callback_name %}
{% endif %}
{% endblock %}

23
adminsortable/templates/adminsortable/change_list.html
View File

@ -21,14 +21,31 @@
{% endblock %}
{% block extrahead %}
{{ block.super }}
{{ media.js }}
<script src="{% static jquery_lib_path %}"></script>
<script src="{% static 'admin/js/jquery.init.js' %}"></script>
{{ block.super }}
{{ media.js }}
<script src="{% static 'adminsortable/js/jquery-ui-django-admin.min.js' %}"></script>
<script src="{% static 'adminsortable/js/jquery.ui.touch-punch.min.js' %}"></script>
{% include 'adminsortable/csrf/jquery.django-csrf.html' with csrf_cookie_name=csrf_cookie_name %}
<script src="{% static 'adminsortable/js/admin.sortable.js' %}"></script>
{% include 'adminsortable/admin.sortable.html' with after_sorting_js_callback_name=after_sorting_js_callback_name %}
<script type="text/javascript">
(function($) {
$(document).ready(function($) {
var url = window.location.href;
var urlParts = url.split('?');
var changeListUrl = $('a#return-to-changelist').attr('href');
if (urlParts.length === 2) {
$('a#return-to-changelist').attr(
'href',
changeListUrl + '?' + urlParts[1].replace('filter_expression=', '')
);
}
});
})(django.jQuery);
</script>
{% endblock %}
{% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-list{% endblock %}

148
adminsortable/static/adminsortable/js/admin.sortable.stacked.inlines.js → adminsortable/templates/adminsortable/edit_inline/admin.sortable.stacked.inlines.html
View File

@ -1,70 +1,78 @@
(function($){
$(function() {
var sorting_urls = $(':hidden[name="admin_sorting_url"]');
if (sorting_urls.length > 0)
{
var sortable_inline_groups = sorting_urls.closest('.inline-group')
var sortable_inline_rows = sortable_inline_groups.find('.inline-related');
sortable_inline_groups.addClass('sortable')
sortable_inline_rows.addClass('sortable');
sortable_inline_groups.sortable({
axis : 'y',
containment : 'parent',
create: function(event, ui) {
$('.inline-related :checkbox').unbind();
},
tolerance : 'pointer',
items : '.inline-related',
stop : function(event, ui)
{
if ($('.inline-deletelink').length > 0) {
$(ui.sender).sortable('cancel');
alert($('#localized_save_before_reorder_message').val());
return false;
}
var indexes = [];
ui.item.parent().children('.inline-related').each(function(i)
{
var index_value = $(this).find(':hidden[name$="-id"]').val();
if (index_value !== "" && index_value !== undefined) {
indexes.push(index_value);
}
});
$.ajax({
url: ui.item.parent().find(':hidden[name="admin_sorting_url"]').val(),
type: 'POST',
data: { indexes : indexes.join(',') },
success: function() {
var fieldsets = ui.item.find('fieldset'),
highlightedSelector = fieldsets.filter('.collapsed').length === fieldsets.length ? 'h3' : '.form-row',
icons = ui.item.parent().find('h3 > .fa');
// set icons based on position
icons.removeClass('fa-sort-desc fa-sort-asc fa-sort');
icons.each(function(index, element) {
var icon = $(element);
if (index === 0) {
icon.addClass('fa fa-sort-desc');
}
else if (index == icons.length - 1) {
icon.addClass('fa fa-sort-asc');
}
else {
icon.addClass('fa fa-sort');
}
});
ui.item.find(highlightedSelector).effect('highlight', {}, 1000);
}
});
}
});
}
});
})(django.jQuery);
<script>
(function($){
$(function() {
var sorting_urls = $(':hidden[name="admin_sorting_url"]');
if (sorting_urls.length > 0)
{
var sortable_inline_groups = sorting_urls.closest('.inline-group')
var sortable_inline_rows = sortable_inline_groups.find('.inline-related');
sortable_inline_groups.addClass('sortable')
sortable_inline_rows.addClass('sortable');
sortable_inline_groups.sortable({
axis : 'y',
containment : 'parent',
create: function(event, ui) {
$('.inline-related :checkbox').unbind();
},
tolerance : 'pointer',
items : '.inline-related',
stop : function(event, ui)
{
if ($('.inline-deletelink').length > 0) {
$(ui.sender).sortable('cancel');
alert($('#localized_save_before_reorder_message').val());
return false;
}
var indexes = [];
ui.item.parent().children('.inline-related').each(function(i)
{
var index_value = $(this).find(':hidden[name$="-id"]').val();
if (index_value !== "" && index_value !== undefined) {
indexes.push(index_value);
}
});
$.ajax({
url: ui.item.parent().find(':hidden[name="admin_sorting_url"]').val(),
type: 'POST',
data: { indexes : indexes.join(',') },
success: function() {
var fieldsets = ui.item.find('fieldset'),
highlightedSelector = fieldsets.filter('.collapsed').length === fieldsets.length ? 'h3' : '.form-row',
icons = ui.item.parent().find('h3 > .fa');
// set icons based on position
icons.removeClass('fa-sort-desc fa-sort-asc fa-sort');
icons.each(function(index, element) {
var icon = $(element);
if (index === 0) {
icon.addClass('fa fa-sort-desc');
}
else if (index == icons.length - 1) {
icon.addClass('fa fa-sort-asc');
}
else {
icon.addClass('fa fa-sort');
}
});
ui.item.find(highlightedSelector).effect('highlight', {}, 1000);
{% if after_sorting_js_callback_name %}
{# if a callback is defined in a custom template, execute it #}
window['{{ after_sorting_js_callback_name }}']();
{% endif %}
}
});
}
});
}
});
})(django.jQuery);
</script>

144
adminsortable/static/adminsortable/js/admin.sortable.tabular.inlines.js → adminsortable/templates/adminsortable/edit_inline/admin.sortable.tabular.inlines.html
View File

@ -1,69 +1,77 @@
(function($){
$(function() {
var sorting_urls = $(':hidden[name="admin_sorting_url"]');
if (sorting_urls.length)
{
var sortable_inline_group = sorting_urls.closest('.inline-group');
var tabular_inline_rows = sortable_inline_group.find('.tabular table tbody tr');
tabular_inline_rows.addClass('sortable');
sortable_inline_group.find('.tabular.inline-related').sortable({
axis : 'y',
containment : 'parent',
create: function(event, ui) {
$('td.delete :checkbox').unbind();
},
tolerance : 'pointer',
items : 'tr:not(.add-row)',
stop : function(event, ui) {
if ($('.inline-deletelink').length > 0) {
$(ui.sender).sortable('cancel');
alert($('#localized_save_before_reorder_message').val());
return false;
}
var indexes = [];
ui.item.parent().children('tr').each(function(i)
{
var index_value = $(this).find('.original :input:first').val();
<script>
(function($){
$(function() {
var sorting_urls = $(':hidden[name="admin_sorting_url"]');
if (sorting_urls.length)
{
var sortable_inline_group = sorting_urls.closest('.inline-group');
var tabular_inline_rows = sortable_inline_group.find('.tabular table tbody tr');
tabular_inline_rows.addClass('sortable');
sortable_inline_group.find('.tabular.inline-related').sortable({
axis : 'y',
containment : 'parent',
create: function(event, ui) {
$('td.delete :checkbox').unbind();
},
tolerance : 'pointer',
items : 'tr:not(.add-row)',
stop : function(event, ui) {
if ($('.inline-deletelink').length > 0) {
$(ui.sender).sortable('cancel');
alert($('#localized_save_before_reorder_message').val());
return false;
}
var indexes = [];
ui.item.parent().children('tr').each(function(i)
{
var index_value = $(this).find('.original :input:first').val();
if (index_value !== '' && index_value !== undefined) {
indexes.push(index_value);
}
});
$.ajax({
url: ui.item.parent().find(':hidden[name="admin_sorting_url"]').val(),
type: 'POST',
data: { indexes : indexes.join(',') },
success: function() {
// set icons based on position
var icons = ui.item.parent().find('.fa');
icons.removeClass('fa-sort-desc fa-sort-asc fa-sort');
icons.each(function(index, element) {
var icon = $(element);
if (index === 0) {
icon.addClass('fa fa-sort-desc');
}
else if (index == icons.length - 1) {
icon.addClass('fa fa-sort-asc');
}
else {
icon.addClass('fa fa-sort');
}
});
// highlight sorted row, then re-stripe table
ui.item.effect('highlight', {}, 1000);
tabular_inline_rows.removeClass('row1 row2');
$('.tabular table tbody tr:odd').addClass('row2');
$('.tabular table tbody tr:even').addClass('row1');
}
});
}
});
}
});
})(django.jQuery);
indexes.push(index_value);
}
});
$.ajax({
url: ui.item.parent().find(':hidden[name="admin_sorting_url"]').val(),
type: 'POST',
data: { indexes : indexes.join(',') },
success: function() {
// set icons based on position
var icons = ui.item.parent().find('.fa');
icons.removeClass('fa-sort-desc fa-sort-asc fa-sort');
icons.each(function(index, element) {
var icon = $(element);
if (index === 0) {
icon.addClass('fa fa-sort-desc');
}
else if (index == icons.length - 1) {
icon.addClass('fa fa-sort-asc');
}
else {
icon.addClass('fa fa-sort');
}
});
// highlight sorted row, then re-stripe table
ui.item.effect('highlight', {}, 1000);
tabular_inline_rows.removeClass('row1 row2');
$('.tabular table tbody tr:odd').addClass('row2');
$('.tabular table tbody tr:even').addClass('row1');
{% if after_sorting_js_callback_name %}
{# if a callback is defined in a custom template, execute it #}
window['{{ after_sorting_js_callback_name }}']();
{% endif %}
}
});
}
});
}
});
})(django.jQuery);
</script>

BIN
sample_project/database/test_project.sqlite
View File

Binary file not shown.

3
sample_project/samples/admin.py
View File

@ -83,6 +83,9 @@ class ProjectAdmin(SortableAdmin):
NonSortableCreditInline, NonSortableNoteInline
]
list_display = ['__str__', 'category']
after_sorting_js_callback_name = 'afterSortCallback'
sortable_change_list_template = 'adminsortable/custom_change_list.html'
sortable_change_form_template = "adminsortable/custom_change_form.html"
admin.site.register(Project, ProjectAdmin)

15
sample_project/templates/adminsortable/custom_change_form.html 100644
View File

@ -0,0 +1,15 @@
{% extends "adminsortable/change_form.html" %}
{% block extrahead %}
{{ block.super }}
<script>
django.jQuery(document).on('order:changed', function(event) {
console.log(event.message);
});
window['{{ after_sorting_js_callback_name }}'] = function() {
django.jQuery(document).trigger({ type: 'order:changed', message: 'Order changed', time: new Date() });
};
</script>
{% endblock %}

15
sample_project/templates/adminsortable/custom_change_list.html 100644
View File

@ -0,0 +1,15 @@
{% extends 'adminsortable/change_list.html' %}
{% block extrahead %}
{{ block.super }}
<script>
django.jQuery(document).on('order:changed', function(event) {
console.log(event.message);
});
window['{{ after_sorting_js_callback_name }}'] = function() {
django.jQuery(document).trigger({ type: 'order:changed', message: 'Order changed', time: new Date() });
};
</script>
{% endblock %}