New packages org (#2639)

New packages org

lib/core/context-menu/context-menu-holder.component.spec.ts

@@ -0,0 +1,263 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { ViewportRuler } from '@angular/cdk/scrolling';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ContextMenuHolderComponent } from './context-menu-holder.component';
+import { ContextMenuModule } from './context-menu.module';
+import { ContextMenuService } from './context-menu.service';
+
+describe('ContextMenuHolderComponent', () => {
+    let fixture: ComponentFixture<ContextMenuHolderComponent>;
+    let component: ContextMenuHolderComponent;
+    let contextMenuService: ContextMenuService;
+    let overlayContainer = {
+        getContainerElement: () => ({
+            addEventListener: () => {},
+            querySelector: (val) => ({
+                name: val,
+                clientWidth: 0,
+                clientHeight: 0,
+                parentElement: {
+                    style: {
+                        left: 0,
+                        top: 0
+                    }
+                }
+            })
+
+        })
+    };
+
+    let getViewportRect = {
+        getViewportRect: () => ({
+            left: 0, top: 0, width: 1014, height: 686, bottom: 0, right: 0
+        })
+    };
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+                imports: [
+                    ContextMenuModule
+                ],
+                providers: [
+                    {
+                        provide: OverlayContainer,
+                        useValue: overlayContainer
+                    },
+                    {
+                        provide: ViewportRuler,
+                        useValue: getViewportRect
+                    }
+                ]
+        });
+
+        fixture = TestBed.createComponent(ContextMenuHolderComponent);
+        component = fixture.componentInstance;
+        contextMenuService = TestBed.get(ContextMenuService);
+
+        fixture.detectChanges();
+    });
+
+    beforeEach(() => {
+        spyOn(component.menuTrigger, 'openMenu');
+    });
+
+    describe('Events', () => {
+        it('should show menu on service event', () => {
+            spyOn(component, 'showMenu');
+
+            contextMenuService.show.next(<any> {});
+
+            expect(component.showMenu).toHaveBeenCalled();
+        });
+
+        it('should set DOM element reference on  menu open event', () => {
+            component.menuTrigger.onMenuOpen.next();
+
+            expect(component.mdMenuElement.name).toBe('.context-menu');
+        });
+
+        it('should reset DOM element reference on  menu close event', () => {
+            component.menuTrigger.onMenuClose.next();
+
+            expect(component.mdMenuElement).toBe(null);
+        });
+    });
+
+    describe('onMenuItemClick()', () => {
+        const menuItem = {
+            model: {
+                disabled: false
+            },
+            subject: {
+                next: (val) => val
+            }
+        };
+
+        const event = {
+            preventDefault: () => null,
+            stopImmediatePropagation: () => null
+        };
+
+        beforeEach(() => {
+            spyOn(menuItem.subject, 'next');
+        });
+
+        it('should emit when link is not disabled', () => {
+            component.onMenuItemClick(<any> event, menuItem);
+
+            expect(menuItem.subject.next).toHaveBeenCalledWith(menuItem);
+        });
+
+        it('should not emit when link is disabled', () => {
+            menuItem.model.disabled = true;
+            component.onMenuItemClick(<any> event, menuItem);
+
+            expect(menuItem.subject.next).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('showMenu()', () => {
+        it('should open menu panel', () => {
+            component.showMenu(<any> {}, [{}]);
+
+            expect(component.menuTrigger.openMenu).toHaveBeenCalled();
+        });
+    });
+
+    describe('Menu position', () => {
+        beforeEach(() => {
+            component.menuTrigger.onMenuOpen.next();
+            component.mdMenuElement.clientHeight = 160;
+            component.mdMenuElement.clientWidth = 200;
+        });
+
+        it('should set position to mouse position', () => {
+            const contextMenuEvent = {
+                clientX: 100,
+                clientY: 210
+            };
+
+            component.showMenu(<any> contextMenuEvent, [{}]);
+
+            expect(component.mdMenuElement.parentElement.style).toEqual({
+                left: '100px',
+                top: '210px'
+            });
+        });
+
+        it('should ajust position relative to right margin of the screen', () => {
+            const contextMenuEvent = {
+                clientX: 1000,
+                clientY: 210
+            };
+
+            component.showMenu(<any> contextMenuEvent, [{}]);
+
+            expect(component.mdMenuElement.parentElement.style).toEqual({
+                left: '800px',
+                top: '210px'
+            });
+        });
+
+        it('should ajust position relative to bottom margin of the screen', () => {
+            const contextMenuEvent = {
+                clientX: 100,
+                clientY: 600
+            };
+
+            component.showMenu(<any> contextMenuEvent, [{}]);
+
+            expect(component.mdMenuElement.parentElement.style).toEqual({
+                left: '100px',
+                top: '440px'
+            });
+        });
+
+        it('should ajust position relative to bottom - right margin of the screen', () => {
+            const contextMenuEvent = {
+                clientX: 900,
+                clientY: 610
+            };
+
+            component.showMenu(<any> contextMenuEvent, [{}]);
+
+            expect(component.mdMenuElement.parentElement.style).toEqual({
+                left: '700px',
+                top: '450px'
+            });
+        });
+    });
+
+    describe('Menu direction', () => {
+        beforeEach(() => {
+            component.menuTrigger.onMenuOpen.next();
+            component.mdMenuElement.clientHeight = 160;
+            component.mdMenuElement.clientWidth = 200;
+        });
+
+        it('should set default menu direction', () => {
+            const contextMenuEvent = {
+                clientX: 100,
+                clientY: 210
+            };
+
+            component.showMenu(<any> contextMenuEvent, [{}]);
+
+            expect(component.menuTrigger.menu.xPosition).toBe('after');
+            expect(component.menuTrigger.menu.yPosition).toBe('below');
+        });
+
+        it('should ajust direction relative to right margin of the screen', () => {
+            const contextMenuEvent = {
+                clientX: 1000,
+                clientY: 210
+            };
+
+            component.showMenu(<any> contextMenuEvent, [{}]);
+
+            expect(component.menuTrigger.menu.xPosition).toBe('before');
+            expect(component.menuTrigger.menu.yPosition).toBe('below');
+        });
+
+        it('should ajust direction relative to bottom margin of the screen', () => {
+            const contextMenuEvent = {
+                clientX: 100,
+                clientY: 600
+            };
+
+            component.showMenu(<any> contextMenuEvent, [{}]);
+
+            expect(component.menuTrigger.menu.xPosition).toBe('after');
+            expect(component.menuTrigger.menu.yPosition).toBe('above');
+        });
+
+        it('should ajust position relative to bottom - right margin of the screen', () => {
+            const contextMenuEvent = {
+                clientX: 900,
+                clientY: 610
+            };
+
+            component.showMenu(<any> contextMenuEvent, [{}]);
+
+            expect(component.menuTrigger.menu.xPosition).toBe('before');
+            expect(component.menuTrigger.menu.yPosition).toBe('above');
+        });
+    });
+});

lib/core/context-menu/context-menu-holder.component.ts

@@ -0,0 +1,169 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { ViewportRuler } from '@angular/cdk/scrolling';
+import { Component, HostListener, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { MatMenuTrigger } from '@angular/material';
+import { Subscription } from 'rxjs/Rx';
+import { ContextMenuService } from './context-menu.service';
+
+@Component({
+    selector: 'adf-context-menu-holder, context-menu-holder',
+    template: `
+        <button mat-button [matMenuTriggerFor]="contextMenu"></button>
+        <mat-menu #contextMenu="matMenu" class="context-menu">
+            <button
+                *ngFor="let link of links"
+                mat-menu-item
+                (click)="onMenuItemClick($event, link)"
+                [attr.disabled]="link.model?.disabled || undefined">
+                <mat-icon *ngIf="showIcons && link.model?.icon">
+                    {{ link.model?.icon }}
+                </mat-icon>
+                    {{link.title || link.model?.title}}
+            </button>
+        </mat-menu>
+    `
+})
+export class ContextMenuHolderComponent implements OnInit, OnDestroy {
+    links = [];
+
+    private mouseLocation: { left: number, top: number } = {left: 0, top: 0};
+    private menuElement = null;
+    private openSubscription: Subscription;
+    private closeSubscription: Subscription;
+    private contextSubscription: Subscription;
+    private contextMenuListenerFn: () => void;
+
+    @Input()
+    showIcons: boolean = false;
+
+    @ViewChild(MatMenuTrigger)
+    menuTrigger: MatMenuTrigger;
+
+    @HostListener('contextmenu', ['$event'])
+    onShowContextMenu(event?: MouseEvent) {
+        if (event) {
+            event.preventDefault();
+        }
+    }
+
+    @HostListener('window:resize', ['$event'])
+    onResize(event) {
+        if (this.mdMenuElement) {
+            this.setPosition();
+        }
+    }
+
+    constructor(
+            private viewport: ViewportRuler,
+            private overlayContainer: OverlayContainer,
+            private contextMenuService: ContextMenuService,
+            private renderer: Renderer2
+    ) {}
+
+    ngOnInit() {
+        this.contextSubscription = this.contextMenuService.show.subscribe(e => this.showMenu(e.event, e.obj));
+
+        this.openSubscription = this.menuTrigger.onMenuOpen.subscribe(() => {
+            const container = this.overlayContainer.getContainerElement();
+            if (container) {
+                this.contextMenuListenerFn = this.renderer.listen(container, 'contextmenu', (e: Event) => {
+                    e.preventDefault();
+                });
+            }
+            this.menuElement = this.getContextMenuElement();
+        });
+
+        this.closeSubscription = this.menuTrigger.onMenuClose.subscribe(() => {
+            this.menuElement = null;
+            if (this.contextMenuListenerFn) {
+                this.contextMenuListenerFn();
+            }
+        });
+    }
+
+    ngOnDestroy() {
+        if (this.contextMenuListenerFn) {
+            this.contextMenuListenerFn();
+        }
+        this.contextSubscription.unsubscribe();
+        this.openSubscription.unsubscribe();
+        this.closeSubscription.unsubscribe();
+        this.menuElement = null;
+    }
+
+    onMenuItemClick(event: Event, menuItem: any): void {
+        if (menuItem && menuItem.model && menuItem.model.disabled) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            return;
+        }
+        menuItem.subject.next(menuItem);
+    }
+
+    showMenu(e, links) {
+        this.links = links;
+
+        if (e) {
+            this.mouseLocation = {
+                left: e.clientX,
+                top: e.clientY
+            };
+        }
+
+        this.menuTrigger.openMenu();
+
+        if (this.mdMenuElement) {
+            this.setPosition();
+        }
+    }
+
+    get mdMenuElement() {
+        return this.menuElement;
+    }
+
+    private locationCss() {
+        return {
+            left: this.mouseLocation.left + 'px',
+            top: this.mouseLocation.top + 'px'
+        };
+    }
+
+    private setPosition() {
+        if (this.mdMenuElement.clientWidth + this.mouseLocation.left > this.viewport.getViewportRect().width) {
+            this.menuTrigger.menu.xPosition = 'before';
+            this.mdMenuElement.parentElement.style.left = this.mouseLocation.left - this.mdMenuElement.clientWidth + 'px';
+        } else {
+            this.menuTrigger.menu.xPosition = 'after';
+            this.mdMenuElement.parentElement.style.left = this.locationCss().left;
+        }
+
+        if (this.mdMenuElement.clientHeight + this.mouseLocation.top > this.viewport.getViewportRect().height) {
+            this.menuTrigger.menu.yPosition = 'above';
+            this.mdMenuElement.parentElement.style.top = this.mouseLocation.top - this.mdMenuElement.clientHeight + 'px';
+        } else {
+            this.menuTrigger.menu.yPosition = 'below';
+            this.mdMenuElement.parentElement.style.top = this.locationCss().top;
+        }
+    }
+
+    private getContextMenuElement() {
+        return this.overlayContainer.getContainerElement().querySelector('.context-menu');
+    }
+}

lib/core/context-menu/context-menu.directive.spec.ts

@@ -0,0 +1,72 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ContextMenuDirective } from './context-menu.directive';
+import { ContextMenuService } from './context-menu.service';
+
+describe('ContextMenuDirective', () => {
+
+    let contextMenuService;
+    let directive;
+
+    beforeEach(() => {
+        contextMenuService = new ContextMenuService();
+        directive = new ContextMenuDirective(contextMenuService);
+        directive.enabled = true;
+    });
+
+    it('should show menu via service', (done) => {
+        contextMenuService.show.subscribe(() => {
+            done();
+        });
+
+        directive.links = [{}];
+        directive.onShowContextMenu(null);
+    });
+
+    it('should prevent default behavior', () => {
+        let event = new MouseEvent('click');
+        spyOn(event, 'preventDefault').and.callThrough();
+
+        directive.onShowContextMenu(event);
+        expect(event.preventDefault).toHaveBeenCalled();
+    });
+
+    it('should forward event to service', () => {
+        let event = new MouseEvent('click');
+
+        contextMenuService.show.subscribe(e => {
+            expect(e.event).toBeDefined();
+            expect(e.event).toBe(event);
+        });
+
+        directive.onShowContextMenu(event);
+    });
+
+    it('should forward menu items to service', () => {
+        let links = [{}, {}];
+        directive.links = links;
+
+        contextMenuService.show.subscribe(e => {
+            expect(e.obj).toBeDefined();
+            expect(e.obj).toBe(links);
+        });
+
+        directive.onShowContextMenu(null);
+    });
+
+});

lib/core/context-menu/context-menu.directive.ts

@@ -0,0 +1,48 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Directive, HostListener, Input } from '@angular/core';
+import { ContextMenuService } from './context-menu.service';
+
+@Directive({
+    selector: '[adf-context-menu], [context-menu]'
+})
+export class ContextMenuDirective {
+    @Input('context-menu')
+    links: any[];
+
+    @Input('context-menu-enabled')
+    enabled: boolean = false;
+
+    constructor(private _contextMenuService: ContextMenuService) {
+    }
+
+    @HostListener('contextmenu', ['$event'])
+    onShowContextMenu(event?: MouseEvent) {
+        if (this.enabled) {
+            if (event) {
+                event.preventDefault();
+            }
+
+            if (this.links && this.links.length > 0) {
+                if (this._contextMenuService) {
+                    this._contextMenuService.show.next({event: event, obj: this.links});
+                }
+            }
+        }
+    }
+}

