Skip to content

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

Fixing bugs. Now resize of window does not mess up targets. Dragging is much… 

Fixing bugs. Now resize of window does not mess up targets. Dragging is much smoother on touch pad. Removed border from draggable when it is not in slider. The whole applet fits into min-width of main part of page.
parent b45fe0e6
Showing with 90 additions and 56 deletions
common/static/js/capa/drag_and_drop/base_image.js
...@@ -8,34 +8,34 @@ define(['logme'], function (logme) { ...@@ -8,34 +8,34 @@ define(['logme'], function (logme) {
return BaseImage; return BaseImage;
function BaseImage(state) { function BaseImage(state) {
var targetImgSrc, targetElContainer, mouseMoveDiv; var targetImgSrc, baseImageElContainer, mouseMoveDiv;
targetImgSrc = state.config.imageDir + '/' + state.config.base_image; targetImgSrc = state.config.imageDir + '/' + state.config.base_image;
targetElContainer = $( baseImageElContainer = $(
'<div ' + '<div ' +
'class="base_image_container" ' +
'style=" ' + 'style=" ' +
'position: relative; ' + 'position: relative; ' +
'text-align: center; ' +
'" ' + '" ' +
'></div>' '></div>'
); );
state.targetEl = $( state.baseImageEl = $(
'<img ' + '<img ' +
'src="' + targetImgSrc + '" ' + 'src="' + targetImgSrc + '" ' +
'/>' '/>'
); );
state.targetEl.appendTo(targetElContainer); state.baseImageEl.appendTo(baseImageElContainer);
state.targetElWidth = null; state.baseImageElWidth = null;
$('<img/>') // Make in memory copy of image to avoid css issues. $('<img/>') // Make in memory copy of image to avoid css issues.
.attr('src', state.targetEl.attr('src')) .attr('src', state.baseImageEl.attr('src'))
.load(function () { .load(function () {
state.targetElWidth = this.width; state.baseImageElWidth = this.width;
}); });
// state.targetEl.mousemove( // state.baseImageEl.mousemove(
// function (event) { // function (event) {
// mouseMoveDiv.html( // mouseMoveDiv.html(
// '[' + event.offsetX + ', ' + event.offsetY + ']' // '[' + event.offsetX + ', ' + event.offsetY + ']'
...@@ -53,9 +53,9 @@ define(['logme'], function (logme) { ...@@ -53,9 +53,9 @@ define(['logme'], function (logme) {
'" ' + '" ' +
'></div>' '></div>'
); );
mouseMoveDiv.appendTo(targetElContainer); mouseMoveDiv.appendTo(baseImageElContainer);
targetElContainer.appendTo(state.containerEl); baseImageElContainer.appendTo(state.containerEl);
} }
}); });
......
common/static/js/capa/drag_and_drop/container.js
...@@ -12,6 +12,9 @@ define(['logme'], function (logme) { ...@@ -12,6 +12,9 @@ define(['logme'], function (logme) {
'<div ' + '<div ' +
'style=" ' + 'style=" ' +
'clear: both; ' + 'clear: both; ' +
'width: 665px; ' +
'margin-left: auto; ' +
'margin-right: auto; ' +
'" ' + '" ' +
'></div>' '></div>'
); );
......
common/static/js/capa/drag_and_drop/draggables.js
...@@ -20,6 +20,17 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -20,6 +20,17 @@ define(['logme', 'update_input'], function (logme, updateInput) {
} }
}(0)); }(0));
state.currentMovingDraggable = null;
$(document).mousemove(function (event) {
normalizeEvent(event);
if (state.currentMovingDraggable !== null) {
state.currentMovingDraggable.css('left', event.pageX - state.baseImageEl.offset().left - 50);
state.currentMovingDraggable.css('top', event.pageY - state.baseImageEl.offset().top - 50);
}
});
return; return;
function processDraggable(obj, index) { function processDraggable(obj, index) {
...@@ -81,7 +92,7 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -81,7 +92,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableContainerEl.mousedown(mouseDown); draggableContainerEl.mousedown(mouseDown);
draggableContainerEl.mouseup(mouseUp); draggableContainerEl.mouseup(mouseUp);
draggableContainerEl.mousemove(mouseMove); draggableContainerEl.mousemove(mouseMove);
draggableContainerEl.mouseleave(mouseLeave); // draggableContainerEl.mouseleave(mouseLeave);
if (state.individualTargets === false) { if (state.individualTargets === false) {
updateInput(state); updateInput(state);
...@@ -91,12 +102,16 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -91,12 +102,16 @@ define(['logme', 'update_input'], function (logme, updateInput) {
function mouseDown(event) { function mouseDown(event) {
if (mousePressed === false) { if (mousePressed === false) {
state.currentMovingDraggable = draggableContainerEl;
normalizeEvent(event);
if (inContainer === true) { if (inContainer === true) {
draggableContainerEl.detach(); draggableContainerEl.detach();
draggableContainerEl.css('border', 'none');
draggableContainerEl.css('position', 'absolute'); draggableContainerEl.css('position', 'absolute');
draggableContainerEl.css('left', event.pageX - 50); draggableContainerEl.css('left', event.pageX - state.baseImageEl.offset().left - 50);
draggableContainerEl.css('top', event.pageY - 50); draggableContainerEl.css('top', event.pageY - state.baseImageEl.offset().top - 50);
draggableContainerEl.appendTo(state.containerEl); draggableContainerEl.appendTo(state.baseImageEl.parent());
inContainer = false; inContainer = false;
} }
...@@ -109,40 +124,43 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -109,40 +124,43 @@ define(['logme', 'update_input'], function (logme, updateInput) {
} }
} }
function mouseUp() { function mouseUp(event) {
if (mousePressed === true) { if (mousePressed === true) {
checkLandingElement(); state.currentMovingDraggable = null;
normalizeEvent(event);
checkLandingElement(event);
} }
} }
function mouseMove() { function mouseMove() {
if (mousePressed === true) { if (mousePressed === true) {
draggableContainerEl.css('left', (event.pageX - 50)); draggableContainerEl.css('left', event.pageX - state.baseImageEl.offset().left - 50);
draggableContainerEl.css('top', (event.pageY - 50)); draggableContainerEl.css('top', event.pageY - state.baseImageEl.offset().top - 50);
} }
} }
function mouseLeave() { // function mouseLeave(event) {
if (mousePressed === true) { // if (mousePressed === true) {
checkLandingElement(); // normalizeEvent(event);
} //
} // checkLandingElement(event);
// }
// }
function checkLandingElement() { function checkLandingElement(event) {
var offsetDE, offsetTE, indexes, DEindex, targetFound; var offsetDE, indexes, DEindex, targetFound;
mousePressed = false; mousePressed = false;
offsetDE = draggableContainerEl.offset(); offsetDE = draggableContainerEl.position();
if (state.individualTargets === false) { if (state.individualTargets === false) {
offsetTE = state.targetEl.offset();
if ( if (
(offsetDE.left < offsetTE.left) || (offsetDE.left < 0) ||
(offsetDE.left + 100 > offsetTE.left + state.targetEl.width()) || (offsetDE.left + 100 > state.baseImageEl.width()) ||
(offsetDE.top < offsetTE.top) || (offsetDE.top < 0) ||
(offsetDE.top + 100 > offsetTE.top + state.targetEl.height()) (offsetDE.top + 100 > state.baseImageEl.height())
) { ) {
moveBackToSlider(); moveBackToSlider();
...@@ -151,8 +169,8 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -151,8 +169,8 @@ define(['logme', 'update_input'], function (logme, updateInput) {
} else { } else {
correctZIndexes(); correctZIndexes();
draggableObj.x = offsetDE.left + 50 - offsetTE.left; draggableObj.x = offsetDE.left + 50;
draggableObj.y = offsetDE.top + 50 - offsetTE.top; draggableObj.y = offsetDE.top + 50;
} }
} else if (state.individualTargets === true) { } else if (state.individualTargets === true) {
targetFound = false; targetFound = false;
...@@ -238,8 +256,8 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -238,8 +256,8 @@ define(['logme', 'update_input'], function (logme, updateInput) {
} }
function snapToTarget(target) { function snapToTarget(target) {
draggableContainerEl.css('left', (target.offset.left + 0.5 * target.w - 50)); draggableContainerEl.css('left', target.offset.left + 0.5 * target.w - 50);
draggableContainerEl.css('top', (target.offset.top + 0.5 * target.h - 50)); draggableContainerEl.css('top', target.offset.top + 0.5 * target.h - 50);
} }
function correctZIndexes() { function correctZIndexes() {
...@@ -288,10 +306,19 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -288,10 +306,19 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableContainerEl.appendTo(state.sliderEl); draggableContainerEl.appendTo(state.sliderEl);
inContainer = true; inContainer = true;
} }
draggableContainerEl.css('border', '1px solid gray');
} }
} }
} }
function normalizeEvent(event) {
if(!event.offsetX) {
event.offsetX = (event.pageX - $(event.target).offset().left);
event.offsetY = (event.pageY - $(event.target).offset().top);
}
return event;
}
} }
}); });
......
common/static/js/capa/drag_and_drop/main.js
...@@ -32,13 +32,6 @@ define( ...@@ -32,13 +32,6 @@ 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;
}
try { try {
config = JSON.parse($('#drag_and_drop_json_' + problemId).html()); config = JSON.parse($('#drag_and_drop_json_' + problemId).html());
} catch (err) { } catch (err) {
...@@ -48,6 +41,13 @@ define( ...@@ -48,6 +41,13 @@ 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, imageDir, state) !== true) {
......
common/static/js/capa/drag_and_drop/scroller.js
...@@ -13,7 +13,7 @@ define(['logme'], function (logme) { ...@@ -13,7 +13,7 @@ define(['logme'], function (logme) {
parentEl = $( parentEl = $(
'<div ' + '<div ' +
'style=" ' + 'style=" ' +
'width: 100%; ' + 'width: 665px; ' +
'height: 102px; ' + 'height: 102px; ' +
'margin-left: auto; ' + 'margin-left: auto; ' +
'margin-right: auto; ' + 'margin-right: auto; ' +
...@@ -24,7 +24,7 @@ define(['logme'], function (logme) { ...@@ -24,7 +24,7 @@ define(['logme'], function (logme) {
moveLeftEl = $( moveLeftEl = $(
'<div ' + '<div ' +
'style=" ' + 'style=" ' +
'width: 6%; ' + 'width: 40px; ' +
'height: 102px; ' + 'height: 102px; ' +
'display: inline; ' + 'display: inline; ' +
'float: left; ' + 'float: left; ' +
...@@ -67,13 +67,15 @@ define(['logme'], function (logme) { ...@@ -67,13 +67,15 @@ define(['logme'], function (logme) {
showElLeftMargin += 102; showElLeftMargin += 102;
state.sliderEl.animate({ state.sliderEl.animate({
'margin-left': showElLeftMargin + 'px' 'margin-left': showElLeftMargin + 'px'
}, 100); }, 100, function () {
// Check if at the end, and make arrow less visible.
});
}); });
showEl = $( showEl = $(
'<div ' + '<div ' +
'style=" ' + 'style=" ' +
'width: 714px; ' + 'width: 585px; ' +
'height: 102px; ' + 'height: 102px; ' +
'overflow: hidden; ' + 'overflow: hidden; ' +
'display: inline; ' + 'display: inline; ' +
...@@ -98,7 +100,7 @@ define(['logme'], function (logme) { ...@@ -98,7 +100,7 @@ define(['logme'], function (logme) {
moveRightEl = $( moveRightEl = $(
'<div ' + '<div ' +
'style=" ' + 'style=" ' +
'width: 6%; ' + 'width: 40px; ' +
'height: 102px; ' + 'height: 102px; ' +
'display: inline; ' + 'display: inline; ' +
'float: left; ' + 'float: left; ' +
...@@ -134,14 +136,16 @@ define(['logme'], function (logme) { ...@@ -134,14 +136,16 @@ define(['logme'], function (logme) {
moveRightEl.appendTo(parentEl); moveRightEl.appendTo(parentEl);
moveRightEl.click(function () { moveRightEl.click(function () {
if (showElLeftMargin < -102 * (state.sliderEl.children().length - 8)) { if (showElLeftMargin < -102 * (state.sliderEl.children().length - 6)) {
return; return;
} }
showElLeftMargin -= 102; showElLeftMargin -= 102;
state.sliderEl.animate({ state.sliderEl.animate({
'margin-left': showElLeftMargin + 'px' 'margin-left': showElLeftMargin + 'px'
}, 100); }, 100, function () {
// Check if at the end, and make arrow less visible.
});
}); });
parentEl.appendTo(state.containerEl); parentEl.appendTo(state.containerEl);
......
common/static/js/capa/drag_and_drop/targets.js
...@@ -20,16 +20,16 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -20,16 +20,16 @@ define(['logme', 'update_input'], function (logme, updateInput) {
return; return;
function processTarget(obj) { function processTarget(obj) {
var targetElOffset, tEl, left, borderCss; var baseImageElOffset, tEl, left, borderCss;
if (state.targetElWidth === null) { if (state.baseImageElWidth === null) {
window.setTimeout(function () { window.setTimeout(function () {
processTarget(obj); processTarget(obj);
}, 50); }, 50);
return; return;
} }
left = obj.x + 0.5 * (state.targetEl.parent().width() - state.targetElWidth); left = obj.x + 0.5 * (state.baseImageEl.parent().width() - state.baseImageElWidth);
borderCss = ''; borderCss = '';
if (state.config.target_outline === true) { if (state.config.target_outline === true) {
...@@ -51,11 +51,11 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -51,11 +51,11 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'></div>' '></div>'
); );
tEl.appendTo(state.targetEl.parent()); tEl.appendTo(state.baseImageEl.parent());
state.targets.push({ state.targets.push({
'id': obj.id, 'id': obj.id,
'offset': tEl.offset(), 'offset': tEl.position(),
'w': obj.w, 'w': obj.w,
'h': obj.h, 'h': obj.h,
'el': tEl, 'el': tEl,
......
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