Skip to content

X
xblock-drag-and-drop-v2
Commit 6b977414 by Braden MacDonald
Options

Update this branch with latest changes from master 

# Conflicts:
#	tests/integration/test_interaction.py
parents 9e32e448 d31dce44
Showing with 411 additions and 195 deletions
.travis.yml
language: python
sudo: false
python:
- "2.7"
before_install:
......
drag_and_drop_v2/drag_and_drop_v2.py
......@@ -198,7 +198,6 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
)
js_urls = (
'public/js/vendor/jquery-ui-1.10.4.custom.min.js',
'public/js/vendor/jquery.html5-placeholder-shim.js',
'public/js/vendor/handlebars-v1.1.2.js',
'public/js/drag_and_drop_edit.js',
)
......@@ -287,9 +286,7 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
# so we have to figure that we're running in Studio for now
pass
self.runtime.publish(self, 'xblock.drag-and-drop-v2.item.dropped', {
'user_id': self.scope_ids.user_id,
'component_id': self._get_unique_id(),
self.runtime.publish(self, 'edx.drag_and_drop_v2.item.dropped', {
'item_id': item['id'],
'location': attempt.get('zone'),
'input': attempt.get('input'),
......@@ -444,9 +441,6 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
except KeyError:
return {'result': 'error', 'message': 'Missing event_type in JSON data'}
data['user_id'] = self.scope_ids.user_id
data['component_id'] = self._get_unique_id()
self.runtime.publish(self, event_type, data)
return {'result': 'success'}
......
drag_and_drop_v2/public/css/drag_and_drop.css
......@@ -244,7 +244,7 @@
border: 2px solid #a5a5a5;
}
.xblock--drag-and-drop .zone p {
.xblock--drag-and-drop .drag-container .target .zone p {
width: 100%;
font-family: Arial;
font-size: 16px;
......@@ -255,17 +255,6 @@
margin-bottom: auto;
}
/*** IE9 alignment fix ***/
.lt-ie10 .xblock--drag-and-drop .zone {
display: table;
}
.lt-ie10 .xblock--drag-and-drop .zone p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
/*** FEEDBACK ***/
.xblock--drag-and-drop .feedback {
......
drag_and_drop_v2/public/css/drag_and_drop_edit.css
......@@ -50,17 +50,6 @@
margin-bottom: auto;
}
/*** IE9 alignment fix ***/
.lt-ie10 .xblock--drag-and-drop--editor .zone {
display: table;
}
.lt-ie10 .xblock--drag-and-drop--editor .zone p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
/** Builder **/
.xblock--drag-and-drop--editor .hidden {
display: none !important;
......
drag_and_drop_v2/public/js/drag_and_drop.js
......@@ -13,13 +13,15 @@ function DragAndDropBlock(runtime, element, configuration) {
var bgImgNaturalWidth = undefined; // pixel width of the background image (when not scaled)
var __vdom = virtualDom.h(); // blank virtual DOM
// Event string size limit.
var MAX_LENGTH = 255;
// Keyboard accessibility
var ESC = 27;
var RET = 13;
var SPC = 32;
var TAB = 9;
var M = 77;
var QUESTION_MARK = 63;
var placementMode = false;
var $selectedItem;
......@@ -48,9 +50,6 @@ function DragAndDropBlock(runtime, element, configuration) {
// Set up event handlers:
$(document).on('keydown mousedown touchstart', closePopup);
$(document).on('keypress', function(evt) {
runOnKey(evt, QUESTION_MARK, showKeyboardHelp);
});
$element.on('click', '.keyboard-help-button', showKeyboardHelp);
$element.on('keydown', '.keyboard-help-button', function(evt) {
runOnKey(evt, RET, showKeyboardHelp);
......@@ -69,7 +68,7 @@ function DragAndDropBlock(runtime, element, configuration) {
initDroppable();
// Indicate that exercise is done loading
publishEvent({event_type: 'xblock.drag-and-drop-v2.loaded'});
publishEvent({event_type: 'edx.drag_and_drop_v2.loaded'});
}).fail(function() {
$root.text(gettext("An error occurred. Unable to load drag and drop exercise."));
});
......@@ -96,6 +95,15 @@ function DragAndDropBlock(runtime, element, configuration) {
}
};
var truncateField = function(data, fieldName){
if (data[fieldName].length > MAX_LENGTH) {
data[fieldName] = data[fieldName].substring(0, MAX_LENGTH);
data['truncated'] = true;
} else {
data['truncated'] = false;
}
};
var focusModalButton = function() {
$root.find('.keyboard-help-dialog .modal-dismiss-button ').focus();
};
......@@ -204,28 +212,26 @@ function DragAndDropBlock(runtime, element, configuration) {
* Update the DOM to reflect 'state'.
*/
var applyState = function() {
// Is there a change to the feedback popup?
if (state.feedback !== previousFeedback) {
if (state.feedback) {
if (previousFeedback) {
publishEvent({
event_type: 'xblock.drag-and-drop-v2.feedback.closed',
content: previousFeedback,
manually: false,
});
}
publishEvent({
event_type: 'xblock.drag-and-drop-v2.feedback.opened',
content: state.feedback,
});
} else {
publishEvent({
event_type: 'xblock.drag-and-drop-v2.feedback.closed',
content: state.feedback,
manually: true,
});
}
previousFeedback = state.feedback;
// Has the feedback popup been closed?
if (state.closing) {
var data = {
event_type: 'edx.drag_and_drop_v2.feedback.closed',
content: previousFeedback || state.feedback,
manually: state.manually_closed,
};
truncateField(data, 'content');
publishEvent(data);
delete state.feedback;
delete state.closing;
}
// Has feedback been set?
if (state.feedback) {
var data = {
event_type: 'edx.drag_and_drop_v2.feedback.opened',
content: state.feedback,
};
truncateField(data, 'content');
publishEvent(data);
}
updateDOM();
......@@ -380,7 +386,7 @@ function DragAndDropBlock(runtime, element, configuration) {
var $item = $(this);
grabItem($item);
publishEvent({
event_type: 'xblock.drag-and-drop-v2.item.picked-up',
event_type: 'edx.drag_and_drop_v2.item.picked_up',
item_id: $item.data('value'),
});
},
......@@ -515,7 +521,14 @@ function DragAndDropBlock(runtime, element, configuration) {
return;
}
delete state.feedback;
state.closing = true;
previousFeedback = state.feedback;
if (target.is(close_button)) {
state.manually_closed = true;
} else {
state.manually_closed = false;
}
applyState();
};
......
drag_and_drop_v2/public/js/drag_and_drop_edit.js
......@@ -94,9 +94,6 @@ function DragAndDropEditBlock(runtime, element, params) {
$fbkTab.addClass('hidden');
$zoneTab.removeClass('hidden');
// Placeholder shim for IE9
$.placeholder.shim();
$(this).one('click', function(e) {
// $zoneTab -> $itemTab
e.preventDefault();
......@@ -111,9 +108,6 @@ function DragAndDropEditBlock(runtime, element, params) {
$zoneTab.addClass('hidden');
$itemTab.removeClass('hidden');
// Placeholder shim for IE9
$.placeholder.shim();
$(this).addClass('hidden');
$('.save-button', element).parent()
.removeClass('hidden')
......@@ -155,8 +149,6 @@ function DragAndDropEditBlock(runtime, element, params) {
_fn.build.$el.targetImage.attr('alt', new_description);
_fn.data.targetImgDescription = new_description;
// Placeholder shim for IE9
$.placeholder.shim();
})
.on('click', '.display-labels-form input', function(e) {
_fn.data.displayLabels = $('.display-labels-form input', element).is(':checked');
......@@ -219,8 +211,6 @@ function DragAndDropEditBlock(runtime, element, params) {
// Add zone div to target
_fn.build.form.zone.renderZonesPreview();
// Placeholder shim for IE9
$.placeholder.shim();
},
remove: function(e) {
var $el = $(e.currentTarget).closest('.zone-row'),
......@@ -243,8 +233,6 @@ function DragAndDropEditBlock(runtime, element, params) {
_fn.build.form.zone.formCount--;
_fn.build.form.zone.disableDelete();
// Placeholder shim for IE9
$.placeholder.shim();
},
enableDelete: function() {
if (_fn.build.form.zone.formCount > 1) {
......@@ -378,8 +366,6 @@ function DragAndDropEditBlock(runtime, element, params) {
$form.append(tpl(ctx));
_fn.build.form.item.enableDelete();
// Placeholder shim for IE9
$.placeholder.shim();
},
remove: function(e) {
var $el = $(e.currentTarget).closest('.item');
......@@ -390,8 +376,6 @@ function DragAndDropEditBlock(runtime, element, params) {
_fn.build.form.item.count--;
_fn.build.form.item.disableDelete();
// Placeholder shim for IE9
$.placeholder.shim();
},
enableDelete: function() {
if (_fn.build.form.item.count > 1) {
......
drag_and_drop_v2/public/js/vendor/jquery.html5-placeholder-shim.js deleted 100644 → 0
(function($) {
// @todo Document this.
$.extend($,{ placeholder: {
browser_supported: function() {
return this._supported !== undefined ?
this._supported :
( this._supported = !!('placeholder' in $('<input type="text">')[0]) );
},
shim: function(opts) {
var config = {
color: '#888',
cls: 'placeholder',
selector: 'input[placeholder], textarea[placeholder]'
};
$.extend(config,opts);
return !this.browser_supported() && $(config.selector)._placeholder_shim(config);
}
}});
$.extend($.fn,{
_placeholder_shim: function(config) {
function calcPositionCss(target)
{
var op = $(target).offsetParent().offset();
var ot = $(target).offset();
return {
top: ot.top - op.top,
left: ot.left - op.left,
width: $(target).width()
};
}
function adjustToResizing(label) {
var $target = label.data('target');
if(typeof $target !== "undefined") {
label.css(calcPositionCss($target));
$(window).one("resize", function () { adjustToResizing(label); });
}
}
return this.each(function() {
var $this = $(this);
if( $this.is(':visible') ) {
if( $this.data('placeholder') ) {
var $ol = $this.data('placeholder');
$ol.css(calcPositionCss($this));
return true;
}
var possible_line_height = {};
if( !$this.is('textarea') && $this.css('height') != 'auto') {
possible_line_height = { lineHeight: $this.css('height'), whiteSpace: 'nowrap' };
}
var isBorderBox = ($this.css('box-sizing') === 'border-box');
var ol = $('<label />')
.text($this.attr('placeholder'))
.addClass(config.cls)
.css($.extend({
position:'absolute',
display: 'inline',
'float':'none',
overflow:'hidden',
textAlign: 'left',
color: config.color,
cursor: 'text',
paddingTop: isBorderBox ? '0' : $this.css('padding-top'),
paddingRight: $this.css('padding-right'),
paddingBottom: isBorderBox ? '0' : $this.css('padding-bottom'),
paddingLeft: $this.css('padding-left'),
fontSize: $this.css('font-size'),
fontFamily: $this.css('font-family'),
fontStyle: $this.css('font-style'),
fontWeight: $this.css('font-weight'),
textTransform: $this.css('text-transform'),
backgroundColor: 'transparent',
zIndex: 99
}, possible_line_height))
.css(calcPositionCss(this))
.attr('for', this.id)
.data('target',$this)
.click(function(){
if (!$(this).data('target').is(':disabled')) {
$(this).data('target').focus();
}
})
.insertBefore(this);
$this
.data('placeholder',ol)
.keydown(function(){
ol.hide();
})
.blur(function() {
ol[$this.val().length ? 'hide' : 'show']();
}).triggerHandler('blur');
$(window).one("resize", function () { adjustToResizing(ol); });
}
});
}
});
})(jQuery);
jQuery(document).add(window).bind('ready load', function() {
if (jQuery.placeholder) {
jQuery.placeholder.shim();
}
});
drag_and_drop_v2/public/js/view.js
......@@ -197,7 +197,6 @@
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.')),
])
]),
h('div.modal-actions', [
......
drag_and_drop_v2/public/themes/apros.css
......@@ -51,7 +51,7 @@
background-color: #fff;
}
.themed-xblock.xblock--drag-and-drop .zone p {
.themed-xblock.xblock--drag-and-drop .drag-container .target .zone p {
font-family: Arial;
font-size: 16px;
font-weight: bold;
......
setup.py
......@@ -29,7 +29,8 @@ setup(
install_requires=[
'XBlock',
'xblock-utils',
'ddt'
'ddt',
'mock',
],
entry_points={
'xblock.v1': 'drag-and-drop-v2 = drag_and_drop_v2:DragAndDropBlock',
......
tests/integration/test_interaction.py
# Imports ###########################################################
from ddt import ddt, data
from ddt import ddt, data, unpack
from mock import Mock, patch
from selenium.common.exceptions import NoSuchElementException
from selenium.webdriver import ActionChains
from selenium.webdriver.common.keys import Keys
from workbench.runtime import WorkbenchRuntime
from xblockutils.resources import ResourceLoader
from drag_and_drop_v2.default_data import (
......@@ -77,6 +79,14 @@ class InteractionTestBase(object):
element = self._get_item_by_value(item_value)
return element.find_element_by_class_name('numerical-input')
def _get_dialog_components(self, dialog): # pylint: disable=no-self-use
dialog_modal_overlay = dialog.find_element_by_css_selector('.modal-window-overlay')
dialog_modal = dialog.find_element_by_css_selector('.modal-window')
return dialog_modal_overlay, dialog_modal
def _get_dialog_dismiss_button(self, dialog_modal): # pylint: disable=no-self-use
return dialog_modal.find_element_by_css_selector('.modal-dismiss-button')
def _get_zone_position(self, zone_id):
return self.browser.execute_script(
'return $("div[data-zone=\'{zone_id}\']").prevAll(".zone").length'.format(zone_id=zone_id)
......@@ -256,9 +266,8 @@ class InteractionTestBase(object):
def interact_with_keyboard_help(self, scroll_down=250, use_keyboard=False):
keyboard_help_button = self._get_keyboard_help_button()
keyboard_help_dialog = self._get_keyboard_help_dialog()
dialog_modal_overlay = keyboard_help_dialog.find_element_by_css_selector('.modal-window-overlay')
dialog_modal = keyboard_help_dialog.find_element_by_css_selector('.modal-window')
dialog_dismiss_button = dialog_modal.find_element_by_css_selector('.modal-dismiss-button')
dialog_modal_overlay, dialog_modal = self._get_dialog_components(keyboard_help_dialog)
dialog_dismiss_button = self._get_dialog_dismiss_button(dialog_modal)
# Scroll "Keyboard help" button into view to make sure Selenium can successfully click it
self.scroll_down(pixels=scroll_down)
......@@ -279,21 +288,26 @@ class InteractionTestBase(object):
self.assertFalse(dialog_modal_overlay.is_displayed())
self.assertFalse(dialog_modal.is_displayed())
if use_keyboard: # Try again with "?" key
self._page.send_keys("?")
if use_keyboard: # Check if "Keyboard Help" dialog can be dismissed using "ESC"
keyboard_help_button.send_keys(Keys.RETURN)
self.assertTrue(dialog_modal_overlay.is_displayed())
self.assertTrue(dialog_modal.is_displayed())
self._page.send_keys(Keys.ESCAPE)
self.assertFalse(dialog_modal_overlay.is_displayed())
self.assertFalse(dialog_modal.is_displayed())
def _switch_to_block(self, idx):
""" Only needed if ther eare multiple blocks on the page. """
self._page = self.browser.find_elements_by_css_selector(self.default_css_selector)[idx]
self.scroll_down(0)
class BasicInteractionTest(InteractionTestBase):
class DefaultDataTestMixin(object):
"""
Testing interactions with Drag and Drop XBlock against default data. If default data changes this will break.
Provides a test scenario with default options.
"""
PAGE_TITLE = 'Drag and Drop v2'
PAGE_ID = 'drag_and_drop_v2'
......@@ -321,6 +335,11 @@ class BasicInteractionTest(InteractionTestBase):
def _get_scenario_xml(self): # pylint: disable=no-self-use
return "<vertical_demo><drag-and-drop-v2/></vertical_demo>"
class BasicInteractionTest(DefaultDataTestMixin, InteractionTestBase):
"""
Testing interactions with Drag and Drop XBlock against default data. If default data changes this will break.
"""
def test_item_positive_feedback_on_good_move(self):
self.parameterized_item_positive_feedback_on_good_move(self.items_map)
......@@ -341,6 +360,74 @@ class BasicInteractionTest(InteractionTestBase):
@ddt
class EventsFiredTest(DefaultDataTestMixin, InteractionTestBase, BaseIntegrationTest):
"""
Tests that the analytics events are fired and in the proper order.
"""
# These events must be fired in this order.
scenarios = (
{
'name': 'edx.drag_and_drop_v2.loaded',
'data': {},
},
{
'name': 'edx.drag_and_drop_v2.item.picked_up',
'data': {'item_id': 0},
},
{
'name': 'grade',
'data': {'max_value': 1, 'value': (1.0 / 3)},
},
{
'name': 'edx.drag_and_drop_v2.item.dropped',
'data': {
'input': None,
'is_correct': True,
'is_correct_location': True,
'item_id': 0,
'location': u'The Top Zone',
},
},
{
'name': 'edx.drag_and_drop_v2.feedback.opened',
'data': {
'content': u'Correct! This one belongs to The Top Zone.',
'truncated': False,
},
},
{
'name': 'edx.drag_and_drop_v2.feedback.closed',
'data': {
'manually': False,
'content': u'Correct! This one belongs to The Top Zone.',
'truncated': False,
},
},
)
def setUp(self):
mock = Mock()
context = patch.object(WorkbenchRuntime, 'publish', mock)
context.start()
self.addCleanup(context.stop)
self.publish = mock
super(EventsFiredTest, self).setUp()
def _get_scenario_xml(self): # pylint: disable=no-self-use
return "<vertical_demo><drag-and-drop-v2/></vertical_demo>"
@data(*enumerate(scenarios)) # pylint: disable=star-args
@unpack
def test_event(self, index, event):
self.parameterized_item_positive_feedback_on_good_move(self.items_map)
dummy, name, published_data = self.publish.call_args_list[index][0]
self.assertEqual(name, event['name'])
self.assertEqual(
published_data, event['data']
)
@ddt
class KeyboardInteractionTest(BasicInteractionTest, BaseIntegrationTest):
@data(Keys.RETURN, Keys.SPACE, Keys.CONTROL+'m', Keys.COMMAND+'m')
def test_item_positive_feedback_on_good_move_with_keyboard(self, action_key):
......@@ -471,3 +558,14 @@ class MultipleBlocksDataInteraction(InteractionTestBase, BaseIntegrationTest):
self.parameterized_final_feedback_and_reset(self.item_maps['block1'], self.feedback['block1'])
self._switch_to_block(1)
self.parameterized_final_feedback_and_reset(self.item_maps['block2'], self.feedback['block2'], scroll_down=900)
def test_keyboard_help(self):
self._switch_to_block(0)
# Test mouse and keyboard interaction
self.interact_with_keyboard_help()
self.interact_with_keyboard_help(use_keyboard=True)
self._switch_to_block(1)
# Test mouse and keyboard interaction
self.interact_with_keyboard_help(scroll_down=900)
self.interact_with_keyboard_help(scroll_down=0, use_keyboard=True)
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