/** * * @license * Copyright 2017 SAP Ariba * * 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. * * * */ import { ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core'; import { Datatable2Component } from '../datatable2.component'; import { DomUtilsService } from '../../../core/dom-utils.service'; import { DTColumn2Component } from '../column/dt-column.component'; /** * Directive used inside DT in order to support table column re-ordering. This manages all the * D&D necessary logic for this functionality. * * [dtDraggableCol] is used inside the `DTColumnComponent` like this: * * * todo: Figure out better way how to highligt dropping target. now we using linear-gradient * background which is not ideal. Maybe create a DIV and move around as we are dragging ? * * */ export declare class DTDraggableColumnDirective implements OnInit, OnDestroy { private element; private dt; private column; private domUtils; private ngZone; /** * Current Column index number * */ dndIndex: number; /** * Holds information about our dragging direction UP and DOWN in order to assign correct style * that highlights the row at the top or bottom * */ private dragDir; /** * This property tells us if we are on Left part of the column or right part of the column * Just reusing this enum with its left/right */ private dropPos; /** * * Current drag Y coordinates which is used together with the dragDir when assinging dragging * direction. * */ private dragX; /** * listeners handlers here - the return from .bind(this). */ private eventHandlers; constructor(element: ElementRef, dt: Datatable2Component, column: DTColumn2Component, domUtils: DomUtilsService, ngZone: NgZone); ngOnInit(): void; ngOnDestroy(): void; /** * Setups listeners and returns handle to them so we can later on unsubscribe. */ private setupEventListeners(); /** * Removes all the created listeners inside destroy() callback */ private releaseEventListeners(); /** * * This is first event where we: * * - Mark element draggable to enable D&D * * event.target usually contains reference to TD element */ private onMouseDownEvent(event); /** * This is second triggered event when the actual dragging starts. Here we need to disable * dragged columns and save information that are common to a table. * * Marking column disabled with the style .dt-col-dragging using setTimeout is needed as * if we would go without it then D&D framework would create a copy of column in disabled state. * Now we grab a col with active state and after a 200ms delay we disable the original col. * */ private onDragStartEvent(event); /** * For frozen column column case it return if we are dealing with the left or * right table * */ private tablePos(target); /** * * This events happens anytime as we drag over columns. This event triggered after certain * delay. In here we calculate the mouse movement to identify if we are going LEFT or * RIGHT. * * This is mainly needed to mark a col with the correct line on LEFT or RIGHT to visually * show a user where we are. * * Once we know the direction and the drop target is valid we mark the Col with correct class * that does the trick */ private onDragOverEvent(event); /** * This is finishing event just before D&D is done. It takes current information and * broadcast them to the DT so DT can do necessary row reordering * * */ private onDropEvent(event); /** * Every time we drag over the element we apply some classes to the it. this method does the * opposite which is to remove everything so we are ready for the next row * * */ private onDragLeaveEvent(event); /** * * This is last event within D&D flow. Mainly used to clean up all the resource that has not * been clean up already inside onDropEvent. * */ private onDragEndEvent(event); /** * Assign CSS classes to the col to create an highlighting effect to capture current position * for the user. * * Based on the Drag direction we either apply * css class that creates a line on left or right. * * */ private markColWithClass(event, activeCol); /** * * Drop target must be only another TD and it cannot be the element itself plus, * if we are dragging across the table (frozen col) then its always ok, otherwise we cannot * drop it column itself or e.g. drag column into sibling column and try to drop on the closest * half to the original column. * */ private isValidDropTarget(event); /** * private * */ private clearClasses(td); /** * Are we in frozen column mode and are we dragging from one table to another? * * private */ private isXrossTable(); /** * Some column can be marked as NOT droppable in this case we should not allow to move * them. This is mainly used for outline tables where we need expandable column first one */ private isDroppable(); /** * Some column can be marked as NOT droppable in this case we should not allow to move * them. This is mainly used for outline tables where we need expandable column first one */ private numOfColumnLeftInSource(); /** * private * */ private dragDirToString(); }