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.

Sign up for GitHub

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

Update the code to modern JS #18

Closed
wants to merge 4 commits into from
Closed

Update the code to modern JS #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3d42293
Update the code to modern JS
dgrammatiko Jan 15, 2022
57fd48d
revert
dgrammatiko Jan 16, 2022
576ec9e
CS
dgrammatiko Jan 16, 2022
73df5e8
Revert
dgrammatiko Jan 16, 2022
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
5 changes: 1 addition & 4 deletions administrator/components/com_media/src/Controller/ApiController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,10 +221,7 @@ public function postFiles()
$name = $this->getModel()->createFolder($adapter, $name, $path, $override);
}

$options = [];
$options['url'] = $this->input->getBool('url', false);

return $this->getModel()->getFile($adapter, $path . '/' . $name, $options);
return $this->getModel()->getFile($adapter, $path . '/' . $name);
}

/**
Expand Down
283 changes: 136 additions & 147 deletions build/media_source/plg_editors_tinymce/js/plugins/dragdrop/plugin.es5.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,165 +1,154 @@
(function () {
'use strict';
(function() {
// Reset the drop area border
tinyMCE.DOM.bind(document, 'dragleave', () =>{
tinyMCE.activeEditor.contentAreaContainer.style.borderWidth = '1px 0 0';
});

/* eslint-disable no-undef */
tinymce.PluginManager.add('jdragndrop', function (editor) {
var responseData; // Reset the drop area border
function blobToBase64(blob) {
return new Promise((resolve, reject) => {
Object.assign(new FileReader(), {
onload: (e) => resolve(e.target.result),
onerror: (error) => reject(error)
}).readAsDataURL(blob);
});
}

function helperDialog(urlPath, responseData, editor) {
function dialogClose(api) {
var dialogData = api.getData();
var altEmpty = dialogData.altEmpty ? ' alt=""' : '';
var altValue = dialogData.altText ? " alt=\"" + dialogData.altText + "\"" : altEmpty;
var lazyValue = dialogData.isLazy ? ' loading="lazy"' : '';
var width = dialogData.isLazy ? " width=\"" + responseData.width + "\"" : '';
var height = dialogData.isLazy ? " height=\"" + responseData.height + "\"" : '';
editor.execCommand('mceInsertContent', false, "<img src=\"" + urlPath + "\"" + altValue + lazyValue + width + height + "/>");
}

tinyMCE.DOM.bind(document, 'dragleave', function (e) {
e.stopPropagation();
e.preventDefault();
editor.contentAreaContainer.style.borderWidth = '1px 0 0';
return false;
}); // Fix for Chrome
editor.windowManager.open({
title: Joomla.Text._('PLG_TINY_DND_ADDITIONALDATA'),
body: {
type: 'panel',
items: [{
type: 'input',
name: 'altText',
label: Joomla.Text._('PLG_TINY_DND_ALTTEXT')
}, {
type: 'checkbox',
name: 'altEmpty',
label: Joomla.Text._('PLG_TINY_DND_EMPTY_ALT')
}, {
type: 'checkbox',
name: 'isLazy',
label: Joomla.Text._('PLG_TINY_DND_LAZYLOADED')
}]
},
buttons: [{
type: 'cancel',
text: 'Cancel'
}, {
type: 'submit',
name: 'submitButton',
text: 'Save',
primary: true
}],
initialData: {
altText: '',
isLazy: true,
altEmpty: false
},
onSubmit: (api) => {
dialogClose(api);
api.close();
},
onCancel: (api) => {
dialogClose(api);
}
});
}

editor.on('dragenter', function (e) {
function uploadFile(name, rawContent, editor) {
const sliceIndex = rawContent.indexOf('base64') + 7;
if (sliceIndex < 1) {
return Promise.reject();
}

const url = new URL(`${editor.settings.uploadUri}&path=${editor.settings.comMediaAdapter}`;
const options = {
method: 'POST',
body: JSON.stringify({
'name': encodeURIComponent(name),
'action': 'upload',
'content': rawContent.slice(sliceIndex, rawContent.length),
'path': encodeURIComponent(editor.settings.parentUploadFolder),
[encodeURIComponent(editor.settings.csrfToken)]: 1,
}),
headers: {
'Content-Type': 'application/json',
},
};

fetch(url, options)
.then(function (response) {
return response.json();
}).then(function (resp) {
if (resp.success) {
const responseData = resp.data;
let rootFull = Joomla.getOptions('system.paths').rootFull;
const urlPath = responseData.url.startsWith('http') || responseData.url.startsWith('//') ? responseData.url : response.data.url.split(rootFull)[1];

helperDialog(urlPath, responseData, editor);
} else {
editor.windowManager.alert(resp.message);
return Promise.reject();
}
}).catch(function (error) {
editor.windowManager.alert(`${error.statusText} ${error.status}`);
return Promise.reject();
});
}

window.tinymce.PluginManager.add('jdragndrop', function (editor) {
'use strict';

// Fix for Chrome
editor.on('dragenter', (e) => {
e.stopPropagation();
return false;
}); // Notify user when file is over the drop area
});

editor.on('dragover', function (e) {
// Notify user when file is over the drop area
editor.on('dragover', (e) => {
e.preventDefault();
editor.contentAreaContainer.style.borderStyle = 'dashed';
editor.contentAreaContainer.style.borderWidth = '5px';
return false;
});

function uploadFile(name, content) {
var _data;

var url = editor.settings.uploadUri + "&path=" + editor.settings.comMediaAdapter;
var data = (_data = {}, _data[editor.settings.csrfToken] = '1', _data.name = name, _data.content = content, _data.parent = editor.settings.parentUploadFolder, _data);
Joomla.request({
url: url,
method: 'POST',
data: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
},
onSuccess: function onSuccess(resp) {
var response;

try {
response = JSON.parse(resp);
} catch (e) {
editor.windowManager.alert(Joomla.Text._('ERROR') + ": {e}");
}
// Logic for the dropped file
editor.on('drop', (e) => {
if (!e.dataTransfer || !e.dataTransfer.files || e.dataTransfer.files.length !== 1) {
return;
}

if (response.data && response.data.path) {
responseData = response.data;
var urlPath; // For local adapters use relative paths

if (/local-/.test(responseData.adapter)) {
var _Joomla$getOptions = Joomla.getOptions('system.paths'),
rootFull = _Joomla$getOptions.rootFull;

urlPath = "" + response.data.url.split(rootFull)[1];
} else if (responseData.url) {
// Absolute path for different domain
urlPath = responseData.url;
}

var dialogClose = function dialogClose(api) {
var dialogData = api.getData();
var altEmpty = dialogData.altEmpty ? ' alt=""' : '';
var altValue = dialogData.altText ? " alt=\"" + dialogData.altText + "\"" : altEmpty;
var lazyValue = dialogData.isLazy ? ' loading="lazy"' : '';
var width = dialogData.isLazy ? " width=\"" + responseData.width + "\"" : '';
var height = dialogData.isLazy ? " height=\"" + responseData.height + "\"" : '';
editor.execCommand('mceInsertContent', false, "<img src=\"" + urlPath + "\"" + altValue + lazyValue + width + height + "/>");
};

editor.windowManager.open({
title: Joomla.Text._('PLG_TINY_DND_ADDITIONALDATA'),
body: {
type: 'panel',
items: [{
type: 'input',
name: 'altText',
label: Joomla.Text._('PLG_TINY_DND_ALTTEXT')
}, {
type: 'checkbox',
name: 'altEmpty',
label: Joomla.Text._('PLG_TINY_DND_EMPTY_ALT')
}, {
type: 'checkbox',
name: 'isLazy',
label: Joomla.Text._('PLG_TINY_DND_LAZYLOADED')
}]
},
buttons: [{
type: 'cancel',
text: 'Cancel'
}, {
type: 'submit',
name: 'submitButton',
text: 'Save',
primary: true
}],
initialData: {
altText: '',
isLazy: true,
altEmpty: false
},
onSubmit: function onSubmit(api) {
dialogClose(api);
api.close();
},
onCancel: function onCancel(api) {
dialogClose(api);
}
});
}
},
onError: function onError(xhr) {
editor.windowManager.alert("Error: " + xhr.statusText);
// We override only for files
e.preventDefault();
for (const file of [...e.dataTransfer.files]) {
// Only images allowed
if (!['image/jpeg', 'image/png', 'image/gif', 'image/webp'].includes(file.type)) {
return;
}
});
}

function readFile(file) {
// Create a new file reader instance
var reader = new FileReader(); // Add the on load callback

reader.onload = function (progressEvent) {
var result = progressEvent.target.result;
var splitIndex = result.indexOf('base64') + 7;
var content = result.slice(splitIndex, result.length); // Upload the file

uploadFile(file.name, content);
};
Promise
.all([blobToBase64(file)])
.then((result) => {
// Upload the file

reader.readAsDataURL(file);
} // Listeners for drag and drop
uploadFile(file.name, result[0], editor);
})
.catch((error) => {});
}


if (typeof FormData !== 'undefined') {
// Logic for the dropped file
editor.on('drop', function (e) {
e.preventDefault(); // We override only for files

if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length > 0) {
var files = [].slice.call(e.dataTransfer.files);
files.forEach(function (file) {
// Only images allowed
if (file.name.toLowerCase().match(/\.(jpg|jpeg|png|gif)$/)) {
// Upload the file(s)
readFile(file);
}
});
}

editor.contentAreaContainer.style.borderWidth = '1px 0 0';
});
} else {
Joomla.renderMessages({
error: [Joomla.Text._('PLG_TINY_ERR_UNSUPPORTEDBROWSER')]
});
editor.on('drop', function (e) {
e.preventDefault();
return false;
});
}
editor.contentAreaContainer.style.borderWidth = '1px 0 0';
});
});

}());
})();
2 changes: 1 addition & 1 deletion plugins/editors/tinymce/tinymce.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -531,7 +531,7 @@ public function onDisplay(
if ($dragdrop && $user->authorise('core.create', 'com_media'))
{
$externalPlugins['jdragndrop'] = HTMLHelper::_('script', 'plg_editors_tinymce/plugins/dragdrop/plugin.min.js', ['relative' => true, 'version' => 'auto', 'pathOnly' => true]);
$uploadUrl = Uri::base(false) . 'index.php?option=com_media&format=json&url=1&task=api.files';
$uploadUrl = Uri::base(false) . 'index.php?option=com_media&format=json&task=api.files';

if ($this->app->isClient('site'))
{
Expand Down