PHP Classes
elePHPant
Icontem

File: FrontEndScripts/libs/Nemiro/UI/Dialog.ts

Recommend this page to a friend!
  Classes of Aleksey Nemiro  >  PHP Small Server Administrator  >  FrontEndScripts/libs/Nemiro/UI/Dialog.ts  >  Download  
File: FrontEndScripts/libs/Nemiro/UI/Dialog.ts
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: PHP Small Server Administrator
Web panel for small Debian and Ubuntu servers
Author: By
Last change:
Date: 3 years ago
Size: 13,179 bytes
 

 

Contents

Class file image Download
?/*
 * Copyright  Aleksey Nemiro, 2015. All rights reserved.
 * 
 * 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.
 */
module Nemiro.UI {

  /** 
   * Provides a dialog box.
   */
  export class Dialog {

    /** Dialog template. */
    private static ModalTemplate: string = '<div class="modal" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button></div><div class="modal-body" style="overflow:auto;"></div><div class="modal-footer"></div></div></div></div>';

    /** The jQuery modal. */
    public $modal: JQuery = null;

    private _Title: string|JQuery|Element;

    /** The dialog title. */
    public get Title(): string|JQuery|Element {
      return this._Title;
    }
    public set Title(value: string|JQuery|Element) {
      var oldValue = this._Title;
      this._Title = value;
      if (oldValue != value) {
        if (this.$modal != null) {
          $('.modal-header', this.$modal).empty().append(value);
          if (value != null && value != '') {
            $('.modal-header', this.$modal).show();
          } else {
            $('.modal-header', this.$modal).hide();
          }
        }
      }
    }

    /** The dialog content. */
    public Content: string|JQuery|Element;

    /** The footer content. */
    public Footer: string|JQuery|Element;

    /** Dialog width. */
    public Width: string = null;

    /** Dialog height. */
    public Height: string = null;

    /** Show the close button in the header (default true - yes). */
    public DisplayCloseButton: boolean = true;

    /** 
     * Prevent dialog closing when click on the background 
     * (default false - are allowed to close the dialog when click on the background).
     */
    public get DisableOverlayClose(): boolean {
      return this.$modal.data('bs.modal').options.backdrop == 'static';
    }
    public set DisableOverlayClose(value: boolean) {
      this.$modal.data('bs.modal').options.backdrop = (value ? 'static' : 'true');
    }

    /** Do not restore the dialog box after the show other windows. */
    public get DontRestore(): boolean {
      if (this.$modal.attr('data-not-restore') == undefined) {
        return false;
      } else {
        return this.$modal.attr('data-not-restore').toLowerCase() == 'true';
      }
    }
    public set DontRestore(value: boolean) {
      if (value) {
        this.$modal.attr('data-not-restore', 'true');
      }
      else {
        if (this.$modal.attr('data-not-restore') != undefined) {
          this.$modal.removeAttr('data-not-restore');
        }
      }
    }

    /** Gets or sets the visibility status of the dialog. */
    public get Visible(): boolean {
      return $(this.$modal).css('display') != 'none';
    }
    public set Visible(value: boolean) {
      if (value) {
        this.Show();
      } else {
        this.Close();
      }
    }

    private _HiddenCallback: { (dialog: Dialog): void; };

    public get HiddenCallback(): { (dialog: Dialog): void; } {
      return this._HiddenCallback;
    }
    public set HiddenCallback(value: { (dialog: Dialog): void; }) {
      this._HiddenCallback = value;
    }

    // NOTE: I think it will be possible to do more features, but it will increase the file size.

