diff --git a/src/editor/EditorStartup.js b/src/editor/EditorStartup.js index 7ff44885..bf554e49 100644 --- a/src/editor/EditorStartup.js +++ b/src/editor/EditorStartup.js @@ -86,6 +86,10 @@ class EditorStartup { const promptBox = document.createElement('se-prompt-dialog'); promptBox.setAttribute('id', 'se-prompt-dialog'); document.body.append(promptBox); + // Export dialog added to DOM + const exportDialog = document.createElement('se-export-dialog'); + exportDialog.setAttribute('id', 'se-export-dialog'); + document.body.append(exportDialog); } catch (err) { // eslint-disable-next-line no-console console.error(err); @@ -470,7 +474,11 @@ class EditorStartup { this.clickSave(); } }.bind(this)); - $id('tool_export').addEventListener('click', this.clickExport.bind(this)); + // this.clickExport.bind(this) + $id('tool_export').addEventListener('click', function (e) { + document.getElementById('se-export-dialog').setAttribute('dialog', 'open'); + }); + $id('se-export-dialog').addEventListener('change', this.clickExport.bind(this)); $id('tool_docprops').addEventListener('click', this.showDocProperties.bind(this)); $id('tool_editor_prefs').addEventListener('click', this.showPreferences.bind(this)); $id('tool_editor_homepage').addEventListener('click', this.openHomePage.bind(this)); diff --git a/src/editor/dialogs/exportDialog.js b/src/editor/dialogs/exportDialog.js new file mode 100644 index 00000000..efd54619 --- /dev/null +++ b/src/editor/dialogs/exportDialog.js @@ -0,0 +1,190 @@ +/* eslint-disable max-len */ +/* eslint-disable node/no-unpublished-import */ +import 'elix/define/Dialog.js'; +import 'elix/define/NumberSpinBox.js'; + +const template = document.createElement('template'); +template.innerHTML = ` + + +
+
+
+

+ Select an image type for export: +

+

+ +

+

Quality:

+
+
+ + +
+
+ +`; +/** + * @class SeExportDialog + */ +export class SeExportDialog extends HTMLElement { + /** + * @function constructor + */ + constructor () { + super(); + // create the shadowDom and insert the template + this._shadowRoot = this.attachShadow({mode: 'open'}); + this._shadowRoot.append(template.content.cloneNode(true)); + this.$dialog = this._shadowRoot.querySelector('#export_box'); + this.$okBtn = this._shadowRoot.querySelector('#export_ok'); + this.$cancelBtn = this._shadowRoot.querySelector('#export_cancel'); + this.$exportOption = this._shadowRoot.querySelector('#se-storage-pref'); + this.$qualityCont = this._shadowRoot.querySelector('#se-quality'); + this.$input = this._shadowRoot.querySelector('elix-number-spin-box'); + this.value = 1; + } + /** + * @function observedAttributes + * @returns {any} observed + */ + static get observedAttributes () { + return ['dialog']; + } + /** + * @function attributeChangedCallback + * @param {string} name + * @param {string} oldValue + * @param {string} newValue + * @returns {void} + */ + attributeChangedCallback (name, oldValue, newValue) { + switch (name) { + case 'dialog': + if (newValue === 'open') { + this.$dialog.open(); + } else { + this.$dialog.close(); + } + break; + default: + // super.attributeChangedCallback(name, oldValue, newValue); + break; + } + } + /** + * @function get + * @returns {any} + */ + get dialog () { + return this.getAttribute('dialog'); + } + /** + * @function set + * @returns {void} + */ + set dialog (value) { + this.setAttribute('dialog', value); + } + /** + * @function connectedCallback + * @returns {void} + */ + connectedCallback () { + this.$input.addEventListener('change', (e) => { + e.preventDefault(); + this.value = e.target.value; + }); + this.$input.addEventListener('click', (e) => { + e.preventDefault(); + this.value = e.target.value; + }); + const onSubmitHandler = (e, action) => { + if (action === 'cancel') { + document.getElementById('se-export-dialog').setAttribute('dialog', 'close'); + } else { + const triggerEvent = new CustomEvent('change', {detail: { + trigger: action, + imgType: this.$exportOption.value, + quality: this.value + }}); + this.dispatchEvent(triggerEvent); + } + }; + const onChangeHandler = (e) => { + if (e.target.value === 'PDF') { + this.$qualityCont.style.display = 'none'; + } else { + this.$qualityCont.style.display = 'block'; + } + }; + this.$okBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'ok')); + this.$cancelBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'cancel')); + this.$exportOption.addEventListener('change', (evt) => onChangeHandler(evt)); + } +} + +// Register +customElements.define('se-export-dialog', SeExportDialog); diff --git a/src/editor/dialogs/index.js b/src/editor/dialogs/index.js index 1278f74d..ce9c3e6b 100644 --- a/src/editor/dialogs/index.js +++ b/src/editor/dialogs/index.js @@ -7,3 +7,4 @@ import './seSelectDialog.js'; import './seConfirmDialog.js'; import './sePromptDialog.js'; import './seAlertDialog.js'; +import './exportDialog.js'; diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index 19ed28ad..d18252fc 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -1106,17 +1106,12 @@ class Editor extends EditorStartup { * * @returns {Promise} Resolves to `undefined` */ - async clickExport () { - const imgType = await seSelect('Select an image type for export: ', [ - // See http://kangax.github.io/jstests/toDataUrl_mime_type_test/ for a useful list of MIME types and browser support - // 'ICO', // Todo: Find a way to preserve transparency in SVG-Edit if not working presently and do full packaging for x-icon; then switch back to position after 'PNG' - 'PNG', - 'JPEG', 'BMP', 'WEBP', 'PDF' - ]); - - if (!imgType) { + async clickExport (e) { + if (e?.detail?.trigger !== 'ok' || e?.detail?.imgType === undefined) { return; } + const imgType = e?.detail?.imgType; + const quality = (e?.detail?.quality) ? (e?.detail?.quality / 100) : 1; // Open placeholder window (prevents popup) let exportWindowName; @@ -1161,10 +1156,6 @@ class Editor extends EditorStartup { if (!this.customExportImage) { openExportWindow(); } - /** - * @todo "quality" should be an option of the dialog - */ - const quality = 1; /* const results = */ await this.svgCanvas.rasterExport(imgType, quality, this.exportWindowName); } }