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

New feature: when the draggable is out of the slider container, if it has a label, the label will get a background. This way it is much easier to discern the label against the base image.

Browse Source
This commit is contained in:
Valera Rozuvan
2013-01-09 11:34:03 +02:00
committed by Alexander Kryklia
parent 65fd71d06b
commit f92c0bdceb
2 changed files with 101 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,6 +27,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
event.pageX -
state.baseImageEl.offset().left -
state.currentMovingDraggable.iconWidth * 0.5
- state.currentMovingDraggable.iconElLeftOffset
);
state.currentMovingDraggable.iconEl.css(
'top',
@@ -41,6 +42,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
event.pageX -
state.baseImageEl.offset().left -
state.currentMovingDraggable.labelWidth * 0.5
- 9 // Account for padding, border.
);
state.currentMovingDraggable.labelEl.css(
'top',
@@ -84,7 +86,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.containerEl.appendTo(state.sliderEl);
if (obj.icon.length > 0) {
draggableObj.hasIcon = true;
draggableObj.iconElBGColor = 'transparent';
draggableObj.iconElPadding = 0;
draggableObj.iconElBorder = 'none';
draggableObj.iconElLeftOffset = 0;
draggableObj.iconEl = $('<img />');
draggableObj.iconEl.attr(
@@ -173,6 +178,11 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// icon. All the existing code will work, and the user will
// see a label instead of an icon.
if (obj.label.length > 0) {
draggableObj.iconElBGColor = 'yellow';
draggableObj.iconElPadding = 8;
draggableObj.iconElBorder = '1px solid black';
draggableObj.iconElLeftOffset = 9;
draggableObj.iconEl = $(
'<div ' +
'style=" ' +
@@ -251,6 +261,18 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.containerEl.hide();
draggableObj.iconEl.detach();
draggableObj.iconEl.css(
'background-color', draggableObj.iconElBGColor
);
draggableObj.iconEl.css(
'padding-left', draggableObj.iconElPadding
);
draggableObj.iconEl.css(
'padding-right', draggableObj.iconElPadding
);
draggableObj.iconEl.css(
'border', draggableObj.iconElBorder
);
draggableObj.iconEl.css(
'width',
draggableObj.iconWidth
@@ -264,6 +286,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
event.pageX -
state.baseImageEl.offset().left -
draggableObj.iconWidth * 0.5
- draggableObj.iconElLeftOffset
);
draggableObj.iconEl.css(
'top',
@@ -277,11 +300,24 @@ define(['logme', 'update_input'], function (logme, updateInput) {
if (draggableObj.labelEl !== null) {
draggableObj.labelEl.detach();
draggableObj.labelEl.css(
'background-color', 'yellow'
);
draggableObj.labelEl.css(
'padding-left', 8
);
draggableObj.labelEl.css(
'padding-right', 8
);
draggableObj.labelEl.css(
'border', '1px solid black'
);
draggableObj.labelEl.css(
'left',
event.pageX -
state.baseImageEl.offset().left -
draggableObj.labelWidth * 0.5
- 9 // Account for padding, border.
);
draggableObj.labelEl.css(
'top',
@@ -330,6 +366,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
event.pageX -
state.baseImageEl.offset().left -
draggableObj.iconWidth * 0.5
- draggableObj.iconElLeftOffset
);
draggableObj.iconEl.css(
'top',
@@ -344,6 +381,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
event.pageX -
state.baseImageEl.offset().left -
draggableObj.labelWidth * 0.5
- 9 // Acoount for padding, border.
);
draggableObj.labelEl.css(
'top',
@@ -529,6 +567,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'left',
target.offset.left + 0.5 * target.w -
draggableObj.iconWidth * 0.5 + offset
- draggableObj.iconElLeftOffset
);
draggableObj.iconEl.css(
'top',
@@ -541,6 +580,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'left',
target.offset.left + 0.5 * target.w -
draggableObj.labelWidth * 0.5 + offset
- 9 // Acoount for padding, border.
);
draggableObj.labelEl.css(
'top',
@@ -587,7 +627,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.containerEl.show();
draggableObj.iconEl.detach();
draggableObj.iconEl.css('border', 'none');
draggableObj.iconEl.css('background-color', 'transparent');
draggableObj.iconEl.css('padding-left', 0);
draggableObj.iconEl.css('padding-right', 0);
draggableObj.iconEl.css(
'width',
draggableObj.iconWidthSmall
@@ -596,12 +639,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'height',
draggableObj.iconHeightSmall
);
draggableObj.iconEl.css(
'left',
50 - draggableObj.iconWidthSmall * 0.5
);
if (draggableObj.labelEl !== null) {
draggableObj.iconEl.css('top', 5);
} else {
@@ -615,6 +656,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
if (draggableObj.labelEl !== null) {
draggableObj.labelEl.detach();
draggableObj.labelEl.css('border', 'none');
draggableObj.labelEl.css('background-color', 'transparent');
draggableObj.labelEl.css('padding-left', 0);
draggableObj.labelEl.css('padding-right', 0);
draggableObj.labelEl.css(
'left',
50 - draggableObj.labelWidth * 0.5

52
common/static/js/capa/drag_and_drop/update_input.js
View File

@@ -130,6 +130,18 @@ define(['logme'], function (logme) {
draggable.containerEl.hide();
draggable.iconEl.detach();
draggable.iconEl.css(
'background-color', draggable.iconElBGColor
);
draggable.iconEl.css(
'padding-left', draggable.iconElPadding
);
draggable.iconEl.css(
'padding-right', draggable.iconElPadding
);
draggable.iconEl.css(
'border', draggable.iconElBorder
);
draggable.iconEl.css(
'width',
draggable.iconWidth
@@ -142,6 +154,7 @@ define(['logme'], function (logme) {
'left',
target.offset.left + 0.5 * target.w -
draggable.iconWidth * 0.5 + offset
- draggable.iconElLeftOffset
);
draggable.iconEl.css(
'top',
@@ -154,10 +167,23 @@ define(['logme'], function (logme) {
if (draggable.labelEl !== null) {
draggable.labelEl.detach();
draggable.labelEl.css(
'background-color', 'yellow'
);
draggable.labelEl.css(
'padding-left', 8
);
draggable.labelEl.css(
'padding-right', 8
);
draggable.labelEl.css(
'border', '1px solid black'
);
draggable.labelEl.css(
'left',
target.offset.left + 0.5 * target.w -
draggable.labelWidth * 0.5 + offset
- 9 // Account for padding, border.
);
draggable.labelEl.css(
'top',
@@ -218,6 +244,18 @@ define(['logme'], function (logme) {
draggable.containerEl.hide();
draggable.iconEl.detach();
draggable.iconEl.css(
'background-color', draggable.iconElBGColor
);
draggable.iconEl.css(
'padding-left', draggable.iconElPadding
);
draggable.iconEl.css(
'padding-right', draggable.iconElPadding
);
draggable.iconEl.css(
'border', draggable.iconElBorder
);
draggable.iconEl.css(
'width',
draggable.iconWidth
@@ -230,6 +268,7 @@ define(['logme'], function (logme) {
'left',
answer.draggables[c1][draggableId][0] -
draggable.iconWidth * 0.5 + offset
- draggable.iconElLeftOffset
);
draggable.iconEl.css(
'top',
@@ -242,10 +281,23 @@ define(['logme'], function (logme) {
if (draggable.labelEl !== null) {
draggable.labelEl.detach();
draggable.labelEl.css(
'background-color', 'yellow'
);
draggable.labelEl.css(
'padding-left', 8
);
draggable.labelEl.css(
'padding-right', 8
);
draggable.labelEl.css(
'border', '1px solid black'
);
draggable.labelEl.css(
'left',
answer.draggables[c1][draggableId][0] -
draggable.labelWidth * 0.5 + offset
- 9 // Account for padding, border.
);
draggable.labelEl.css(
'top',