diff --git a/administrator/components/com_media/resources/scripts/components/browser/browser.vue b/administrator/components/com_media/resources/scripts/components/browser/browser.vue
index 485c7389fbfc2..841869cc9cd2c 100644
--- a/administrator/components/com_media/resources/scripts/components/browser/browser.vue
+++ b/administrator/components/com_media/resources/scripts/components/browser/browser.vue
@@ -107,6 +107,22 @@
const clickedOutside = notClickedBrowserItems && notClickedInfobar && !clickedDelete;
if (clickedOutside) {
this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
+
+ window.parent.document.dispatchEvent(
+ new CustomEvent(
+ 'onMediaFileSelected',
+ {
+ "bubbles": true,
+ "cancelable": false,
+ "detail": {
+ path: '',
+ thumb: false,
+ fileType: false,
+ extension: false,
+ }
+ }
+ )
+ );
}
},
diff --git a/administrator/components/com_media/resources/scripts/components/browser/items/item.js b/administrator/components/com_media/resources/scripts/components/browser/items/item.js
index f2c71251fa70c..3d63e7986a2f8 100644
--- a/administrator/components/com_media/resources/scripts/components/browser/items/item.js
+++ b/administrator/components/com_media/resources/scripts/components/browser/items/item.js
@@ -81,24 +81,22 @@ export default {
* @param event
*/
handleClick(event) {
- let path = false;
- const data = {
- path: path,
- thumb: false,
- fileType: this.item.mime_type ? this.item.mime_type : false,
- extension: this.item.extension ? this.item.extension : false,
- };
-
- if (this.item.type === 'file') {
- data.path = this.item.path;
- data.thumb = this.item.thumb ? this.item.thumb : false;
-
- const ev = new CustomEvent('onMediaFileSelected', {
- "bubbles": true,
- "cancelable": false,
- "detail": data
- });
- window.parent.document.dispatchEvent(ev);
+ if (this.item.path && this.item.type === 'file') {
+ window.parent.document.dispatchEvent(
+ new CustomEvent(
+ 'onMediaFileSelected',
+ {
+ "bubbles": true,
+ "cancelable": false,
+ "detail": {
+ path: this.item.path,
+ thumb: this.item.thumb,
+ fileType: this.item.mime_type ? this.item.mime_type : false,
+ extension: this.item.extension ? this.item.extension : false,
+ },
+ }
+ )
+ );
}
// Handle clicks when the item was not selected
@@ -129,7 +127,9 @@ export default {
},
render: function (createElement) {
- return createElement('div', {
+ return createElement(
+ 'div',
+ {
'class': {
'media-browser-item': true,
selected: this.isSelected(),
@@ -143,12 +143,15 @@ export default {
},
},
[
- createElement(this.itemType(), {
- props: {
- item: this.item,
- focused: this.focused,
- },
- })
+ createElement(
+ this.itemType(),
+ {
+ props: {
+ item: this.item,
+ focused: this.focused,
+ },
+ }
+ )
]
);
}
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 36c5e24ccd972..7221bc81299f3 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
@@ -1,32 +1,32 @@
-((Joomla) => {
+((customElements, Joomla) => {
if (!Joomla) {
throw new Error('Joomla API is not properly initiated');
}
- Joomla.selectedFile = {};
+ let selectedFile = {};
window.document.addEventListener('onMediaFileSelected', (e) => {
- Joomla.selectedFile = e.detail;
+ selectedFile = e.detail;
});
- Joomla.doIt = (resp, editor, fieldClass) => {
+ const execTransform = (resp, editor, fieldClass) => {
if (resp.success === true) {
if (resp.data[0].url) {
if (/local-/.test(resp.data[0].adapter)) {
const { rootFull } = Joomla.getOptions('system.paths');
// eslint-disable-next-line prefer-destructuring
- Joomla.selectedFile.url = resp.data[0].url.split(rootFull)[1];
+ selectedFile.url = resp.data[0].url.split(rootFull)[1];
if (resp.data[0].thumb_path) {
- Joomla.selectedFile.thumb = resp.data[0].thumb_path;
+ selectedFile.thumb = resp.data[0].thumb_path;
} else {
- Joomla.selectedFile.thumb = false;
+ selectedFile.thumb = false;
}
} else if (resp.data[0].thumb_path) {
- Joomla.selectedFile.thumb = resp.data[0].thumb_path;
+ selectedFile.thumb = resp.data[0].thumb_path;
}
} else {
- Joomla.selectedFile.url = false;
+ selectedFile.url = false;
}
const isElement = (o) => (
@@ -34,13 +34,13 @@
: o && typeof o === 'object' && o !== null && o.nodeType === 1 && typeof o.nodeName === 'string'
);
- if (Joomla.selectedFile.url) {
+ if (selectedFile.url) {
if (!isElement(editor) && (typeof editor !== 'object')) {
- Joomla.editors.instances[editor].replaceSelection(`
`);
+ Joomla.editors.instances[editor].replaceSelection(`
`);
} else if (!isElement(editor) && (typeof editor === 'object' && editor.id)) {
- window.parent.Joomla.editors.instances[editor.id].replaceSelection(``);
+ window.parent.Joomla.editors.instances[editor.id].replaceSelection(``);
} else {
- editor.value = Joomla.selectedFile.url;
+ editor.value = selectedFile.url;
fieldClass.updatePreview();
}
}
@@ -54,7 +54,13 @@
*
* @returns {void}
*/
- Joomla.getImage = (data, editor, fieldClass) => new Promise((resolve, reject) => {
+ const fetchImageDetails = (data, editor, fieldClass) => new Promise((resolve, reject) => {
+ if (!data || (typeof data === 'object' && (!data.path || data.path === ''))) {
+ selectedFile = {};
+ reject(new Error('Nothing selected'));
+ return;
+ }
+
const apiBaseUrl = `${Joomla.getOptions('system.paths').rootFull}administrator/index.php?option=com_media&format=json`;
Joomla.request({
@@ -64,17 +70,14 @@
headers: { 'Content-Type': 'application/json' },
onSuccess: (response) => {
const resp = JSON.parse(response);
- resolve(Joomla.doIt(resp, editor, fieldClass));
+ resolve(execTransform(resp, editor, fieldClass));
},
- onError: () => {
- reject();
+ onError: (err) => {
+ reject(err);
},
});
});
-})(Joomla);
-
-((customElements, Joomla) => {
class JoomlaFieldMedia extends HTMLElement {
constructor() {
super();
@@ -192,9 +195,15 @@
modalClose() {
const input = this.querySelector(this.input);
- Joomla.getImage(Joomla.selectedFile, input, this);
- Joomla.Modal.getCurrent().close();
+ fetchImageDetails(selectedFile, input, this)
+ .then(() => { Joomla.Modal.getCurrent().close(); })
+ .catch(() => {
+ Joomla.Modal.getCurrent().close();
+ Joomla.renderMessages({
+ error: [Joomla.Text._('JLIB_APPLICATION_ERROR_SERVER')],
+ });
+ });
}
setValue(value) {
diff --git a/layouts/joomla/form/field/media.php b/layouts/joomla/form/field/media.php
index 311d4a5432214..d230192be281a 100644
--- a/layouts/joomla/form/field/media.php
+++ b/layouts/joomla/form/field/media.php
@@ -118,6 +118,7 @@
->useStyle('webcomponent.field-media')
->useScript('webcomponent.field-media');
+Text::script('JLIB_APPLICATION_ERROR_SERVER');
?>