mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-07-18 09:11:52 +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 codeEditor from "./code-editor.js"
|
||||||
import codeHighlighter from "./code-highlighter.js"
|
import codeHighlighter from "./code-highlighter.js"
|
||||||
import collapsible from "./collapsible.js"
|
import collapsible from "./collapsible.js"
|
||||||
|
import confirmDialog from "./confirm-dialog"
|
||||||
import customCheckbox from "./custom-checkbox.js"
|
import customCheckbox from "./custom-checkbox.js"
|
||||||
import detailsHighlighter from "./details-highlighter.js"
|
import detailsHighlighter from "./details-highlighter.js"
|
||||||
import dropdown from "./dropdown.js"
|
import dropdown from "./dropdown.js"
|
||||||
|
@ -26,7 +27,6 @@ import headerMobileToggle from "./header-mobile-toggle.js"
|
||||||
import homepageControl from "./homepage-control.js"
|
import homepageControl from "./homepage-control.js"
|
||||||
import imageManager from "./image-manager.js"
|
import imageManager from "./image-manager.js"
|
||||||
import imagePicker from "./image-picker.js"
|
import imagePicker from "./image-picker.js"
|
||||||
import index from "./index.js"
|
|
||||||
import listSortControl from "./list-sort-control.js"
|
import listSortControl from "./list-sort-control.js"
|
||||||
import markdownEditor from "./markdown-editor.js"
|
import markdownEditor from "./markdown-editor.js"
|
||||||
import newUserPassword from "./new-user-password.js"
|
import newUserPassword from "./new-user-password.js"
|
||||||
|
@ -66,6 +66,7 @@ const componentMapping = {
|
||||||
"code-editor": codeEditor,
|
"code-editor": codeEditor,
|
||||||
"code-highlighter": codeHighlighter,
|
"code-highlighter": codeHighlighter,
|
||||||
"collapsible": collapsible,
|
"collapsible": collapsible,
|
||||||
|
"confirm-dialog": confirmDialog,
|
||||||
"custom-checkbox": customCheckbox,
|
"custom-checkbox": customCheckbox,
|
||||||
"details-highlighter": detailsHighlighter,
|
"details-highlighter": detailsHighlighter,
|
||||||
"dropdown": dropdown,
|
"dropdown": dropdown,
|
||||||
|
@ -82,7 +83,6 @@ const componentMapping = {
|
||||||
"homepage-control": homepageControl,
|
"homepage-control": homepageControl,
|
||||||
"image-manager": imageManager,
|
"image-manager": imageManager,
|
||||||
"image-picker": imagePicker,
|
"image-picker": imagePicker,
|
||||||
"index": index,
|
|
||||||
"list-sort-control": listSortControl,
|
"list-sort-control": listSortControl,
|
||||||
"markdown-editor": markdownEditor,
|
"markdown-editor": markdownEditor,
|
||||||
"new-user-password": newUserPassword,
|
"new-user-password": newUserPassword,
|
||||||
|
|
|
@ -34,7 +34,7 @@ class Popup {
|
||||||
}
|
}
|
||||||
|
|
||||||
hide(onComplete = null) {
|
hide(onComplete = null) {
|
||||||
fadeOut(this.container, 240, onComplete);
|
fadeOut(this.container, 120, onComplete);
|
||||||
if (this.onkeyup) {
|
if (this.onkeyup) {
|
||||||
window.removeEventListener('keyup', this.onkeyup);
|
window.removeEventListener('keyup', this.onkeyup);
|
||||||
this.onkeyup = null;
|
this.onkeyup = null;
|
||||||
|
@ -45,7 +45,7 @@ class Popup {
|
||||||
}
|
}
|
||||||
|
|
||||||
show(onComplete = null, onHide = null) {
|
show(onComplete = null, onHide = null) {
|
||||||
fadeIn(this.container, 240, onComplete);
|
fadeIn(this.container, 120, onComplete);
|
||||||
|
|
||||||
this.onkeyup = (event) => {
|
this.onkeyup = (event) => {
|
||||||
if (event.key === 'Escape') {
|
if (event.key === 'Escape') {
|
||||||
|
|
|
@ -120,6 +120,11 @@
|
||||||
width: 800px;
|
width: 800px;
|
||||||
max-width: 90%;
|
max-width: 90%;
|
||||||
}
|
}
|
||||||
|
&.very-small {
|
||||||
|
margin: 2% auto;
|
||||||
|
width: 600px;
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
&:before {
|
&:before {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-self: flex-start;
|
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