diff --git a/src/app/components/context-menu/animations.ts b/src/app/components/context-menu/animations.ts deleted file mode 100644 index b8d69501f..000000000 --- a/src/app/components/context-menu/animations.ts +++ /dev/null @@ -1,68 +0,0 @@ -/*! - * @license - * Alfresco Example Content Application - * - * Copyright (C) 2005 - 2018 Alfresco Software Limited - * - * This file is part of the Alfresco Example Content Application. - * If the software was purchased under a paid Alfresco license, the terms of - * the paid license agreement will prevail. Otherwise, the software is - * provided under the following open source license terms: - * - * The Alfresco Example Content Application is free software: you can redistribute it and/or modify - * it under the terms of the GNU Lesser General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * The Alfresco Example Content Application is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Lesser General Public License for more details. - * - * You should have received a copy of the GNU Lesser General Public License - * along with Alfresco. If not, see . - */ - -import { - state, - style, - animate, - transition, - query, - group, - sequence -} from '@angular/animations'; - -export const contextMenuAnimation = [ - state( - 'void', - style({ - opacity: 0, - transform: 'scale(0.01, 0.01)' - }) - ), - transition( - 'void => *', - sequence([ - query('.mat-menu-content', style({ opacity: 0 })), - animate( - '100ms linear', - style({ opacity: 1, transform: 'scale(1, 0.5)' }) - ), - group([ - query( - '.mat-menu-content', - animate( - '400ms cubic-bezier(0.55, 0, 0.55, 0.2)', - style({ opacity: 1 }) - ) - ), - animate( - '300ms cubic-bezier(0.25, 0.8, 0.25, 1)', - style({ transform: 'scale(1, 1)' }) - ) - ]) - ]) - ), - transition('* => void', animate('150ms 50ms linear', style({ opacity: 0 }))) -]; diff --git a/src/app/components/context-menu/context-menu-item.component.html b/src/app/components/context-menu/context-menu-item.component.html new file mode 100644 index 000000000..cf3b25f0c --- /dev/null +++ b/src/app/components/context-menu/context-menu-item.component.html @@ -0,0 +1,39 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
\ No newline at end of file diff --git a/src/app/components/context-menu/context-menu-item.component.spec.ts b/src/app/components/context-menu/context-menu-item.component.spec.ts new file mode 100644 index 000000000..adb4567b8 --- /dev/null +++ b/src/app/components/context-menu/context-menu-item.component.spec.ts @@ -0,0 +1,107 @@ +/*! + * @license + * Alfresco Example Content Application + * + * Copyright (C) 2005 - 2018 Alfresco Software Limited + * + * This file is part of the Alfresco Example Content Application. + * If the software was purchased under a paid Alfresco license, the terms of + * the paid license agreement will prevail. Otherwise, the software is + * provided under the following open source license terms: + * + * The Alfresco Example Content Application is free software: you can redistribute it and/or modify + * it under the terms of the GNU Lesser General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * The Alfresco Example Content Application is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with Alfresco. If not, see . + */ + +import { TestBed, ComponentFixture } from '@angular/core/testing'; +import { AppTestingModule } from '../../testing/app-testing.module'; +import { AppExtensionService } from '../../extensions/extension.service'; +import { ContextMenuItemComponent } from './context-menu-item.component'; +import { ContextMenuModule } from './context-menu.module'; +import { + TranslateModule, + TranslateLoader, + TranslateFakeLoader +} from '@ngx-translate/core'; + +describe('ContextMenuComponent', () => { + let fixture: ComponentFixture; + let component: ContextMenuItemComponent; + let extensionsService; + let contextItem; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [ + AppTestingModule, + ContextMenuModule, + TranslateModule.forRoot({ + loader: { provide: TranslateLoader, useClass: TranslateFakeLoader } + }) + ], + providers: [AppExtensionService] + }); + + fixture = TestBed.createComponent(ContextMenuItemComponent); + component = fixture.componentInstance; + extensionsService = TestBed.get(AppExtensionService); + + contextItem = { + type: 'button', + id: 'action-button', + title: 'Test Button', + actions: { + click: 'TEST_EVENT' + } + }; + }); + + afterEach(() => { + fixture.destroy(); + }); + + it('should render defined menu actions items', () => { + component.actionRef = contextItem; + fixture.detectChanges(); + + const buttonElement = fixture.nativeElement.querySelector('button'); + expect(buttonElement.innerText.trim()).toBe(contextItem.title); + }); + + it('should not run action when entry has no click attribute defined', () => { + spyOn(extensionsService, 'runActionById'); + contextItem.actions = {}; + component.actionRef = contextItem; + fixture.detectChanges(); + + fixture.nativeElement + .querySelector('#action-button') + .dispatchEvent(new MouseEvent('click')); + + expect(extensionsService.runActionById).not.toHaveBeenCalled(); + }); + + it('should run action with provided action id', () => { + spyOn(extensionsService, 'runActionById'); + component.actionRef = contextItem; + fixture.detectChanges(); + + fixture.nativeElement + .querySelector('#action-button') + .dispatchEvent(new MouseEvent('click')); + + expect(extensionsService.runActionById).toHaveBeenCalledWith( + contextItem.actions.click + ); + }); +}); diff --git a/src/app/components/context-menu/context-menu-item.directive.ts b/src/app/components/context-menu/context-menu-item.component.ts similarity index 55% rename from src/app/components/context-menu/context-menu-item.directive.ts rename to src/app/components/context-menu/context-menu-item.component.ts index bc4827505..ac2a17f6f 100644 --- a/src/app/components/context-menu/context-menu-item.directive.ts +++ b/src/app/components/context-menu/context-menu-item.component.ts @@ -23,29 +23,36 @@ * along with Alfresco. If not, see . */ -import { Directive, ElementRef, OnDestroy } from '@angular/core'; -import { FocusableOption, FocusMonitor, FocusOrigin } from '@angular/cdk/a11y'; +import { Component, Input, ViewEncapsulation } from '@angular/core'; +import { ContentActionRef } from '@alfresco/adf-extensions'; +import { AppExtensionService } from '../../extensions/extension.service'; -@Directive({ - selector: '[acaContextMenuItem]' +@Component({ + selector: 'app-context-menu-item', + templateUrl: 'context-menu-item.component.html', + encapsulation: ViewEncapsulation.None, + host: { class: 'app-context-menu-item' } }) -export class ContextMenuItemDirective implements OnDestroy, FocusableOption { - constructor( - private elementRef: ElementRef, - private focusMonitor: FocusMonitor - ) { - focusMonitor.monitor(this.getHostElement(), false); +export class ContextMenuItemComponent { + @Input() + actionRef: ContentActionRef; + + constructor(private extensions: AppExtensionService) {} + + runAction() { + if (this.hasClickAction(this.actionRef)) { + this.extensions.runActionById(this.actionRef.actions.click); + } } - ngOnDestroy() { - this.focusMonitor.stopMonitoring(this.getHostElement()); + private hasClickAction(actionRef: ContentActionRef): boolean { + if (actionRef && actionRef.actions && actionRef.actions.click) { + return true; + } + return false; } - focus(origin: FocusOrigin = 'keyboard'): void { - this.focusMonitor.focusVia(this.getHostElement(), origin); - } - - private getHostElement(): HTMLElement { - return this.elementRef.nativeElement; + trackById(index: number, obj: { id: string }) { + return obj.id; } } diff --git a/src/app/components/context-menu/context-menu-item.directive.spec.ts b/src/app/components/context-menu/context-menu-item.directive.spec.ts deleted file mode 100644 index 8b2b5c92e..000000000 --- a/src/app/components/context-menu/context-menu-item.directive.spec.ts +++ /dev/null @@ -1,32 +0,0 @@ -/*! - * @license - * Alfresco Example Content Application - * - * Copyright (C) 2005 - 2018 Alfresco Software Limited - * - * This file is part of the Alfresco Example Content Application. - * If the software was purchased under a paid Alfresco license, the terms of - * the paid license agreement will prevail. Otherwise, the software is - * provided under the following open source license terms: - * - * The Alfresco Example Content Application is free software: you can redistribute it and/or modify - * it under the terms of the GNU Lesser General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * The Alfresco Example Content Application is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Lesser General Public License for more details. - * - * You should have received a copy of the GNU Lesser General Public License - * along with Alfresco. If not, see . - */ - -import { ContextMenuItemDirective } from './context-menu-item.directive'; - -describe('ContextMenuItemDirective', () => { - it('should be defined', () => { - expect(ContextMenuItemDirective).toBeDefined(); - }); -}); diff --git a/src/app/components/context-menu/context-menu.component.html b/src/app/components/context-menu/context-menu.component.html index 944503960..27964c349 100644 --- a/src/app/components/context-menu/context-menu.component.html +++ b/src/app/components/context-menu/context-menu.component.html @@ -1,48 +1,41 @@ - + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/app/components/context-menu/context-menu.component.scss b/src/app/components/context-menu/context-menu.component.scss deleted file mode 100644 index b55cc8522..000000000 --- a/src/app/components/context-menu/context-menu.component.scss +++ /dev/null @@ -1,19 +0,0 @@ -.aca-context-menu { - &__more-actions::after { - margin-left: 34px; - width: 0; - height: 0; - border-style: solid; - border-width: 5px 0 5px 5px; - content: ''; - display: inline-block; - } - - &__separator { - display: block; - margin: 0; - padding: 0; - border-top-width: 1px; - border-top-style: solid; - } -} diff --git a/src/app/components/context-menu/context-menu.component.spec.ts b/src/app/components/context-menu/context-menu.component.spec.ts index a9bb03157..46e2dae63 100644 --- a/src/app/components/context-menu/context-menu.component.spec.ts +++ b/src/app/components/context-menu/context-menu.component.spec.ts @@ -23,10 +23,104 @@ * along with Alfresco. If not, see . */ +import { + TestBed, + ComponentFixture, + fakeAsync, + tick +} from '@angular/core/testing'; +import { AppTestingModule } from '../../testing/app-testing.module'; +import { AppExtensionService } from '../../extensions/extension.service'; import { ContextMenuComponent } from './context-menu.component'; +import { ContextMenuModule } from './context-menu.module'; +import { ContextMenuOverlayRef } from './context-menu-overlay'; +import { + TranslateModule, + TranslateLoader, + TranslateFakeLoader +} from '@ngx-translate/core'; + +import { of } from 'rxjs'; +import { Store } from '@ngrx/store'; describe('ContextMenuComponent', () => { - it('should be defined', () => { - expect(ContextMenuComponent).toBeDefined(); + let fixture: ComponentFixture; + let component: ContextMenuComponent; + let contextMenuOverlayRef; + let extensionsService; + const contextItem = { + type: 'button', + id: 'action-button', + title: 'Test Button', + actions: { + click: 'TEST_EVENT' + } + }; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [ + AppTestingModule, + ContextMenuModule, + TranslateModule.forRoot({ + loader: { provide: TranslateLoader, useClass: TranslateFakeLoader } + }) + ], + providers: [ + AppExtensionService, + { + provide: ContextMenuOverlayRef, + useValue: { + close: jasmine.createSpy('close') + } + }, + { + provide: Store, + useValue: { + dispatch: () => {}, + select: () => of({ count: 1 }) + } + } + ] + }); + + fixture = TestBed.createComponent(ContextMenuComponent); + component = fixture.componentInstance; + + contextMenuOverlayRef = TestBed.get(ContextMenuOverlayRef); + extensionsService = TestBed.get(AppExtensionService); + + spyOn(extensionsService, 'getAllowedContextMenuActions').and.returnValue([ + contextItem + ]); + + fixture.detectChanges(); }); + + it('should close context menu on Escape event', () => { + document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' })); + expect(contextMenuOverlayRef.close).toHaveBeenCalled(); + }); + + it('should render defined context menu actions items', fakeAsync(() => { + component.ngAfterViewInit(); + tick(500); + + const contextMenuElements = document.body + .querySelector('.aca-context-menu') + .querySelectorAll('button'); + + expect(contextMenuElements.length).toBe(1); + expect(contextMenuElements[0].innerText).toBe(contextItem.title); + })); + + it('should run action with provided action id', fakeAsync(() => { + spyOn(extensionsService, 'runActionById'); + + component.runAction(contextItem.actions.click); + + expect(extensionsService.runActionById).toHaveBeenCalledWith( + contextItem.actions.click + ); + })); }); diff --git a/src/app/components/context-menu/context-menu.component.theme.scss b/src/app/components/context-menu/context-menu.component.theme.scss index 4332e7912..d71a433e3 100644 --- a/src/app/components/context-menu/context-menu.component.theme.scss +++ b/src/app/components/context-menu/context-menu.component.theme.scss @@ -4,14 +4,5 @@ .aca-context-menu { @include angular-material-theme($theme); - - &__separator { - border-top-color: mat-color($foreground, divider); - } - - &__more-actions::after { - border-color: transparent; - border-left-color: mat-color($primary); - } } } diff --git a/src/app/components/context-menu/context-menu.component.ts b/src/app/components/context-menu/context-menu.component.ts index 65a5f15a5..b17eb45c3 100644 --- a/src/app/components/context-menu/context-menu.component.ts +++ b/src/app/components/context-menu/context-menu.component.ts @@ -29,13 +29,10 @@ import { OnInit, OnDestroy, HostListener, - ViewChildren, - QueryList, + ViewChild, AfterViewInit } from '@angular/core'; -import { trigger } from '@angular/animations'; -import { FocusKeyManager } from '@angular/cdk/a11y'; -import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes'; +import { MatMenuTrigger } from '@angular/material'; import { AppExtensionService } from '../../extensions/extension.service'; import { AppStore } from '../../store/states'; @@ -44,42 +41,23 @@ import { Store } from '@ngrx/store'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { ContentActionRef } from '@alfresco/adf-extensions'; - import { ContextMenuOverlayRef } from './context-menu-overlay'; -import { contextMenuAnimation } from './animations'; -import { ContextMenuItemDirective } from './context-menu-item.directive'; @Component({ selector: 'aca-context-menu', templateUrl: './context-menu.component.html', - styleUrls: [ - './context-menu.component.scss', - './context-menu.component.theme.scss' - ], + styleUrls: ['./context-menu.component.theme.scss'], host: { - role: 'menu', - class: 'aca-context-menu' + class: 'aca-context-menu-holder' }, - encapsulation: ViewEncapsulation.None, - animations: [trigger('panelAnimation', contextMenuAnimation)] + encapsulation: ViewEncapsulation.None }) export class ContextMenuComponent implements OnInit, OnDestroy, AfterViewInit { private onDestroy$: Subject = new Subject(); - private _keyManager: FocusKeyManager; actions: Array = []; - @ViewChildren(ContextMenuItemDirective) - private contextMenuItems: QueryList; - - @HostListener('contextmenu', ['$event']) - handleContextMenu(event: MouseEvent) { - if (event) { - event.preventDefault(); - if (this.contextMenuOverlayRef) { - this.contextMenuOverlayRef.close(); - } - } - } + @ViewChild(MatMenuTrigger) + trigger: MatMenuTrigger; @HostListener('document:keydown.Escape', ['$event']) handleKeydownEscape(event: KeyboardEvent) { @@ -90,16 +68,6 @@ export class ContextMenuComponent implements OnInit, OnDestroy, AfterViewInit { } } - @HostListener('document:keydown', ['$event']) - handleKeydownEvent(event: KeyboardEvent) { - if (event) { - const keyCode = event.keyCode; - if (keyCode === UP_ARROW || keyCode === DOWN_ARROW) { - this._keyManager.onKeydown(event); - } - } - } - constructor( private contextMenuOverlayRef: ContextMenuOverlayRef, private extensions: AppExtensionService, @@ -114,7 +82,6 @@ export class ContextMenuComponent implements OnInit, OnDestroy, AfterViewInit { runAction(actionId: string) { this.extensions.runActionById(actionId); - this.contextMenuOverlayRef.close(); } ngOnDestroy() { @@ -134,9 +101,6 @@ export class ContextMenuComponent implements OnInit, OnDestroy, AfterViewInit { } ngAfterViewInit() { - this._keyManager = new FocusKeyManager( - this.contextMenuItems - ); - this._keyManager.setFirstItemActive(); + setTimeout(() => this.trigger.openMenu(), 0); } } diff --git a/src/app/components/context-menu/context-menu.directive.ts b/src/app/components/context-menu/context-menu.directive.ts index 0889fbfc1..2acc26031 100644 --- a/src/app/components/context-menu/context-menu.directive.ts +++ b/src/app/components/context-menu/context-menu.directive.ts @@ -43,14 +43,6 @@ export class ContextActionsDirective { @Input('acaContextEnable') enabled = true; - @HostListener('window:resize', ['$event']) - onResize(event) { - if (event && this.overlayRef) { - this.clearSelection(); - this.overlayRef.close(); - } - } - @HostListener('contextmenu', ['$event']) onContextMenuEvent(event: MouseEvent) { if (event) { @@ -69,6 +61,7 @@ export class ContextActionsDirective { ) {} private execute(event: MouseEvent) { + // todo: review this in ADF const selected = this.getSelectedRow(event); if (selected) { diff --git a/src/app/components/context-menu/context-menu.directives.spec.ts b/src/app/components/context-menu/context-menu.directives.spec.ts index b320ceed5..88516a83f 100644 --- a/src/app/components/context-menu/context-menu.directives.spec.ts +++ b/src/app/components/context-menu/context-menu.directives.spec.ts @@ -26,7 +26,37 @@ import { ContextActionsDirective } from './context-menu.directive'; describe('ContextActionsDirective', () => { - it('should be defined', () => { - expect(ContextActionsDirective).toBeDefined(); + let directive; + const contextMenuServiceMock = { + open: jasmine.createSpy('open') + }; + const storeMock = {}; + const documentListMock = {}; + + beforeEach(() => { + directive = new ContextActionsDirective( + documentListMock, + storeMock, + contextMenuServiceMock + ); + }); + + it('should not render context menu when disable property is false', () => { + directive.enabled = false; + spyOn(directive, 'getSelectedRow').and.returnValue({}); + + directive.onContextMenuEvent(new MouseEvent('contextmenu')); + + expect(contextMenuServiceMock.open).not.toHaveBeenCalled(); + }); + + it('should render context menu when disable property is true', () => { + directive.enabled = true; + spyOn(directive, 'getSelectedRow').and.returnValue({}); + spyOn(directive, 'isInSelection').and.returnValue(true); + + directive.onContextMenuEvent(new MouseEvent('contextmenu')); + + expect(contextMenuServiceMock.open).toHaveBeenCalled(); }); }); diff --git a/src/app/components/context-menu/context-menu.module.ts b/src/app/components/context-menu/context-menu.module.ts index 52f3d0be2..c49341a35 100644 --- a/src/app/components/context-menu/context-menu.module.ts +++ b/src/app/components/context-menu/context-menu.module.ts @@ -35,9 +35,9 @@ import { CoreExtensionsModule } from '../../extensions/core.extensions.module'; import { ContextActionsDirective } from './context-menu.directive'; import { ContextMenuComponent } from './context-menu.component'; -import { ContextMenuItemDirective } from './context-menu-item.directive'; import { ExtensionsModule } from '@alfresco/adf-extensions'; import { OutsideEventDirective } from './context-menu-outside-event.directive'; +import { ContextMenuItemComponent } from './context-menu-item.component'; @NgModule({ imports: [ @@ -52,13 +52,14 @@ import { OutsideEventDirective } from './context-menu-outside-event.directive'; declarations: [ ContextActionsDirective, ContextMenuComponent, - ContextMenuItemDirective, + ContextMenuItemComponent, OutsideEventDirective ], exports: [ OutsideEventDirective, ContextActionsDirective, - ContextMenuComponent + ContextMenuComponent, + ContextMenuItemComponent ], entryComponents: [ContextMenuComponent] }) diff --git a/src/app/components/context-menu/context-menu.service.spec.ts b/src/app/components/context-menu/context-menu.service.spec.ts index a51153280..b11cd0246 100644 --- a/src/app/components/context-menu/context-menu.service.spec.ts +++ b/src/app/components/context-menu/context-menu.service.spec.ts @@ -23,10 +23,48 @@ * along with Alfresco. If not, see . */ +import { TestBed } from '@angular/core/testing'; +import { Overlay } from '@angular/cdk/overlay'; +import { Injector } from '@angular/core'; +import { Store } from '@ngrx/store'; +import { of } from 'rxjs'; +import { AppConfigService } from '@alfresco/adf-core'; import { ContextMenuService } from './context-menu.service'; +import { ContextMenuModule } from './context-menu.module'; describe('ContextMenuService', () => { - it('should be defined', () => { - expect(ContextMenuService).toBeDefined(); + let contextMenuService; + const overlayConfig = { + hasBackdrop: false, + backdropClass: '', + panelClass: 'test-panel' + }; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [ContextMenuModule], + providers: [ + Overlay, + { provide: Store, useValue: { select: () => of() } }, + { provide: AppConfigService, useValue: {} } + ] + }); + + const injector = TestBed.get(Injector); + const overlay = TestBed.get(Overlay); + + contextMenuService = new ContextMenuService(injector, overlay); + }); + + it('should create a custom overlay', () => { + contextMenuService.open(overlayConfig); + + expect(document.querySelector('.test-panel')).not.toBe(null); + }); + + it('should render component', () => { + contextMenuService.open(overlayConfig); + + expect(document.querySelector('aca-context-menu')).not.toBe(null); }); }); diff --git a/src/app/components/context-menu/context-menu.service.ts b/src/app/components/context-menu/context-menu.service.ts index ab086eb4f..561b5ffff 100644 --- a/src/app/components/context-menu/context-menu.service.ts +++ b/src/app/components/context-menu/context-menu.service.ts @@ -18,20 +18,6 @@ export class ContextMenuService { this.attachDialogContainer(overlay, config, overlayRef); - overlay.backdropClick().subscribe(() => overlayRef.close()); - - // prevent native contextmenu on overlay element if config.hasBackdrop is true - if (config.hasBackdrop) { - (overlay)._backdropElement.addEventListener( - 'contextmenu', - () => { - event.preventDefault(); - (overlay)._backdropClick.next(null); - }, - true - ); - } - return overlayRef; } diff --git a/src/app/components/libraries/libraries.component.html b/src/app/components/libraries/libraries.component.html index e1807ec98..fc267691e 100644 --- a/src/app/components/libraries/libraries.component.html +++ b/src/app/components/libraries/libraries.component.html @@ -18,7 +18,6 @@