Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Valera Rozuvan
2012-12-27 07:43:49 +02:00
committed by Alexander Kryklia
parent b45fe0e652
commit 86d133664a
6 changed files with 90 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
common/static/js/capa/drag_and_drop/base_image.js
View File

@@ -8,34 +8,34 @@ define(['logme'], function (logme) {
return BaseImage;
function BaseImage(state) {
var targetImgSrc, targetElContainer, mouseMoveDiv;
var targetImgSrc, baseImageElContainer, mouseMoveDiv;
targetImgSrc = state.config.imageDir + '/' + state.config.base_image;
targetElContainer = $(
baseImageElContainer = $(
'<div ' +
'class="base_image_container" ' +
'style=" ' +
'position: relative; ' +
'text-align: center; ' +
'" ' +
'></div>'
);
state.targetEl = $(
state.baseImageEl = $(
'<img ' +
'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.
.attr('src', state.targetEl.attr('src'))
.attr('src', state.baseImageEl.attr('src'))
.load(function () {
state.targetElWidth = this.width;
state.baseImageElWidth = this.width;
});
// state.targetEl.mousemove(
// state.baseImageEl.mousemove(
// function (event) {
// mouseMoveDiv.html(
// '[' + event.offsetX + ', ' + event.offsetY + ']'
@@ -53,9 +53,9 @@ define(['logme'], function (logme) {
'" ' +
'></div>'
);
mouseMoveDiv.appendTo(targetElContainer);
mouseMoveDiv.appendTo(baseImageElContainer);
targetElContainer.appendTo(state.containerEl);
baseImageElContainer.appendTo(state.containerEl);
}
});

3
common/static/js/capa/drag_and_drop/container.js
View File

@@ -12,6 +12,9 @@ define(['logme'], function (logme) {
'<div ' +
'style=" ' +
'clear: both; ' +
'width: 665px; ' +
'margin-left: auto; ' +
'margin-right: auto; ' +
'" ' +
'></div>'
);

79
common/static/js/capa/drag_and_drop/draggables.js
View File

@@ -20,6 +20,17 @@ define(['logme', 'update_input'], function (logme, updateInput) {
}
}(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;
function processDraggable(obj, index) {
@@ -81,7 +92,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableContainerEl.mousedown(mouseDown);
draggableContainerEl.mouseup(mouseUp);
draggableContainerEl.mousemove(mouseMove);
draggableContainerEl.mouseleave(mouseLeave);
// draggableContainerEl.mouseleave(mouseLeave);
if (state.individualTargets === false) {
updateInput(state);
@@ -91,12 +102,16 @@ define(['logme', 'update_input'], function (logme, updateInput) {
function mouseDown(event) {
if (mousePressed === false) {
state.currentMovingDraggable = draggableContainerEl;
normalizeEvent(event);
if (inContainer === true) {
draggableContainerEl.detach();
draggableContainerEl.css('border', 'none');
draggableContainerEl.css('position', 'absolute');
draggableContainerEl.css('left', event.pageX - 50);
draggableContainerEl.css('top', event.pageY - 50);
draggableContainerEl.appendTo(state.containerEl);
draggableContainerEl.css('left', event.pageX - state.baseImageEl.offset().left - 50);
draggableContainerEl.css('top', event.pageY - state.baseImageEl.offset().top - 50);
draggableContainerEl.appendTo(state.baseImageEl.parent());
inContainer = false;
}
@@ -109,40 +124,43 @@ define(['logme', 'update_input'], function (logme, updateInput) {
}
}
function mouseUp() {
function mouseUp(event) {
if (mousePressed === true) {
checkLandingElement();
state.currentMovingDraggable = null;
normalizeEvent(event);
checkLandingElement(event);
}
}
function mouseMove() {
if (mousePressed === true) {
draggableContainerEl.css('left', (event.pageX - 50));
draggableContainerEl.css('top', (event.pageY - 50));
draggableContainerEl.css('left', event.pageX - state.baseImageEl.offset().left - 50);
draggableContainerEl.css('top', event.pageY - state.baseImageEl.offset().top - 50);
}
}
function mouseLeave() {
if (mousePressed === true) {
checkLandingElement();
}
}
// function mouseLeave(event) {
// if (mousePressed === true) {
// normalizeEvent(event);
//
// checkLandingElement(event);
// }
// }
function checkLandingElement() {
var offsetDE, offsetTE, indexes, DEindex, targetFound;
function checkLandingElement(event) {
var offsetDE, indexes, DEindex, targetFound;
mousePressed = false;
offsetDE = draggableContainerEl.offset();
offsetDE = draggableContainerEl.position();
if (state.individualTargets === false) {
offsetTE = state.targetEl.offset();
if (
(offsetDE.left < offsetTE.left) ||
(offsetDE.left + 100 > offsetTE.left + state.targetEl.width()) ||
(offsetDE.top < offsetTE.top) ||
(offsetDE.top + 100 > offsetTE.top + state.targetEl.height())
(offsetDE.left < 0) ||
(offsetDE.left + 100 > state.baseImageEl.width()) ||
(offsetDE.top < 0) ||
(offsetDE.top + 100 > state.baseImageEl.height())
) {
moveBackToSlider();
@@ -151,8 +169,8 @@ define(['logme', 'update_input'], function (logme, updateInput) {
} else {
correctZIndexes();
draggableObj.x = offsetDE.left + 50 - offsetTE.left;
draggableObj.y = offsetDE.top + 50 - offsetTE.top;
draggableObj.x = offsetDE.left + 50;
draggableObj.y = offsetDE.top + 50;
}
} else if (state.individualTargets === true) {
targetFound = false;
@@ -238,8 +256,8 @@ define(['logme', 'update_input'], function (logme, updateInput) {
}
function snapToTarget(target) {
draggableContainerEl.css('left', (target.offset.left + 0.5 * target.w - 50));
draggableContainerEl.css('top', (target.offset.top + 0.5 * target.h - 50));
draggableContainerEl.css('left', target.offset.left + 0.5 * target.w - 50);
draggableContainerEl.css('top', target.offset.top + 0.5 * target.h - 50);
}
function correctZIndexes() {
@@ -288,10 +306,19 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableContainerEl.appendTo(state.sliderEl);
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;
}
}
});

14
common/static/js/capa/drag_and_drop/main.js
View File

@@ -32,13 +32,6 @@ define(
return;
}
imageDir = $(value).attr('data-course-folder');
if (typeof imageDir !== 'string') {
logme('ERROR: Could not find the name of the image directory.');
return;
}
try {
config = JSON.parse($('#drag_and_drop_json_' + problemId).html());
} catch (err) {
@@ -48,6 +41,13 @@ define(
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);
if (configParser(config, imageDir, state) !== true) {

18
common/static/js/capa/drag_and_drop/scroller.js
View File

@@ -13,7 +13,7 @@ define(['logme'], function (logme) {
parentEl = $(
'<div ' +
'style=" ' +
'width: 100%; ' +
'width: 665px; ' +
'height: 102px; ' +
'margin-left: auto; ' +
'margin-right: auto; ' +
@@ -24,7 +24,7 @@ define(['logme'], function (logme) {
moveLeftEl = $(
'<div ' +
'style=" ' +
'width: 6%; ' +
'width: 40px; ' +
'height: 102px; ' +
'display: inline; ' +
'float: left; ' +
@@ -67,13 +67,15 @@ define(['logme'], function (logme) {
showElLeftMargin += 102;
state.sliderEl.animate({
'margin-left': showElLeftMargin + 'px'
}, 100);
}, 100, function () {
// Check if at the end, and make arrow less visible.
});
});
showEl = $(
'<div ' +
'style=" ' +
'width: 714px; ' +
'width: 585px; ' +
'height: 102px; ' +
'overflow: hidden; ' +
'display: inline; ' +
@@ -98,7 +100,7 @@ define(['logme'], function (logme) {
moveRightEl = $(
'<div ' +
'style=" ' +
'width: 6%; ' +
'width: 40px; ' +
'height: 102px; ' +
'display: inline; ' +
'float: left; ' +
@@ -134,14 +136,16 @@ define(['logme'], function (logme) {
moveRightEl.appendTo(parentEl);
moveRightEl.click(function () {
if (showElLeftMargin < -102 * (state.sliderEl.children().length - 8)) {
if (showElLeftMargin < -102 * (state.sliderEl.children().length - 6)) {
return;
}
showElLeftMargin -= 102;
state.sliderEl.animate({
'margin-left': showElLeftMargin + 'px'
}, 100);
}, 100, function () {
// Check if at the end, and make arrow less visible.
});
});
parentEl.appendTo(state.containerEl);

10
common/static/js/capa/drag_and_drop/targets.js
View File

@@ -20,16 +20,16 @@ define(['logme', 'update_input'], function (logme, updateInput) {
return;
function processTarget(obj) {
var targetElOffset, tEl, left, borderCss;
var baseImageElOffset, tEl, left, borderCss;
if (state.targetElWidth === null) {
if (state.baseImageElWidth === null) {
window.setTimeout(function () {
processTarget(obj);
}, 50);
return;
}
left = obj.x + 0.5 * (state.targetEl.parent().width() - state.targetElWidth);
left = obj.x + 0.5 * (state.baseImageEl.parent().width() - state.baseImageElWidth);
borderCss = '';
if (state.config.target_outline === true) {
@@ -51,11 +51,11 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'></div>'
);
tEl.appendTo(state.targetEl.parent());
tEl.appendTo(state.baseImageEl.parent());
state.targets.push({
'id': obj.id,
'offset': tEl.offset(),
'offset': tEl.position(),
'w': obj.w,
'h': obj.h,
'el': tEl,