    /**
     * Creates a new modal window.
     * 
     * @param title The dialog title. Allowed html.
     * @param content The content.
     * @param footer The footer content.
     * @param width The dialog width.
     * @param height The dialog height.
     * @param displayCloseButton Show the close button in the header (default true - yes). 
     * @param disableOverlayClose Prevent dialog closing when click on the background (default false - are allowed to close the dialog when click on the background).
     * @param dontRestore Do not restore the dialog box after the show other windows.
     */
    constructor(title: string|JQuery|Element, content: string|JQuery|Element|boolean, footer?: string|JQuery|Element, width?: string, height?: string, displayCloseButton?: boolean, disableOverlayClose?: boolean, dontRestore?: boolean) {
      if (typeof this.Init === 'undefined') { return; }
      if (displayCloseButton === undefined || displayCloseButton == null) { displayCloseButton = true; }
      if (disableOverlayClose === undefined || disableOverlayClose == null) { disableOverlayClose = false; }

      if (typeof content == 'boolean') {
        // creates an instance of the class of an existing dialog
        this.$modal = $(title);
        this.$modal.modal({ backdrop: (disableOverlayClose ? 'static' : 'true'), show: false });
      } else {
        // creates a new modal window.
        this.$modal = $(Dialog.ModalTemplate);
        this.$modal.modal({ backdrop: (disableOverlayClose ? 'static' : 'true'), show: false });

        this._Title = title;
        this.Content = <any>content;
        this.Footer = footer;
        this.Width = width;
        this.Height = height;
        this.DisplayCloseButton = displayCloseButton;
        this.DontRestore = dontRestore;

        this.Init();
      }
    }

    /*
     * Initializes a modal window in accordance with the specified parameters.
     */
    private Init(): void {
      // console.log('Dialog.Init');
      // console.log(this.$modal);

      var $this = this;

      if ($this.Width !== undefined && $this.Width) {
        $this.$modal.width($this.Width);
      } else {
        $this.$modal.width(null);
      }

      if ($this.Height !== undefined && $this.Height) {
        $('.modal-body', $this.$modal).height($this.Height);
      } else {
        $('.modal-body', $this.$modal).height(null);
      }

      if ($this.Title !== undefined && $this.Title) {
        $('.modal-header', $this.$modal).append($this.Title);
        $('.modal-header', $this.$modal).show();
        if (!$this.DisplayCloseButton) {
          $('.modal-header button.close:first', $this.$modal).hide();
        }
      } else {
        $('.modal-header', $this.$modal).hide();
      }

      $('.modal-body', $this.$modal).append($this.Content);

      if ($this.Footer !== undefined && $this.Footer) {
        $('.modal-footer', $this.$modal).append($this.Footer);
        $('.modal-footer', $this.$modal).show();
      } else {
        $('.modal-footer', $this.$modal).hide();
      }

      if ($this.DontRestore) {
        $this.$modal.attr('data-not-restore', 'true');
      }

      $this.$modal.on('hidden.bs.modal', () => { $(this).remove(); });
      $this.$modal.modal({ backdrop: ($this.DisableOverlayClose ? 'static' : 'true'), show: false }); //, keyboard: false
    }

    /**
     * Displays the dialog box.
     */
    public Show(): void {
      // this.Init();

      this.$modal.off('hidden.bs.modal');

      if (this.HiddenCallback !== undefined && this.HiddenCallback != null && typeof this.HiddenCallback === 'function') {
        this.$modal.on('hidden.bs.modal',() => {
          this.HiddenCallback(this);
        });
      }

      this.$modal.modal('show');
    }

    /** 
     * Closes the dialog box.
     */
    public Close(): void {
      this.$modal.modal('hide');
    }

    /**
     * creates a new window from an existing element.
     * 
     * @param element The element from which to create a window (Dialog).
     */
    public static CreateFromElement(element: string|JQuery|Element): Dialog {
      if (element === undefined || element == null) {
        throw new Error('?????????? ??????? ???????, ?? ???????? ??????? ??????? ?????????? ????.');
      }

      return new Dialog($(element), true);
    }

    /**
     * Creates and shows the dialog.
     * 
     * @param title The dialog title. Allowed html.
     * @param content The content.
     * @param footer The footer content.
     * @param width The dialog width.
     * @param height The dialog height.
     * @param displayCloseButton Show the close button in the header (default true - yes). 
     * @param disableOverlayClose Prevent dialog closing when click on the background (default false - are allowed to close the dialog when click on the background).
     * @param dontRestore Do not restore the dialog box after the show other windows.
     */
    public static ShowDialog(title: string|JQuery|Element, content: string|JQuery|Element, footer?: string|JQuery|Element, width?: string, height?: string, displayCloseButton?: boolean, disableOverlayClose?: boolean, dontRestore?: boolean): Dialog {
      var modal = new Dialog(title, content, footer, width, height, displayCloseButton, disableOverlayClose, dontRestore);
      modal.Show();

      return modal;
    }

