UI-Bootstrap Draggable Modal TypeScript Directive

draggableModal.directive.ts

module App.Directives {
 
    /*
     * Ein Ui Bootstrap Modal draggable/verschiebbar machen
     * 
     * Verwendung: 
     *
     * Einfach in AngularJs registrieren und dann sind alle Modals Draggable.
     *
     */
    export class DraggableModal implements ng.IDirective {
        public restrict: string = "AC";
        public scope = {}
        
        public link = ($scope: any, element: JQuery, attr: ng.IAttributes) => {
            var draggableStr = "draggableModal";
            var header = $(".modal-header", element);
 
            header.on('mousedown', (mouseDownEvent) => {
                var modalDialog = element;
                //Das Offset unseres Header elements merken, wenn geklickt wird, wird benötigt um die Mausposition zu bestimmen im Header Div Element
                var offset = header.offset();
             
                //an dem Element was wir bewegen wollen die DraggableKlasse hinzufügen
                modalDialog.addClass(draggableStr).parents().on('mousemove', (mouseMoveEvent) => {
                    //Per selector unser Element mit der Draggable Klasse suchen und dort den passenden Offset setzen.
                    $("." + draggableStr, modalDialog.parents()).offset({
                        top: mouseMoveEvent.pageY - (mouseDownEvent.pageY - offset.top),
                        left: mouseMoveEvent.pageX - (mouseDownEvent.pageX - offset.left)
                    });
                }).on('mouseup', () => {
                    //Wenn die Maus wieder losgelassen wird, die Draggable Klasse wieder entfernen,
                    //damit findet auch der selector vom mouseMove Element keine Element mehr an dem er das Offset ändern kann 
                    //und das Move Event ist beendet.
                    modalDialog.removeClass(draggableStr);
                });
            });
        }
 
        //#region Angular Module Definition
        private static _module: ng.IModule;
        public static get module(): ng.IModule {
            if (this._module) {
                return this._module;
            }
            this._module = angular.module('draggableModal', []);
            //Die Direktive bindet sich direkt an die Modal-Dialog CSS klasse die von Ui-Bootstrap verwendet wird.
            this._module.directive('modalDialog', [() => { return new DraggableModal(); }]);
            return this._module;
        }
        //#endregion
    }
}