Skip to content

X
xblock-drag-and-drop-v2
Commit cc6695c6 by Tim Krones
Options

Address review comments.

parent 99929eae
Showing with 39 additions and 43 deletions
drag_and_drop_v2/public/css/drag_and_drop.css
......@@ -116,7 +116,8 @@
/* Focused option */
.xblock--drag-and-drop .drag-container .item-bank .option:focus,
.xblock--drag-and-drop .drag-container .item-bank .option:hover {
.xblock--drag-and-drop .drag-container .item-bank .option:hover,
.xblock--drag-and-drop .drag-container .item-bank .option[aria-grabbed='true'] {
outline-width: 2px;
outline-style: solid;
outline-offset: -4px;
......
drag_and_drop_v2/public/js/drag_and_drop.js
......@@ -13,7 +13,6 @@ function DragAndDropBlock(runtime, element, configuration) {
var __vdom = virtualDom.h(); // blank virtual DOM
// Keyboard accessibility
var CTRL = 17;
var ESC = 27;
var RET = 13;
var SPC = 32;
......@@ -21,7 +20,6 @@ function DragAndDropBlock(runtime, element, configuration) {
var M = 77;
var QUESTION_MARK = 63;
var ctrlDown = false;
var placementMode = false;
var $selectedItem;
var $focusedElement;
......@@ -213,16 +211,17 @@ function DragAndDropBlock(runtime, element, configuration) {
});
};
var isCycleKey = function(key) {
return !ctrlDown && key === TAB;
var isCycleKey = function(evt) {
return !evt.ctrlKey && !evt.metaKey && evt.which === TAB;
};
var isCancelKey = function(key) {
return !ctrlDown && key === ESC;
var isCancelKey = function(evt) {
return !evt.ctrlKey && !evt.metaKey && evt.which === ESC;
};
var isActionKey = function(key) {
if (ctrlDown) {
var isActionKey = function(evt) {
var key = evt.which;
if (evt.ctrlKey || evt.metaKey) {
return key === M;
}
return key === RET || key === SPC;
......@@ -286,28 +285,20 @@ function DragAndDropBlock(runtime, element, configuration) {
var $zone = $(this);
$zone.on('keydown', function(evt) {
if (placementMode) {
var key = evt.which;
if (key === CTRL) {
ctrlDown = true;
return;
}
if (isCycleKey(key)) {
if (isCycleKey(evt)) {
focusNextZone(evt, $zone);
} else if (isCancelKey(key)) {
} else if (isCancelKey(evt)) {
evt.preventDefault();
placementMode = false;
} else if (isActionKey(key)) {
releaseItem($selectedItem);
} else if (isActionKey(evt)) {
evt.preventDefault();
placementMode = false;
placeItem($zone);
releaseItem($selectedItem);
}
}
});
$zone.on('keyup', function(evt) {
if (evt.which === CTRL) {
ctrlDown = false;
}
});
});
// Make zone accept items that are dropped using the mouse
......@@ -328,23 +319,14 @@ function DragAndDropBlock(runtime, element, configuration) {
// Allow item to be "picked up" using the keyboard
$item.on('keydown', function(evt) {
var key = evt.which;
if (key === CTRL) {
ctrlDown = true;
return;
}
if (isActionKey(key)) {
if (isActionKey(evt)) {
evt.preventDefault();
placementMode = true;
grabItem($item);
$selectedItem = $item;
$root.find('.target .zone').first().focus();
}
});
$item.on('keyup', function(evt) {
if (evt.which === CTRL) {
ctrlDown = false;
}
});
// Make item draggable using the mouse
try {
......@@ -355,18 +337,15 @@ function DragAndDropBlock(runtime, element, configuration) {
revert: 'invalid',
revertDuration: 150,
start: function(evt, ui) {
var item_id = $(this).data('value');
setGrabbedState(item_id, true);
updateDOM();
var $item = $(this);
grabItem($item);
publishEvent({
event_type: 'xblock.drag-and-drop-v2.item.picked-up',
item_id: item_id
item_id: $item.data('value'),
});
},
stop: function(evt, ui) {
var item_id = $(this).data('value');
setGrabbedState(item_id, false);
updateDOM();
releaseItem($(this));
}
});
} catch (e) {
......@@ -376,6 +355,18 @@ function DragAndDropBlock(runtime, element, configuration) {
});
};
var grabItem = function($item) {
var item_id = $item.data('value');
setGrabbedState(item_id, true);
updateDOM();
};
var releaseItem = function($item) {
var item_id = $item.data('value');
setGrabbedState(item_id, false);
updateDOM();
};
var setGrabbedState = function(item_id, grabbed) {
for (var i = 0; i < configuration.items.length; i++) {
if (configuration.items[i].id === item_id) {
......@@ -524,10 +515,11 @@ function DragAndDropBlock(runtime, element, configuration) {
if (item.grabbed !== undefined) {
grabbed = item.grabbed;
}
var placed = item_user_state && ('input' in item_user_state || item_user_state.correct_input);
var itemProperties = {
value: item.id,
drag_disabled: Boolean(item_user_state || state.finished),
class_name: item_user_state && ('input' in item_user_state || item_user_state.correct_input) ? 'fade': undefined,
class_name: placed || state.finished ? 'fade' : undefined,
xhr_active: (item_user_state && item_user_state.submitting_location),
input: input,
displayName: item.displayName,
......
drag_and_drop_v2/public/js/view.js
......@@ -176,8 +176,8 @@
h('p', gettext('You can complete this exercise using only your keyboard.')),
h('ul', [
h('li', gettext('Use "Tab" and "Shift-Tab" to navigate between items and zones.')),
h('li', gettext('Press "Enter" or "Space" on an item to select it for dropping, then navigate to the zone you want to drop it on.')),
h('li', gettext('Press "Enter" or "Space" to drop the item on the current zone.')),
h('li', gettext('Press "Enter", "Space", "Ctrl-m", or "⌘-m" on an item to select it for dropping, then navigate to the zone you want to drop it on.')),
h('li', gettext('Press "Enter", "Space", "Ctrl-m", or "⌘-m" to drop the item on the current zone.')),
h('li', gettext('Press "Escape" if you want to cancel the drop operation (e.g. because you would like to select a different item).')),
h('li', gettext('Press "?" at any time to bring up this dialog.')),
])
......
tests/integration/test_base.py
......@@ -72,6 +72,9 @@ class BaseIntegrationTest(SeleniumBaseTest):
def _get_keyboard_help_dialog(self):
return self._page.find_element_by_css_selector(".keyboard-help .keyboard-help-dialog")
def _get_reset_button(self):
return self._page.find_element_by_css_selector('.reset-button')
def _get_feedback(self):
return self._page.find_element_by_css_selector(".feedback")
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment