MDL-51803 core: integration review

This commit is contained in:
Marina Glancy 2018-10-03 14:07:48 +02:00
parent 6b9cb2481c
commit dbe5689ef1
2 changed files with 44 additions and 35 deletions

File diff suppressed because one or more lines are too long

View File

@ -317,8 +317,9 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
config = evt.data.config;
// Find the element that this draghandle belongs to.
var sourceList = $(evt.currentTarget).closest(config.listSelector),
movedElement = $(evt.target).closest(sourceList.children());
var clickedElement = $(evt.currentTarget),
sourceList = clickedElement.closest(config.listSelector),
movedElement = clickedElement.closest(sourceList.children());
if (!movedElement.length) {
return;
}
@ -337,7 +338,7 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
};
executeCallback('dragstart');
displayMoveDialogue();
displayMoveDialogue(clickedElement);
};
/**
@ -594,40 +595,36 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
};
/**
* Returns the list of possible move destinations with their onclick handlers
* Returns the list of possible move destinations
*
* @private
* @param {Modal} modal
* @return {jQuery}
* @return {Promise}
*/
var getDestinationsList = function(modal) {
var getDestinationsList = function() {
var addedLists = [],
targets = $(config.targetListSelector),
list = $('<ul/>').addClass(config.keyboardDragClass),
destinations = $('<ul/>').addClass(config.keyboardDragClass),
result = $.when().then(function() {
return destinations;
}),
createLink = function(parentElement, beforeElement, afterElement) {
if (beforeElement.is(info.element) || afterElement.is(info.element)) {
return;
}
var li = $('<li/>').appendTo(list);
var a = $('<a href="#"/>')
.on('click', function(e) {
e.preventDefault();
e.stopPropagation();
moveElement(parentElement, beforeElement);
info.endTime = new Date().getTime();
info.dropped = true;
info.element.find(config.moveHandlerSelector).focus();
executeCallback('drop');
modal.hide();
})
.appendTo(li);
getDestinationName(parentElement, afterElement)
.then(function(txt) {
a.text(txt);
return txt;
}).catch(Notification.exception);
result = result
.then(function() {
return getDestinationName(parentElement, afterElement);
})
.then(function(txt) {
var li = $('<li/>').appendTo(destinations);
var a = $('<a href="#"/>').attr('data-sortable-quickmove', 1).appendTo(li);
a.data('parent-element', parentElement).data('before-element', beforeElement).text(txt);
return destinations;
});
},
addList = function() {
// Destination lists may be nested. We want to add all move destinations in the same
// order they appear on the screen for the user.
if ($.inArray(this, addedLists) !== -1) {
return;
}
@ -643,24 +640,37 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
createLink(list, $(), children.last());
};
targets.each(addList);
return list;
return result;
};
/**
* Displays the dialogue to move element.
* @param {jQuery} clickedElement element to return focus to after the modal is closed
* @private
*/
var displayMoveDialogue = function() {
var displayMoveDialogue = function(clickedElement) {
ModalFactory.create({
type: ModalFactory.types.CANCEL,
title: getMoveDialogueTitle(info.element)
title: getMoveDialogueTitle(info.element),
body: getDestinationsList()
}).then(function(modal) {
var quickMoveHandler = function(e) {
e.preventDefault();
e.stopPropagation();
moveElement($(e.currentTarget).data('parent-element'), $(e.currentTarget).data('before-element'));
info.endTime = new Date().getTime();
info.dropped = true;
clickedElement.focus();
executeCallback('drop');
modal.hide();
};
modal.getRoot().on('click', '[data-sortable-quickmove]', quickMoveHandler);
modal.getRoot().on(ModalEvents.hidden, function() {
// Always destroy when hidden, it is generated dynamically each time.
modal.getRoot().off('click', '[data-sortable-quickmove]', quickMoveHandler);
modal.destroy();
finishDragging();
});
modal.getBody().append(getDestinationsList(modal));
modal.setLarge();
modal.show();
return modal;
@ -699,17 +709,16 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
* (default 'sortable-list-over-element')
*/
init: function(root, config) {
if (typeof config === 'undefined' || !config) {
config = {};
}
config = $.extend({}, defaultParameters, CSS, config);
config = $.extend({}, defaultParameters, CSS, config || {});
config.listSelector = root;
if (!config.targetListSelector) {
config.targetListSelector = root;
}
if (typeof config.listSelector === 'object') {
// The root is an element on the page. Register a listener for this element.
$(config.listSelector).on('mousedown touchstart', {config: config}, dragStartHandler);
} else {
// The root is a CSS selector. Register a listener that picks up the element dynamically.
$('body').on('mousedown touchstart', config.listSelector, {config: config}, dragStartHandler);
}
if (config.moveHandlerSelector !== null) {