trigger dialogOpened dialogClosed events

src/ui/ALineUp.ts

@@ -4,6 +4,8 @@ import {AEventDispatcher, IEventListener, clear} from '../internal';
 import {Column} from '../model';
 import {DataProvider, IDataProviderDump} from '../provider';
 import {cssClass} from '../styles';
+import DialogManager from './dialogs/DialogManager';
+import {ADialog} from './dialogs';
 
 
 /**
@@ -21,9 +23,26 @@ export declare function highlightChanged(dataIndex: number): void;
  * @event
  */
 export declare function selectionChanged(dataIndices: number[]): void;
+/**
+ * emitted a dialog is opened
+ * @asMemberOf ALineUp
+ * @param dialog the opened dialog
+ * @event
+ */
+export declare function dialogOpened(dialog: ADialog): void;
+/**
+ * emitted a dialog is closed
+ * @asMemberOf ALineUp
+ * @param dialog the closed dialog
+ * @param action the action how the dialog was closed
+ * @event
+ */
+export declare function dialogClosed(dialog: ADialog, action: 'cancel' | 'confirm'): void;
 
 export abstract class ALineUp extends AEventDispatcher implements ILineUpLike {
   static readonly EVENT_SELECTION_CHANGED = DataProvider.EVENT_SELECTION_CHANGED;
+  static readonly EVENT_DIALOG_OPENED = DialogManager.EVENT_DIALOG_OPENED;
+  static readonly EVENT_DIALOG_CLOSED = DialogManager.EVENT_DIALOG_CLOSED;
   static readonly EVENT_HIGHLIGHT_CHANGED = 'highlightChanged';
 
   private highlightListeners = 0;
@@ -51,11 +70,13 @@ export abstract class ALineUp extends AEventDispatcher implements ILineUpLike {
   }
 
   protected createEventList() {
-    return super.createEventList().concat([ALineUp.EVENT_HIGHLIGHT_CHANGED, ALineUp.EVENT_SELECTION_CHANGED]);
+    return super.createEventList().concat([ALineUp.EVENT_HIGHLIGHT_CHANGED, ALineUp.EVENT_SELECTION_CHANGED, ALineUp.EVENT_DIALOG_OPENED, ALineUp.EVENT_DIALOG_CLOSED]);
   }
 
   on(type: typeof ALineUp.EVENT_HIGHLIGHT_CHANGED, listener: typeof highlightChanged | null): this;
   on(type: typeof ALineUp.EVENT_SELECTION_CHANGED, listener: typeof selectionChanged | null): this;
+  on(type: typeof ALineUp.EVENT_DIALOG_OPENED, listener: typeof dialogOpened | null): this;
+  on(type: typeof ALineUp.EVENT_DIALOG_CLOSED, listener: typeof dialogClosed | null): this;
   on(type: string | string[], listener: IEventListener | null): this; // required for correct typings in *.d.ts
   on(type: string | string[], listener: IEventListener | null): this {
     return super.on(type, listener);

src/ui/EngineRenderer.ts

@@ -12,6 +12,7 @@ import domElementCache from './domElementCache';
 import EngineRanking, {IEngineRankingContext} from './EngineRanking';
 import {EMode, IRankingHeaderContext, IRankingHeaderContextContainer} from './interfaces';
 import SlopeGraph from './SlopeGraph';
+import {ADialog} from './dialogs';
 
 /**
  * emitted when the highlight changes
@@ -21,8 +22,26 @@ import SlopeGraph from './SlopeGraph';
  */
 export declare function highlightChanged(dataIndex: number): void;
 
+/**
+ * emitted a dialog is opened
+ * @asMemberOf EngineRenderer
+ * @param dialog the opened dialog
+ * @event
+ */
+export declare function dialogOpenedER(dialog: ADialog): void;
+/**
+ * emitted a dialog is closed
+ * @asMemberOf EngineRenderer
+ * @param dialog the closed dialog
+ * @param action the action how the dialog was closed
+ * @event
+ */
+export declare function dialogClosedER(dialog: ADialog, action: 'cancel' | 'confirm'): void;
+
 export default class EngineRenderer extends AEventDispatcher {
   static readonly EVENT_HIGHLIGHT_CHANGED = EngineRanking.EVENT_HIGHLIGHT_CHANGED;
+  static readonly EVENT_DIALOG_OPENED = DialogManager.EVENT_DIALOG_OPENED;
+  static readonly EVENT_DIALOG_CLOSED = DialogManager.EVENT_DIALOG_CLOSED;
 
   protected readonly options: Readonly<ILineUpOptions>;
 
@@ -53,6 +72,7 @@ export default class EngineRenderer extends AEventDispatcher {
       livePreviews: options.livePreviews,
       onDialogBackgroundClick: options.onDialogBackgroundClick,
     });
+    this.forward(dialogManager, ...suffix('.main', EngineRenderer.EVENT_DIALOG_OPENED, EngineRenderer.EVENT_DIALOG_CLOSED));
 
     parent.appendChild(dialogManager.node);
     this.ctx = {
@@ -182,10 +202,12 @@ export default class EngineRenderer extends AEventDispatcher {
   }
 
   protected createEventList() {
-    return super.createEventList().concat([EngineRenderer.EVENT_HIGHLIGHT_CHANGED]);
+    return super.createEventList().concat([EngineRenderer.EVENT_HIGHLIGHT_CHANGED, EngineRenderer.EVENT_DIALOG_OPENED, EngineRenderer.EVENT_DIALOG_CLOSED]);
   }
 
   on(type: typeof EngineRenderer.EVENT_HIGHLIGHT_CHANGED, listener: typeof highlightChanged | null): this;
+  on(type: typeof EngineRenderer.EVENT_DIALOG_OPENED, listener: typeof dialogOpenedER | null): this;
+  on(type: typeof EngineRenderer.EVENT_DIALOG_CLOSED, listener: typeof dialogClosedER | null): this;
   on(type: string | string[], listener: IEventListener | null): this; // required for correct typings in *.d.ts
   on(type: string | string[], listener: IEventListener | null): this {
     return super.on(type, listener);

src/ui/LineUp.ts

@@ -1,5 +1,5 @@
 import {ILineUpOptions, defaultOptions} from '../config';
-import {merge} from '../internal';
+import {merge, suffix} from '../internal';
 import {DataProvider} from '../provider';
 import {cssClass} from '../styles';
 import {ALineUp} from './ALineUp';
@@ -37,7 +37,7 @@ export default class LineUp extends ALineUp {
     } else {
       this.panel = null;
     }
-    this.forward(this.renderer, `${EngineRenderer.EVENT_HIGHLIGHT_CHANGED}.main`);
+    this.forward(this.renderer, ...suffix('.main', EngineRenderer.EVENT_HIGHLIGHT_CHANGED, EngineRenderer.EVENT_DIALOG_OPENED, EngineRenderer.EVENT_DIALOG_CLOSED));
   }
 
   destroy() {

src/ui/dialogs/ADialog.ts

@@ -146,7 +146,7 @@ abstract class ADialog {
         return false;
       }
       if (this.submit()) {
-        this.destroy(true);
+        this.destroy('confirm');
       }
       return false;
     };
@@ -156,7 +156,7 @@ abstract class ADialog {
         evt.stopPropagation();
         evt.preventDefault();
         this.cancel();
-        this.destroy(true);
+        this.destroy('cancel');
       };
     }
 
@@ -181,22 +181,27 @@ abstract class ADialog {
 
   protected abstract cancel(): void;
 
-  onBackgroundClick(action: 'cancel' | 'confirm' | 'auto') {
+  cleanUp(action: 'cancel' | 'confirm' | 'handled') {
     if (action === 'confirm') {
       this.submit(); // TODO what if submit wasn't successful?
     } else if (action === 'cancel') {
       this.cancel();
     }
-    this.destroy(true);
-  }
 
-  protected destroy(handled = false) {
-    this.dialog.manager.remove(this, handled);
+    if (action !== 'handled') {
+      this.dialog.manager.triggerDialogClosed(this, action);
+    }
+
     if (this.popper) {
       this.popper.destroy();
     }
     this.node.remove();
   }
+
+  protected destroy(action: 'cancel' | 'confirm' = 'cancel') {
+    this.dialog.manager.triggerDialogClosed(this, action);
+    this.dialog.manager.remove(this, true);
+  }
 }
 
 export default ADialog;

src/ui/dialogs/CompositeChildrenDialog.ts

@@ -16,9 +16,9 @@ export default class CompositeChildrenDialog extends APopup {
     this.id = `.dialog${Math.random().toString(36).slice(-8).substr(0, 3)}`;
   }
 
-  destroy() {
+  cleanUp(action: 'cancel' | 'confirm' | 'handled') {
+    super.cleanUp(action);
     this.column.on(suffix(this.id, CompositeColumn.EVENT_ADD_COLUMN, CompositeColumn.EVENT_REMOVE_COLUMN), null);
-    super.destroy();
   }
 
   protected build(node: HTMLElement) {

src/ui/dialogs/DialogManager.ts

@@ -2,8 +2,29 @@ import ADialog from './ADialog';
 import Column from '../../model';
 import {cssClass} from '../../styles';
 import {ILivePreviewOptions} from '../../config';
-
-export default class DialogManager {
+import {AEventDispatcher, IEventListener} from '../../internal';
+
+/**
+ * emitted a dialog is opened
+ * @asMemberOf DialogManager
+ * @param dialog the opened dialog
+ * @event
+ */
+export declare function dialogOpened(dialog: ADialog): void;
+
+/**
+ * emitted a dialog is closed
+ * @asMemberOf DialogManager
+ * @param dialog the closed dialog
+ * @param action the action how the dialog was closed
+ * @event
+ */
+export declare function dialogClosed(dialog: ADialog, action: 'cancel' | 'confirm'): void;
+
+
+export default class DialogManager extends AEventDispatcher {
+  static readonly EVENT_DIALOG_OPENED = 'dialogOpened';
+  static readonly EVENT_DIALOG_CLOSED = 'dialogClosed';
 
   private readonly escKeyListener = (evt: KeyboardEvent) => {
     if (evt.which === 27) {
@@ -17,6 +38,7 @@ export default class DialogManager {
   readonly onDialogBackgroundClick: 'cancel' | 'confirm';
 
   constructor(options: {doc: Document, livePreviews: Partial<ILivePreviewOptions>, onDialogBackgroundClick: 'cancel' | 'confirm'}) {
+    super();
     const doc = options.doc;
     this.livePreviews = options.livePreviews;
     this.onDialogBackgroundClick = options.onDialogBackgroundClick;
@@ -28,6 +50,18 @@ export default class DialogManager {
     };
   }
 
+  protected createEventList() {
+    return super.createEventList().concat([DialogManager.EVENT_DIALOG_CLOSED, DialogManager.EVENT_DIALOG_OPENED]);
+  }
+
+  on(type: typeof DialogManager.EVENT_DIALOG_OPENED, listener: typeof dialogOpened | null): this;
+  on(type: typeof DialogManager.EVENT_DIALOG_CLOSED, listener: typeof dialogClosed | null): this;
+  on(type: string | string[], listener: IEventListener | null): this; // required for correct typings in *.d.ts
+  on(type: string | string[], listener: IEventListener | null): this {
+    return super.on(type, listener);
+  }
+
+
   setHighlight(mask: { left: number, top: number, width: number, height: number }) {
     const area = <HTMLElement>this.node.firstElementChild;
     // @see http://bennettfeely.com/clippy/ -> select `Frame` example
@@ -84,18 +118,22 @@ export default class DialogManager {
       return;
     }
     const all = this.openDialogs.splice(0, this.openDialogs.length);
-    all.forEach((d) => d.onBackgroundClick(this.onDialogBackgroundClick));
+    all.reverse().forEach((d) => d.cleanUp(this.onDialogBackgroundClick));
     this.takeDown();
   }
 
+  triggerDialogClosed(dialog: ADialog, action: 'cancel' | 'confirm') {
+    this.fire(DialogManager.EVENT_DIALOG_CLOSED, dialog, action);
+  }
+
   remove(dialog: ADialog, handled = false) {
     const index = this.openDialogs.indexOf(dialog);
     if (index < 0) {
       return false;
     }
     // destroy self and all levels below that = after that
     const destroyed = this.openDialogs.splice(index, this.openDialogs.length - index);
-    destroyed.reverse().forEach((d) => d.onBackgroundClick(handled ? 'auto' : this.onDialogBackgroundClick));
+    destroyed.reverse().forEach((d) => d.cleanUp(handled ? 'handled' : this.onDialogBackgroundClick));
 
     if (this.openDialogs.length === 0) {
       this.takeDown();
@@ -138,5 +176,6 @@ export default class DialogManager {
     }
 
     this.openDialogs.push(dialog);
+    this.fire(DialogManager.EVENT_DIALOG_OPENED, dialog);
   }
 }

src/ui/dialogs/MappingLineDialog.ts

@@ -40,7 +40,7 @@ export default class MappingLineDialog extends APopup {
 
     this.forEach('input', (d: HTMLInputElement) => d.onchange = () => this.submit());
     this.find('button').addEventListener('click', () => {
-      this.destroy();
+      this.destroy('confirm');
       this.line.destroy();
     }, {
       passive: true

src/ui/dialogs/MoreRankingOptionsDialog.ts

@@ -33,7 +33,7 @@ export default class MoreRankingOptionsDialog extends APopup {
     this.addIcon(node, 'Remove', (evt) => {
       evt.stopPropagation();
       evt.preventDefault();
-      this.destroy();
+      this.destroy('confirm');
       this.ctx.provider.removeRanking(this.ranking);
     });
   }

src/ui/taggle/Taggle.ts

@@ -1,7 +1,7 @@
 import {GridStyleManager} from 'lineupengine';
 import {defaultOptions} from '../../config';
 import {ITaggleOptions} from '../../config';
-import {merge} from '../../internal';
+import {merge, suffix} from '../../internal';
 import {DataProvider} from '../../provider';
 import {cssClass, engineCssClass} from '../../styles';
 import {ALineUp} from '../ALineUp';
@@ -63,7 +63,7 @@ export default class Taggle extends ALineUp {
         this.renderer.switchRule(spaceFilling);
       }
     }
-    this.forward(this.renderer, `${ALineUp.EVENT_HIGHLIGHT_CHANGED}.main`);
+    this.forward(this.renderer, ...suffix('.main', TaggleRenderer.EVENT_HIGHLIGHT_CHANGED, TaggleRenderer.EVENT_DIALOG_OPENED, TaggleRenderer.EVENT_DIALOG_CLOSED));
   }
 
   private updateLodRules(overviewMode: boolean) {

src/ui/taggle/TaggleRenderer.ts

@@ -1,13 +1,14 @@
 import {GridStyleManager} from 'lineupengine';
 import {ILineUpOptions} from '../../config';
-import {debounce, AEventDispatcher, IEventListener} from '../../internal';
+import {debounce, AEventDispatcher, IEventListener, suffix} from '../../internal';
 import {IGroupData, IGroupItem, isGroup, Ranking, IGroup} from '../../model';
 import {DataProvider} from '../../provider';
 import {IRenderContext} from '../../renderer';
 import {IEngineRankingContext} from '../EngineRanking';
 import EngineRenderer from '../EngineRenderer';
 import {IRankingHeaderContext, IRankingHeaderContextContainer} from '../interfaces';
 import {IRule} from './rules';
+import {ADialog} from '../dialogs';
 
 /**
  * emitted when the highlight changes
@@ -16,6 +17,21 @@ import {IRule} from './rules';
  * @event
  */
 export declare function highlightChanged(dataIndex: number): void;
+/**
+ * emitted a dialog is opened
+ * @asMemberOf TaggleRenderer
+ * @param dialog the opened dialog
+ * @event
+ */
+export declare function dialogOpened(dialog: ADialog): void;
+/**
+ * emitted a dialog is closed
+ * @asMemberOf TaggleRenderer
+ * @param dialog the closed dialog
+ * @param action the action how the dialog was closed
+ * @event
+ */
+export declare function dialogClosed(dialog: ADialog, action: 'cancel' | 'confirm'): void;
 
 export interface ITaggleOptions {
   violationChanged(rule: IRule, violation: string): void;
@@ -25,6 +41,8 @@ export interface ITaggleOptions {
 
 export default class TaggleRenderer extends AEventDispatcher {
   static readonly EVENT_HIGHLIGHT_CHANGED = EngineRenderer.EVENT_HIGHLIGHT_CHANGED;
+  static readonly EVENT_DIALOG_OPENED = EngineRenderer.EVENT_DIALOG_OPENED;
+  static readonly EVENT_DIALOG_CLOSED = EngineRenderer.EVENT_DIALOG_CLOSED;
 
   private isDynamicLeafHeight: boolean = false;
 
@@ -58,7 +76,7 @@ export default class TaggleRenderer extends AEventDispatcher {
         this.update();
       }
     });
-    this.forward(this.renderer, `${TaggleRenderer.EVENT_HIGHLIGHT_CHANGED}.main`);
+    this.forward(this.renderer, ...suffix('.main', EngineRenderer.EVENT_HIGHLIGHT_CHANGED, EngineRenderer.EVENT_DIALOG_OPENED, EngineRenderer.EVENT_DIALOG_CLOSED));
 
     window.addEventListener('resize', this.resizeListener, {
       passive: true
@@ -120,10 +138,12 @@ export default class TaggleRenderer extends AEventDispatcher {
   }
 
   protected createEventList() {
-    return super.createEventList().concat([TaggleRenderer.EVENT_HIGHLIGHT_CHANGED]);
+    return super.createEventList().concat([TaggleRenderer.EVENT_HIGHLIGHT_CHANGED, TaggleRenderer.EVENT_DIALOG_OPENED, TaggleRenderer.EVENT_DIALOG_CLOSED]);
   }
 
   on(type: typeof TaggleRenderer.EVENT_HIGHLIGHT_CHANGED, listener: typeof highlightChanged | null): this;
+  on(type: typeof TaggleRenderer.EVENT_DIALOG_OPENED, listener: typeof dialogOpened | null): this;
+  on(type: typeof TaggleRenderer.EVENT_DIALOG_CLOSED, listener: typeof dialogClosed | null): this;
   on(type: string | string[], listener: IEventListener | null): this; // required for correct typings in *.d.ts
   on(type: string | string[], listener: IEventListener | null): this {
     return super.on(type, listener);