diff --git a/build/build-modules-js/javascript/compile-to-es2017.es6.js b/build/build-modules-js/javascript/compile-to-es2017.es6.js index 8849b39f8a08b..bd41d5d583aa8 100644 --- a/build/build-modules-js/javascript/compile-to-es2017.es6.js +++ b/build/build-modules-js/javascript/compile-to-es2017.es6.js @@ -53,6 +53,7 @@ module.exports.handleESMFile = async (file) => { const minifiedCss = await getWcMinifiedCss(file); const bundle = await rollup.rollup({ input: resolve(file), + inlineDynamicImports: true, plugins: [ nodeResolve({ preferBuiltins: false, diff --git a/build/media_source/plg_editors_tinymce/js/tinymce.es6.js b/build/media_source/plg_editors_tinymce/js/tinymce.es6.js index aad5d4592ef9b..7d34701961848 100644 --- a/build/media_source/plg_editors_tinymce/js/tinymce.es6.js +++ b/build/media_source/plg_editors_tinymce/js/tinymce.es6.js @@ -6,6 +6,36 @@ ((tinyMCE, Joomla, window, document) => { 'use strict'; + function openJoomlaModal(button) { + const modalContainer = document.createElement('joomla-modal'); + modalContainer.setAttribute('id', 'tinymce-j-modal'); + // modalContainer.setAttribute('class', `maximum header-two-btn`); + modalContainer.setAttribute('title', `Select ${button.text}`); + modalContainer.setAttribute('url', button.href); + modalContainer.setAttribute('close-text', 'Clooooooose'); + modalContainer.setAttribute('click-outside', false); + + document.body.append(modalContainer); + modalContainer.open(); + Joomla.Modal.setCurrent(modalContainer) + + const matches = /e_name=(.*?)\&/.exec(button.href) + if (matches.length === 2) { + const buttonSaveSelectedElement = document.createElement('button'); + buttonSaveSelectedElement.setAttribute('type', 'button'); + buttonSaveSelectedElement.textContent = 'Select'; + + function onSelected() { + Joomla.getImage(parent.window.Joomla.selectedMediaFile, button.id, modalContainer); + modalContainer.querySelector('dialog').close(); + Joomla.Modal.setCurrent(null) + } + + buttonSaveSelectedElement.addEventListener('click', onSelected); + modalContainer.querySelector('header button').insertAdjacentElement('afterend', buttonSaveSelectedElement); + } + } + Joomla.JoomlaTinyMCE = { /** * Find all TinyMCE elements and initialize TinyMCE instance for each @@ -98,9 +128,10 @@ } if (xtdButton.href) { - tmp.onAction = () => { - document.getElementById(`${xtdButton.id}_modal`).open(); - }; + tmp.href = xtdButton.href; + tmp.editor = element; + tmp.id = element.id; + tmp.onAction = () => openJoomlaModal(tmp); } else { tmp.onAction = () => { // eslint-disable-next-line no-new-func diff --git a/build/media_source/system/css/joomla-modal.css b/build/media_source/system/css/joomla-modal.css new file mode 100644 index 0000000000000..4e82f8f990614 --- /dev/null +++ b/build/media_source/system/css/joomla-modal.css @@ -0,0 +1,82 @@ + +dialog:modal { + /* + From BS 5.2 + */ + border-color: grey; + border-width: 1px; + border-radius: 0.5rem; + width: calc(100dvw - 2em); + height: calc(100dvw - 4em); + + /* clamp(min(10em, calc(100dvw - 2em)), calc(100dvw - 2em), 40em); */ +} + +dialog::backdrop { + background-color: black; + opacity: .8 +} + +dialog:modal iframe { + width: 100%; + height: 100vh; + border: none; +} + +dialog:modal header { + margin: -1em; + display: flex; + align-items: center; + justify-items: start; + border-bottom: 1px inset grey; +} + +dialog:modal header > *:nth-child(1) { + padding-inline-start: 1em; +} + +dialog:modal header > *:nth-child(2) { + border: none; + background-color: transparent; + box-sizing: content-box; + width: 1em; + height: 1em; + padding: .25em .25em; + color: #000; + background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; + border: 0; + border-radius: .375rem; + opacity: .5; + margin-inline-start: auto; + margin-inline-end: 2em; +} + +dialog:modal article { + margin-top: 2em; +} + +joomla-modal.maximum.header-two-btn header > *:nth-child(1) { + padding-inline-start: 1em; +} + +joomla-modal.maximum.header-two-btn header > *:nth-child(2) { + margin-inline-start: auto; + margin-inline-end: 1em; + background: unset; +} + + +joomla-modal.maximum.header-two-btn header > *:nth-child(3) { + border: none; + background-color: transparent; + box-sizing: content-box; + width: 1em; + height: 1em; + padding: .25em .25em; + color: #000; + background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; + border: 0; + border-radius: .375rem; + opacity: .5; + margin-inline-end: 2em; +} diff --git a/build/media_source/system/js/fields/joomla-field-media.w-c.es6.js b/build/media_source/system/js/fields/joomla-field-media.w-c.es6.js index aff9cae4f8bcf..52f1daef49840 100644 --- a/build/media_source/system/js/fields/joomla-field-media.w-c.es6.js +++ b/build/media_source/system/js/fields/joomla-field-media.w-c.es6.js @@ -56,10 +56,6 @@ class JoomlaFieldMedia extends HTMLElement { set url(value) { this.setAttribute('url', value); } - get modalContainer() { return this.getAttribute('modal-container'); } - - set modalContainer(value) { this.setAttribute('modal-container', value); } - get input() { return this.getAttribute('input'); } set input(value) { this.setAttribute('input', value); } @@ -104,25 +100,17 @@ class JoomlaFieldMedia extends HTMLElement { this.button = this.querySelector(this.buttonSelect); this.inputElement = this.querySelector(this.input); this.buttonClearEl = this.querySelector(this.buttonClear); - this.modalElement = this.querySelector('.joomla-modal'); - this.buttonSaveSelectedElement = this.querySelector(this.buttonSaveSelected); + this.buttonSaveSelectedElement = document.createElement('button'); + this.buttonSaveSelectedElement.setAttribute('type', 'button'); + this.buttonSaveSelectedElement.textContent = 'Select'; this.previewElement = this.querySelector('.field-media-preview'); - if (!this.button || !this.inputElement || !this.buttonClearEl || !this.modalElement - || !this.buttonSaveSelectedElement) { + if (!this.button || !this.inputElement || !this.buttonClearEl || !this.buttonSaveSelectedElement) { throw new Error('Misconfiguaration...'); } this.button.addEventListener('click', this.show); - // Bootstrap modal init - if (this.modalElement - && window.bootstrap - && window.bootstrap.Modal - && !window.bootstrap.Modal.getInstance(this.modalElement)) { - Joomla.initialiseModal(this.modalElement, { isJoomla: true }); - } - if (this.buttonClearEl) { this.buttonClearEl.addEventListener('click', this.clearValue); } @@ -159,8 +147,20 @@ class JoomlaFieldMedia extends HTMLElement { } show() { - this.modalElement.open(); + this.modalContainer = document.createElement('joomla-modal'); + this.modalContainer.setAttribute('id', 'media-select-modal'); + this.modalContainer.setAttribute('class', 'maximum header-two-btn'); + this.modalContainer.setAttribute('title', 'Select Media'); + this.modalContainer.setAttribute('url', this.url.replace('{field-media-id}', this.inputElement.getAttribute('id'))); + this.modalContainer.setAttribute('close-text', 'Clooooooose'); + this.modalContainer.setAttribute('click-outside', false); + this.append(this.modalContainer); + this.modalContainer.open(); + + this.modalContainer.querySelector('header button').insertAdjacentElement('beforebegin', this.buttonSaveSelectedElement); + + Joomla.Modal.setCurrent(this.modalContainer.querySelector('dialog')); Joomla.selectedMediaFile = {}; this.buttonSaveSelectedElement.addEventListener('click', this.onSelected); @@ -176,7 +176,9 @@ class JoomlaFieldMedia extends HTMLElement { } Joomla.selectedMediaFile = {}; - Joomla.Modal.getCurrent().close(); + this.modalContainer.querySelector('dialog').close(); + Joomla.Modal.setCurrent(null); + // Joomla.Modal.getCurrent().close(); } setValue(value) { @@ -363,4 +365,5 @@ class JoomlaFieldMedia extends HTMLElement { } } } -customElements.define('joomla-field-media', JoomlaFieldMedia); + +customElements.whenDefined('joomla-modal').then(() => customElements.define('joomla-field-media', JoomlaFieldMedia)); diff --git a/build/media_source/system/js/fields/joomla-field-user.w-c.es6.js b/build/media_source/system/js/fields/joomla-field-user.w-c.es6.js index 8e870432ca8ba..cb6713eb4cf32 100644 --- a/build/media_source/system/js/fields/joomla-field-user.w-c.es6.js +++ b/build/media_source/system/js/fields/joomla-field-user.w-c.es6.js @@ -1,152 +1,117 @@ -((customElements, Joomla) => { - class JoomlaFieldUser extends HTMLElement { - constructor() { - super(); - - this.onUserSelect = ''; - this.onchangeStr = ''; - - // Bind events - this.buttonClick = this.buttonClick.bind(this); - this.iframeLoad = this.iframeLoad.bind(this); - this.modalClose = this.modalClose.bind(this); - this.setValue = this.setValue.bind(this); - } - - static get observedAttributes() { - return ['url', 'modal', 'modal-width', 'modal-height', 'input', 'input-name', 'button-select']; - } - - get url() { return this.getAttribute('url'); } - - set url(value) { this.setAttribute('url', value); } - - get modalClass() { return this.getAttribute('modal'); } - - set modalClass(value) { this.setAttribute('modal', value); } +class JoomlaFieldUser extends HTMLElement { + constructor() { + super(); + + // Bind events + this.modalOpen = this.modalOpen.bind(this); + this.buttonClick = this.buttonClick.bind(this); + this.iframeLoad = this.iframeLoad.bind(this); + this.modalClose = this.modalClose.bind(this); + this.setValue = this.setValue.bind(this); + } - get modalWidth() { return this.getAttribute('modal-width'); } + static get observedAttributes() { + return ['url', 'modal', 'modal-width', 'modal-height', 'input', 'input-name', 'button-select']; + } - set modalWidth(value) { this.setAttribute('modal-width', value); } + get url() { return this.getAttribute('url'); } - get modalHeight() { return this.getAttribute('modal-height'); } + set url(value) { this.setAttribute('url', value); } - set modalHeight(value) { this.setAttribute('modal-height', value); } + get modalClass() { return this.getAttribute('modal'); } - get inputId() { return this.getAttribute('input'); } + set modalClass(value) { this.setAttribute('modal', value); } - set inputId(value) { this.setAttribute('input', value); } + get modalWidth() { return this.getAttribute('modal-width'); } - get inputNameClass() { return this.getAttribute('input-name'); } + set modalWidth(value) { this.setAttribute('modal-width', value); } - set inputNameClass(value) { this.setAttribute('input-name', value); } + get modalHeight() { return this.getAttribute('modal-height'); } - get buttonSelectClass() { return this.getAttribute('button-select'); } + set modalHeight(value) { this.setAttribute('modal-height', value); } - set buttonSelectClass(value) { this.setAttribute('button-select', value); } + get inputId() { return this.getAttribute('input'); } - connectedCallback() { - // Set up elements - this.modal = this.querySelector(this.modalClass); - this.modalBody = this.querySelector('.modal-body'); - this.input = this.querySelector(this.inputId); - this.inputName = this.querySelector(this.inputNameClass); - this.buttonSelect = this.querySelector(this.buttonSelectClass); + set inputId(value) { this.setAttribute('input', value); } - // Bootstrap modal init - if (this.modal - && window.bootstrap - && window.bootstrap.Modal - && !window.bootstrap.Modal.getInstance(this.modal)) { - Joomla.initialiseModal(this.modal, { isJoomla: true }); - } + get inputNameClass() { return this.getAttribute('input-name'); } - if (this.buttonSelect) { - this.buttonSelect.addEventListener('click', this.modalOpen.bind(this)); - this.modal.addEventListener('hide', this.removeIframe.bind(this)); + set inputNameClass(value) { this.setAttribute('input-name', value); } - // Check for onchange callback, - this.onchangeStr = this.input.getAttribute('data-onchange'); - if (this.onchangeStr) { - /* eslint-disable */ - this.onUserSelect = new Function(this.onchangeStr); - this.input.addEventListener('change', this.onUserSelect); - /* eslint-enable */ - } - } - } + get buttonSelectClass() { return this.getAttribute('button-select'); } - disconnectedCallback() { - if (this.onchangeStr && this.input) { - this.input.removeEventListener('change', this.onUserSelect); - } + set buttonSelectClass(value) { this.setAttribute('button-select', value); } - if (this.buttonSelect) { - this.buttonSelect.removeEventListener('click', this); - } + connectedCallback() { + this.input = this.querySelector(this.inputId); + this.inputName = this.querySelector(this.inputNameClass); + this.buttonSelect = this.querySelector(this.buttonSelectClass); - if (this.modal) { - this.modal.removeEventListener('hide', this); - } + if (this.buttonSelect) { + this.buttonSelect.addEventListener('click', this.modalOpen.bind(this)); } + } - buttonClick({ target }) { - this.setValue(target.getAttribute('data-user-value'), target.getAttribute('data-user-name')); - this.modalClose(); + disconnectedCallback() { + if (this.buttonSelect) { + this.buttonSelect.removeEventListener('click', this); } + } - iframeLoad() { - const iframeDoc = this.iframeEl.contentWindow.document; - const buttons = [].slice.call(iframeDoc.querySelectorAll('.button-select')); + buttonClick({ target }) { + this.setValue(target.getAttribute('data-user-value'), target.getAttribute('data-user-name')); + this.modalClose(); + } - buttons.forEach((button) => { - button.addEventListener('click', this.buttonClick); - }); - } + iframeLoad() { + const iframeDoc = this.iframeEl.contentWindow.document; - // Opens the modal - modalOpen() { - // Reconstruct the iframe - this.removeIframe(); - const iframe = document.createElement('iframe'); - iframe.setAttribute('name', 'field-user-modal'); - iframe.src = this.url.replace('{field-user-id}', this.input.getAttribute('id')); - iframe.setAttribute('width', this.modalWidth); - iframe.setAttribute('height', this.modalHeight); + iframeDoc.querySelectorAll('.button-select').forEach((button) => { + button.addEventListener('click', this.buttonClick); + }); + } - this.modalBody.appendChild(iframe); + // Opens the modal + modalOpen() { + this.modalContainer = document.createElement('joomla-modal'); + this.modalContainer.setAttribute('id', 'user-select-modal'); + this.modalContainer.setAttribute('title', 'Select User'); + // this.modalContainer.setAttribute('url', this.url); + this.modalContainer.setAttribute('url', this.url.replace('{field-user-id}', this.input.getAttribute('id'))); + this.modalContainer.setAttribute('close-text', 'Clooooooose'); + this.modalContainer.setAttribute('click-outside', false); - this.modal.open(); + this.append(this.modalContainer); - this.iframeEl = this.modalBody.querySelector('iframe'); + this.modalContainer.open(); - // handle the selection on the iframe - this.iframeEl.addEventListener('load', this.iframeLoad); - } + this.modal = this.querySelector('dialog'); + this.iframeEl = this.querySelector('iframe'); - // Closes the modal - modalClose() { - Joomla.Modal.getCurrent().close(); - this.modalBody.innerHTML = ''; - } + // handle the selection on the iframe + this.iframeEl.addEventListener('load', this.iframeLoad); + } - // Remove the iframe - removeIframe() { - this.modalBody.innerHTML = ''; + // Closes the modal + modalClose() { + // Joomla.Modal.getCurrent().close(); + if (this.modal) { + this.modal.close(); + this.removeChild(this.modalContainer); } + } - // Sets the value - setValue(value, name) { - this.input.setAttribute('value', value); - this.inputName.setAttribute('value', name || value); - // trigger change event both on the input and on the custom element - this.input.dispatchEvent(new Event('change')); - this.dispatchEvent(new CustomEvent('change', { - detail: { value, name }, - bubbles: true, - })); - } + // Sets the value + setValue(value, name) { + this.input.setAttribute('value', value); + this.inputName.setAttribute('value', name || value); + // trigger change event both on the input and on the custom element + this.input.dispatchEvent(new Event('change')); + this.dispatchEvent(new CustomEvent('change', { + detail: { value, name }, + bubbles: true, + })); } +} - customElements.define('joomla-field-user', JoomlaFieldUser); -})(customElements, Joomla); +customElements.whenDefined('joomla-modal').then(() => customElements.define('joomla-field-user', JoomlaFieldUser)); diff --git a/build/media_source/system/js/fields/joomla-media-select.w-c.es6.js b/build/media_source/system/js/fields/joomla-media-select.w-c.es6.js index 98030b59f45ed..c276ac1af2fff 100644 --- a/build/media_source/system/js/fields/joomla-media-select.w-c.es6.js +++ b/build/media_source/system/js/fields/joomla-media-select.w-c.es6.js @@ -32,7 +32,7 @@ if (!Object.keys(supportedExtensions).length) { document.addEventListener('onMediaFileSelected', async (e) => { Joomla.selectedMediaFile = e.detail; const currentModal = Joomla.Modal.getCurrent(); - const container = currentModal.querySelector('.modal-body'); + const container = currentModal.querySelector('article'); if (!container) { return; @@ -153,7 +153,7 @@ const insertAsImage = async (media, editor, fieldClass) => { let imageElement = ''; if (!isElement(editor)) { - const currentModal = fieldClass.closest('.modal-content'); + const currentModal = fieldClass.querySelector('dialog'); attribs = currentModal.querySelector('joomla-field-mediamore'); if (attribs) { if (attribs.getAttribute('alt-check') === 'true') { @@ -387,11 +387,9 @@ class JoomlaFieldMediaOptions extends HTMLElement { this.innerHTML = `
${this.summarytext}
-
-
- - -
+
+ +
@@ -406,23 +404,17 @@ class JoomlaFieldMediaOptions extends HTMLElement {
-
-
- - -
+
+ +
-
-
- - -
+
+ +
-
-
- - -
+
+ +
`; @@ -471,25 +463,19 @@ class JoomlaFieldMediaOptions extends HTMLElement {