kopia lustrzana https://github.com/wagtail/wagtail
Add keyboard support page ordering functionality
- updated messages to be more insightful while sorting page order by keyboard - closes #5785 - fixes #5410pull/9066/head^2
Thomas van der Hoeven
LB (Ben Johnston)
rodzic
4e747326fa
commit
0fddf72877
|
|
@ -1,6 +1,13 @@
|
|||
Changelog
|
||||
=========
|
||||
|
||||
|
||||
4.1 (xx.xx.xxxx) - IN DEVELOPMENT
|
||||
~~~~~~~~~~~~~~~~
|
||||
|
||||
* Add basic keyboard control and screen reader support for page listing re-ordering (Paarth Agarwal, Thomas van der Hoeven)
|
||||
|
||||
|
||||
4.0 (xx.xx.xxxx) - IN DEVELOPMENT
|
||||
~~~~~~~~~~~~~~~~
|
||||
|
||||
|
|
|
|||
|
|
@ -619,6 +619,7 @@ Contributors
|
|||
* Xabier Bello
|
||||
* Mehrdad Moradizadeh
|
||||
* ariadi
|
||||
* Thomas van der Hoeven
|
||||
|
||||
|
||||
Translators
|
||||
|
|
|
|||
|
|
@ -43,6 +43,10 @@
|
|||
<script type="text/javascript">
|
||||
{% if ordering == 'ord' %}
|
||||
$(function() {
|
||||
var currentlySelected;
|
||||
var currentPosition;
|
||||
var movedPageId;
|
||||
var moveNTimesDirection = 0;
|
||||
var reorderCount = 0;
|
||||
var orderform = $('#page-reorder-form');
|
||||
|
||||
|
|
@ -87,6 +91,69 @@
|
|||
}
|
||||
});
|
||||
$('.listing tbody').disableSelection();
|
||||
$("[data-order-handle]").on("keydown", function(e) {
|
||||
let keyCodes = {
|
||||
enter: 13,
|
||||
upArrow: 38,
|
||||
downArrow: 40,
|
||||
escape: 27
|
||||
}
|
||||
|
||||
if (currentlySelected) {
|
||||
// We want to prevent default key actions (like scrolling) when we have an object selected
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
var children = $('.listing tbody').children();
|
||||
|
||||
let moveElement = function() {
|
||||
var index = currentPosition + moveNTimesDirection;
|
||||
if (index < 0) {
|
||||
index = 0
|
||||
} else if (index > children.length - 1) {
|
||||
index = children.length - 1
|
||||
}
|
||||
var url = "{% url 'wagtailadmin_pages:set_page_position' '999999' %}".replace('999999', currentlySelected.id.substring(5));
|
||||
url += `?position=${(index)}`;
|
||||
let CSRFToken = $('input[name="csrfmiddlewaretoken"]', orderform).val();
|
||||
$.post(url, {csrfmiddlewaretoken: CSRFToken}, function(){
|
||||
addMessage('success', `"${$(currentlySelected).data('page-title')}" has been moved successfully from ${currentPosition +1} to ${index +1}.`)
|
||||
}).done(function() {
|
||||
currentlySelected = undefined;
|
||||
})
|
||||
if (moveNTimesDirection > 0) {
|
||||
$(currentlySelected).insertAfter($(children[index]));
|
||||
} else {
|
||||
$(currentlySelected).insertBefore($(children[index]));
|
||||
}
|
||||
}
|
||||
|
||||
if(!currentlySelected && e.which == keyCodes.enter) {
|
||||
moveNTimesDirection = 0;
|
||||
currentlySelected = $(this).parents('tr')[0]
|
||||
children.toArray().forEach(function(item, index) {
|
||||
if (item === currentlySelected) {
|
||||
currentPosition = index;
|
||||
}
|
||||
})
|
||||
}
|
||||
if (currentlySelected && e.which == keyCodes.enter) {
|
||||
if (moveNTimesDirection != 0) {
|
||||
moveElement();
|
||||
}
|
||||
}
|
||||
|
||||
if (currentlySelected && e.which == keyCodes.upArrow && children.first()[0] !== currentlySelected) {
|
||||
moveNTimesDirection--;
|
||||
};
|
||||
if (currentlySelected && e.which == keyCodes.downArrow && children.last()[0] !== currentlySelected) {
|
||||
moveNTimesDirection++;
|
||||
};
|
||||
if (currentlySelected && e.which == keyCodes.escape) {
|
||||
currentlySelected = undefined;
|
||||
}
|
||||
|
||||
})
|
||||
})
|
||||
{% endif %}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{% load i18n %}
|
||||
{% load l10n %}
|
||||
{% load wagtailadmin_tags %}
|
||||
<table class="listing {% if full_width %}full-width{% endif %} {% block table_classname %}{% endblock %}">
|
||||
<table class="listing {% if full_width %}full-width{% endif %} {% block table_classname %}{% endblock %}" {% if show_ordering_column %}aria-descrption="{% trans 'Press enter to select an item, use up and down arrows to move the item, press enter to complete the move or escape to cancel the current move.' %}"{% endif %}>
|
||||
{% if show_ordering_column or show_bulk_actions %}
|
||||
<col width="10px" />
|
||||
{% endif %}
|
||||
|
|
@ -24,7 +24,14 @@
|
|||
{% page_permissions page as page_perms %}
|
||||
<tr {% if ordering == "ord" %}id="page_{{ page.id|unlocalize }}" data-page-title="{{ page.get_admin_display_title }}"{% endif %} class="{% if not page.live %}unpublished{% endif %} {% block page_row_classname %}{% endblock %}">
|
||||
{% if show_ordering_column %}
|
||||
<td class="ord">{% if orderable and ordering == "ord" %}<div class="handle icon icon-grip text-replace">{% trans 'Drag' %}</div>{% endif %}</td>
|
||||
<td class="ord">
|
||||
{% if orderable and ordering == "ord" %}
|
||||
<div class="handle icon icon-grip text-replace" tabindex="0" aria-live="polite" data-order-handle>
|
||||
{% trans 'Drag' %}
|
||||
<span data-order-label>Item {{ forloop.counter }} of {{ pages|length }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
{% elif show_bulk_actions %}
|
||||
{% include "wagtailadmin/bulk_actions/listing_checkbox_cell.html" with obj_type="page" obj=page aria_labelledby_prefix="page_" aria_labelledby=page.pk|unlocalize aria_labelledby_suffix="_title" %}
|
||||
{% endif %}
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue