Merge pull request #6287 from opf/housekeeping/convert-focus-directive

Convert focus directive

[ci skip]

frontend/app/angular4-modules.ts

@@ -137,7 +137,6 @@ import {WorkPackageEditActionsBarComponent} from 'core-components/common/edit-ac
 import {WorkPackageCopyFullViewComponent} from 'core-components/wp-copy/wp-copy-full-view.component';
 import {WorkPackageNewSplitViewComponent} from 'core-components/wp-new/wp-new-split-view.component';
 import {WorkPackageCopySplitViewComponent} from 'core-components/wp-copy/wp-copy-split-view.component';
-import {FocusWithinDirective} from 'core-components/common/focus-within/focus-within.upgraded.directive';
 import {ClickOnKeypressComponent} from 'core-app/ui_components/click-on-keypress-upgraded.component';
 import {AutocompleteSelectDecorationComponent} from 'core-components/common/autocomplete-select-decoration/autocomplete-select-decoration.component';
 import {OPContextMenuService} from 'core-components/op-context-menu/op-context-menu.service';
@@ -220,6 +219,7 @@ import {QuerySharingForm} from "core-components/modals/share-modal/query-sharing
 import {RenameQueryModal} from "core-components/modals/rename-query-modal/rename-query.modal";
 import {FocusHelperService} from 'core-components/common/focus/focus-helper';
 import {WpDestroyModal} from "core-components/modals/wp-destroy-modal/wp-destroy.modal";
+import {FocusWithinDirective} from "core-components/common/focus/focus-within.upgraded.directive";
 
 @NgModule({
   imports: [

frontend/app/components/angular/downgrade-attribute-directive.ts

@@ -0,0 +1,16 @@
+
+// Based on wrapper by @banjankri
+// https://github.com/angular/angular/issues/16695#issuecomment-336456199
+import {downgradeComponent} from "@angular/upgrade/static";
+
+export function downgradeAttributeDirective(componentClass:new(...args:any[]) => any) {
+  const wrapper = function($compile:any, $injector:any, $parse:any) {
+    const factory = downgradeComponent({ component: componentClass });
+    const component = factory($compile, $injector, $parse);
+    component.restrict = "AE";
+    return component;
+  };
+  wrapper.$inject = ["$compile", "$injector", "$parse"];
+  return wrapper;
+}
+

frontend/app/components/common/focus/focus.directive.ts

@@ -26,43 +26,31 @@
 // See docs/COPYRIGHT.rdoc for more details.
 //++
 
-// TODO move to UI components
-module.exports = function(FocusHelper) {
-
-  function isSelect2Element(attrs) {
-    var select2attributes = Object.keys(attrs).filter(function(attribute) {
-      return attribute.search(/select2/i) >= 0;
-    });
-
-    return select2attributes.length > 0;
+import {AfterViewInit, Directive, ElementRef, Input} from "@angular/core";
+import {FocusHelperService} from "core-components/common/focus/focus-helper";
+import {opUiComponentsModule} from "core-app/angular-modules";
+import {downgradeAttributeDirective} from "core-components/angular/downgrade-attribute-directive";
+
+@Directive({
+  selector: '[focus]'
+})
+export class FocusDirective implements AfterViewInit {
+  @Input('focus') condition:boolean;
+  @Input('focusPriority') priority?:number = 0;
+
+  constructor(readonly FocusHelper:FocusHelperService,
+              readonly elementRef:ElementRef) {
   }
 
-  function updateFocus(scope, element, attrs) {
-    var condition = (attrs.focus) ? scope.$eval(attrs.focus) : true;
+  ngAfterViewInit() {
+    this.updateFocus();
+  }
 
-    if (condition) {
-      var prio = 0;
-      if (attrs.focusPriority) {
-        prio = scope.$eval(attrs.focusPriority);
-        // Special case: Treat 'true' as 1 for convenience
-        if (prio === true) {
-          prio = 1;
-        } else {
-          prio = Number.parseInt(prio);
-        }
-      }
-      FocusHelper.focusElement(element, prio);
+  private updateFocus() {
+    if (this.condition) {
+      this.FocusHelper.focusElement(this.elementRef.nativeElement, this.priority);
     }
   }
+}
 
-  return {
-    link: function(scope, element, attrs) {
-
-      updateFocus(scope, element, attrs);
-
-      scope.$on('updateFocus', function() {
-        updateFocus(scope, element, attrs);
-      });
-    }
-  };
-};
+opUiComponentsModule. directive('focus', downgradeAttributeDirective(FocusDirective));

frontend/app/ui_components/index.js

@@ -36,10 +36,6 @@ angular.module('openproject.uiComponents')
   ])
   .constant('ENTER_KEY', 13)
   .directive('expandableSearch', ['ENTER_KEY', require('./expandable-search')])
-  .directive('focus', [
-    'FocusHelper',
-    require('./focus-directive')
-  ])
   .service('I18n', [require('./i18n')])
   .directive('persistentToggle', [
     '$timeout',