Skip to content

E
edx-platform
Commit d5317462 by Valera Rozuvan Committed by Alexander Kryklia
Options

Removed reliance on imageDir config setting. Now we expect the correct path to tbe set in XML.

parent 533a1693
Showing with 46 additions and 44 deletions
common/static/js/capa/drag_and_drop/base_image.js
...@@ -26,7 +26,7 @@ define(['logme'], function (logme) { ...@@ -26,7 +26,7 @@ define(['logme'], function (logme) {
state.baseImageEl.attr( state.baseImageEl.attr(
'src', 'src',
state.config.imageDir + '/' + state.config.base_image state.config.base_image
); );
state.baseImageEl.load(function () { state.baseImageEl.load(function () {
baseImageElContainer.css('width', this.width); baseImageElContainer.css('width', this.width);
...@@ -39,13 +39,11 @@ define(['logme'], function (logme) { ...@@ -39,13 +39,11 @@ define(['logme'], function (logme) {
}); });
state.baseImageEl.error(function () { state.baseImageEl.error(function () {
logme( logme(
'ERROR: Image "' + state.config.imageDir + '/' + 'ERROR: Image "' + state.config.base_image + '" was not found!'
state.config.base_image + '" was not found!'
); );
baseImageElContainer.html( baseImageElContainer.html(
'<span style="color: red;">' + '<span style="color: red;">' +
'ERROR: Image "' + state.config.imageDir + '/' + 'ERROR: Image "' + state.config.base_image + '" was not found!' +
state.config.base_image + '" was not found!' +
'</span>' '</span>'
); );
baseImageElContainer.appendTo(state.containerEl); baseImageElContainer.appendTo(state.containerEl);
......
common/static/js/capa/drag_and_drop/config_parser.js
...@@ -7,13 +7,12 @@ ...@@ -7,13 +7,12 @@
define(['logme'], function (logme) { define(['logme'], function (logme) {
return configParser; return configParser;
function configParser(config, imageDir, state) { function configParser(config, state) {
var returnStatus; var returnStatus;
returnStatus = true; returnStatus = true;
state.config = { state.config = {
'imageDir': '/static/' + imageDir + '/images',
'draggables': [], 'draggables': [],
'targets': [], 'targets': [],
'base_image': '' 'base_image': ''
......
common/static/js/capa/drag_and_drop/draggables.js
...@@ -89,7 +89,7 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -89,7 +89,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.iconEl = $('<img />'); draggableObj.iconEl = $('<img />');
draggableObj.iconEl.attr( draggableObj.iconEl.attr(
'src', 'src',
state.config.imageDir + '/' + obj.icon obj.icon
); );
draggableObj.iconEl.load(function () { draggableObj.iconEl.load(function () {
draggableObj.iconWidth = this.width; draggableObj.iconWidth = this.width;
...@@ -358,11 +358,10 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -358,11 +358,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// the input with the user's answer (X-Y position of the draggable, // the input with the user's answer (X-Y position of the draggable,
// or the ID of the target where it landed. // or the ID of the target where it landed.
function checkLandingElement() { function checkLandingElement() {
var offsetIE, targetFound; var positionIE, targetFound;
mousePressed = false; mousePressed = false;
positionIE = draggableObj.iconEl.position();
offsetIE = draggableObj.iconEl.position();
if (state.individualTargets === true) { if (state.individualTargets === true) {
targetFound = false; targetFound = false;
...@@ -378,20 +377,15 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -378,20 +377,15 @@ define(['logme', 'update_input'], function (logme, updateInput) {
state.numDraggablesInSlider += 1; state.numDraggablesInSlider += 1;
} }
} else { } else {
logme(
'baseImageEl.width = ' + state.baseImageEl.width() + '; ' +
'baseImageEl.height = ' + state.baseImageEl.height()
);
if ( if (
(offsetIE.left < 0) || (positionIE.left < 0) ||
( (
offsetIE.left + draggableObj.iconWidth > positionIE.left + draggableObj.iconWidth >
state.baseImageEl.width() state.baseImageEl.width()
) || ) ||
(offsetIE.top < 0) || (positionIE.top < 0) ||
( (
offsetIE.top + draggableObj.iconHeight > positionIE.top + draggableObj.iconHeight >
state.baseImageEl.height() state.baseImageEl.height()
) )
) { ) {
...@@ -405,9 +399,9 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -405,9 +399,9 @@ define(['logme', 'update_input'], function (logme, updateInput) {
correctZIndexes(); correctZIndexes();
draggableObj.x = draggableObj.x =
offsetIE.left + draggableObj.iconWidth * 0.5; positionIE.left + draggableObj.iconWidth * 0.5;
draggableObj.y = draggableObj.y =
offsetIE.top + draggableObj.iconHeight * 0.5; positionIE.top + draggableObj.iconHeight * 0.5;
} }
} }
...@@ -432,49 +426,63 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -432,49 +426,63 @@ define(['logme', 'update_input'], function (logme, updateInput) {
} }
} }
//
// Determine if a draggable, after it was relased, ends up on a // Determine if a draggable, after it was relased, ends up on a
// target. We do this by iterating over all of the targets, and // target. We do this by iterating over all of the targets, and
// for each one we check whether the draggable's center is // for each one we check whether the draggable's center is
// within the target's dimensions. // within the target's dimensions.
//
// positionIE is the object as returned by
//
// draggableObj.iconEl.position()
//
function checkIfOnTarget() { function checkIfOnTarget() {
var c1, target; var c1, target;
for (c1 = 0; c1 < state.targets.length; c1 += 1) { for (c1 = 0; c1 < state.targets.length; c1 += 1) {
target = state.targets[c1]; target = state.targets[c1];
// If only one draggable per target is allowed, and
// the current target already has a draggable on it
// (with an ID different from the one we are checking
// against), then go to next target.
if ( if (
offsetIE.top + draggableObj.iconHeight * 0.5 < (state.config.one_per_target === true) &&
target.offset.top (target.draggable.length === 1) &&
(target.draggable[0] !== draggableObj.id)
) { ) {
continue; continue;
} }
// Check if the draggable's center coordinate is within
// the target's dimensions. If not, go to next target.
if ( if (
offsetIE.top + draggableObj.iconHeight * 0.5 > positionIE.top + draggableObj.iconHeight * 0.5 <
target.offset.top + target.h target.offset.top
) { ) {
continue; continue;
} }
if ( if (
offsetIE.left + draggableObj.iconWidth * 0.5 < positionIE.top + draggableObj.iconHeight * 0.5 >
target.offset.left target.offset.top + target.h
) { ) {
continue; continue;
} }
if ( if (
offsetIE.left + draggableObj.iconWidth * 0.5 > positionIE.left + draggableObj.iconWidth * 0.5 <
target.offset.left + target.w target.offset.left
) { ) {
continue; continue;
} }
if ( if (
(state.config.one_per_target === true) && positionIE.left + draggableObj.iconWidth * 0.5 >
(target.draggable.length === 1) && target.offset.left + target.w
(target.draggable[0] !== draggableObj.id)
) { ) {
continue; continue;
} }
// If we got here, then our draggable is on top of a
// target.
targetFound = true; targetFound = true;
// If the draggable was moved from one target to // If the draggable was moved from one target to
...@@ -488,7 +496,11 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -488,7 +496,11 @@ define(['logme', 'update_input'], function (logme, updateInput) {
removeObjIdFromTarget(); removeObjIdFromTarget();
onTarget = target; onTarget = target;
target.draggable.push(draggableObj.id); target.draggable.push(draggableObj.id);
} else if (onTarget === null) { }
// If the draggable was moved from the slider to a
// target, remember the target, and add ID to the
// target's draggables list.
else if (onTarget === null) {
onTarget = target; onTarget = target;
target.draggable.push(draggableObj.id); target.draggable.push(draggableObj.id);
} }
......
common/static/js/capa/drag_and_drop/main.js
...@@ -17,7 +17,7 @@ define( ...@@ -17,7 +17,7 @@ define(
// $(value) - get the element of the entire problem // $(value) - get the element of the entire problem
function processProblem(index, value) { function processProblem(index, value) {
var problemId, imageDir, config, state; var problemId, config, state;
if ($(value).attr('data-problem-processed') === 'true') { if ($(value).attr('data-problem-processed') === 'true') {
// This problem was already processed by us before, so we will // This problem was already processed by us before, so we will
...@@ -43,16 +43,9 @@ define( ...@@ -43,16 +43,9 @@ define(
return; return;
} }
imageDir = $(value).attr('data-course-folder');
if (typeof imageDir !== 'string') {
logme('ERROR: Could not find the name of the image directory.');
return;
}
state = State(problemId); state = State(problemId);
if (configParser(config, imageDir, state) !== true) { if (configParser(config, state) !== true) {
logme('ERROR: Could not make sense of the JSON configuration options.'); logme('ERROR: Could not make sense of the JSON configuration options.');
return; return;
......
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