feature(Timepicker) implemented modal display plugin materializecss#557

Author: gselderslaghs

src/plugin/modalDisplayPlugin.ts

@@ -0,0 +1,74 @@
+export interface ModalDisplayPluginOptions {
+  classList: string[],
+  title: HTMLElement|null
+}
+
+const _defaults: ModalDisplayPluginOptions = {
+  classList: ['modal'],
+  title: null
+}
+
+export class ModalDisplayPlugin {
+  private readonly el: HTMLElement;
+  private readonly container: HTMLDialogElement;
+  private options: Partial<ModalDisplayPluginOptions>;
+  private visible: boolean;
+  footer: HTMLElement;
+
+  constructor(el: HTMLElement, container: HTMLElement, options: Partial<ModalDisplayPluginOptions>) {
+    this.el = el;
+    this.options = {
+      ..._defaults,
+      ...options,
+    };
+
+    this.container = document.createElement('dialog');
+    this.container.classList.add('modal', 'display-modal', this.options.classList.join(' '));
+
+    if(options.title) {
+      const modalHeader = document.createElement('div');
+      modalHeader.classList.add('modal-header');
+      modalHeader.append(options.title);
+      this.container.append(modalHeader);
+    }
+
+    const modalContent = document.createElement('div');
+    modalContent.classList.add('modal-content');
+    modalContent.append(container);
+    this.container.append(modalContent);
+
+    this.footer = document.createElement('div');
+    this.footer.classList.add('modal-footer');
+    this.container.append(this.footer);
+
+    document.body.append(this.container);
+
+    document.addEventListener('click', (e) => {
+      if (this.visible && !(this.el === <HTMLElement>e.target) && !((<HTMLElement>e.target).closest('.display-modal'))) {
+        this.hide();
+      }
+    });
+  }
+
+  /**
+   * Initializes instance of ModalDisplayPlugin
+   * @param el HTMLElement to position to
+   * @param container HTMLElement to be positioned
+   * @param options Plugin options
+   */
+  static init(el: HTMLElement, container: HTMLElement, options?: Partial<ModalDisplayPluginOptions>): ModalDisplayPlugin {
+    return new ModalDisplayPlugin(el, container, options);
+  }
+
+  show = () => {
+    if (this.visible) return;
+    this.visible = true;
+    this.container.setAttribute('open', 'true');
+  };
+
+  hide = () => {
+    if (!this.visible) return;
+    this.visible = false;
+    this.container.removeAttribute('open');
+  };
+}

src/timepicker.ts

@@ -1,6 +1,7 @@
 import { Utils } from './utils';
 import { Component, BaseOptions, InitElements, MElement, I18nOptions } from './component';
 import { DockedDisplayPlugin } from './plugin/dockedDisplayPlugin';
+import { ModalDisplayPlugin } from './plugin/modalDisplayPlugin';
 
 export type Views = 'hours' | 'minutes';
 
@@ -45,6 +46,7 @@ export interface TimepickerOptions extends BaseOptions {
    *  Autosubmit timepicker selection to input field
    *  @default true
    */
+  // @todo this is only working on analog clock, should apply to hour/minute input fields and am/pm selector as well
   autoSubmit: true;
   /**
    * Default time to set on the timepicker 'now' or '13:14'.
@@ -176,7 +178,7 @@ export class Timepicker extends Component<TimepickerOptions> {
   g: Element;
   toggleViewTimer: string | number | NodeJS.Timeout;
   vibrateTimer: NodeJS.Timeout | number;
-  private displayPlugin: DockedDisplayPlugin;
+  private displayPlugin: DockedDisplayPlugin | ModalDisplayPlugin;
 
   constructor(el: HTMLInputElement, options: Partial<TimepickerOptions>) {
     super(el, options, Timepicker);
@@ -190,11 +192,10 @@ export class Timepicker extends Component<TimepickerOptions> {
     this._setupVariables();
     this._setupEventHandlers();
     this._clockSetup();
-    this._pickerSetup();
-
     if (this.options.displayPlugin) {
-      if (this.options.displayPlugin === 'docked') this.displayPlugin = DockedDisplayPlugin.init(this.el, this.containerEl, this.options.displayPluginOptions);
+      this._setupDisplayPlugin();
     }
+    this._pickerSetup();
   }
 
   static get defaults(): TimepickerOptions {
@@ -260,10 +261,12 @@ export class Timepicker extends Component<TimepickerOptions> {
 
   _setupEventHandlers() {
     this.el.addEventListener('click', this._handleInputClick);
+    // @todo allow input field to fill values from input field when container/modal opens
     this.el.addEventListener('keydown', this._handleInputKeydown);
     this.plate.addEventListener('mousedown', this._handleClockClickStart);
     this.plate.addEventListener('touchstart', this._handleClockClickStart);
     this.digitalClock.addEventListener('keyup', this._inputFromTextField);
+
     this.inputHours.addEventListener('focus', () => this.showView('hours'));
     this.inputHours.addEventListener('focusout', () => this.formatHours());
     this.inputMinutes.addEventListener('focus', () => this.showView('minutes'));
@@ -408,13 +411,15 @@ export class Timepicker extends Component<TimepickerOptions> {
     // clearButton.classList.add('timepicker-clear');
     // clearButton.addEventListener('click', this.clear);
     // this.footer.appendChild(clearButton);
-    Utils.createButton(
-      this.footer,
-      this.options.i18n.clear,
-      ['timepicker-clear'],
-      this.options.showClearBtn,
-      this.clear
-    );
+    if (this.options.showClearBtn) {
+      Utils.createButton(
+        this.footer,
+        this.options.i18n.clear,
+        ['timepicker-clear'],
+        true,
+        this.clear
+      );
+    }
 
     if (!this.options.autoSubmit) {
     /*const confirmationBtnsContainer = document.createElement('div');
@@ -443,6 +448,18 @@ export class Timepicker extends Component<TimepickerOptions> {
     this.showView('hours');
   }
 
+  private _setupDisplayPlugin() {
+    if (this.options.displayPlugin === 'docked') this.displayPlugin = DockedDisplayPlugin.init(this.el, this.containerEl, this.options.displayPluginOptions);
+    if (this.options.displayPlugin === 'modal') {
+      this.displayPlugin = ModalDisplayPlugin.init(this.el, this.containerEl, {
+        ...this.options.displayPluginOptions,
+        ...{ classList: ['timepicker-modal'] }
+      });
+      this.footer.remove();
+      this.footer = this.displayPlugin.footer;
+    }
+  }
+
   _clockSetup() {
     if (this.options.twelveHour) {
       // AM Button
@@ -820,16 +837,19 @@ export class Timepicker extends Component<TimepickerOptions> {
 
   confirm = () => {
     this.done();
+    if (this.displayPlugin) this.displayPlugin.hide();
     if (typeof this.options.onDone === 'function') this.options.onDone.call(this);
   }
 
   cancel = () => {
     // not logical clearing the input field on cancel, since the end user might want to make use of the previously submitted value
     // this.clear();
+    if (this.displayPlugin) this.displayPlugin.hide();
     if (typeof this.options.onCancel === 'function') this.options.onCancel.call(this);
   }
 
   clear = () => {
+    // @todo should clear timepicker hour/minute input elems and reset analog clock, currently clears input el
     this.done(true);
   };