d7053a6783
* fix: eslint operator-linebreak issue * fix: eslint quotes issue * fix: react jsx indent and props issues * fix: eslint trailing spaces issues * fix: eslint line around directives issue * fix: eslint semi rule * fix: eslint newline per chain rule * fix: eslint space infix ops rule * fix: eslint space-in-parens issue * fix: eslint space before function paren issue * fix: eslint space before blocks issue * fix: eslint arrow body style issue * fix: eslint dot-location issue * fix: eslint quotes issue * fix: eslint quote props issue * fix: eslint operator assignment issue * fix: eslint new line after import issue * fix: indent issues * fix: operator assignment issue * fix: all autofixable eslint issues * fix: all react related fixable issues * fix: autofixable eslint issues * chore: remove all template literals * fix: remaining autofixable issues * fix: failing js test
282 lines
13 KiB
JavaScript
282 lines
13 KiB
JavaScript
(function(requirejs, require, define) {
|
|
define(['js/capa/drag_and_drop/draggable_events', 'js/capa/drag_and_drop/draggable_logic',
|
|
'edx-ui-toolkit/js/utils/html-utils'],
|
|
function(draggableEvents, draggableLogic, HtmlUtils) {
|
|
return {
|
|
init: init
|
|
};
|
|
|
|
function init(state) {
|
|
state.config.draggables.every(function(draggable) {
|
|
processDraggable(state, draggable);
|
|
|
|
return true;
|
|
});
|
|
}
|
|
|
|
function makeDraggableCopy(callbackFunc) {
|
|
var draggableObj, property;
|
|
|
|
// Make a full proper copy of the draggable object, with some modifications.
|
|
draggableObj = {};
|
|
for (property in this) {
|
|
if (this.hasOwnProperty(property) === true) {
|
|
draggableObj[property] = this[property];
|
|
}
|
|
}
|
|
// The modifications to the draggable copy.
|
|
draggableObj.isOriginal = false; // This new draggable is a copy.
|
|
draggableObj.uniqueId = draggableObj.state.getUniqueId(); // Is newly set.
|
|
draggableObj.stateDraggablesIndex = null; // Will be set.
|
|
draggableObj.containerEl = null; // Not needed, since a copy will never return to a container element.
|
|
draggableObj.iconEl = null; // Will be created.
|
|
draggableObj.iconImgEl = null; // Will be created.
|
|
draggableObj.labelEl = null; // Will be created.
|
|
draggableObj.targetField = []; // Will be populated.
|
|
|
|
// Create DOM elements and attach events.
|
|
if (draggableObj.originalConfigObj.icon.length > 0) {
|
|
draggableObj.iconEl = $('<div></div>');
|
|
draggableObj.iconImgEl = $('<img />');
|
|
draggableObj.iconImgEl.attr('src', draggableObj.originalConfigObj.icon);
|
|
draggableObj.iconImgEl.load(function() {
|
|
draggableObj.iconEl.css({
|
|
position: 'absolute',
|
|
width: draggableObj.iconWidthSmall,
|
|
height: draggableObj.iconHeightSmall,
|
|
left: 50 - draggableObj.iconWidthSmall * 0.5,
|
|
top: ((draggableObj.originalConfigObj.label.length > 0) ? 5 : 50 - draggableObj.iconHeightSmall * 0.5)
|
|
});
|
|
draggableObj.iconImgEl.css({
|
|
position: 'absolute',
|
|
width: draggableObj.iconWidthSmall,
|
|
height: draggableObj.iconHeightSmall,
|
|
left: 0,
|
|
top: 0
|
|
});
|
|
draggableObj.iconImgEl.appendTo(draggableObj.iconEl);
|
|
|
|
if (draggableObj.originalConfigObj.label.length > 0) {
|
|
draggableObj.labelEl = $(HtmlUtils.joinHtml(
|
|
HtmlUtils.HTML(
|
|
'<div style="position: absolute; color: black; font-size: 0.95em; " role="label">'
|
|
),
|
|
draggableObj.originalConfigObj.label,
|
|
HtmlUtils.HTML('</div>')
|
|
).toString());
|
|
draggableObj.labelEl.css({
|
|
left: 50 - draggableObj.labelWidth * 0.5,
|
|
top: 5 + draggableObj.iconHeightSmall + 5
|
|
});
|
|
|
|
draggableObj.attachMouseEventsTo('labelEl');
|
|
}
|
|
|
|
draggableObj.attachMouseEventsTo('iconEl');
|
|
|
|
draggableObj.stateDraggablesIndex = draggableObj.state.draggables.push(draggableObj) - 1;
|
|
|
|
setTimeout(function() {
|
|
callbackFunc(draggableObj);
|
|
}, 0);
|
|
});
|
|
} else {
|
|
if (draggableObj.originalConfigObj.label.length > 0) {
|
|
draggableObj.iconEl = $(HtmlUtils.joinHtml(
|
|
HtmlUtils.HTML('<div style=" position: absolute; color: black; font-size: 0.95em; " >'),
|
|
draggableObj.originalConfigObj.label,
|
|
HtmlUtils.HTML('</div>')
|
|
).toString());
|
|
draggableObj.iconEl.css({
|
|
left: 50 - draggableObj.iconWidthSmall * 0.5,
|
|
top: 50 - draggableObj.iconHeightSmall * 0.5
|
|
});
|
|
|
|
draggableObj.attachMouseEventsTo('iconEl');
|
|
|
|
draggableObj.stateDraggablesIndex = draggableObj.state.draggables.push(draggableObj) - 1;
|
|
|
|
setTimeout(function() {
|
|
callbackFunc(draggableObj);
|
|
}, 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
function processDraggable(state, obj) {
|
|
var draggableObj;
|
|
|
|
draggableObj = {
|
|
uniqueId: state.getUniqueId(),
|
|
originalConfigObj: obj,
|
|
stateDraggablesIndex: null,
|
|
id: obj.id,
|
|
isReusable: obj.can_reuse,
|
|
isOriginal: true,
|
|
x: -1,
|
|
y: -1,
|
|
zIndex: 1,
|
|
containerEl: null,
|
|
iconEl: null,
|
|
iconImgEl: null,
|
|
iconElBGColor: null,
|
|
iconElPadding: null,
|
|
iconElBorder: null,
|
|
iconElLeftOffset: null,
|
|
iconWidth: null,
|
|
iconHeight: null,
|
|
iconWidthSmall: null,
|
|
iconHeightSmall: null,
|
|
labelEl: null,
|
|
labelWidth: null,
|
|
hasLoaded: false,
|
|
inContainer: true,
|
|
mousePressed: false,
|
|
onTarget: null,
|
|
onTargetIndex: null,
|
|
state: state,
|
|
|
|
mouseDown: draggableEvents.mouseDown,
|
|
mouseUp: draggableEvents.mouseUp,
|
|
mouseMove: draggableEvents.mouseMove,
|
|
|
|
checkLandingElement: draggableLogic.checkLandingElement,
|
|
checkIfOnTarget: draggableLogic.checkIfOnTarget,
|
|
snapToTarget: draggableLogic.snapToTarget,
|
|
correctZIndexes: draggableLogic.correctZIndexes,
|
|
moveBackToSlider: draggableLogic.moveBackToSlider,
|
|
moveDraggableTo: draggableLogic.moveDraggableTo,
|
|
toggleTargets: draggableLogic.toggleTargets,
|
|
|
|
makeDraggableCopy: makeDraggableCopy,
|
|
|
|
attachMouseEventsTo: draggableEvents.attachMouseEventsTo,
|
|
|
|
targetField: [],
|
|
numDraggablesOnMe: 0
|
|
};
|
|
|
|
draggableObj.containerEl = $(HtmlUtils.joinHtml(
|
|
HtmlUtils.HTML('<div style=" width: 100px; height: 100px; display: inline-block; overflow: hidden; '),
|
|
HtmlUtils.HTML('border-left: 1px solid #CCC; border-right: 1px solid #CCC; text-align: center; '),
|
|
HtmlUtils.HTML('position: relative; cursor: move; " role="listitem"></div>')
|
|
).toString());
|
|
|
|
draggableObj.containerEl.appendTo(state.sliderEl);
|
|
|
|
if (obj.icon.length > 0) {
|
|
draggableObj.iconElBGColor = 'transparent';
|
|
draggableObj.iconElPadding = 0;
|
|
draggableObj.iconElBorder = 'none';
|
|
draggableObj.iconElLeftOffset = 0;
|
|
|
|
draggableObj.iconEl = $('<div></div>');
|
|
|
|
draggableObj.iconImgEl = $('<img />');
|
|
draggableObj.iconImgEl.attr('src', obj.icon);
|
|
draggableObj.iconImgEl.load(function() {
|
|
draggableObj.iconWidth = this.width;
|
|
draggableObj.iconHeight = this.height;
|
|
|
|
if (draggableObj.iconWidth >= draggableObj.iconHeight) {
|
|
draggableObj.iconWidthSmall = 60;
|
|
draggableObj.iconHeightSmall = draggableObj.iconWidthSmall * (draggableObj.iconHeight / draggableObj.iconWidth);
|
|
} else {
|
|
draggableObj.iconHeightSmall = 60;
|
|
draggableObj.iconWidthSmall = draggableObj.iconHeightSmall * (draggableObj.iconWidth / draggableObj.iconHeight);
|
|
}
|
|
|
|
draggableObj.iconEl.css({
|
|
position: 'absolute',
|
|
width: draggableObj.iconWidthSmall,
|
|
height: draggableObj.iconHeightSmall,
|
|
left: 50 - draggableObj.iconWidthSmall * 0.5,
|
|
|
|
// Before:
|
|
// 'top': ((obj.label.length > 0) ? (100 - draggableObj.iconHeightSmall - 25) * 0.5 : 50 - draggableObj.iconHeightSmall * 0.5)
|
|
// After:
|
|
top: ((obj.label.length > 0) ? 37.5 : 50.0) - 0.5 * draggableObj.iconHeightSmall
|
|
});
|
|
draggableObj.iconImgEl.css({
|
|
position: 'absolute',
|
|
width: draggableObj.iconWidthSmall,
|
|
height: draggableObj.iconHeightSmall,
|
|
left: 0,
|
|
top: 0
|
|
});
|
|
draggableObj.iconImgEl.appendTo(draggableObj.iconEl);
|
|
draggableObj.iconEl.appendTo(draggableObj.containerEl);
|
|
|
|
if (obj.label.length > 0) {
|
|
draggableObj.labelEl = $(HtmlUtils.joinHtml(
|
|
HtmlUtils.HTML(
|
|
'<div style=" position: absolute; color: black; font-size: 0.95em; cursor: move; " >'
|
|
),
|
|
obj.label,
|
|
HtmlUtils.HTML('</div>')
|
|
).toString());
|
|
|
|
draggableObj.labelEl.appendTo(draggableObj.containerEl);
|
|
draggableObj.labelWidth = draggableObj.labelEl.width();
|
|
draggableObj.labelEl.css({
|
|
left: 50 - draggableObj.labelWidth * 0.5,
|
|
|
|
// Before:
|
|
// 'top': (100 - this.iconHeightSmall - 25) * 0.5 + this.iconHeightSmall + 5
|
|
// After:
|
|
top: 42.5 + 0.5 * draggableObj.iconHeightSmall
|
|
});
|
|
|
|
draggableObj.attachMouseEventsTo('labelEl');
|
|
}
|
|
|
|
draggableObj.hasLoaded = true;
|
|
});
|
|
} else {
|
|
// To make life easier, if there is no icon, but there is a
|
|
// label, we will create a label and store it as if it was an
|
|
// 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 = state.config.labelBgColor;
|
|
draggableObj.iconElPadding = 8;
|
|
draggableObj.iconElBorder = '1px solid black';
|
|
draggableObj.iconElLeftOffset = 9;
|
|
|
|
draggableObj.iconEl = $(HtmlUtils.joinHtml(
|
|
HtmlUtils.HTML(
|
|
'<div style=" position: absolute; color: black; font-size: 0.95em; cursor: move; " '
|
|
),
|
|
HtmlUtils.HTML('tabindex="0" aria-grabbed="false" role="listitem">'),
|
|
obj.label,
|
|
HtmlUtils.HTML('</div>')
|
|
).toString());
|
|
|
|
draggableObj.iconEl.appendTo(draggableObj.containerEl);
|
|
|
|
draggableObj.iconWidth = draggableObj.iconEl.width() + 1;
|
|
draggableObj.iconHeight = draggableObj.iconEl.height();
|
|
draggableObj.iconWidthSmall = draggableObj.iconWidth;
|
|
draggableObj.iconHeightSmall = draggableObj.iconHeight;
|
|
|
|
draggableObj.iconEl.css({
|
|
left: 50 - draggableObj.iconWidthSmall * 0.5,
|
|
top: 50 - draggableObj.iconHeightSmall * 0.5
|
|
});
|
|
|
|
draggableObj.hasLoaded = true;
|
|
} else {
|
|
// If no icon and no label, don't create a draggable.
|
|
return;
|
|
}
|
|
}
|
|
|
|
draggableObj.attachMouseEventsTo('iconEl');
|
|
draggableObj.attachMouseEventsTo('containerEl');
|
|
|
|
state.numDraggablesInSlider += 1;
|
|
draggableObj.stateDraggablesIndex = state.draggables.push(draggableObj) - 1;
|
|
}
|
|
}); // End-of: define(['draggable_events', 'draggable_logic'], function (draggableEvents, draggableLogic) {
|
|
}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define) {
|