Use of JS Promise för aply and save in image edit view + some modal messages + a modal progress

[schnuti]

Pull Request for Issue #497 .

Summary of Changes

1. Promise is used for apply and save. i.e. no problem with the asynchronous change of window breaking the upload.
2. Added a few modal notifications for errors. Not active for success.
3. Added a modal progress bar. Be aware that this very often only show 0 and 100%. Depends on browser and file size.

Testing Instructions

Please first review this code. It works without any known problems but I know some edit has to be done.

So first a few questions.

1. The com_media language files are not loaded. Where do I add the few used texts?
2. Have a look at the code for modal Progress. I used inline CSS that has to be replaced.
3. I'm not sure about error handling. As is, there are only "Buh -an Error!" Messages. I really do not know how to catch meaningful errors.
4. Some unused code is kept in the XMLHTTPRequest code (available in core or Not available ). Here we e.g. need the upload-progress event.
5. Do the server sided PHP send any error related code more than success = 1/0?
6. Integrate common Notification code?

Edited 1x!

[schnuti]

The Progress and an Error message.

[laoneo]

Thanks for that. Gave it the JS gurus for review.

[dgrammatiko]

Please no let here, this is not polyfilled

[schnuti]

@dgrammatiko And const for objects is allowed?

[dgrammatiko]

@schnuti sorry I should phrase that better, you need to have ES5 code here...

[schnuti]

I removed the inline CSS style for progress bar.
It looks better with some styling
e.g.

.media-manager-progress, .media-manager-progress + span {
   font-size: 18px;
   vertical-align: middle;
   margin-right: 3px;
}

[schnuti]

I found out how to add the text strings to JS.

Do I have to minify the Javascript somehow?
Otherwise it's testable now..

[kasvith]

I would like to have something like this for file uploading

[schnuti]

@kasvith Nice idea! Could you please open a new issue? This is about the Edit view. I guess something like your idea is possible.

[kasvith]

I will open this, for the edit are i prefer just a message as "Item saved" because a progress bar is not suitable here for me

[schnuti]

@kasvith The idea is that something should happen when you click on the button. The progress bar gives you both started and ended. I'm trying to make it reusable.

[laoneo]

I like the idea of a progress bar, especially as editing now also works with cloud adapters, the upload can take longer.

[kasvith]

ahh yes we now support editing remote files too totally forgot it

[schnuti]

Added filename to the progress pop up and 2 reusable functions for the progress.

Do I have to minimize the Javascript somehow? I do not know the Joomla way.

[laoneo]

You can do node build.js --compilejs media/com_media/js/edit-images.js to compile it.

[schnuti]

@laoneo Thanks! I have only fragments of a "modern" developer environment. node did it.

I have no more open issues. A few comments should be removed before a merge.

Ready for a normal test.

[laoneo]

Promises do not work in IE 11 https://caniuse.com/#feat=promises. So either way, we use a polifill, do a fallback or just got with the onSuccess function in Joomla.request. But in the current state it will break IE11.

[dgrammatiko]

Promises should be polyfilled whenever there is a web component in the page (for backend that is always due to alerts)

[kasvith]

Issue regarding IE11

[laoneo]

So can we load the polyfill in this pr here too?

[dgrammatiko]

it should be loaded already, unless for some reason we're rendering the component and not the index.php.
Also from https://github.com/webcomponents/webcomponentsjs

For browsers that need it, there are also some minor polyfills included:

HTMLTemplateElement
Promise
Event, CustomEvent, MouseEvent constructors and Object.assign, Array.from (see webcomponents-platform)
URL constructor

[kasvith]

hmm weired, can you see #565 @dgrammatiko

[dgrammatiko]

Actually I figured it out, in J4 I've removed the webcomponents-bundle.js in favour of webcomponents-sd-ce-pf.js, but it seems the second one is missing all the mentioned polyfills on my previous comment.

[laoneo]

@dgrammatiko are you going to fix this in upstream?

[dgrammatiko]

@laoneo I'm waiting for an answer here: #565 (comment) from @kasvith or anyone with IE11

Also @kasvith can you check one more thing:
https://github.com/schnuti/media-manager-improvement/blob/c9e7fe8a4a028231671febe87569e7fc6f9e110d/media/com_media/js/edit-images.js#L342

change DOMContentLoaded to WebComponentsReady with the current codebase, does it work?

[kasvith]

@dgrammatiko there seems to be an issue with upstream, i will check ASAP when it fixed

[kasvith]

@dgrammatiko cant check until #565 passes