import {OrgSelectComponent} from '@eg/share/org-select/org-select.component';
import {DateRangeSelectComponent} from '@eg/share/daterange-select/daterange-select.component';
import {DateTimeSelectComponent} from '@eg/share/datetime-select/datetime-select.component';
+import {ContextMenuDirective, ContextMenuComponent} from '@eg/share/context-menu/context-menu.component';
@NgModule({
OrgSelectComponent,
DateRangeSelectComponent,
DateTimeSelectComponent,
+ ContextMenuDirective,
+ ContextMenuComponent
],
imports: [
CommonModule,
OrgSelectComponent,
DateRangeSelectComponent,
DateTimeSelectComponent,
+ ContextMenuComponent,
+ ContextMenuDirective
],
})
--- /dev/null
+
+:host >>> .popover {
+ font-family: 'Lucida Console', Monaco, monospace;
+ max-width: 550px;
+}
+
+:host >>> .popover-body {
+ max-height: 400px;
+ overflow-y: auto;
+ overflow-x: auto;
+}
+
+:host >>> .popover-body .menu-entry {
+ white-space: nowrap;
+}
+
+:host >>> .popover-body .menu-entry:hover {
+ background-color: #f8f9fa; /* bootstrap color */
+}
+
--- /dev/null
+
+<ng-template #menuTemplate>
+ <div *ngFor="let entry of menuEntries" class="menu-entry {{entryClasses}}">
+ <a (click)="entryClicked(entry)">
+ <span>{{entry.label}}</span>
+ </a>
+ </div>
+</ng-template>
+
+<!--
+<div class="form-inline d-flex">
+ <div class="flex-4">
+ <span id='label-{{randId}}' class="text-left font-weight-bold">
+ {{fieldLabel}}
+ </span>
+ </div>
+ <input
+ [attr.aria-labelledby]="'label-' + randId"
+ class="form-control rounded-0 flex-5" type="text"
+ (change)="valueChange()"
+ [(ngModel)]="fieldValue"
+ [attr.maxlength]="fieldLength" [attr.size]="fieldLength"
+ [ngbPopover]="menuContent"
+ #p="ngbPopover" triggers="manual"
+ (contextmenu)="contextMenu($event, p)"
+ />
+</div>
+-->
+
--- /dev/null
+import {Component, Input, Output, OnInit, EventEmitter, Directive,
+ ComponentFactoryResolver, ViewChild, TemplateRef} from '@angular/core';
+import {NgbPopover} from '@ng-bootstrap/ng-bootstrap';
+
+/**
+ * Context menu component.
+ *
+ * No state is maintained (i.e. there is no current value), events are
+ * simply emitted as entries are chosen.
+ *
+ * <eg-context-menu #menu
+ * [menuEntries]="ContextMenuEntry[]"
+ * (entrySelected)="$event === ContextMenuEntry">
+ *
+ * <input [egContextMenu]="menu" ... />
+ */
+
+export interface ContextMenuEntry {
+ value: string;
+ label: string;
+}
+
+@Component({
+ selector: 'eg-context-menu',
+ templateUrl: './context-menu.component.html',
+ styleUrls: ['context-menu.component.css']
+})
+
+export class ContextMenuComponent implements OnInit {
+
+ @Input() menuEntries: ContextMenuEntry[] = [];
+
+ // Additional CSS classes (space separated) to apply to the entry links
+ @Input() entryClasses = '';
+
+ @Output() entrySelected: EventEmitter<ContextMenuEntry>;
+
+ @ViewChild('menuTemplate', {static: false}) public menuTemplate: TemplateRef<any>;
+
+ constructor() {
+ this.entrySelected = new EventEmitter<ContextMenuEntry>();
+ }
+
+ ngOnInit() {}
+
+ entryClicked(entry: ContextMenuEntry) {
+ this.entrySelected.emit(entry);
+ }
+}
+
+@Directive({
+ selector: '[egContextMenu]',
+ exportAs: 'egContextMenu'
+})
+export class ContextMenuDirective extends NgbPopover {
+
+ menuComp: ContextMenuComponent;
+
+ triggers = 'contextmenu';
+
+ @Input() set egContextMenu(menuComp: ContextMenuComponent) {
+ this.menuComp = menuComp;
+ }
+
+ // Only one active menu is allowed at a time.
+ static activeMenu: ContextMenuDirective;
+
+ open() {
+
+ // Note the popover will automatically close in most cases,
+ // but context menus typically preventDefault() from firing,
+ // which prevents right-click from closing existing menus.
+ if (ContextMenuDirective.activeMenu) {
+ ContextMenuDirective.activeMenu.close();
+ }
+
+ if (!this.menuComp.menuEntries ||
+ this.menuComp.menuEntries.length === 0) {
+ return;
+ }
+
+ this.ngbPopover = this.menuComp.menuTemplate;
+ ContextMenuDirective.activeMenu = this;
+ super.open();
+ }
+}
+
+
+++ /dev/null
-
-:host >>> .popover {
- font-family: 'Lucida Console', Monaco, monospace;
- max-width: 550px;
-}
-
-:host >>> .popover-body {
- max-height: 400px;
- overflow-y: auto;
- overflow-x: auto;
-}
-
-:host >>> .popover-body .menu-entry {
- white-space: nowrap;
-}
-
-:host >>> .popover-body .menu-entry:hover {
- background-color: #f8f9fa; /* bootstrap color */
-}
-
+++ /dev/null
-
-<ng-template #menuTemplate>
- <div *ngFor="let entry of menuEntries" class="menu-entry {{entryClasses}}">
- <a (click)="entryClicked(entry)">
- <span>{{entry.label}}</span>
- </a>
- </div>
-</ng-template>
-
-<!--
-<div class="form-inline d-flex">
- <div class="flex-4">
- <span id='label-{{randId}}' class="text-left font-weight-bold">
- {{fieldLabel}}
- </span>
- </div>
- <input
- [attr.aria-labelledby]="'label-' + randId"
- class="form-control rounded-0 flex-5" type="text"
- (change)="valueChange()"
- [(ngModel)]="fieldValue"
- [attr.maxlength]="fieldLength" [attr.size]="fieldLength"
- [ngbPopover]="menuContent"
- #p="ngbPopover" triggers="manual"
- (contextmenu)="contextMenu($event, p)"
- />
-</div>
--->
-
+++ /dev/null
-import {Component, Input, Output, OnInit, EventEmitter, Directive,
- ComponentFactoryResolver, ViewChild, TemplateRef} from '@angular/core';
-import {NgbPopover} from '@ng-bootstrap/ng-bootstrap';
-
-/**
- * Right-click context menu component.
- *
- * No state is maintained (i.e. no current value), events are
- * simply emitted as entries are chosen.
- *
- * <eg-context-menu-entries #tRef [menuEntries]="ContextMenuEntry[]"
- * (entrySelected)="$event === ContextMenuEntry">
- * <input ... [egContextMenu]="tRef" ... />
- */
-
-export interface ContextMenuEntry {
- value: string;
- label: string;
-}
-
-@Component({
- selector: 'eg-context-menu',
- templateUrl: './context-menu.component.html',
- styleUrls: ['context-menu.component.css']
-})
-
-export class ContextMenuComponent implements OnInit {
-
- @Input() menuEntries: ContextMenuEntry[] = [];
-
- // Additional CSS classes (space separated) to apply to the entry links
- @Input() entryClasses = '';
-
- @Output() entrySelected: EventEmitter<ContextMenuEntry>;
-
- @ViewChild('menuTemplate', {static: false}) public menuTemplate: TemplateRef<any>;
-
- constructor() {
- this.entrySelected = new EventEmitter<ContextMenuEntry>();
- }
-
- ngOnInit() {}
-
- entryClicked(entry: ContextMenuEntry) {
- this.entrySelected.emit(entry);
- }
-}
-
-@Directive({
- selector: '[egContextMenu]',
- exportAs: 'egContextMenu'
-})
-export class ContextMenuDirective extends NgbPopover implements OnInit {
-
- menuComp: ContextMenuComponent;
-
- @Input() set egContextMenu(menuComp: ContextMenuComponent) {
- this.menuComp = menuComp;
- }
-
- // Only one active menu is allowed at a time.
- static activeMenu: ContextMenuDirective;
-
- open() {
-
- if (!this.menuComp.menuEntries ||
- this.menuComp.menuEntries.length === 0) {
- return;
- }
-
- this.ngbPopover = this.menuComp.menuTemplate;
- if (ContextMenuDirective.activeMenu) {
- ContextMenuDirective.activeMenu.close();
- }
- ContextMenuDirective.activeMenu = this;
- super.open();
- }
-}
-
-
<eg-context-menu #contextMenu
[menuEntries]="fieldValues"
- (entrySelected)="valueChange(value.value)">
+ (entrySelected)="valueChange($event.value)">
</eg-context-menu>
<div class="form-inline d-flex">
[(ngModel)]="fieldValue"
[attr.maxlength]="fieldLength" [attr.size]="fieldLength"
[egContextMenu]="contextMenu"
- #m="egContextMenu" triggers="manual"
- (contextmenu)="$event.preventDefault(); m.open()"
/>
</div>
-
</ng-container>
});
}
- valueChange(newVal?: string) {
- if (newVal !== undefined) {
- // needed for context menu
- this.fieldValue = newVal;
- }
+ valueChange(newVal: string) {
+ this.fieldValue = newVal;
this.context.record.setFixedField(this.fieldCode, this.fieldValue);
}
}
+
import {NgModule} from '@angular/core';
import {StaffCommonModule} from '@eg/staff/common.module';
+import {CommonWidgetsModule} from '@eg/share/common-widgets.module';
import {MarcEditorComponent} from './editor.component';
import {MarcRichEditorComponent} from './rich-editor.component';
import {MarcFlatEditorComponent} from './flat-editor.component';
import {TagTableService} from './tagtable.service';
import {EditableContentComponent} from './editable-content.component';
-// TODO: consider moving to share
-import {ContextMenuDirective, ContextMenuComponent} from './context-menu.component';
-
@NgModule({
declarations: [
MarcEditorComponent,
MarcFlatEditorComponent,
FixedFieldsEditorComponent,
FixedFieldComponent,
- EditableContentComponent,
- ContextMenuDirective,
- ContextMenuComponent
+ EditableContentComponent
],
imports: [
- StaffCommonModule
+ StaffCommonModule,
+ CommonWidgetsModule
],
exports: [
MarcEditorComponent
projects / working / Evergreen.git / commitdiff