lib/core/context-menu/context-menu.module.ts

@@ -0,0 +1,43 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MaterialModule } from '../material.module';
+
+import { ContextMenuHolderComponent } from './context-menu-holder.component';
+import { ContextMenuDirective } from './context-menu.directive';
+import { ContextMenuService } from './context-menu.service';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        MaterialModule
+    ],
+    declarations: [
+        ContextMenuHolderComponent,
+        ContextMenuDirective
+    ],
+    exports: [
+        ContextMenuHolderComponent,
+        ContextMenuDirective
+    ],
+    providers: [
+        ContextMenuService
+    ]
+})
+export class ContextMenuModule {}

lib/core/context-menu/context-menu.service.spec.ts

@@ -0,0 +1,32 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ContextMenuService } from './context-menu.service';
+
+describe('ContextMenuService', () => {
+
+    let service;
+
+    beforeEach(() => {
+       service = new ContextMenuService();
+    });
+
+    it('should setup default show subject', () => {
+        expect(service.show).toBeDefined();
+    });
+
+});

lib/core/context-menu/context-menu.service.ts

@@ -0,0 +1,24 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs/Rx';
+
+@Injectable()
+export class ContextMenuService {
+    public show: Subject<{event: MouseEvent, obj: any[]}> = new Subject<{event: MouseEvent, obj: any[]}>();
+}

lib/core/context-menu/index.ts

@@ -0,0 +1,18 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './public-api';

lib/core/context-menu/public-api.ts

@@ -0,0 +1,22 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './context-menu-holder.component';
+export * from './context-menu.directive';
+export * from './context-menu.service';
+
+export * from './context-menu.module';