Skip to content

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

New feature: when the draggable is out of the slider container, if it has a… 

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.
parent 65fd71d0
Showing with 101 additions and 4 deletions
common/static/js/capa/drag_and_drop/draggables.js
...@@ -27,6 +27,7 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -27,6 +27,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
event.pageX - event.pageX -
state.baseImageEl.offset().left - state.baseImageEl.offset().left -
state.currentMovingDraggable.iconWidth * 0.5 state.currentMovingDraggable.iconWidth * 0.5
- state.currentMovingDraggable.iconElLeftOffset
); );
state.currentMovingDraggable.iconEl.css( state.currentMovingDraggable.iconEl.css(
'top', 'top',
...@@ -41,6 +42,7 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -41,6 +42,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
event.pageX - event.pageX -
state.baseImageEl.offset().left - state.baseImageEl.offset().left -
state.currentMovingDraggable.labelWidth * 0.5 state.currentMovingDraggable.labelWidth * 0.5
- 9 // Account for padding, border.
); );
state.currentMovingDraggable.labelEl.css( state.currentMovingDraggable.labelEl.css(
'top', 'top',
...@@ -84,7 +86,10 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -84,7 +86,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.containerEl.appendTo(state.sliderEl); draggableObj.containerEl.appendTo(state.sliderEl);
if (obj.icon.length > 0) { 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 = $('<img />');
draggableObj.iconEl.attr( draggableObj.iconEl.attr(
...@@ -173,6 +178,11 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -173,6 +178,11 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// icon. All the existing code will work, and the user will // icon. All the existing code will work, and the user will
// see a label instead of an icon. // see a label instead of an icon.
if (obj.label.length > 0) { if (obj.label.length > 0) {
draggableObj.iconElBGColor = 'yellow';
draggableObj.iconElPadding = 8;
draggableObj.iconElBorder = '1px solid black';
draggableObj.iconElLeftOffset = 9;
draggableObj.iconEl = $( draggableObj.iconEl = $(
'<div ' + '<div ' +
'style=" ' + 'style=" ' +
...@@ -251,6 +261,18 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -251,6 +261,18 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.containerEl.hide(); draggableObj.containerEl.hide();
draggableObj.iconEl.detach(); 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( draggableObj.iconEl.css(
'width', 'width',
draggableObj.iconWidth draggableObj.iconWidth
...@@ -264,6 +286,7 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -264,6 +286,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
event.pageX - event.pageX -
state.baseImageEl.offset().left - state.baseImageEl.offset().left -
draggableObj.iconWidth * 0.5 draggableObj.iconWidth * 0.5
- draggableObj.iconElLeftOffset
); );
draggableObj.iconEl.css( draggableObj.iconEl.css(
'top', 'top',
...@@ -278,10 +301,23 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -278,10 +301,23 @@ define(['logme', 'update_input'], function (logme, updateInput) {
if (draggableObj.labelEl !== null) { if (draggableObj.labelEl !== null) {
draggableObj.labelEl.detach(); draggableObj.labelEl.detach();
draggableObj.labelEl.css( 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', 'left',
event.pageX - event.pageX -
state.baseImageEl.offset().left - state.baseImageEl.offset().left -
draggableObj.labelWidth * 0.5 draggableObj.labelWidth * 0.5
- 9 // Account for padding, border.
); );
draggableObj.labelEl.css( draggableObj.labelEl.css(
'top', 'top',
...@@ -330,6 +366,7 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -330,6 +366,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
event.pageX - event.pageX -
state.baseImageEl.offset().left - state.baseImageEl.offset().left -
draggableObj.iconWidth * 0.5 draggableObj.iconWidth * 0.5
- draggableObj.iconElLeftOffset
); );
draggableObj.iconEl.css( draggableObj.iconEl.css(
'top', 'top',
...@@ -344,6 +381,7 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -344,6 +381,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
event.pageX - event.pageX -
state.baseImageEl.offset().left - state.baseImageEl.offset().left -
draggableObj.labelWidth * 0.5 draggableObj.labelWidth * 0.5
- 9 // Acoount for padding, border.
); );
draggableObj.labelEl.css( draggableObj.labelEl.css(
'top', 'top',
...@@ -529,6 +567,7 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -529,6 +567,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'left', 'left',
target.offset.left + 0.5 * target.w - target.offset.left + 0.5 * target.w -
draggableObj.iconWidth * 0.5 + offset draggableObj.iconWidth * 0.5 + offset
- draggableObj.iconElLeftOffset
); );
draggableObj.iconEl.css( draggableObj.iconEl.css(
'top', 'top',
...@@ -541,6 +580,7 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -541,6 +580,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'left', 'left',
target.offset.left + 0.5 * target.w - target.offset.left + 0.5 * target.w -
draggableObj.labelWidth * 0.5 + offset draggableObj.labelWidth * 0.5 + offset
- 9 // Acoount for padding, border.
); );
draggableObj.labelEl.css( draggableObj.labelEl.css(
'top', 'top',
...@@ -587,7 +627,10 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -587,7 +627,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.containerEl.show(); draggableObj.containerEl.show();
draggableObj.iconEl.detach(); 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( draggableObj.iconEl.css(
'width', 'width',
draggableObj.iconWidthSmall draggableObj.iconWidthSmall
...@@ -596,12 +639,10 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -596,12 +639,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'height', 'height',
draggableObj.iconHeightSmall draggableObj.iconHeightSmall
); );
draggableObj.iconEl.css( draggableObj.iconEl.css(
'left', 'left',
50 - draggableObj.iconWidthSmall * 0.5 50 - draggableObj.iconWidthSmall * 0.5
); );
if (draggableObj.labelEl !== null) { if (draggableObj.labelEl !== null) {
draggableObj.iconEl.css('top', 5); draggableObj.iconEl.css('top', 5);
} else { } else {
...@@ -615,6 +656,10 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -615,6 +656,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
if (draggableObj.labelEl !== null) { if (draggableObj.labelEl !== null) {
draggableObj.labelEl.detach(); 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( draggableObj.labelEl.css(
'left', 'left',
50 - draggableObj.labelWidth * 0.5 50 - draggableObj.labelWidth * 0.5
......
common/static/js/capa/drag_and_drop/update_input.js
...@@ -131,6 +131,18 @@ define(['logme'], function (logme) { ...@@ -131,6 +131,18 @@ define(['logme'], function (logme) {
draggable.iconEl.detach(); draggable.iconEl.detach();
draggable.iconEl.css( 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', 'width',
draggable.iconWidth draggable.iconWidth
); );
...@@ -142,6 +154,7 @@ define(['logme'], function (logme) { ...@@ -142,6 +154,7 @@ define(['logme'], function (logme) {
'left', 'left',
target.offset.left + 0.5 * target.w - target.offset.left + 0.5 * target.w -
draggable.iconWidth * 0.5 + offset draggable.iconWidth * 0.5 + offset
- draggable.iconElLeftOffset
); );
draggable.iconEl.css( draggable.iconEl.css(
'top', 'top',
...@@ -155,9 +168,22 @@ define(['logme'], function (logme) { ...@@ -155,9 +168,22 @@ define(['logme'], function (logme) {
if (draggable.labelEl !== null) { if (draggable.labelEl !== null) {
draggable.labelEl.detach(); draggable.labelEl.detach();
draggable.labelEl.css( 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', 'left',
target.offset.left + 0.5 * target.w - target.offset.left + 0.5 * target.w -
draggable.labelWidth * 0.5 + offset draggable.labelWidth * 0.5 + offset
- 9 // Account for padding, border.
); );
draggable.labelEl.css( draggable.labelEl.css(
'top', 'top',
...@@ -219,6 +245,18 @@ define(['logme'], function (logme) { ...@@ -219,6 +245,18 @@ define(['logme'], function (logme) {
draggable.iconEl.detach(); draggable.iconEl.detach();
draggable.iconEl.css( 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', 'width',
draggable.iconWidth draggable.iconWidth
); );
...@@ -230,6 +268,7 @@ define(['logme'], function (logme) { ...@@ -230,6 +268,7 @@ define(['logme'], function (logme) {
'left', 'left',
answer.draggables[c1][draggableId][0] - answer.draggables[c1][draggableId][0] -
draggable.iconWidth * 0.5 + offset draggable.iconWidth * 0.5 + offset
- draggable.iconElLeftOffset
); );
draggable.iconEl.css( draggable.iconEl.css(
'top', 'top',
...@@ -243,9 +282,22 @@ define(['logme'], function (logme) { ...@@ -243,9 +282,22 @@ define(['logme'], function (logme) {
if (draggable.labelEl !== null) { if (draggable.labelEl !== null) {
draggable.labelEl.detach(); draggable.labelEl.detach();
draggable.labelEl.css( 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', 'left',
answer.draggables[c1][draggableId][0] - answer.draggables[c1][draggableId][0] -
draggable.labelWidth * 0.5 + offset draggable.labelWidth * 0.5 + offset
- 9 // Account for padding, border.
); );
draggable.labelEl.css( draggable.labelEl.css(
'top', 'top',
......
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