[5.0][RFC] Joomla Dialog (popup) script. Free, without CC and registration

[Fedik]

Summary of Changes

This is implementation of own popup/modal/dialog independend from bootstrap and other traps.
As continue of #32473 discussion.

At current point of time the PR provides only popup implementation, the script should be ready to use.
And the integration will come.

I made it for 4.x to be able easily test on "production" codebase. However main target (If I ever finish it) probably > 5.x.

The PR does not provide a separate stylesheet for popup, the styling should be done within template (example can find in _modal.scss of this PR).
(At bare it use native dialog styling)

What and why is Joomla Dialog

The script allow to create a popup/dialog programaticaly, that in oposite to current Bootstrap implementation, when modal should be prerendered in HTML. This allows more simple integration on client side without involving server side.

It basicaly a wrapper around native dialog element.

Joomla Dialog script allows to display dialog with following content:

• inline - text or html content;
• iframe - embed/remote content, in iframe;
• ajax - same as inline but the content loaded through ajax request;
• image - image lightbox;

Also it provides helper methods for alert() and confirm() dialogs.
Provides helper to bind page button/anchor to show the popup, for basic stuff, without extra js needed.

Usage examples

<?php $wa->useScript('joomla.dialog'); ?>

// Inline 
const dialog = new JoomlaDialog({
  textHeader: 'The header',
  popupContent: '<p class="p-3">Popup content text</p>',
});
dialog.show();

// IFrame
const dialog = new JoomlaDialog({
  popupType: 'iframe',
  textHeader: 'The header',
  src: 'index.php?option=com_content&view=articles&tmpl=component&layout=modal',
});
dialog.show();

// Ajax
const dialog = new JoomlaDialog({
  popupType: 'ajax',
  textHeader: 'The header',
  src: 'index.php?option=com_content&view=articles&tmpl=component&layout=modal',
});
dialog.show();

// Image
const dialog = new JoomlaDialog({
  popupType: 'image',
  src: '../images/headers/walden-pond.jpg',
});
dialog.show();

Any property can be set as instance property or in class constructor. This two is equal:

// Proprty in class constructor
const dialog = new JoomlaDialog({
  textHeader: 'The header',
  popupContent: '<p class="p-3">Popup content text</p>',
});

// Proprty in to class instance
const dialog = new JoomlaDialog();
dialog.textHeader = 'The header';
dialog.popupContent = '<p class="p-3">Popup content text</p>';

Other options:

// Optional sizing:
dialog.width = '80vw';
dialog.height = '80vh';

// Definig your own buttons:
dialog.popupButtons = [
  { label: 'Yes', onClick: () => dialog.close() },
  { label: 'No', onClick: () => dialog.close(), className: 'btn btn-outline-danger ms-2' },
];

Alert and Confirm usage:

// Alert
JoomlaDialog.alert('Chase ball of string eat plants, meow')
  .then(() => { 
    console.log('All done'); 
  });

// Confirmation
JoomlaDialog.confirm('Cheese on toast airedale the big cheese?')
  .then((result) => { 
    console.log(result ? 'Okay' : 'Not okay'); 
  });

Binding button/anchor for basic stuff

<?php $wa->useScript('joomla.dialog-autocreate'); ?>

<button class="btn btn-primary" type="button"
    data-joomla-dialog='{"popupType": "iframe", "width":"80vw", "height": "80vh", "src":"index.php?option=com_content&view=articles&tmpl=component&layout=modal"}'>Click</button>

<button class="btn btn-primary" type="button"
    data-joomla-dialog='{"popupType": "inline", "src":"#popupText", "width": "fit-content", "height": "fit-content"}'>Click</button>

<a href="index.php?option=com_content&view=articles&tmpl=component&layout=modal"
  data-joomla-dialog class="btn btn-outline-primary">Click</a>
<a href="#popupText" data-joomla-dialog class="btn btn-outline-primary">Click</a>

<template id="popupText"><p class="p-3">Popup content text</p></template>

Testing Instructions

Can test any of examples above.
Apply patch, run npm install.
Then add $wa->useScript('joomla.dialog'); in to index.php of the admin template.
And one of example js/html wherever you want. Eg. in to index.php (will show 2 popup on load):

<script type="module">
import JoomlaDialog from 'joomla.dialog';

JoomlaDialog.alert('Chase ball of string eat plants, meow')
  .then(() => { 
    console.log('All done'); 
  });

JoomlaDialog.confirm('Cheese on toast airedale the big cheese?')
  .then((result) => { 
    console.log(result ? 'Okay' : 'Not okay'); 
  });
</script>

Link to documentations

Please select:

• Documentation link for docs.joomla.org: TBD
• Pull Request link for manual.joomla.org: Docs for Joomla Dialog (popup) script Manual#99

Issues for reference

• System popups (modals) need a technical redesign (architecture). Discussion about possibilities. #32473
• [RFC] Native dialogs replacing the Bootstrap ones #39344
• Subform-repeatable javascript #39964
• Fix subform multiple tinymce elements #39449
• [RFC] Fix subform multiple tinymce elements alternative #39609
• [4.x] Editor-XTD buttons in subform insert content to first row only #39416
• [5.0][RFC] Joomla.Editor and Joomla.EditorButton client side API #40202

@dgrammatiko I have stole some of your ideas from #39344, I hope you will not sue me :)

[dgrammatiko]

LGTM