    /**
     * Shows alert.
     * 
     * @param title The dialog title. Only text, without html.
     * @param message The message. Allowed html.
     * @param buttonTitle The Ok button title. Default: Ok.
     * @param hiddenCallback Callback function.
     */
    public static Alert(message: string|JQuery|Element, title?: string, buttonTitle?: string, hiddenCallback?: { (dialog: Dialog): void; }): Dialog {
      // remember all open modal windows
      var restoreModal = new Array();
      $('.modal').each((i, e) => {
        if ($(e).css('display') != 'none') {
          if ($(e).attr('data-not-restore') === undefined || $(e).attr('data-not-restore') != 'true') {
            restoreModal[restoreModal.length] = e;
          }
          $(e).modal('hide');
        }
      });

      if (title !== undefined && title && title.length > 0) {
        title = '<h3>' + title + '</h3>';
      }

      var footer = null;

      if (buttonTitle === undefined || !buttonTitle || buttonTitle.length <= 0) {
        buttonTitle = 'Ok';
      }

      footer = '<a href="#" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">' + buttonTitle + '</a>';

      var dialog = new Dialog(title, message, footer, null, null, true, false, false);
      
      dialog.HiddenCallback = (sender: Dialog) => {
        if (restoreModal.length > 0) {
          // restore windows
          $(restoreModal).each((i, e) => {
            $(e).modal('show');
          });
        }

        if (hiddenCallback !== undefined && hiddenCallback && typeof hiddenCallback == 'function') {
          hiddenCallback(dialog);
        }

        $(sender.$modal).remove();
      }
       
      /*$(alrt).on('shown', function () {
        $(this).css("top", ($(window).height() - $(this).height()) / 2).css("left", ($(window).width() - $(this).width()) / 2);
        return this;
      });*/

      dialog.Show();

      return dialog;
    }

    public static Confirm(message: string|JQuery|Element, title?: string, buttonAcceptTitle?: string, buttonCancelTitle?: string, resultCallback?: { (dialog: Dialog, result: boolean): void; }): Dialog {
      // remember all open modal windows
      var restoreModal = new Array();
      $('.modal').each((i, e) => {
        if ($(e).css('display') != 'none') {
          if ($(e).attr('data-not-restore') === undefined || $(e).attr('data-not-restore') != 'true') {
            restoreModal[restoreModal.length] = this;
          }
          $(e).modal('hide');
        }
      });

      if (title !== undefined && title && title.length > 0) {
        title = '<h3>' + title + '</h3>';
      }

      var footer = null;

      if (buttonAcceptTitle === undefined || !buttonAcceptTitle || buttonAcceptTitle.length <= 0) {
        buttonAcceptTitle = 'Ok';
      }

      if (buttonCancelTitle === undefined || !buttonCancelTitle || buttonCancelTitle.length <= 0) {
        buttonCancelTitle = 'Cancel';
      }

      footer = $
      (
        '<a href="#" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">' + buttonAcceptTitle + '</a>' +
        '<a href="#" class="btn btn-danger" data-dismiss="modal" aria-hidden="true">' + buttonCancelTitle + '</a>'
      );

      if (resultCallback !== undefined && resultCallback && typeof resultCallback == 'function') {

        $('a:first', footer).click(() => {
          resultCallback(dialog, true);
        });

        $('a:last', footer).click(() => {
          resultCallback(dialog, false);
        });

      }

      var dialog = new Dialog(title, message, footer, null, null, true, false, false);

      dialog.HiddenCallback = (sender: Dialog) => {
        if (restoreModal.length > 0) {
          // restore windows
          $(restoreModal).each((i, e) => {
            $(e).modal('show');
          });
        }

        $(sender.$modal).remove();
      }

      dialog.Show();

      return dialog;
    }

  }

}