mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-23 09:23:09 +02:00
Code Issues Projects Releases Wiki Activity

MDL-51803 core: encourage use drag handle in sortable list

Browse Source
This commit is contained in:
Marina Glancy 2018-10-10 10:48:14 +02:00
parent 3151c3b98b
commit 5c170231dd
3 changed files with 45 additions and 11 deletions

2
lib/amd/build/sortable_list.min.js vendored

File diff suppressed because one or more lines are too long

27
lib/amd/src/sortable_list.js

@ -18,12 +18,16 @@
*
* Example of usage:
*
* Create a list (for example <ul> or <tbody>) where each draggable element has a drag handle.
* The best practice is to use the template core/drag_handle:
* $OUTPUT->render_from_template('core/drag_handle', ['movetitle' => get_string('movecontent', 'moodle', ELEMENTNAME)]);
*
* Attach this JS module to this list:
*
* define(['jquery', 'core/sortable_list'], function($, SortableList) {
* var list = new SortableList('ul.my-awesome-list', // source list (usually <ul> or <tbody>) - selector or element
* {
* moveHandlerSelector: '.draghandle' // CSS selector of the crossarrow handle. Make sure that this
* // element can handle keypress and mouse click events for displaying accessible move popup.
* });
* var list = new SortableList('ul.my-awesome-list'); // source list (usually <ul> or <tbody>) - selector or element
*
* // Listen to the events when element is dragged.
* $('ul.my-awesome-list > *').on(SortableList.EVENTS.DROP, function(evt, info) {
* console.log(info);
* });
@ -62,7 +66,7 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
*/
var defaultParameters = {
targetListSelector: null,
moveHandlerSelector: null,
moveHandlerSelector: '[data-drag-type=move]',
isHorizontal: false,
autoScroll: true
};
@ -105,8 +109,7 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
* @param {(String|jQuery|Element)} root JQuery/DOM element representing sortable list (i.e. <ul>, <tbody>) or CSS selector
* @param {Object} config Parameters for the list. See defaultParameters above for examples.
* @property {(String|jQuery|Element)} config.targetListSelector target lists, by default same as root
* @property {String} config.moveHandlerSelector CSS selector for a drag handle. By default the whole item is a handle.
* Without drag handle sorting is not accessible!
* @property {String} config.moveHandlerSelector CSS selector for a drag handle. By default '[data-drag-type=move]'
* @property {String} config.targetListSelector CSS selector for target lists. By default the same as root
* @property {(Boolean|Function)} config.isHorizontal Set to true if the list is horizontal
* (can also be a callback with list as an argument)
@ -607,9 +610,13 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
*
* @public
* @param {jQuery} element
* @param {jQuery} handler
* @return {Promise}
*/
SortableList.prototype.getMoveDialogueTitle = function(element) {
SortableList.prototype.getMoveDialogueTitle = function(element, handler) {
if (handler.attr('title')) {
return $.Deferred().resolve(handler.attr('title'));
}
return this.getElementName(element).then(function(name) {
return str.get_string('movecontent', 'moodle', name);
});
@ -677,7 +684,7 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
SortableList.prototype.displayMoveDialogue = function(clickedElement) {
ModalFactory.create({
type: ModalFactory.types.CANCEL,
title: this.getMoveDialogueTitle(this.info.element),
title: this.getMoveDialogueTitle(this.info.element, clickedElement),
body: this.getDestinationsList()
}).then($.proxy(function(modal) {
var quickMoveHandler = $.proxy(function(e) {

27
lib/templates/drag_handle.mustache Normal file

@ -0,0 +1,27 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template core/drag_handle
Drag handle template.
Example context (json):
{
"movetitle": "Move this element"
}
}}
<span tabindex="0" role="button" aria-haspopup="true" data-drag-type="move" title="{{movetitle}}">{{#pix}} i/dragdrop, core {{/pix}}</span>