Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[RFC] Joomla Dialog, implementation for Media, User Fields #40152

Closed
wants to merge 10 commits into from
Closed
Show file tree
Hide file tree
Changes from 9 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 34 additions & 3 deletions build/media_source/system/joomla.asset.json
Original file line number Diff line number Diff line change
Expand Up @@ -324,7 +324,10 @@
{
"name": "webcomponent.field-media",
"type": "style",
"uri": "system/fields/joomla-field-media.min.css"
"uri": "system/fields/joomla-field-media.min.css",
"dependencies": [
"dialog"
]
},
{
"name": "webcomponent.media-select",
Expand Down Expand Up @@ -363,7 +366,10 @@
"defer": true
},
"dependencies": [
"wcpolyfill"
"core",
"wcpolyfill",
"dialog",
"webcomponent.media-select"
]
},
{
Expand All @@ -374,6 +380,10 @@
"type": "module"
},
"dependencies": [
"core",
"wcpolyfill",
"dialog",
"webcomponent.media-select",
"webcomponent.field-media-legacy"
]
},
Expand Down Expand Up @@ -511,6 +521,8 @@
"defer": true
},
"dependencies": [
"core",
"dialog",
"wcpolyfill"
]
},
Expand All @@ -522,6 +534,8 @@
"type": "module"
},
"dependencies": [
"core",
"dialog",
"webcomponent.field-user-legacy"
]
},
Expand Down Expand Up @@ -604,6 +618,23 @@
"dependencies": [
"core"
]
}
},
{
"name": "dialog",
"type": "script",
"uri": "system/ui/joomla-dialog.min.js",
"attributes": {
"type": "module"
},
"dependencies": [
"wcpolyfill",
"core"
]
},
{
"name": "dialog",
"type": "style",
"uri": "system/ui/joomla-dialog.min.css"
}
]
}
88 changes: 45 additions & 43 deletions build/media_source/system/js/fields/joomla-field-media.w-c.es6.js
Original file line number Diff line number Diff line change
Expand Up @@ -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); }
Expand All @@ -72,10 +68,6 @@ class JoomlaFieldMedia extends HTMLElement {

set buttonClear(value) { this.setAttribute('button-clear', value); }

get buttonSaveSelected() { return this.getAttribute('button-save-selected'); }

set buttonSaveSelected(value) { this.setAttribute('button-save-selected', value); }

get modalWidth() { return parseInt(this.getAttribute('modal-width'), 10); }

set modalWidth(value) { this.setAttribute('modal-width', value); }
Expand All @@ -101,41 +93,32 @@ class JoomlaFieldMedia extends HTMLElement {
// attributeChangedCallback(attr, oldValue, newValue) {}

connectedCallback() {
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.previewElement = this.querySelector('.field-media-preview');

if (!this.button || !this.inputElement || !this.buttonClearEl || !this.modalElement
|| !this.buttonSaveSelectedElement) {
throw new Error('Misconfiguaration...');
}

this.button.addEventListener('click', this.show);
requestAnimationFrame(() => {
this.button = this.querySelector(this.buttonSelect);
this.inputElement = this.querySelector(this.input);
this.buttonClearEl = this.querySelector(this.buttonClear);
this.previewElement = this.querySelector('.field-media-preview');

if (!this.button || !this.inputElement || !this.buttonClearEl) {
throw new Error('Misconfiguaration...');
}

// Bootstrap modal init
if (this.modalElement
&& window.bootstrap
&& window.bootstrap.Modal
&& !window.bootstrap.Modal.getInstance(this.modalElement)) {
Joomla.initialiseModal(this.modalElement, { isJoomla: true });
}
this.button.addEventListener('click', this.show);

if (this.buttonClearEl) {
this.buttonClearEl.addEventListener('click', this.clearValue);
}
if (this.buttonClearEl) {
this.buttonClearEl.addEventListener('click', this.clearValue);
}

this.supportedExtensions = Joomla.getOptions('media-picker', {});
this.supportedExtensions = Joomla.getOptions('media-picker', {});

if (!Object.keys(this.supportedExtensions).length) {
throw new Error('Joomla API is not properly initiated');
}
if (!Object.keys(this.supportedExtensions).length) {
throw new Error('Joomla API is not properly initiated');
}

this.inputElement.removeAttribute('readonly');
this.inputElement.addEventListener('change', this.validateValue);
this.updatePreview();
this.inputElement.removeAttribute('readonly');
this.inputElement.addEventListener('change', this.validateValue);
this.updatePreview();
});
}

disconnectedCallback() {
Expand All @@ -154,16 +137,33 @@ class JoomlaFieldMedia extends HTMLElement {
event.preventDefault();
event.stopPropagation();

this.modalClose();
return false;
return this.modalClose();
}

show() {
this.modalElement.open();
// eslint-disable-next-line
this.dialog = new JoomlaDialog({
popupType: 'iframe',
textHeader: Joomla.Text._('JLIB_FORM_CHANGE_IMAGE'),
dgrammatiko marked this conversation as resolved.
Show resolved Hide resolved
iconHeader: 'icon-address',
Fedik marked this conversation as resolved.
Show resolved Hide resolved
src: this.url,
popupButtons: [
{
label: '', ariaLabel: Joomla.Text._('JCLOSE'), className: 'button-close btn-close', location: 'header', onClick: () => this.modalClose(),
},
{
label: Joomla.Text._('JSELECT'), onClick: (event) => this.onSelected(event),
},
{
label: Joomla.Text._('JCANCEL'), className: 'btn btn-outline-danger ms-2', onClick: () => this.modalClose(),
},
],
});

Joomla.selectedMediaFile = {};

this.buttonSaveSelectedElement.addEventListener('click', this.onSelected);
this.dialog.show();
Joomla.Modal.setCurrent(this.dialog);
}

async modalClose() {
Expand All @@ -176,7 +176,8 @@ class JoomlaFieldMedia extends HTMLElement {
}

Joomla.selectedMediaFile = {};
Joomla.Modal.getCurrent().close();
this.dialog.destroy();
Joomla.Modal.setCurrent(null);
}

setValue(value) {
Expand Down Expand Up @@ -363,4 +364,5 @@ class JoomlaFieldMedia extends HTMLElement {
}
}
}

customElements.define('joomla-field-media', JoomlaFieldMedia);
105 changes: 36 additions & 69 deletions build/media_source/system/js/fields/joomla-field-user.w-c.es6.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,21 @@
this.onchangeStr = '';

// Bind events
this.modalOpen = this.modalOpen.bind(this);
this.modalClose = this.modalClose.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);
}

