mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 05:36:00 +00:00
Added new confirm-dialog component, both view and logic
This commit is contained in:
parent
214992650d
commit
eff539f89b
53
resources/js/components/confirm-dialog.js
Normal file
53
resources/js/components/confirm-dialog.js
Normal file
@ -0,0 +1,53 @@
|
||||
import {onSelect} from "../services/dom";
|
||||
|
||||
/**
|
||||
* Custom equivalent of window.confirm() using our popup component.
|
||||
* Is promise based so can be used like so:
|
||||
* `const result = await dialog.show()`
|
||||
* @extends {Component}
|
||||
*/
|
||||
class ConfirmDialog {
|
||||
|
||||
setup() {
|
||||
this.container = this.$el;
|
||||
this.confirmButton = this.$refs.confirm;
|
||||
|
||||
this.res = null;
|
||||
|
||||
onSelect(this.confirmButton, () => {
|
||||
this.sendResult(true);
|
||||
this.getPopup().hide();
|
||||
});
|
||||
}
|
||||
|
||||
show() {
|
||||
this.getPopup().show(null, () => {
|
||||
this.sendResult(false);
|
||||
});
|
||||
|
||||
return new Promise((res, rej) => {
|
||||
this.res = res;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {Popup}
|
||||
*/
|
||||
getPopup() {
|
||||
return this.container.components.popup;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Boolean} result
|
||||
*/
|
||||
sendResult(result) {
|
||||
if (this.res) {
|
||||
console.log('sending result', result);
|
||||
this.res(result)
|
||||
this.res = null;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default ConfirmDialog;
|
@ -10,6 +10,7 @@ import chapterToggle from "./chapter-toggle.js"
|
||||
import codeEditor from "./code-editor.js"
|
||||
import codeHighlighter from "./code-highlighter.js"
|
||||
import collapsible from "./collapsible.js"
|
||||
import confirmDialog from "./confirm-dialog"
|
||||
import customCheckbox from "./custom-checkbox.js"
|
||||
import detailsHighlighter from "./details-highlighter.js"
|
||||
import dropdown from "./dropdown.js"
|
||||
@ -26,7 +27,6 @@ import headerMobileToggle from "./header-mobile-toggle.js"
|
||||
import homepageControl from "./homepage-control.js"
|
||||
import imageManager from "./image-manager.js"
|
||||
import imagePicker from "./image-picker.js"
|
||||
import index from "./index.js"
|
||||
import listSortControl from "./list-sort-control.js"
|
||||
import markdownEditor from "./markdown-editor.js"
|
||||
import newUserPassword from "./new-user-password.js"
|
||||
@ -66,6 +66,7 @@ const componentMapping = {
|
||||
"code-editor": codeEditor,
|
||||
"code-highlighter": codeHighlighter,
|
||||
"collapsible": collapsible,
|
||||
"confirm-dialog": confirmDialog,
|
||||
"custom-checkbox": customCheckbox,
|
||||
"details-highlighter": detailsHighlighter,
|
||||
"dropdown": dropdown,
|
||||
@ -82,7 +83,6 @@ const componentMapping = {
|
||||
"homepage-control": homepageControl,
|
||||
"image-manager": imageManager,
|
||||
"image-picker": imagePicker,
|
||||
"index": index,
|
||||
"list-sort-control": listSortControl,
|
||||
"markdown-editor": markdownEditor,
|
||||
"new-user-password": newUserPassword,
|
||||
|
@ -34,7 +34,7 @@ class Popup {
|
||||
}
|
||||
|
||||
hide(onComplete = null) {
|
||||
fadeOut(this.container, 240, onComplete);
|
||||
fadeOut(this.container, 120, onComplete);
|
||||
if (this.onkeyup) {
|
||||
window.removeEventListener('keyup', this.onkeyup);
|
||||
this.onkeyup = null;
|
||||
@ -45,7 +45,7 @@ class Popup {
|
||||
}
|
||||
|
||||
show(onComplete = null, onHide = null) {
|
||||
fadeIn(this.container, 240, onComplete);
|
||||
fadeIn(this.container, 120, onComplete);
|
||||
|
||||
this.onkeyup = (event) => {
|
||||
if (event.key === 'Escape') {
|
||||
|
@ -120,6 +120,11 @@
|
||||
width: 800px;
|
||||
max-width: 90%;
|
||||
}
|
||||
&.very-small {
|
||||
margin: 2% auto;
|
||||
width: 600px;
|
||||
max-width: 90%;
|
||||
}
|
||||
&:before {
|
||||
display: flex;
|
||||
align-self: flex-start;
|
||||
|
21
resources/views/common/confirm-dialog.blade.php
Normal file
21
resources/views/common/confirm-dialog.blade.php
Normal file
@ -0,0 +1,21 @@
|
||||
<div components="popup confirm-dialog"
|
||||
refs="confirm-dialog@popup"
|
||||
class="popup-background">
|
||||
<div class="popup-body very-small" tabindex="-1">
|
||||
|
||||
<div class="popup-header primary-background">
|
||||
<div class="popup-title">{{ $title }}</div>
|
||||
<button refs="popup@hide" type="button" class="popup-header-close">x</button>
|
||||
</div>
|
||||
|
||||
<div class="px-m py-m">
|
||||
{{ $slot }}
|
||||
|
||||
<div class="text-right">
|
||||
<button type="button" class="button outline" refs="popup@hide">{{ trans('common.cancel') }}</button>
|
||||
<button type="button" class="button" refs="confirm-dialog@confirm">{{ trans('common.continue') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
Loading…
Reference in New Issue
Block a user