diff --git a/src/editor/dialogs/SePlainAlertDialog.js b/src/editor/dialogs/SePlainAlertDialog.js new file mode 100644 index 00000000..6deb1261 --- /dev/null +++ b/src/editor/dialogs/SePlainAlertDialog.js @@ -0,0 +1,77 @@ +/* eslint-disable node/no-unpublished-import */ +import PlainAlertDialog from 'elix/src/plain/PlainAlertDialog.js'; +// import AlertDialog from 'elix/define/AlertDialog.js'; +import {defaultState, template} from 'elix/src/base/internal.js'; +import {fragmentFrom} from 'elix/src/core/htmlLiterals.js'; +import PlainBorderButton from 'elix/define/BorderButton.js'; + +/** + * AlertDialog component in the Plain reference design system + * + * @inherits AlertDialog + * @mixes PlainModalOverlayMixin + * @part {PlainBorderButton} choice-button + */ +export default class SePlainAlertDialog extends PlainAlertDialog { + /** + * @function get + * @returns {PlainObject} + */ + get [template] () { + const result = super[template]; + // Replace the default slot with a new default slot and a button container. + const defaultSlot = result.content.querySelector('#frameContent'); + if (defaultSlot) { + defaultSlot.replaceWith(fragmentFrom.html` +
+
+ +
+
+
+ `); + } + console.log(result.content); + + result.content.append( + fragmentFrom.html` + + ` + ); + return result; + } +} + +customElements.define('se-elix-alert-dialog', SePlainAlertDialog); diff --git a/src/editor/dialogs/seAlertDialog.js b/src/editor/dialogs/seAlertDialog.js index ef95c6df..8d83e2f8 100644 --- a/src/editor/dialogs/seAlertDialog.js +++ b/src/editor/dialogs/seAlertDialog.js @@ -1,8 +1,7 @@ -// eslint-disable-next-line node/no-unpublished-import -import AlertDialog from 'elix/define/AlertDialog.js'; +import SePlainAlertDialog from './SePlainAlertDialog.js'; -const dialog = new AlertDialog(); const seAlert = (text) => { + const dialog = new SePlainAlertDialog(); dialog.textContent = text; dialog.choices = ['Ok']; dialog.open(); diff --git a/src/editor/dialogs/seConfirmDialog.js b/src/editor/dialogs/seConfirmDialog.js index 66aa5cd0..eee1c0c1 100644 --- a/src/editor/dialogs/seConfirmDialog.js +++ b/src/editor/dialogs/seConfirmDialog.js @@ -1,8 +1,7 @@ -// eslint-disable-next-line node/no-unpublished-import -import AlertDialog from 'elix/define/AlertDialog.js'; +import SePlainAlertDialog from './SePlainAlertDialog.js'; const seConfirm = async (text, choices) => { - const dialog = new AlertDialog(); + const dialog = new SePlainAlertDialog(); dialog.textContent = text; dialog.choices = (choices === undefined) ? ['Ok', 'Cancel'] : choices; dialog.open(); diff --git a/src/editor/dialogs/sePromptDialog.js b/src/editor/dialogs/sePromptDialog.js index 10fdf802..b7e3a098 100644 --- a/src/editor/dialogs/sePromptDialog.js +++ b/src/editor/dialogs/sePromptDialog.js @@ -1,5 +1,4 @@ -// eslint-disable-next-line node/no-unpublished-import -import AlertDialog from 'elix/define/AlertDialog.js'; +import SePlainAlertDialog from './SePlainAlertDialog.js'; /** * @class SePromptDialog */ @@ -11,7 +10,7 @@ export class SePromptDialog extends HTMLElement { super(); // create the shadowDom and insert the template this._shadowRoot = this.attachShadow({mode: 'open'}); - this.dialog = new AlertDialog(); + this.dialog = new SePlainAlertDialog(); } /** * @function observedAttributes diff --git a/src/editor/dialogs/seSelectDialog.js b/src/editor/dialogs/seSelectDialog.js index a02caf03..27f754bf 100644 --- a/src/editor/dialogs/seSelectDialog.js +++ b/src/editor/dialogs/seSelectDialog.js @@ -1,8 +1,7 @@ -// eslint-disable-next-line node/no-unpublished-import -import AlertDialog from 'elix/define/AlertDialog.js'; +import SePlainAlertDialog from './SePlainAlertDialog.js'; -const dialog = new AlertDialog(); const seSelect = async (text, choices) => { + const dialog = new SePlainAlertDialog(); dialog.textContent = text; dialog.choices = choices; dialog.open(); diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index f63ef3bc..cd3e980a 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -1250,7 +1250,7 @@ class Editor extends EditorStartup { * @param {Event} e * @returns {void} Resolves to `undefined` */ - saveSourceEditor (e) { + async saveSourceEditor (e) { const $editorDialog = document.getElementById('se-svg-editor-dialog'); if ($editorDialog.getAttribute('dialog') !== 'open') return; const saveChanges = () => { @@ -1262,8 +1262,8 @@ class Editor extends EditorStartup { }; if (!this.svgCanvas.setSvgString(e.detail.value)) { - const ok = seConfirm(this.uiStrings.notification.QerrorsRevertToSource); - if (!ok) { + const ok = await seConfirm(this.uiStrings.notification.QerrorsRevertToSource); + if (ok === false || ok === 'Cancel') { return; } saveChanges();