Skip to content

Commit d7a0022

Browse files
FedikFedik
authored
[5.0] Use Joomla dialog for confirmation dialog, instead of old school confirm() (#41434)
* Use Joomla dialog for confirmation dialog * Load translation * Targetable buttons * Testing test * Testing test * attr * Testing test * Testing test * Testing test * Testing test * Testing test * Testing test * Testing test * Testing test * Testing test * Testing test * Testing test
1 parent 29a4bc6 commit d7a0022

File tree

17 files changed

+65
-53
lines changed

17 files changed

+65
-53
lines changed

‎build/media_source/system/joomla.asset.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -610,7 +610,8 @@
610610
"type": "module"
611611
},
612612
"dependencies": [
613-
"webcomponent.toolbar-button-legacy"
613+
"webcomponent.toolbar-button-legacy",
614+
"joomla.dialog"
614615
]
615616
},
616617
{

‎build/media_source/system/js/joomla-dialog.w-c.es6.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -221,6 +221,7 @@ class JoomlaDialog extends HTMLElement {
221221
label: '',
222222
ariaLabel: this.textClose,
223223
className: 'button-close btn-close',
224+
data: { buttonClose: '' },
224225
onClick: () => this.close(),
225226
location: 'header',
226227
});
@@ -236,7 +237,7 @@ class JoomlaDialog extends HTMLElement {
236237
const btn = document.createElement('button');
237238
btn.type = 'button';
238239
btn.textContent = btnData.label || '';
239-
btn.ariaLabel = btnData.ariaLabel || '';
240+
btn.ariaLabel = btnData.ariaLabel || null;
240241

241242
if (btnData.className) {
242243
btn.classList.add(...btnData.className.split(' '));
@@ -571,6 +572,7 @@ class JoomlaDialog extends HTMLElement {
571572
popup.textHeader = title || Joomla.Text._('INFO', 'Info');
572573
popup.popupButtons = [{
573574
label: Joomla.Text._('JOK', 'Okay'),
575+
data: { buttonOk: '' },
574576
onClick: () => popup.close(),
575577
}];
576578
popup.classList.add('joomla-dialog-alert');
@@ -599,18 +601,20 @@ class JoomlaDialog extends HTMLElement {
599601
popup.popupButtons = [
600602
{
601603
label: Joomla.Text._('JYES', 'Yes'),
604+
data: { buttonOk: '' },
602605
onClick: () => {
603606
result = true;
604607
popup.destroy();
605608
},
606609
},
607610
{
608611
label: Joomla.Text._('JNO', 'No'),
612+
data: { buttonCancel: '' },
609613
onClick: () => {
610614
result = false;
611615
popup.destroy();
612616
},
613-
className: 'button btn btn-outline-secondary',
617+
className: 'button button-secondary btn btn-outline-secondary',
614618
},
615619
];
616620
popup.cancelable = false;

‎build/media_source/system/js/joomla-toolbar-button.w-c.es6.js‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ window.customElements.define('joomla-toolbar-button', class extends HTMLElement
2525
throw new Error('Joomla API is not properly initiated');
2626
}
2727

28+
this.confirmationReceived = false;
2829
this.onChange = this.onChange.bind(this);
2930
this.executeTask = this.executeTask.bind(this);
3031
}
@@ -101,11 +102,24 @@ window.customElements.define('joomla-toolbar-button', class extends HTMLElement
101102
return false;
102103
}
103104

104-
// eslint-disable-next-line no-restricted-globals
105-
if (this.confirmMessage && !confirm(this.confirmMessage)) {
105+
// Ask for User confirmation when needed
106+
if (this.confirmMessage && !this.confirmationReceived) {
107+
// eslint-disable-next-line import/no-unresolved,no-undef
108+
import('joomla.dialog')
109+
.then((m) => m.default.confirm(this.confirmMessage, Joomla.Text._('WARNING', 'Warning')))
110+
.then((confirmed) => {
111+
if (confirmed) {
112+
// Set confirmation flag, and emulate the click again
113+
this.confirmationReceived = true;
114+
this.buttonElement.click();
115+
}
116+
});
106117
return false;
107118
}
108119

120+
// Reset any previous confirmation
121+
this.confirmationReceived = false;
122+
109123
if (this.task) {
110124
Joomla.submitbutton(this.task, this.form, this.formValidation);
111125
}

‎layouts/joomla/toolbar/basic.php‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,6 @@
1313
use Joomla\CMS\Factory;
1414
use Joomla\CMS\Language\Text;
1515

16-
Factory::getDocument()->getWebAssetManager()
17-
->useScript('core')
18-
->useScript('webcomponent.toolbar-button');
19-
2016
extract($displayData, EXTR_OVERWRITE);
2117

2218
/**
@@ -38,6 +34,11 @@
3834
* @var string $caretClass
3935
* @var string $toggleSplit
4036
*/
37+
38+
Factory::getApplication()->getDocument()->getWebAssetManager()
39+
->useScript('core')
40+
->useScript('webcomponent.toolbar-button');
41+
4142
$tagName = $tagName ?? 'button';
4243

4344
$taskAttr = '';
@@ -48,8 +49,14 @@
4849
$validate = !empty($formValidation) ? ' form-validation' : '';
4950
$msgAttr = !empty($message) ? ' confirm-message="' . $this->escape($message) . '"' : '';
5051

52+
if ($msgAttr) {
53+
Text::script('WARNING');
54+
Text::script('JYES');
55+
Text::script('JNO');
56+
}
57+
5158
if ($id === 'toolbar-help') {
52-
$title = ' title="' . Text::_('JGLOBAL_OPENS_IN_A_NEW_WINDOW') . '"';
59+
$title = ' title="' . $this->escape(Text::_('JGLOBAL_OPENS_IN_A_NEW_WINDOW')) . '"';
5360
}
5461

5562
if (!empty($task)) {

‎layouts/joomla/toolbar/standard.php‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
defined('_JEXEC') or die;
1212

1313
use Joomla\CMS\Factory;
14+
use Joomla\CMS\Language\Text;
1415

1516
extract($displayData, EXTR_OVERWRITE);
1617

@@ -31,7 +32,7 @@
3132
* @var string $message Confirmation message before run the task
3233
*/
3334

34-
Factory::getDocument()->getWebAssetManager()
35+
Factory::getApplication()->getDocument()->getWebAssetManager()
3536
->useScript('core')
3637
->useScript('webcomponent.toolbar-button');
3738

@@ -44,6 +45,12 @@
4445
$validate = !empty($formValidation) ? ' form-validation' : '';
4546
$msgAttr = !empty($message) ? ' confirm-message="' . $this->escape($message) . '"' : '';
4647

48+
if ($msgAttr) {
49+
Text::script('WARNING');
50+
Text::script('JYES');
51+
Text::script('JNO');
52+
}
53+
4754
if (!empty($task)) {
4855
$taskAttr = ' task="' . $task . '"';
4956
} elseif (!empty($onclick)) {

‎tests/System/integration/administrator/components/com_banners/Banners.cy.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ describe('Test in backend that the banners list', () => {
2929
cy.checkAllResults();
3030
cy.clickToolbarButton('Action');
3131
cy.contains('Publish').click();
32-
cy.on('window:confirm', () => true);
3332

3433
cy.get('#system-message-container').contains('Banner published.').should('exist');
3534
});
@@ -42,7 +41,6 @@ describe('Test in backend that the banners list', () => {
4241
cy.checkAllResults();
4342
cy.clickToolbarButton('Action');
4443
cy.contains('Unpublish').click();
45-
cy.on('window:confirm', () => true);
4644

4745
cy.get('#system-message-container').contains('Banner unpublished.').should('exist');
4846
});
@@ -55,7 +53,6 @@ describe('Test in backend that the banners list', () => {
5553
cy.checkAllResults();
5654
cy.clickToolbarButton('Action');
5755
cy.contains('Trash').click();
58-
cy.on('window:confirm', () => true);
5956

6057
cy.get('#system-message-container').contains('Banner trashed.').should('exist');
6158
});
@@ -68,7 +65,7 @@ describe('Test in backend that the banners list', () => {
6865
cy.searchForItem('Test banner');
6966
cy.checkAllResults();
7067
cy.clickToolbarButton('empty trash');
71-
cy.on('window:confirm', () => true);
68+
cy.clickDialogConfirm(true);
7269

7370
cy.get('#system-message-container').contains('Banner deleted.').should('exist');
7471
});

‎tests/System/integration/administrator/components/com_banners/Clients.cy.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ describe('Test in backend that the clients list', () => {
2929
cy.checkAllResults();
3030
cy.clickToolbarButton('Action');
3131
cy.contains('Publish').click();
32-
cy.on('window:confirm', () => true);
3332

3433
cy.get('#system-message-container').contains('Client published.').should('exist');
3534
});
@@ -42,7 +41,6 @@ describe('Test in backend that the clients list', () => {
4241
cy.checkAllResults();
4342
cy.clickToolbarButton('Action');
4443
cy.contains('Unpublish').click();
45-
cy.on('window:confirm', () => true);
4644

4745
cy.get('#system-message-container').contains('Client unpublished.').should('exist');
4846
});
@@ -55,7 +53,6 @@ describe('Test in backend that the clients list', () => {
5553
cy.checkAllResults();
5654
cy.clickToolbarButton('Action');
5755
cy.contains('Trash').click();
58-
cy.on('window:confirm', () => true);
5956

6057
cy.get('#system-message-container').contains('Client trashed.').should('exist');
6158
});
@@ -68,7 +65,7 @@ describe('Test in backend that the clients list', () => {
6865
cy.searchForItem('test banner client');
6966
cy.checkAllResults();
7067
cy.clickToolbarButton('empty trash');
71-
cy.on('window:confirm', () => true);
68+
cy.clickDialogConfirm(true);
7269

7370
cy.get('#system-message-container').contains('Client deleted.').should('exist');
7471
});

‎tests/System/integration/administrator/components/com_categories/Categories.cy.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ describe('Test in backend that the categories list', () => {
2929
cy.checkAllResults();
3030
cy.clickToolbarButton('Action');
3131
cy.contains('Publish').click();
32-
cy.on('window:confirm', () => true);
3332

3433
cy.get('#system-message-container').contains('Category published.').should('exist');
3534
});
@@ -42,7 +41,6 @@ describe('Test in backend that the categories list', () => {
4241
cy.checkAllResults();
4342
cy.clickToolbarButton('Action');
4443
cy.contains('Unpublish').click();
45-
cy.on('window:confirm', () => true);
4644

4745
cy.get('#system-message-container').contains('Category unpublished.').should('exist');
4846
});
@@ -55,7 +53,6 @@ describe('Test in backend that the categories list', () => {
5553
cy.checkAllResults();
5654
cy.clickToolbarButton('Action');
5755
cy.contains('Trash').click();
58-
cy.on('window:confirm', () => true);
5956

6057
cy.get('#system-message-container').contains('Category trashed.').should('exist');
6158
});
@@ -71,7 +68,7 @@ describe('Test in backend that the categories list', () => {
7168
cy.searchForItem('Test category');
7269
cy.checkAllResults();
7370
cy.clickToolbarButton('empty trash');
74-
cy.on('window:confirm', () => true);
71+
cy.clickDialogConfirm(true);
7572

7673
cy.get('#system-message-container').contains('Category deleted.').should('exist');
7774
});

‎tests/System/integration/administrator/components/com_contact/Contacts.cy.js‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ describe('Test in backend that the contacts list', () => {
2929
cy.checkAllResults();
3030
cy.clickToolbarButton('Action');
3131
cy.contains('Publish').click();
32-
cy.on('window:confirm', () => true);
3332

3433
cy.get('#system-message-container').contains('Contact published.').should('exist');
3534
});
@@ -42,7 +41,6 @@ describe('Test in backend that the contacts list', () => {
4241
cy.checkAllResults();
4342
cy.clickToolbarButton('Action');
4443
cy.contains('Unpublish').click();
45-
cy.on('window:confirm', () => true);
4644

4745
cy.get('#system-message-container').contains('Contact unpublished.').should('exist');
4846
});
@@ -55,7 +53,6 @@ describe('Test in backend that the contacts list', () => {
5553
cy.checkAllResults();
5654
cy.clickToolbarButton('Action');
5755
cy.contains('.button-featured', 'Feature').click();
58-
cy.on('window:confirm', () => true);
5956

6057
cy.get('#system-message-container').contains('Contact featured.').should('exist');
6158
});
@@ -68,7 +65,6 @@ describe('Test in backend that the contacts list', () => {
6865
cy.checkAllResults();
6966
cy.clickToolbarButton('Action');
7067
cy.contains('Unfeature').click();
71-
cy.on('window:confirm', () => true);
7268

7369
cy.get('#system-message-container').contains('Contact unfeatured.').should('exist');
7470
});
@@ -81,7 +77,6 @@ describe('Test in backend that the contacts list', () => {
8177
cy.checkAllResults();
8278
cy.clickToolbarButton('Action');
8379
cy.contains('Trash').click();
84-
cy.on('window:confirm', () => true);
8580

8681
cy.get('#system-message-container').contains('Contact trashed.').should('exist');
8782
});
@@ -94,7 +89,7 @@ describe('Test in backend that the contacts list', () => {
9489
cy.searchForItem('Test contact');
9590
cy.checkAllResults();
9691
cy.clickToolbarButton('empty trash');
97-
cy.on('window:confirm', () => true);
92+
cy.clickDialogConfirm(true);
9893

9994
cy.get('#system-message-container').contains('Contact deleted.').should('exist');
10095
});

‎tests/System/integration/administrator/components/com_content/Articles.cy.js‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ describe('Test in backend that the articles list', () => {
2929
cy.checkAllResults();
3030
cy.clickToolbarButton('Action');
3131
cy.contains('Publish').click();
32-
cy.on('window:confirm', () => true);
3332

3433
cy.get('#system-message-container').contains('Article published.').should('exist');
3534
});
@@ -42,7 +41,6 @@ describe('Test in backend that the articles list', () => {
4241
cy.checkAllResults();
4342
cy.clickToolbarButton('Action');
4443
cy.contains('Unpublish').click();
45-
cy.on('window:confirm', () => true);
4644

4745
cy.get('#system-message-container').contains('Article unpublished.').should('exist');
4846
});
@@ -55,7 +53,6 @@ describe('Test in backend that the articles list', () => {
5553
cy.checkAllResults();
5654
cy.clickToolbarButton('Action');
5755
cy.contains('.button-featured', 'Feature').click();
58-
cy.on('window:confirm', () => true);
5956

6057
cy.get('#system-message-container').contains('Article featured.').should('exist');
6158
});
@@ -68,7 +65,6 @@ describe('Test in backend that the articles list', () => {
6865
cy.checkAllResults();
6966
cy.clickToolbarButton('Action');
7067
cy.contains('Unfeature').click();
71-
cy.on('window:confirm', () => true);
7268

7369
cy.get('#system-message-container').contains('Article unfeatured.').should('exist');
7470
});
@@ -81,7 +77,6 @@ describe('Test in backend that the articles list', () => {
8177
cy.checkAllResults();
8278
cy.clickToolbarButton('Action');
8379
cy.contains('Trash').click();
84-
cy.on('window:confirm', () => true);
8580

8681
cy.get('#system-message-container').contains('Article trashed.').should('exist');
8782
});
@@ -94,7 +89,7 @@ describe('Test in backend that the articles list', () => {
9489
cy.searchForItem('Test article');
9590
cy.checkAllResults();
9691
cy.clickToolbarButton('empty trash');
97-
cy.on('window:confirm', () => true);
92+
cy.clickDialogConfirm(true);
9893

9994
cy.get('#system-message-container').contains('Article deleted.').should('exist');
10095
});

0 commit comments

Comments
 (0)