add ui

ui/components/dialog/DomDialog.js

@@ -0,0 +1,145 @@
+import _ from 'lodash';
+import DOMAttachedObject from 'vj/components/DOMAttachedObject';
+
+import zIndexManager from 'vj/utils/zIndexManager';
+
+export default class DomDialog extends DOMAttachedObject {
+  static DOMAttachKey = 'vjDomDialogInstance';
+
+  constructor($dom, options = {}) {
+    super($dom);
+    this.isShown = false;
+    this.isAnimating = false;
+    this.options = {
+      cancelByClickingBack: false,
+      cancelByEsc: false,
+      onDispatch: () => {},
+      ...options,
+    };
+    this._defer = null;
+  }
+
+  async _show() {
+    this.$dom.css('z-index', zIndexManager.getNext());
+    this.$dom.trigger('vjDomDialogShow');
+    this.isAnimating = true;
+
+    if (this.options.cancelByClickingBack) {
+      this.$dom.on(`click.${this.eventNS}`, this.handleClick.bind(this));
+    }
+    if (this.options.cancelByEsc) {
+      $(document).on(`keyup.${this.eventNS}`, this.handleKeyUp.bind(this));
+    }
+
+    const $wrap = this.$dom;
+    $wrap.css({
+      display: 'flex',
+      opacity: 0,
+    });
+    $wrap.width();
+    $wrap.transition({
+      opacity: 1,
+    }, {
+      duration: 100,
+      easing: 'easeOutCubic',
+    });
+
+    const $dgContent = this.$dom.find('.dialog__content');
+    $dgContent.css({
+      scale: 0.8,
+    });
+    await $dgContent
+      .transition({
+        scale: 1,
+      }, {
+        duration: 200,
+        easing: 'easeOutCubic',
+      })
+      .promise();
+
+    this.$dom.find('[data-autofocus]').focus();
+
+    this.isShown = true;
+    this.isAnimating = false;
+    this.$dom.trigger('vjDomDialogShown');
+  }
+
+  async _hide() {
+    this.$dom.trigger('vjDomDialogHide');
+    this.isAnimating = true;
+
+    $(document).off(`keyup.${this.eventNS}`);
+    this.$dom.off(`click.${this.eventNS}`);
+
+    this.$dom.css({
+      opacity: 1,
+    });
+    this.$dom.transition({
+      opacity: 0,
+    }, {
+      duration: 200,
+    });
+
+    const $dgContent = this.$dom.find('.dialog__content');
+    $dgContent.css({
+      scale: 1,
+    });
+    await $dgContent
+      .transition({
+        scale: 0.8,
+      }, {
+        duration: 200,
+        easing: 'easeOutCubic',
+      })
+      .promise();
+
+    this.$dom.css('display', 'none');
+
+    this.isShown = false;
+    this.isAnimating = false;
+    this.$dom.trigger('vjDomDialogHidden');
+  }
+
+  show() {
+    if (this.isShown || this.isAnimating) {
+      return Promise.reject();
+    }
+    this._defer = new $.Deferred();
+    this._show();
+    return this._defer.promise();
+  }
+
+  hide() {
+    if (!this.isShown || this.isAnimating) {
+      return false;
+    }
+    if (this._defer.state() === 'pending') {
+      this._defer.resolve('cancel');
+    }
+    this._defer = null;
+    this._hide();
+    return true;
+  }
+
+  dispatchAction(data) {
+    if (this.options.onDispatch(data) === false) {
+      return;
+    }
+    this._defer.resolve(data);
+    this.hide();
+  }
+
+  handleClick(e) {
+    if (e.target === this.$dom.get(0)) {
+      this.dispatchAction('cancel');
+    }
+  }
+
+  handleKeyUp(e) {
+    if (e.keyCode === 27) {
+      this.dispatchAction('cancel');
+    }
+  }
+}
+
+_.assign(DomDialog, DOMAttachedObject);

ui/components/dialog/dialog.page.styl