static get observedAttributes() {
return ['url', 'modal', 'modal-width', 'modal-height', 'input', 'input-name', 'button-select'];
return ['url', '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); }

get modalWidth() { return this.getAttribute('modal-width'); }

set modalWidth(value) { this.setAttribute('modal-width', value); }
Expand All @@ -46,93 +43,63 @@
set buttonSelectClass(value) { this.setAttribute('button-select', value); }

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);

// Bootstrap modal init
if (this.modal
&& window.bootstrap
&& window.bootstrap.Modal
&& !window.bootstrap.Modal.getInstance(this.modal)) {
Joomla.initialiseModal(this.modal, { isJoomla: true });
}

if (this.buttonSelect) {
this.buttonSelect.addEventListener('click', this.modalOpen.bind(this));
this.modal.addEventListener('hide', this.removeIframe.bind(this));

// 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 */
requestAnimationFrame(() => {
// Set up elements
this.input = this.querySelector(this.inputId);
this.inputName = this.querySelector(this.inputNameClass);
this.buttonSelect = this.querySelector(this.buttonSelectClass);

if (this.buttonSelect) {
this.buttonSelect.addEventListener('click', this.modalOpen.bind(this));
}
}
});
}

disconnectedCallback() {
if (this.onchangeStr && this.input) {
this.input.removeEventListener('change', this.onUserSelect);
}

if (this.buttonSelect) {
this.buttonSelect.removeEventListener('click', this);
}

if (this.modal) {
this.modal.removeEventListener('hide', this);
this.buttonSelect.removeEventListener('click', this.modalOpen);
}
}

buttonClick({ target }) {
this.setValue(target.getAttribute('data-user-value'), target.getAttribute('data-user-name'));
this.modalClose();
Joomla.Modal.getCurrent().close();
}

iframeLoad() {
const iframeDoc = this.iframeEl.contentWindow.document;
const buttons = [].slice.call(iframeDoc.querySelectorAll('.button-select'));
const iframeDoc = this.dialog.querySelector('iframe').contentWindow.document;

buttons.forEach((button) => {
button.addEventListener('click', this.buttonClick);
});
iframeDoc.querySelectorAll('.button-select').forEach((button) => button.addEventListener('click', this.buttonClick));
}

// 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);

this.modalBody.appendChild(iframe);
// eslint-disable-next-line
this.dialog = new JoomlaDialog({
popupType: 'iframe',
textHeader: Joomla.Text._('JLIB_FORM_CHANGE_IMAGE'),
src: this.url.replace('{field-user-id}', this.input.getAttribute('id')),
popupButtons: [
{
label: '', ariaLabel: Joomla.Text._('JCLOSE'), className: 'button-close btn-close', location: 'header', onClick: () => this.modalClose(),
},
{
label: Joomla.Text._('JCANCEL'), className: 'btn btn-outline-danger ms-2', onClick: () => this.modalClose(),
},
],
});

this.modal.open();
Joomla.selectedMediaFile = {};

this.iframeEl = this.modalBody.querySelector('iframe');
this.dialog.addEventListener('joomla-dialog:load', this.iframeLoad);

// handle the selection on the iframe
this.iframeEl.addEventListener('load', this.iframeLoad);
this.dialog.show();
Joomla.Modal.setCurrent(this.dialog);
}

// Closes the modal
modalClose() {
Joomla.Modal.getCurrent().close();
this.modalBody.innerHTML = '';
}

// Remove the iframe
removeIframe() {
this.modalBody.innerHTML = '';
this.dialog.destroy();
Joomla.Modal.setCurrent(null);
}

// Sets the value
Expand Down
Loading