You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
146 lines
3.0 KiB
JavaScript
146 lines
3.0 KiB
JavaScript
5 years ago
|
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);
|