@@ -0,0 +1,38 @@
+.dialog
+  position: fixed
+  left: 0
+  top: 0
+  width: 100%
+  height: 100%
+  opacity: 0
+  z-index: 1000  // managed
+  // display flex will be added after animation completes
+  flex-direction: column
+  align-items: center
+  justify-content: center
+  display: none
+  background: $dialog-layer-bg-color
+
+.dialog__content
+  position: relative
+
+.dialog.withBg .dialog__content
+  background: $dialog-bg-color
+  border: 1px solid $dialog-border-color
+  box-shadow: $dialog-shadow
+  min-width: rem(500px)
+  max-width: rem(900px)
+  padding: rem(40px) rem(30px)
+
+.dialog__body
+  margin-bottom: rem(20px)
+  min-height: rem(50px)
+
+  h1
+    font-size: 1.6rem
+    color: $dialog-title-color
+    margin-bottom: 1rem
+
+.dialog__action button
+  margin-left: rem(10px)
+  margin-bottom: 0

ui/components/dialog/index.js

@@ -0,0 +1,94 @@
+import tpl from 'vj/utils/tpl';
+import i18n from 'vj/utils/i18n';
+import DomDialog from './DomDialog';
+
+export default class Dialog {
+  constructor(options = {}) {
+    this.options = {
+      classes: '',
+      $body: null,
+      $action: null,
+      ...options,
+    };
+    this.$dom = $(tpl`
+      <div class="dialog withBg ${this.options.classes}" style="display:none">
+        <div class="dialog__content">
+          <div class="dialog__body"></div>
+          <div class="row"><div class="columns clearfix">
+            <div class="float-right dialog__action"></div>
+          </div></div>
+        </div>
+      </div>
+    `);
+    this.$dom.on('click', '[data-action]', this.handleActionButton.bind(this));
+    this.$dom.on('vjDomDialogShow', this.beforeShow.bind(this));
+    this.$dom.on('vjDomDialogHidden', this.afterHide.bind(this));
+    this.$dom.find('.dialog__body').append(this.options.$body);
+    this.$dom.find('.dialog__action').append(this.options.$action);
+    this.domDialogInstance = new DomDialog(this.$dom, this.options);
+  }
+
+  beforeShow() {
+    this.$dom.appendTo('body');
+  }
+
+  afterHide() {
+    this.$dom.detach();
+  }
+
+  open() {
+    return this.domDialogInstance.show();
+  }
+
+  close() {
+    return this.domDialogInstance.hide();
+  }
+
+  handleActionButton(ev) {
+    this.domDialogInstance.dispatchAction($(ev.currentTarget).attr('data-action'));
+  }
+}
+
+const buttonOk = tpl`<button class="primary rounded button" data-action="ok">${i18n('Ok')}</button>`;
+const buttonCancel = tpl`<button class="rounded button" data-action="cancel">${i18n('Cancel')}</button>`;
+const buttonYes = tpl`<button class="primary rounded button" data-action="yes">${i18n('Yes')}</button>`;
+const buttonNo = tpl`<button class="rounded button" data-action="no">${i18n('No')}</button>`;
+
+export class InfoDialog extends Dialog {
+  constructor(options = {}) {
+    super({
+      $action: buttonOk,
+      cancelByClickingBack: true,
+      cancelByEsc: true,
+      ...options,
+    });
+  }
+}
+
+export class ActionDialog extends Dialog {
+  constructor(options = {}) {
+    super({
+      $action: [buttonCancel, buttonOk].join('\n'),
+      cancelByClickingBack: true,
+      cancelByEsc: true,
+      ...options,
+    });
+  }
+}
+
+export class ConfirmDialog extends Dialog {
+  constructor(options = {}) {
+    let buttons = [];
+    if (options.canCancel) {
+      buttons = [buttonCancel, buttonNo, buttonYes];
+    } else {
+      buttons = [buttonNo, buttonYes];
+    }
+    super({
+      $action: buttons.join('\n'),
+      cancelByClickingBack: options.canCancel,
+      cancelByEsc: options.canCancel,
+      ...options,
+    });
+  }
+}