summaryrefslogtreecommitdiffstats
path: root/src/angular/popup-menu
diff options
context:
space:
mode:
Diffstat (limited to 'src/angular/popup-menu')
-rw-r--r--src/angular/popup-menu/popup-menu-item.component.spec.ts25
-rw-r--r--src/angular/popup-menu/popup-menu-item.component.ts34
-rw-r--r--src/angular/popup-menu/popup-menu-list.component.ts65
-rw-r--r--src/angular/popup-menu/popup-menu.module.ts21
4 files changed, 145 insertions, 0 deletions
diff --git a/src/angular/popup-menu/popup-menu-item.component.spec.ts b/src/angular/popup-menu/popup-menu-item.component.spec.ts
new file mode 100644
index 0000000..25b2694
--- /dev/null
+++ b/src/angular/popup-menu/popup-menu-item.component.spec.ts
@@ -0,0 +1,25 @@
+import { Component, Input, Output, ContentChildren, SimpleChanges, QueryList, EventEmitter, OnChanges, AfterContentInit } from '@angular/core';
+import { FormsModule } from "@angular/forms";
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { PopupMenuItemComponent } from './popup-menu-item.component';
+import { PopupMenuListComponent } from './popup-menu-list.component';
+
+describe('Popup Menu', () => {
+ let component: PopupMenuListComponent;
+ let fixture: ComponentFixture<PopupMenuListComponent>;
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ PopupMenuListComponent ],
+ }).compileComponents();
+ fixture = TestBed.createComponent(PopupMenuListComponent);
+ component = fixture.componentInstance;
+ }));
+
+ it('Popup menu component should be created', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('Set Position to Popup Menu', () => {
+ expect(component.position).toEqual({ x: 0, y: 0 })
+ });
+})
diff --git a/src/angular/popup-menu/popup-menu-item.component.ts b/src/angular/popup-menu/popup-menu-item.component.ts
new file mode 100644
index 0000000..fb5a71d
--- /dev/null
+++ b/src/angular/popup-menu/popup-menu-item.component.ts
@@ -0,0 +1,34 @@
+import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { PopupMenuListComponent } from "./popup-menu-list.component";
+
+@Component({
+ selector: 'popup-menu-item',
+ template:
+ `<li [ngClass]="[className || '', type || '', type == 'separator'? '': 'sdc-menu-item']" (click)="performAction($event)">
+ <ng-content *ngIf="type != 'separator'"></ng-content>
+</li>`
+})
+export class PopupMenuItemComponent {
+ @Input() public className: string;
+ @Input() public type: undefined|'disabled'|'selected'|'separator';
+ @Output() public action: EventEmitter<any> = new EventEmitter<any>();
+
+ public parentMenu: PopupMenuListComponent;
+ public index: number = 0;
+
+ public performAction(evt) {
+ evt.stopPropagation();
+
+ if (['disabled', 'separator'].indexOf(this.type) !== -1) {
+ return;
+ }
+
+ if (this.parentMenu instanceof PopupMenuListComponent) {
+ this.parentMenu.open = false;
+ }
+
+ if (this.action) {
+ this.action.emit();
+ }
+ }
+}
diff --git a/src/angular/popup-menu/popup-menu-list.component.ts b/src/angular/popup-menu/popup-menu-list.component.ts
new file mode 100644
index 0000000..6a20423
--- /dev/null
+++ b/src/angular/popup-menu/popup-menu-list.component.ts
@@ -0,0 +1,65 @@
+import { Component, Input, Output, ContentChildren, SimpleChanges, QueryList, EventEmitter, OnChanges, AfterContentInit } from '@angular/core';
+import { PopupMenuItemComponent } from "./popup-menu-item.component";
+
+export interface IPoint {
+ x: number;
+ y: number;
+}
+
+@Component({
+ selector: 'popup-menu-list',
+ template:
+ `<ul
+ class="sdc-menu-list"
+ *ngIf="open"
+ [ngClass]="[className || '', relative? 'relative': '']"
+ [ngStyle]="{'left': position.x + 'px', 'top': position.y + 'px'}"
+ (click)="$event.stopPropagation()">
+ <ng-content></ng-content>
+ </ul>`
+})
+export class PopupMenuListComponent implements AfterContentInit {
+ @Input()
+ public get open(): boolean {
+ return this._open;
+ }
+ public set open(isOpen: boolean) {
+ isOpen = isOpen !== undefined ? isOpen : false;
+ if (this._open !== isOpen) {
+ this._open = isOpen;
+ this.openChange.emit(this._open);
+ }
+ }
+ @Input()
+ public get position(): IPoint {
+ return this._position;
+ }
+ public set position(position: IPoint) {
+ position = position !== undefined ? position : {x: 0, y: 0};
+ if (this._position.x !== position.x || this._position.y !== position.y) {
+ this._position = position;
+ this.positionChange.emit(this._position);
+ }
+ }
+ @Input() public className: string;
+ @Input() public relative: boolean = false;
+ @Output() public openChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+ @Output() public positionChange: EventEmitter<IPoint> = new EventEmitter<IPoint>();
+
+ @ContentChildren(PopupMenuItemComponent) private menuItems: QueryList<PopupMenuItemComponent>;
+
+ private _open: boolean = false;
+ private _position: IPoint = {x: 0, y: 0};
+
+ public ngAfterContentInit() {
+ this._updateMenuItemsList(this.menuItems);
+ this.menuItems.changes.subscribe(this._updateMenuItemsList);
+ }
+
+ private _updateMenuItemsList(menuItemsList: QueryList<PopupMenuItemComponent>) {
+ menuItemsList.forEach((c, idx) => {
+ c.parentMenu = this;
+ c.index = idx;
+ });
+ }
+}
diff --git a/src/angular/popup-menu/popup-menu.module.ts b/src/angular/popup-menu/popup-menu.module.ts
new file mode 100644
index 0000000..3a58b91
--- /dev/null
+++ b/src/angular/popup-menu/popup-menu.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from "@angular/core";
+import { PopupMenuListComponent } from "./popup-menu-list.component";
+import { PopupMenuItemComponent } from "./popup-menu-item.component";
+import { CommonModule } from "@angular/common";
+
+
+@NgModule({
+ declarations: [
+ PopupMenuListComponent,
+ PopupMenuItemComponent
+ ],
+ imports: [
+ CommonModule
+ ],
+ exports: [
+ PopupMenuListComponent,
+ PopupMenuItemComponent
+ ],
+})
+export class PopupMenuModule {
+}