(function (requirejs, require, define) {
define(['js/capa/drag_and_drop/logme', 'js/capa/drag_and_drop/draggable_events', 'js/capa/drag_and_drop/draggable_logic'], function (logme, draggableEvents, draggableLogic) {
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 = $(
'<div ' +
'style=" ' +
'position: absolute; ' +
'color: black; ' +
'font-size: 0.95em; ' +
'" ' +
'>' +
draggableObj.originalConfigObj.label +
'</div>'
);
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);
});
return;
} else {
if (draggableObj.originalConfigObj.label.length > 0) {
draggableObj.iconEl = $(
'<div ' +
'style=" ' +
'position: absolute; ' +
'color: black; ' +
'font-size: 0.95em; ' +
'" ' +
'>' +
draggableObj.originalConfigObj.label +
'</div>'
);
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);
return;
}
}
}
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,
'makeDraggableCopy': makeDraggableCopy,
'attachMouseEventsTo': draggableEvents.attachMouseEventsTo,
'targetField': [],
'numDraggablesOnMe': 0
};
draggableObj.containerEl = $(
'<div ' +
'style=" ' +
'width: 100px; ' +
'height: 100px; ' +
'display: inline; ' +
'float: left; ' +
'overflow: hidden; ' +
'border-left: 1px solid #CCC; ' +
'border-right: 1px solid #CCC; ' +
'text-align: center; ' +
'position: relative; ' +
'" ' +
'></div>'
);
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 = $(
'<div ' +
'style=" ' +
'position: absolute; ' +
'color: black; ' +
'font-size: 0.95em; ' +
'" ' +
'>' +
obj.label +
'</div>'
);
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 = $(
'<div ' +
'style=" ' +
'position: absolute; ' +
'color: black; ' +
'font-size: 0.95em; ' +
'" ' +
'>' +
obj.label +
'</div>'
);
draggableObj.iconEl.appendTo(draggableObj.containerEl);
draggableObj.iconWidth = draggableObj.iconEl.width();
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(['logme', 'draggable_events', 'draggable_logic'], function (logme, draggableEvents, draggableLogic) {
}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define) {