angular2-json-schema-form/dist/library/utilities/orderable.directive.js

Angular 2 JSON Schema Form builder

"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require("@angular/core");
var json_schema_form_service_1 = require("../json-schema-form.service");
var index_1 = require("./index");
var OrderableDirective = (function () {
    function OrderableDirective(elementRef, jsf) {
        this.elementRef = elementRef;
        this.jsf = jsf;
        this.listen = false;
        this.overParentElement = false;
        this.overChildElement = false;
    }
    OrderableDirective.prototype.ngOnInit = function () {
        if (this.orderable && this.layoutNode && this.layoutIndex && this.dataIndex) {
            this.element = this.elementRef.nativeElement;
            this.element.draggable = true;
            this.arrayPointer = index_1.JsonPointer.compile(index_1.JsonPointer.parse(this.jsf.getLayoutPointer(this)).slice(0, -1));
            this.listen = true;
        }
    };
    OrderableDirective.prototype.onDragStart = function (event) {
        if (this.listen) {
            this.element.classList.add('dragging');
            event.dataTransfer.effectAllowed = 'move';
            sessionStorage.setItem(this.arrayPointer, this.dataIndex[this.dataIndex.length - 1] + '');
            event.dataTransfer.setData('text/plain', this.dataIndex[this.dataIndex.length - 1] + this.arrayPointer);
        }
    };
    OrderableDirective.prototype.onDragOver = function (event) {
        if (event.preventDefault)
            event.preventDefault();
        event.dataTransfer.dropEffect = 'move';
        return false;
    };
    OrderableDirective.prototype.onDragEnd = function (event) {
        event.preventDefault();
        if (this.listen) {
            this.element.classList.remove('dragging');
        }
    };
    OrderableDirective.prototype.onDragEnter = function (event) {
        if (this.overParentElement) {
            return this.overChildElement = true;
        }
        else {
            this.overParentElement = true;
        }
        if (this.listen) {
            var sourceArrayIndex = sessionStorage.getItem(this.arrayPointer);
            if (sourceArrayIndex !== null) {
                if (this.dataIndex[this.dataIndex.length - 1] < +sourceArrayIndex) {
                    this.element.classList.add('drag-target-top');
                }
                else if (this.dataIndex[this.dataIndex.length - 1] > +sourceArrayIndex) {
                    this.element.classList.add('drag-target-bottom');
                }
            }
        }
    };
    OrderableDirective.prototype.onDragLeave = function (event) {
        if (this.overChildElement) {
            this.overChildElement = false;
        }
        else if (this.overParentElement) {
            this.overParentElement = false;
        }
        if (!this.overParentElement && !this.overChildElement && this.listen) {
            this.element.classList.remove('drag-target-top');
            this.element.classList.remove('drag-target-bottom');
        }
    };
    OrderableDirective.prototype.onDrop = function (event) {
        if (this.listen) {
            this.element.classList.remove('drag-target-top');
            this.element.classList.remove('drag-target-bottom');
            var sourceArrayIndex = +sessionStorage.getItem(this.arrayPointer);
            if (sourceArrayIndex !== this.dataIndex[this.dataIndex.length - 1]) {
                this.jsf.moveArrayItem(this, sourceArrayIndex, this.dataIndex[this.dataIndex.length - 1]);
            }
            sessionStorage.removeItem(this.arrayPointer);
        }
        return false;
    };
    return OrderableDirective;
}());
__decorate([
    core_1.Input(),
    __metadata("design:type", Boolean)
], OrderableDirective.prototype, "orderable", void 0);
__decorate([
    core_1.Input(),
    __metadata("design:type", Object)
], OrderableDirective.prototype, "layoutNode", void 0);
__decorate([
    core_1.Input(),
    __metadata("design:type", Array)
], OrderableDirective.prototype, "layoutIndex", void 0);
__decorate([
    core_1.Input(),
    __metadata("design:type", Array)
], OrderableDirective.prototype, "dataIndex", void 0);
__decorate([
    core_1.HostListener('dragstart', ['$event']),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], OrderableDirective.prototype, "onDragStart", null);
__decorate([
    core_1.HostListener('dragover', ['$event']),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], OrderableDirective.prototype, "onDragOver", null);
__decorate([
    core_1.HostListener('dragend', ['$event']),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], OrderableDirective.prototype, "onDragEnd", null);
__decorate([
    core_1.HostListener('dragenter', ['$event']),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], OrderableDirective.prototype, "onDragEnter", null);
__decorate([
    core_1.HostListener('dragleave', ['$event']),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], OrderableDirective.prototype, "onDragLeave", null);
__decorate([
    core_1.HostListener('drop', ['$event']),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], OrderableDirective.prototype, "onDrop", null);
OrderableDirective = __decorate([
    core_1.Directive({
        selector: '[orderable]',
    }),
    __metadata("design:paramtypes", [core_1.ElementRef,
        json_schema_form_service_1.JsonSchemaFormService])
], OrderableDirective);
exports.OrderableDirective = OrderableDirective;
//# sourceMappingURL=orderable.directive.js.map