Skip to content

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

Refactoring and code documentation.

parent f2e930a3
Showing with 59 additions and 84 deletions
common/static/js/capa/drag_and_drop/base_image.js
......@@ -8,53 +8,25 @@ define(['logme'], function (logme) {
return BaseImage;
function BaseImage(state) {
var targetImgSrc, baseImageElContainer, mouseMoveDiv;
targetImgSrc = state.config.imageDir + '/' + state.config.base_image;
var baseImageElContainer;
baseImageElContainer = $(
'<div ' +
'class="base_image_container" ' +
'style=" ' +
'position: relative; ' +
'margin-bottom: 25px; ' +
'" ' +
'></div>'
);
state.baseImageEl = $(
'<img ' +
'src="' + targetImgSrc + '" ' +
'src="' + state.config.imageDir + '/' + state.config.base_image + '" ' +
'/>'
);
state.baseImageEl.appendTo(baseImageElContainer);
state.baseImageElWidth = null;
$('<img/>') // Make in memory copy of image to avoid css issues.
.attr('src', state.baseImageEl.attr('src'))
.load(function () {
state.baseImageElWidth = this.width;
});
// state.baseImageEl.mousemove(
// function (event) {
// mouseMoveDiv.html(
// '[' + event.offsetX + ', ' + event.offsetY + ']'
// );
// }
// );
mouseMoveDiv = $(
'<div ' +
'style=" ' +
'clear: both; ' +
'width: auto; ' +
'height: 25px; ' +
'text-align: center; ' +
'" ' +
'></div>'
);
mouseMoveDiv.appendTo(baseImageElContainer);
baseImageElContainer.appendTo(state.containerEl);
}
});
......
common/static/js/capa/drag_and_drop/config_parser.js
......@@ -78,9 +78,9 @@ define(['logme'], function (logme) {
if (typeof config.target_outline === 'string') {
if (config.target_outline.toLowerCase() === 'true') {
state.config.target_outline = true;
state.config.targetOutline = true;
} else if (config.target_outline.toLowerCase() === 'false') {
state.config.target_outline = false;
state.config.targetOutline = false;
} else {
logme('ERROR: Property config.target_outline can either be "true", or "false".');
returnStatus = false;
......
common/static/js/capa/drag_and_drop/main.js
......@@ -5,8 +5,10 @@
(function (requirejs, require, define) {
define(
['logme', 'state', 'config_parser', 'container', 'base_image', 'scroller', 'draggables', 'targets'],
function (logme, State, configParser, Container, BaseImage, Scroller, Draggables, Targets) {
['logme', 'state', 'config_parser', 'container', 'base_image', 'scroller',
'draggables', 'targets', 'update_input'],
function (logme, State, configParser, Container, BaseImage, Scroller,
Draggables, Targets, updateInput) {
return Main;
function Main() {
......@@ -58,12 +60,13 @@ define(
Container(state);
BaseImage(state);
Targets(state);
Scroller(state);
Draggables(state);
Targets(state);
logme('config', config);
logme('state', state);
// Update the input element, checking first that it is not filled with
// an answer from the server.
updateInput(state, true);
}
});
......
common/static/js/capa/drag_and_drop/scroller.js
......@@ -61,14 +61,20 @@ define(['logme'], function (logme) {
moveLeftEl.mousemove(function (event) { event.preventDefault(); });
moveLeftEl.mousedown(function (event) { event.preventDefault(); });
// This event will be responsible for moving the scroller left.
// Hidden draggables will be shown.
moveLeftEl.mouseup(function (event) {
event.preventDefault();
// When there are no more hidden draggables, prevent from
// scrolling infinitely.
if (showElLeftMargin > -102) {
return;
}
showElLeftMargin += 102;
// We scroll by changing the 'margin-left' CSS property smoothly.
state.sliderEl.animate({
'margin-left': showElLeftMargin + 'px'
}, 100, function () {
......@@ -91,6 +97,10 @@ define(['logme'], function (logme) {
showElLeftMargin = 0;
// Element where the draggables will be contained. It is very long
// so that any SANE number of draggables will fit in a single row. It
// will be contained in a parent element whose 'overflow' CSS value
// will be hidden, preventing the long row from fully being visible.
state.sliderEl = $(
'<div ' +
'style=" ' +
......@@ -141,15 +151,20 @@ define(['logme'], function (logme) {
moveRightEl.mousemove(function (event) { event.preventDefault(); });
moveRightEl.mousedown(function (event) { event.preventDefault(); });
// This event will be responsible for moving the scroller right.
// Hidden draggables will be shown.
moveRightEl.mouseup(function (event) {
event.preventDefault();
// When there are no more hidden draggables, prevent from
// scrolling infinitely.
if (showElLeftMargin < -102 * (state.sliderEl.children().length - 6)) {
return;
}
showElLeftMargin -= 102;
// We scroll by changing the 'margin-left' CSS property smoothly.
state.sliderEl.animate({
'margin-left': showElLeftMargin + 'px'
}, 100, function () {
......@@ -159,6 +174,16 @@ define(['logme'], function (logme) {
parentEl.appendTo(state.containerEl);
// Make the function available throughout the application. We need to
// call it in several places:
//
// 1.) When initially reading answer from server, if draggables will be
// positioned on the base image, the scroller's right and left arrows
// opacity must be updated.
//
// 2.) When creating draggable elements, the scroller's right and left
// arrows opacity must be updated according to the number of
// draggables.
state.updateArrowOpacity = updateArrowOpacity;
return;
......
common/static/js/capa/drag_and_drop/state.js
......@@ -11,6 +11,8 @@ define([], function () {
return {
'problemId': problemId,
// Will indicate when all targetsand draggables have been loaded,
// processed, and postioned intially.
'targetsLoaded': false,
'draggablesLoaded': false
};
......
common/static/js/capa/drag_and_drop/targets.js
......@@ -4,48 +4,29 @@
// See https://edx-wiki.atlassian.net/wiki/display/LMS/Integration+of+Require+JS+into+the+system
(function (requirejs, require, define) {
define(['logme', 'update_input'], function (logme, updateInput) {
define(['logme'], function (logme) {
return Targets;
function Targets(state) {
var numTargets;
var c1;
numTargets = state.config.targets.length;
state.targets = [];
(function (c1) {
while (c1 < numTargets) {
processTarget(state.config.targets[c1], c1);
c1 += 1;
}
if (state.individualTargets === true) {
updateInput(state, true);
}
}(0));
for (c1 = 0; c1 < state.config.targets.length; c1++) {
processTarget(state.config.targets[c1]);
}
return;
function processTarget(obj, objIndex) {
var baseImageElOffset, tEl, left, borderCss;
// if (state.baseImageElWidth === null) {
// window.setTimeout(function () {
// processTarget(obj);
// }, 50);
//
// return;
// }
// left = obj.x + 0.5 * (state.baseImageEl.parent().width() - state.baseImageElWidth);
left = obj.x;
function processTarget(obj) {
var targetEl, borderCss;
borderCss = '';
if (state.config.target_outline === true) {
if (state.config.targetOutline === true) {
borderCss = 'border: 1px dashed gray; ';
}
tEl = $(
targetEl = $(
'<div ' +
'style=" ' +
'display: block; ' +
......@@ -53,27 +34,26 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'width: ' + obj.w + 'px; ' +
'height: ' + obj.h + 'px; ' +
'top: ' + obj.y + 'px; ' +
'left: ' + left + 'px; ' +
'left: ' + obj.x + 'px; ' +
borderCss +
'" ' +
'data-target-id="' + obj.id + '" ' +
'></div>'
);
tEl.appendTo(state.baseImageEl.parent());
targetEl.appendTo(state.baseImageEl.parent());
state.targets.push({
'id': obj.id,
'offset': tEl.position(),
'w': obj.w,
'h': obj.h,
'el': tEl,
'el': targetEl,
'offset': targetEl.position(),
'draggable': []
});
if (objIndex + 1 === numTargets) {
state.targetsLoaded = true;
}
}
}
});
......
common/static/js/capa/drag_and_drop/update_input.js
......@@ -54,6 +54,8 @@ define(['logme'], function (logme) {
inputEl = $('#input_' + state.problemId);
inputEl.val(stateStr);
logme(inputEl.val());
return;
// Check if input has an answer from server. If yes, then position
......@@ -75,16 +77,7 @@ define(['logme'], function (logme) {
var draggableId, draggable, targetId, target, draggablePosition,
c1;
if (
((state.individualTargets === true) && (state.targetsLoaded === false)) ||
(state.draggablesLoaded === false)
) {
window.setTimeout(function () {
repositionDraggables(answer);
}, 50);
return;
}
logme(answer);
if (
((typeof answer.use_targets === 'boolean') && (answer.use_targets === 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