draggable_logic.js

(function(requirejs, require, define) {
    define(['js/capa/drag_and_drop/update_input', 'js/capa/drag_and_drop/targets'], function(updateInput, Targets) {
        return {
            'moveDraggableTo': function(moveType, target, funcCallback) {
                var self, offset;

                if (this.hasLoaded === false) {
                    self = this;

                    setTimeout(function() {
                        self.moveDraggableTo(moveType, target, funcCallback);
                    }, 50);

                    return;
                }

                if ((this.isReusable === true) && (this.isOriginal === true)) {
                    this.makeDraggableCopy(function(draggableCopy) {
                        draggableCopy.moveDraggableTo(moveType, target, funcCallback);
                    });

                    return;
                }

                offset = 0;
                if (this.state.config.targetOutline === true) {
                    offset = 1;
                }

                this.inContainer = false;

                if (this.isOriginal === true) {
                    this.containerEl.hide();
                    this.iconEl.detach();
                }

                if (this.iconImgEl !== null) {
                    this.iconImgEl.css({
                        'width': this.iconWidth,
                        'height': this.iconHeight
                    });
                }

                this.iconEl.css({
                    'background-color': this.iconElBGColor,
                    'padding-left': this.iconElPadding,
                    'padding-right': this.iconElPadding,
                    'border': this.iconElBorder,
                    'width': this.iconWidth,
                    'height': this.iconHeight
                });
                if (moveType === 'target') {
                    this.iconEl.css({
                        'left': target.offset.left + 0.5 * target.w - this.iconWidth * 0.5 + offset - this.iconElLeftOffset,
                        'top': target.offset.top + 0.5 * target.h - this.iconHeight * 0.5 + offset
                    });
                } else {
                    this.iconEl.css({
                        'left': target.x - this.iconWidth * 0.5 + offset - this.iconElLeftOffset,
                        'top': target.y - this.iconHeight * 0.5 + offset
                    });
                }
                this.iconEl.appendTo(this.state.baseImageEl.parent());

                if (this.labelEl !== null) {
                    if (this.isOriginal === true) {
                        this.labelEl.detach();
                    }
                    this.labelEl.css({
                        'background-color': this.state.config.labelBgColor,
                        'padding-left': 8,
                        'padding-right': 8,
                        'border': '1px solid black'
                    });
                    if (moveType === 'target') {
                        this.labelEl.css({
                            'left': target.offset.left + 0.5 * target.w - this.labelWidth * 0.5 + offset - 9, // Account for padding, border.
                            'top': target.offset.top + 0.5 * target.h + this.iconHeight * 0.5 + 5 + offset
                        });
                    } else {
                        this.labelEl.css({
                            'left': target.x - this.labelWidth * 0.5 + offset - 9, // Account for padding, border.
                            'top': target.y - this.iconHeight * 0.5 + this.iconHeight + 5 + offset
                        });
                    }
                    this.labelEl.appendTo(this.state.baseImageEl.parent());
                }

                if (moveType === 'target') {
                    target.addDraggable(this);
                } else {
                    this.x = target.x;
                    this.y = target.y;
                }

                this.zIndex = 1000;
                this.correctZIndexes();

                Targets.initializeTargetField(this);

                if (this.isOriginal === true) {
                    this.state.numDraggablesInSlider -= 1;
                    this.state.updateArrowOpacity();
                }

                if ($.isFunction(funcCallback) === true) {
                    funcCallback();
                }
            },

    // At this point the mouse was realeased, and we need to check
    // where the draggable eneded up. Based on several things, we
    // will either move the draggable back to the slider, or update
    // the input with the user's answer (X-Y position of the draggable,
    // or the ID of the target where it landed.
            'checkLandingElement': function() {
                var positionIE;

                this.mousePressed = false;
                positionIE = this.iconEl.position();

                if (this.state.config.individualTargets === true) {
                    if (this.checkIfOnTarget(positionIE) === true) {
                        this.correctZIndexes();

                        Targets.initializeTargetField(this);
                    } else {
                        if (this.onTarget !== null) {
                            this.onTarget.removeDraggable(this);
                        }

                        this.moveBackToSlider();

                        if (this.isOriginal === true) {
                            this.state.numDraggablesInSlider += 1;
                        }
                    }
                } else {
                    if (
                (positionIE.left < 0) ||
                (positionIE.left + this.iconWidth > this.state.baseImageEl.width()) ||
                (positionIE.top < 0) ||
                (positionIE.top + this.iconHeight > this.state.baseImageEl.height())
            ) {
                        this.moveBackToSlider();

                        this.x = -1;
                        this.y = -1;

                        if (this.isOriginal === true) {
                            this.state.numDraggablesInSlider += 1;
                        }
                    } else {
                        this.correctZIndexes();

                        this.x = positionIE.left + this.iconWidth * 0.5;
                        this.y = positionIE.top + this.iconHeight * 0.5;

                        Targets.initializeTargetField(this);
                    }
                }

                if (this.isOriginal === true) {
                    this.state.updateArrowOpacity();
                }
                updateInput.update(this.state);
            },

    // Determine if a draggable, after it was relased, ends up on a
    // target. We do this by iterating over all of the targets, and
    // for each one we check whether the draggable's center is
    // within the target's dimensions.
    //
    // positionIE is the object as returned by
    //
    //     this.iconEl.position()
            'checkIfOnTarget': function(positionIE) {
                var c1, target;

                for (c1 = 0; c1 < this.state.targets.length; c1 += 1) {
                    target = this.state.targets[c1];

            // If only one draggable per target is allowed, and
            // the current target already has a draggable on it
            // (with an ID different from the one we are checking
            // against), then go to next target.
                    if (
                (this.state.config.onePerTarget === true) &&
                (target.draggableList.length === 1) &&
                (target.draggableList[0].uniqueId !== this.uniqueId)
            ) {
                        continue;
                    }

            // If the target is on a draggable (from target field), we must make sure that
            // this draggable is not the same as "this" one.
                    if ((target.type === 'on_drag') && (target.draggableObj.uniqueId === this.uniqueId)) {
                        continue;
                    }

            // Check if the draggable's center coordinate is within
            // the target's dimensions. If not, go to next target.
                    if (
                (positionIE.top + this.iconHeight * 0.5 < target.offset.top) ||
                (positionIE.top + this.iconHeight * 0.5 > target.offset.top + target.h) ||
                (positionIE.left + this.iconWidth * 0.5 < target.offset.left) ||
                (positionIE.left + this.iconWidth * 0.5 > target.offset.left + target.w)
            ) {
                        continue;
                    }

            // If the draggable was moved from one target to
            // another, then we need to remove it from the
            // previous target's draggables list, and add it to the
            // new target's draggables list.
                    if ((this.onTarget !== null) && (this.onTarget.uniqueId !== target.uniqueId)) {
                        this.onTarget.removeDraggable(this);
                        target.addDraggable(this);
                    }
            // If the draggable was moved from the slider to a
            // target, remember the target, and add ID to the
            // target's draggables list.
                    else if (this.onTarget === null) {
                        target.addDraggable(this);
                    }

            // Reposition the draggable so that it's center
            // coincides with the center of the target.
                    this.snapToTarget(target);

            // Target was found.
                    return true;
                }

        // Target was not found.
                return false;
            },

            'toggleTargets': function(isEnabled) {
                var effect = isEnabled ? 'move' : null;

                this.state.baseImageEl.attr('aria-dropeffect', effect);
                $.each(this.state.targets, function(index, target) {
                    target.targetEl.attr('aria-dropeffect', effect);
                });
            },

            'snapToTarget': function(target) {
                var offset;

                offset = 0;
                if (this.state.config.targetOutline === true) {
                    offset = 1;
                }

                this.iconEl.css({
                    'left': target.offset.left + 0.5 * target.w - this.iconWidth * 0.5 + offset - this.iconElLeftOffset,
                    'top': target.offset.top + 0.5 * target.h - this.iconHeight * 0.5 + offset
                });

                if (this.labelEl !== null) {
                    this.labelEl.css({
                        'left': target.offset.left + 0.5 * target.w - this.labelWidth * 0.5 + offset - 9, // Acoount for padding, border.
                        'top': target.offset.top + 0.5 * target.h + this.iconHeight * 0.5 + 5 + offset
                    });
                }
            },

    // Go through all of the draggables subtract 1 from the z-index
    // of all whose z-index is higher than the old z-index of the
    // current element. After, set the z-index of the current
    // element to 1 + N (where N is the number of draggables - i.e.
    // the highest z-index possible).
    //
    // This will make sure that after releasing a draggable, it
    // will be on top of all of the other draggables. Also, the
    // ordering of the visibility (z-index) of the other draggables
    // will not change.
            'correctZIndexes': function() {
                var c1, highestZIndex;

                highestZIndex = -10000;

                if (this.state.config.individualTargets === true) {
                    if (this.onTarget.draggableList.length > 0) {
                        for (c1 = 0; c1 < this.onTarget.draggableList.length; c1 += 1) {
                            if (
                        (this.onTarget.draggableList[c1].zIndex > highestZIndex) &&
                        (this.onTarget.draggableList[c1].zIndex !== 1000)
                    ) {
                                highestZIndex = this.onTarget.draggableList[c1].zIndex;
                            }
                        }
                    } else {
                        highestZIndex = 0;
                    }
                } else {
                    for (c1 = 0; c1 < this.state.draggables.length; c1++) {
                        if (this.inContainer === false) {
                            if (
                        (this.state.draggables[c1].zIndex > highestZIndex) &&
                        (this.state.draggables[c1].zIndex !== 1000)
                    ) {
                                highestZIndex = this.state.draggables[c1].zIndex;
                            }
                        }
                    }
                }

                if (highestZIndex === -10000) {
                    highestZIndex = 0;
                }

                this.zIndex = highestZIndex + 1;

                this.iconEl.css('z-index', this.zIndex);
                if (this.labelEl !== null) {
                    this.labelEl.css('z-index', this.zIndex);
                }
            },

    // If a draggable was released in a wrong positione, we will
    // move it back to the slider, placing it in the same position
    // that it was dragged out of.
            'moveBackToSlider': function() {
                var c1;

                Targets.destroyTargetField(this);

                if (this.isOriginal === false) {
                    this.iconEl.remove();
                    if (this.labelEl !== null) {
                        this.labelEl.remove();
                    }

                    this.state.draggables.splice(this.stateDraggablesIndex, 1);

                    for (c1 = 0; c1 < this.state.draggables.length; c1 += 1) {
                        if (this.state.draggables[c1].stateDraggablesIndex > this.stateDraggablesIndex) {
                            this.state.draggables[c1].stateDraggablesIndex -= 1;
                        }
                    }

                    return;
                }

                this.containerEl.show();
                this.zIndex = 1;

                this.iconEl.detach();
                if (this.iconImgEl !== null) {
                    this.iconImgEl.css({
                        'width': this.iconWidthSmall,
                        'height': this.iconHeightSmall
                    });
                }
                this.iconEl.css({
                    'border': 'none',
                    'background-color': 'transparent',
                    'padding-left': 0,
                    'padding-right': 0,
                    'z-index': this.zIndex,
                    'width': this.iconWidthSmall,
                    'height': this.iconHeightSmall,
                    'left': 50 - this.iconWidthSmall * 0.5,

            // Before:
            // 'top': ((this.labelEl !== null) ? (100 - this.iconHeightSmall - 25) * 0.5 : 50 - this.iconHeightSmall * 0.5)
            // After:
                    'top': ((this.labelEl !== null) ? 37.5 : 50.0) - 0.5 * this.iconHeightSmall
                });
                this.iconEl.appendTo(this.containerEl);

                if (this.labelEl !== null) {
                    this.labelEl.detach();
                    this.labelEl.css({
                        'border': 'none',
                        'background-color': 'transparent',
                        'padding-left': 0,
                        'padding-right': 0,
                        'z-index': this.zIndex,
                        'left': 50 - this.labelWidth * 0.5,

                // Before:
                // 'top': (100 - this.iconHeightSmall - 25) * 0.5 + this.iconHeightSmall + 5
                // After:
                        'top': 42.5 + 0.5 * this.iconHeightSmall
                    });
                    this.labelEl.appendTo(this.containerEl);
                }

                this.inContainer = true;
            }
        }; // End-of: return {
    }); // End-of: define(['update_input', 'targets'], function (updateInput, Targets) {
}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define) {