Skip to content

X
xblock-drag-and-drop-v2
Commit 40c350e2 by Braden MacDonald
Options

Address review comments

parent 80465114
Showing with 54 additions and 43 deletions
drag_and_drop_v2/drag_and_drop_v2.py
......@@ -152,7 +152,7 @@ class DragAndDropBlock(XBlock):
"show_title": self.show_title,
"question_text": self.question_text,
"show_question_header": self.show_question_header,
"targetImg": self.target_img_expanded_url,
"target_img_expanded_url": self.target_img_expanded_url,
"item_background_color": self.item_background_color or None,
"item_text_color": self.item_text_color or None,
"initial_feedback": self.data['feedback']['start'],
......@@ -197,6 +197,7 @@ class DragAndDropBlock(XBlock):
fragment.initialize_js('DragAndDropEditBlock', {
'data': self.data,
'target_img_expanded_url': self.target_img_expanded_url,
'default_background_image_url': self.default_background_image_url,
})
return fragment
......@@ -324,8 +325,13 @@ class DragAndDropBlock(XBlock):
""" Get the expanded URL to the target image (the image items are dragged onto). """
if self.data.get("targetImg"):
return self._expand_static_url(self.data["targetImg"])
return self.runtime.local_resource_url(self, "public/img/triangle.png")
else:
return self.default_background_image_url
@property
def default_background_image_url(self):
""" The URL to the default background image, shown when no custom background is used """
return self.runtime.local_resource_url(self, "public/img/triangle.png")
@XBlock.handler
def get_user_state(self, request, suffix=''):
......
drag_and_drop_v2/public/css/drag_and_drop.css
......@@ -131,7 +131,7 @@
display: table;
/* 'display: table' makes this have the smallest size that fits the .target-img
while still allowing the image to use 'max-width: 100%' and scale proportionally.
The end result is that this element has the same widdth and height as the image, so we
The end result is that this element has the same width and height as the image, so we
can use it as a 'position: relative' anchor for the placed elements. */
height: auto;
position: relative;
......
drag_and_drop_v2/public/css/drag_and_drop_edit.css
.modal-window .xblock--drag-and-drop--editor.editor-with-buttons {
/* Fix Studio editor height */
margin-bottom: 0;
height: 380px;
.xblock--drag-and-drop--editor {
width: 100%;
height: 100%;
}
.modal-window .drag-builder {
width: 100%;
height: calc(100% - 60px);
position: absolute;
overflow-y: scroll;
}
/*** Drop Target ***/
......@@ -59,11 +64,6 @@
display: none !important;
}
.xblock--drag-and-drop--editor {
height: 100%;
overflow: scroll;
}
.xblock--drag-and-drop--editor .tab {
width: 100%;
background: #eee;
......@@ -71,9 +71,8 @@
position: relative;
}
.xblock--drag-and-drop--editor .tab:after,
.xblock--drag-and-drop--editor .tab-footer:after,
.xblock--drag-and-drop--editor .target:after {
.xblock--drag-and-drop--editor .tab::after,
.xblock--drag-and-drop--editor .tab-footer::after {
content: "";
display: table;
clear: both;
......@@ -109,21 +108,25 @@
/* Zones Tab */
.xblock--drag-and-drop--editor .zones-tab .zone-editor {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
.xblock--drag-and-drop--editor .zones-tab .tab-content .controls {
width: 40%;
flex-basis: 40%;
margin-right: 15px;
}
.xblock--drag-and-drop--editor .zones-tab .tab-content .target {
position: absolute;
left: 40%;
top: 0;
right: 0;
bottom: 0;
flex-basis: 60%;
position: relative;
border: 1px solid #ccc;
overflow: hidden;
}
.xblock--drag-and-drop--editor .zones-tab .tab-content .target-img {
display: block;
width: auto;
height: auto;
max-width: 100%;
......@@ -150,10 +153,6 @@
margin: 0 19px 5px 0;
}
.xblock--drag-and-drop--editor .target {
margin-bottom: 40px;
}
.xblock--drag-and-drop--editor .zone {
border: 1px dotted #666;
}
......
drag_and_drop_v2/public/js/drag_and_drop.js
function DragAndDropBlock(runtime, element, configuration) {
"use strict";
// Ensure "undefined" has not been redefined (though this unlikely and often impossible).
// Now we can check for 'undefined' using just '=== undefined' throughout this file.
if (undefined !== void 0) { console.log("WARNING: 'undefined' redefined"); var undefined = void 0; }
// Set up gettext in case it isn't available in the client runtime:
if (gettext === undefined) {
window.gettext = function gettext_stub(string) { return string; };
// Set up a mock for gettext if it isn't available in the client runtime:
if (!window.gettext) {
var gettext = function gettext_stub(string) { return string; };
}
var $element = $(element);
// root: root node managed by the virtual DOM
var root = $element.find('.xblock--drag-and-drop')[0];
var $root = $(root);
var $root = $element.find('.xblock--drag-and-drop');
var root = $root[0];
var state = undefined;
var __vdom = virtualDom.h(); // blank virtual DOM
......@@ -56,7 +53,7 @@ function DragAndDropBlock(runtime, element, configuration) {
}
}, false);
img.addEventListener("error", function() { promise.reject() });
img.src = configuration.targetImg;
img.src = configuration.target_img_expanded_url;
return promise;
}
......@@ -330,7 +327,7 @@ function DragAndDropBlock(runtime, element, configuration) {
show_title: configuration.show_title,
question_html: configuration.question_text,
show_question_header: configuration.show_question_header,
target_img_src: configuration.targetImg,
target_img_src: configuration.target_img_expanded_url,
display_zone_labels: configuration.display_zone_labels,
zones: configuration.zones,
items: items,
......
drag_and_drop_v2/public/js/drag_and_drop_edit.js
......@@ -122,14 +122,19 @@ function DragAndDropEditBlock(runtime, element, params) {
.on('click', '.target-image-form button', function(e) {
e.preventDefault();
var new_img_url = $('.target-image-form input', element).val();
var new_img_url = $.trim($('.target-image-form input', element).val());
if (new_img_url) {
// We may need to 'expand' the URL before it will be valid.
// e.g. '/static/blah.png' becomes '/asset-v1:course+id/blah.png'
var handlerUrl = runtime.handlerUrl(element, 'expand_static_url');
$.post(handlerUrl, JSON.stringify(new_img_url), function(result) {
_fn.build.$el.targetImage.attr('src', result.url);
});
} else {
new_img_url = params.default_background_image_url;
_fn.build.$el.targetImage.attr('src', new_img_url);
}
_fn.data.targetImg = new_img_url;
// We may need to 'expand' the URL before it will be valid.
// e.g. '/static/blah.png' becomes '/asset-v1:course+id/blah.png'
var handlerUrl = runtime.handlerUrl(element, 'expand_static_url');
$.post(handlerUrl, JSON.stringify(new_img_url), function(result) {
_fn.build.$el.targetImage.attr('src', result.url);
}).error(function(a, b, c) { console.log(a, b, c); });
// Placeholder shim for IE9
$.placeholder.shim();
......@@ -233,6 +238,10 @@ function DragAndDropEditBlock(runtime, element, params) {
_fn.build.$el.zonesPreview.html('');
var imgWidth = _fn.build.$el.targetImage[0].naturalWidth;
var imgHeight = _fn.build.$el.targetImage[0].naturalHeight;
if (imgWidth == 0 || imgHeight == 0) {
// Set a non-zero value to avoid divide-by-zero:
imgWidth = imgHeight = 400;
}
this.zoneObjects.forEach(function(zoneObj) {
_fn.build.$el.zonesPreview.append(
_fn.tpl.zoneElement({
......
drag_and_drop_v2/templates/html/drag_and_drop_edit.html
......@@ -54,7 +54,7 @@
<input name="display-labels" id="display-labels" type="checkbox" />
</section>
<div class="zone-editor">
<div class="items">
<div class="controls">
<form class="zones-form"></form>
<a href="#" class="add-zone add-element"><div class="icon add"></div>{% trans "Add a zone" %}</a>
</div>
......
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