I left couple of comments on insertAdjacentHTML but also before this goes to production it needs the dialog polyfill, you can copy over the code from https://github.com/dgrammatiko/joomla-modal/blob/main/src/index.js and add the package in the package.json (https://github.com/GoogleChrome/dialog-polyfill)

[Fedik]

also before this goes to production it needs the dialog polyfill,

At time when it will happen, we will be no need polifill 😄
Well, yeah sure, can be added, but as last thing here, not really important for now.

[dgrammatiko]

Well, yeah sure, can be added, but as last thing here, not really important for now

Sure, so apart the innerHML part everything else are spot on on what we had discussed. Maybe the anchor shouldn't be included, for a11y reasons, ie: the dialog should be opened from a button but that's bikeshedding that someone else should do.

I will try to play a bit with it tomorrow but I think it's already in very good shape

[dgrammatiko]

@Fedik one little change: could you rename this to JoomlaDialog and all the instances of popup to dialog? The reason is that later this year the platform will have (already on chrome) the popover so this should be easily distinguishable

[Fedik]

I see, makes sense, yes I will rename

[dgrammatiko]

@laoneo could we have a decision for 4.4 here? This PR will unlock the fixes needed all around the broken repeatables, modal fields, etc
There's an actual implementation for the fields User and Media here: #40152

[laoneo]

@dgrammatiko what for a decisions you expect? If this can go into 4.4? As @Fedik already mentioned in the pr description, this should finally be merged into 5.0 as 4.4 will not get any new features.

[dgrammatiko]

So 4.3 was the last minor that had new features? Well, 🤬

[laoneo]

What is the problem to ship it with 5.0? They will be released at the same time.

[dgrammatiko]

What is the problem to ship it with 5.0? They will be released at the same time.

I guess some dev will be complaining, like the did with the WAM, that they need 2 different code snippets in order to support both v4 and v5...

[laoneo]

As long as the old way still works, they should then use that. And yes, when they want the new dialog/popup/modal, then they need to have different code which is dependent on the Joomla version. I don't see this as a big issue.

[dgrammatiko]

As long as the old way still works, they should then use that.

The old way (bootstrap) works but devs SHOULD NOT use them for fields, editor buttons, etc that are already broken right now because this approach is doing SSR (Server Side Rendering) of the modals which are incompatible with repeatable fields. Same goes for the category fields for different reason. My point is that the script should be introduced in the 4.x so the transition would be easier...

[Fedik]

I think 5.x+ is fine, maybe we will get some better ideas untill then.
And I would like to finish #40082 before this, and try different approaches for (cross)editor buttons.

[dgrammatiko]

And I would like to finish #40082 before this, and try different approaches for (cross)editor buttons.

I was thinking doing the first implementation with the buttons based on this PR and the #40082 but it needs also extending the Joomla.editors to have something like

Joomla.editors = {
  instances: {},
  buttonsCallbacks: {
    ['plg_editors-buttons_readmore']: () => { /* the code for the callback */ },
  },
}

[Fedik]

I thinking about something generic, that can handle basic stuf without extra coding, and allow to be extended when needed.

[dgrammatiko]

I thinking about something generic, that can handle basic stuf without extra coding, and allow to be extended when needed.

My idea for the editor buttons was:

• create a new plugin group, ie editor-buttons and for J4/5 check both, with J6 only editor-buttons would exist
• The plugin instead of returning a php object (CMSObject) would just register the buttons in the Joomla.editors as a JS object { name, icon, etc }
• The plugin would register the onClick function on the Joomla.editors
• The plugin would also return true on the PHP side if the plugin is enabled on the particular instance of the editor
• The editor should render (client side) the buttons and bind either the modal or the onClick

This way on every repeatable instance the buttons will work as expected (the editor init function has the responsibility to handle those, ie: tiny will render them inside a toolbar but others could/would render them bellow the editing area)

[HLeithner]

hmm, I thought more on a css file I can use in my own frontend template as base and not only cassiopia, what do you thing?

[Fedik]

By default it use a browser default styling for dialog.
I have fixed iframe sizing, now it pretty usable without extra css.

Backdrop also there, it is browser default.

About footerText. I not very want to overload with features, and keep it simple.
However it still possible to customize:

const dialog = new JoomlaDialog();
dialog.textHeader = 'The header';
dialog.popupContent = '<strong>blabla very strong text</strong>';
// Customise footer
dialog.getFooter().insertAdjacentElement('afterbegin', (() => {
  const el = document.createElement('div');
  el.innerText = 'Footer text';
  return el;
})());
dialog.getFooter().classList.remove('empty');
dialog.show();

[HLeithner]

thanks, I think it's a starting point, even if I would add a css which is (or could be) part of the webasset with a nicer styling

[coolcat-creations]

Does this issue have something to do with this topic here?

#42291

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40150.}

[Frank-MandarinFish]

Hey, since JoomlaDialog is now a module script I think it would be useful to have a little section in the manual that shows how this class can be used in "classic" non-module scripts, as the import function can only be called from another module script. The current manual gives the impression you can use the JoomlaDialog class in any script.

For example static:

<script type="module">
    import JoomlaDialog from "joomla.dialog";
    window.JoomlaDialog = JoomlaDialog;    
</script>

Or dynamic:

async function run() {
  const JoomlaDialog = await import("joomla.dialog");
  dialog = new JoomlaDialog();
}

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40150.}

[fgsw]

I think it would be useful to have a little section in the manual

@Frank-MandarinFish As far as i know everybody can contribute to the manual