From 12e86ed2c783dc596badc4aefcaa77615a8e61bf Mon Sep 17 00:00:00 2001 From: Wieland Lindenthal Date: Fri, 27 Apr 2018 13:56:22 +0200 Subject: [PATCH] Migrate WP-Resize from AngularJS to Angular (#6282) [ci skip] --- frontend/app/angular4-modules.ts | 4 +- ...r.directive.ts => wp-resizer.component.ts} | 67 ++++++------------- .../wp-resizer/wp-resizer.directive.html | 2 - 3 files changed, 22 insertions(+), 51 deletions(-) rename frontend/app/components/wp-resizer/{wp-resizer.directive.ts => wp-resizer.component.ts} (79%) delete mode 100644 frontend/app/components/wp-resizer/wp-resizer.directive.html diff --git a/frontend/app/angular4-modules.ts b/frontend/app/angular4-modules.ts index fe746ead38..591d970572 100644 --- a/frontend/app/angular4-modules.ts +++ b/frontend/app/angular4-modules.ts @@ -50,7 +50,7 @@ import {WorkPackageTableSortByService} from 'core-components/wp-fast-table/state import {WorkPackageTableTimelineService} from 'core-components/wp-fast-table/state/wp-table-timeline.service'; import {WorkPackageInlineCreateComponent,} from 'core-components/wp-inline-create/wp-inline-create.component'; import {KeepTabService} from 'core-components/wp-single-view-tabs/keep-tab/keep-tab.service'; -import {WpResizerDirectiveUpgraded} from 'core-components/wp-resizer/wp-resizer.directive'; +import {WpResizerDirective} from 'core-components/wp-resizer/wp-resizer.component'; import {SortHeaderDirective} from 'core-components/wp-table/sort-header/sort-header.directive'; import {WorkPackageTablePaginationComponent} from 'core-components/wp-table/table-pagination/wp-table-pagination.component'; import {WorkPackageTimelineTableController} from 'core-components/wp-table/timeline/container/wp-timeline-container.directive'; @@ -334,7 +334,7 @@ import {RenameQueryModal} from "core-components/modals/rename-query-modal/rename WorkPackageDetailsViewButtonComponent, WorkPackageTimelineButtonComponent, WorkPackageZenModeButtonComponent, - WpResizerDirectiveUpgraded, + WpResizerDirective, WpCustomActionComponent, WpCustomActionsComponent, WorkPackageTableSumsRowController, diff --git a/frontend/app/components/wp-resizer/wp-resizer.directive.ts b/frontend/app/components/wp-resizer/wp-resizer.component.ts similarity index 79% rename from frontend/app/components/wp-resizer/wp-resizer.directive.ts rename to frontend/app/components/wp-resizer/wp-resizer.component.ts index f4a8f6793a..30cf7c93e1 100644 --- a/frontend/app/components/wp-resizer/wp-resizer.directive.ts +++ b/frontend/app/components/wp-resizer/wp-resizer.component.ts @@ -1,5 +1,3 @@ -import {Directive, ElementRef, Injector, Input} from '@angular/core'; -import {UpgradeComponent} from '@angular/upgrade/static'; //-- copyright // OpenProject is a project management system. // Copyright (C) 2012-2015 the OpenProject Foundation (OPF) @@ -27,23 +25,31 @@ import {UpgradeComponent} from '@angular/upgrade/static'; // // See doc/COPYRIGHT.rdoc for more details. //++ -import {openprojectModule} from '../../angular-modules'; -export class WorkPackageResizerController { +import {Component, ElementRef, HostListener, Injector, Input, OnDestroy, OnInit} from '@angular/core'; + +@Component({ + selector: 'wp-resizer', + template: `
` +}) + +export class WpResizerDirective implements OnInit, OnDestroy { + @Input() elementClass:string; + @Input() resizeEvent:string; + @Input() localStorageKey:string; + private resizingElement:HTMLElement; private elementFlex:number; private oldPosition:number; private mouseMoveHandler:any; - public resizeEvent:string; - public elementClass:string; - public localStorageKey:string; + private element:HTMLElement; public moving:boolean = false; - constructor(public $element:ng.IAugmentedJQuery) { + constructor(private elementRef:ElementRef) { } - $onInit() { + ngOnInit() { // Get element this.resizingElement = document.getElementsByClassName(this.elementClass)[0]; @@ -63,15 +69,15 @@ export class WorkPackageResizerController { this.resizingElement.classList.toggle('-columns-2', this.elementFlex > 700); // Add event listener - this.$element[0].addEventListener('mousedown', this.handleMouseDown.bind(this)); - window.addEventListener('mouseup', this.handleMouseUp.bind(this)); + this.element = this.elementRef.nativeElement; } - $onDestroy() { + ngOnDestroy() { // Reset the style when killing this directive, otherwise the style remains this.resizingElement.style.flexBasis = null; } + @HostListener('mousedown', ['$event']) private handleMouseDown(e:MouseEvent) { e.preventDefault(); e.stopPropagation(); @@ -97,6 +103,7 @@ export class WorkPackageResizerController { } } + @HostListener('window:mouseup', ['$event']) private handleMouseUp(e:MouseEvent):boolean { if (!this.moving) { return true; @@ -106,7 +113,7 @@ export class WorkPackageResizerController { window.removeEventListener('mousemove', this.mouseMoveHandler); // Change cursor icon back - document.getElementsByTagName("body")[0].style.cursor = 'auto'; + document.body.style.cursor = 'auto'; // Take care at the end that the elemntFlex-Value is the same as the acutal value // When the mouseup is outside the container these values will differ @@ -148,37 +155,3 @@ export class WorkPackageResizerController { element.style.flexBasis = newValue + 'px'; } } - -function wpResizer():any { - return { - restrict: 'E', - templateUrl: '/components/wp-resizer/wp-resizer.directive.html', - scope: { - elementClass: '<', - resizeEvent: '@', - localStorageKey: '<' - }, - - bindToController: true, - controllerAs: '$ctrl', - controller: WorkPackageResizerController - }; -} - -openprojectModule.directive('wpResizer', wpResizer); - -@Directive({ - selector: 'wp-resizer' -}) -export class WpResizerDirectiveUpgraded extends UpgradeComponent { - - @Input() elementClass:string; - - @Input() resizeEvent:string; - - @Input() localStorageKey:string; - - constructor(elementRef:ElementRef, injector:Injector) { - super('wpResizer', elementRef, injector); - } -} diff --git a/frontend/app/components/wp-resizer/wp-resizer.directive.html b/frontend/app/components/wp-resizer/wp-resizer.directive.html deleted file mode 100644 index e41d804534..0000000000 --- a/frontend/app/components/wp-resizer/wp-resizer.directive.html +++ /dev/null @@ -1,2 +0,0 @@ -
-