openmct/platform/features/timeline/src/directives/MCTSwimlaneDrop.js

/*****************************************************************************
 * Open MCT Web, Copyright (c) 2009-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
/*global define*/

define(
    ['./SwimlaneDragConstants'],
    function (SwimlaneDragConstants) {
        "use strict";

        /**
         * Defines the `mct-swimlane-drop` directive. When a drop occurs
         * on an element with this attribute, the swimlane targeted by the drop
         * (identified by the value of this attribute, as an Angular expression)
         * will receive the dropped domain object (at which point it can handle
         * the drop, typically by inserting/reordering.)
         * @param {DndService} dndService drag-and-drop service
         */
        function MCTSwimlaneDrop(dndService) {

            // Handle dragover events
            function dragOver(e, element, swimlane) {
                var event = (e || {}).originalEvent || e,
                    height = element[0].offsetHeight,
                    rect = element[0].getBoundingClientRect(),
                    offset = event.pageY - rect.top,
                    dataTransfer = event.dataTransfer,
                    id = dndService.getData(
                        SwimlaneDragConstants.MCT_DRAG_TYPE
                    ),
                    draggedObject = dndService.getData(
                        SwimlaneDragConstants.MCT_EXTENDED_DRAG_TYPE
                    );

                if (id) {
                    // TODO: Vary this based on modifier keys
                    event.dataTransfer.dropEffect = 'move';

                    // Set the swimlane's drop highlight state; top 75% is
                    // for drop-into, bottom 25% is for drop-after.
                    swimlane.highlight(
                        offset < (height * 0.75) &&
                                swimlane.allowDropIn(id, draggedObject)
                    );
                    swimlane.highlightBottom(
                        offset >= (height * 0.75) &&
                                swimlane.allowDropAfter(id, draggedObject)
                    );

                    // Indicate that we will accept the drag
                    if (swimlane.highlight() || swimlane.highlightBottom()) {
                        event.preventDefault(); // Required in Chrome?
                        return false;
                    }
                }
            }

            // Handle drop events
            function drop(e, element, swimlane) {
                var event = (e || {}).originalEvent || e,
                    dataTransfer = event.dataTransfer,
                    id = dataTransfer.getData(
                        SwimlaneDragConstants.MCT_DRAG_TYPE
                    ),
                    draggedSwimlane = dndService.getData(
                        SwimlaneDragConstants.TIMELINE_SWIMLANE_DRAG_TYPE
                    );

                if (id) {
                    event.stopPropagation();
                    // Delegate the drop to the swimlane itself
                    swimlane.drop(id, (draggedSwimlane || {}).domainObject);
                }

                // Clear the swimlane highlights
                swimlane.highlight(false);
                swimlane.highlightBottom(false);
            }

            function link(scope, element, attrs) {
                // Lookup swimlane by evaluating this attribute
                function swimlane() {
                    return scope.$eval(attrs.mctSwimlaneDrop);
                }
                // Handle dragover
                element.on('dragover', function (e) {
                    dragOver(e, element, swimlane());
                });
                // Handle drops
                element.on('drop', function (e) {
                    drop(e, element, swimlane());
                });
                // Clear highlights when drag leaves this swimlane
                element.on('dragleave', function () {
                    swimlane().highlight(false);
                    swimlane().highlightBottom(false);
                });
            }

            return {
                // Applies to attributes
                restrict: "A",
                // Link using above function
                link: link
            };
        }

        return MCTSwimlaneDrop;
    }
);