From 8b0d619b40413395f32c5b129d371aab9c68aeab Mon Sep 17 00:00:00 2001 From: Ravi Majithia <ravikiran.majithia@joubel.com> Date: Thu, 29 Jul 2021 17:31:31 +0200 Subject: [PATCH] JI-2506 Fix metadata form's dialogs from native JS to H5P.ConfirmationDialog --- language/ar.js | 3 ++ language/bs.js | 3 ++ language/cs.js | 3 ++ language/de.js | 3 ++ language/el.js | 3 ++ language/en.js | 3 ++ language/es-cr.js | 3 ++ language/es-mx.js | 3 ++ language/es.js | 3 ++ language/et.js | 3 ++ language/eu.js | 3 ++ language/fi.js | 3 ++ language/fr.js | 3 ++ language/it.js | 3 ++ language/ko.js | 5 +- language/nb.js | 3 ++ language/nl.js | 3 ++ language/nn.js | 3 ++ language/pl.js | 3 ++ language/pt-br.js | 3 ++ language/pt.js | 5 +- language/ru.js | 3 ++ language/sl.js | 3 ++ language/sv.js | 3 ++ language/tr.js | 5 +- language/zh-cn.js | 3 ++ scripts/h5peditor-metadata-author-widget.js | 43 +++++++++++++++-- .../h5peditor-metadata-changelog-widget.js | 47 +++++++++++++++++-- 28 files changed, 163 insertions(+), 11 deletions(-) diff --git a/language/ar.js b/language/ar.js index a96cac55..9fa5fdbb 100644 --- a/language/ar.js +++ b/language/ar.js @@ -217,4 +217,7 @@ H5PEditor.language.core = { a11yTitleShowLabel: 'Show label for AT', a11yTitleHideLabel: 'Hide label for AT', reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/bs.js b/language/bs.js index 300eeb9a..a7d6bb46 100644 --- a/language/bs.js +++ b/language/bs.js @@ -217,4 +217,7 @@ H5PEditor.language.core = { a11yTitleShowLabel: 'Show label for AT', a11yTitleHideLabel: 'Hide label for AT', reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/cs.js b/language/cs.js index d73c30bb..524a3e54 100644 --- a/language/cs.js +++ b/language/cs.js @@ -217,4 +217,7 @@ H5PEditor.language.core = { enterFullscreenButtonLabel: 'Přejít na celou obrazovku', exitFullscreenButtonLabel: 'Ukončit celou obrazovku', reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/de.js b/language/de.js index 2f5c6968..0950d420 100644 --- a/language/de.js +++ b/language/de.js @@ -217,4 +217,7 @@ H5PEditor.language.core = { a11yTitleShowLabel: 'Show label for AT', a11yTitleHideLabel: 'Hide label for AT', reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/el.js b/language/el.js index c31e15d3..6596f282 100644 --- a/language/el.js +++ b/language/el.js @@ -217,4 +217,7 @@ H5PEditor.language.core = { a11yTitleShowLabel: 'Show label for AT', a11yTitleHideLabel: 'Hide label for AT', reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/en.js b/language/en.js index d9dc5c6b..b2e9051e 100644 --- a/language/en.js +++ b/language/en.js @@ -292,4 +292,7 @@ H5PEditor.language.core = { a11yTitleShowLabel: 'Show label for AT', a11yTitleHideLabel: 'Hide label for AT', reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/es-cr.js b/language/es-cr.js index 48d3115c..05e7f5a6 100644 --- a/language/es-cr.js +++ b/language/es-cr.js @@ -217,4 +217,7 @@ H5PEditor.language.core = { a11yTitleShowLabel: 'Show label for AT', a11yTitleHideLabel: 'Hide label for AT', reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/es-mx.js b/language/es-mx.js index 8377e768..9b52afff 100644 --- a/language/es-mx.js +++ b/language/es-mx.js @@ -217,4 +217,7 @@ H5PEditor.language.core = { a11yTitleShowLabel: 'Show label for AT', a11yTitleHideLabel: 'Hide label for AT', reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/es.js b/language/es.js index 7d03b54d..a12ebff2 100644 --- a/language/es.js +++ b/language/es.js @@ -219,4 +219,7 @@ H5PEditor.language.core = { a11yTitleShowLabel: 'Show label for AT', a11yTitleHideLabel: 'Hide label for AT', reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/et.js b/language/et.js index 6c8340e1..69b62528 100644 --- a/language/et.js +++ b/language/et.js @@ -219,4 +219,7 @@ H5PEditor.language.core = { a11yTitleShowLabel: 'Show label for AT', a11yTitleHideLabel: 'Hide label for AT', reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/eu.js b/language/eu.js index f70044b0..39b368b6 100644 --- a/language/eu.js +++ b/language/eu.js @@ -219,4 +219,7 @@ H5PEditor.language.core = { a11yTitleShowLabel: 'Show label for AT', a11yTitleHideLabel: 'Hide label for AT', reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/fi.js b/language/fi.js index ede2bb07..4d41f51d 100644 --- a/language/fi.js +++ b/language/fi.js @@ -217,4 +217,7 @@ H5PEditor.language.core = { a11yTitleShowLabel: 'Show label for AT', a11yTitleHideLabel: 'Hide label for AT', reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/fr.js b/language/fr.js index d6edc5fc..1f2dabe6 100644 --- a/language/fr.js +++ b/language/fr.js @@ -217,4 +217,7 @@ H5PEditor.language.core = { a11yTitleShowLabel: 'Show label for AT', a11yTitleHideLabel: 'Hide label for AT', reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/it.js b/language/it.js index 8da641cf..f0f755f1 100644 --- a/language/it.js +++ b/language/it.js @@ -217,4 +217,7 @@ H5PEditor.language.core = { a11yTitleShowLabel: 'Show label for AT', a11yTitleHideLabel: 'Hide label for AT', reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/ko.js b/language/ko.js index 660228b7..9c268914 100644 --- a/language/ko.js +++ b/language/ko.js @@ -291,5 +291,8 @@ H5PEditor.language.core = { navigateToParent: '상위 탐색', a11yTitleShowLabel: 'AT 에 대한 라벨 표시', a11yTitleHideLabel: 'AT 에 대한 레이블 숨기기', - reuseSuccess: ':title was successfully imported from the H5P Hub.' + reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/nb.js b/language/nb.js index 2c6fc930..e80336e4 100644 --- a/language/nb.js +++ b/language/nb.js @@ -290,4 +290,7 @@ H5PEditor.language.core = { a11yTitleShowLabel: 'Show label for AT', a11yTitleHideLabel: 'Hide label for AT', reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/nl.js b/language/nl.js index 4f0c0844..6dedb745 100644 --- a/language/nl.js +++ b/language/nl.js @@ -217,4 +217,7 @@ H5PEditor.language.core = { a11yTitleShowLabel: 'Toon label voor AT', a11yTitleHideLabel: 'Verberg label voor AT', reuseSuccess: ':title is met succes geïmporteerd van de H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/nn.js b/language/nn.js index 59a3b8ad..9daa6a54 100644 --- a/language/nn.js +++ b/language/nn.js @@ -217,4 +217,7 @@ H5PEditor.language.core = { a11yTitleShowLabel: 'Show label for AT', a11yTitleHideLabel: 'Hide label for AT', reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/pl.js b/language/pl.js index e70457ea..a342c05b 100644 --- a/language/pl.js +++ b/language/pl.js @@ -217,4 +217,7 @@ H5PEditor.language.core = { a11yTitleShowLabel: 'Show label for AT', a11yTitleHideLabel: 'Hide label for AT', reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/pt-br.js b/language/pt-br.js index bcede23d..d24b775f 100644 --- a/language/pt-br.js +++ b/language/pt-br.js @@ -217,4 +217,7 @@ H5PEditor.language.core = { a11yTitleShowLabel: 'Show label for AT', a11yTitleHideLabel: 'Hide label for AT', reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/pt.js b/language/pt.js index 730a4c4e..b90d8aa7 100644 --- a/language/pt.js +++ b/language/pt.js @@ -216,5 +216,8 @@ H5PEditor.language.core = { exitFullscreenButtonLabel: 'Sair de ecrã inteiro', a11yTitleShowLabel: 'Show label for AT', a11yTitleHideLabel: 'Hide label for AT', - reuseSuccess: ':title was successfully imported from the H5P Hub.' + reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/ru.js b/language/ru.js index 5b7cbc46..2c224321 100644 --- a/language/ru.js +++ b/language/ru.js @@ -219,4 +219,7 @@ H5PEditor.language.core = { a11yTitleShowLabel: 'Show label for AT', a11yTitleHideLabel: 'Hide label for AT', reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/sl.js b/language/sl.js index 8d1b617b..4ff9d2b7 100644 --- a/language/sl.js +++ b/language/sl.js @@ -217,4 +217,7 @@ H5PEditor.language.core = { enterFullscreenButtonLabel: 'Vklopi celozaslonski način', exitFullscreenButtonLabel: 'Izklopi celozaslonski način', reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/sv.js b/language/sv.js index f2bc0939..9e5e7c24 100644 --- a/language/sv.js +++ b/language/sv.js @@ -217,4 +217,7 @@ H5PEditor.language.core = { enterFullscreenButtonLabel: 'Helskärmsläge', exitFullscreenButtonLabel: 'Avsluta helskärm', reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/tr.js b/language/tr.js index d5c43c25..bbdb592b 100644 --- a/language/tr.js +++ b/language/tr.js @@ -216,5 +216,8 @@ H5PEditor.language.core = { exitFullscreenButtonLabel: 'Tam ekrandan çık', a11yTitleShowLabel: 'Show label for AT', a11yTitleHideLabel: 'Hide label for AT', - reuseSuccess: ':title was successfully imported from the H5P Hub.' + reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/language/zh-cn.js b/language/zh-cn.js index a5f2cf66..dc77515b 100644 --- a/language/zh-cn.js +++ b/language/zh-cn.js @@ -217,4 +217,7 @@ H5PEditor.language.core = { enterFullscreenButtonLabel: '进入全屏', exitFullscreenButtonLabel: '退出全屏', reuseSuccess: ':title was successfully imported from the H5P Hub.', + deleteAuthorTitle: 'Deleting author', + deleteAuthorChangeLogTitle: 'Deleting changelog', + confirm: 'Confirm' }; diff --git a/scripts/h5peditor-metadata-author-widget.js b/scripts/h5peditor-metadata-author-widget.js index 3cdc6dcc..28193994 100644 --- a/scripts/h5peditor-metadata-author-widget.js +++ b/scripts/h5peditor-metadata-author-widget.js @@ -140,9 +140,12 @@ H5PEditor.metadataAuthorWidget = function (semantics, params, $wrapper, parent) type: 'button', 'class': 'h5p-metadata-icon-button', click: function () { - if (confirm(H5PEditor.t('core', 'confirmRemoveAuthor'))) { - removeAuthor(author); - } + showConfirmationDialog({ + headerText: H5PEditor.t('core', 'deleteAuthorTitle'), + dialogText: H5PEditor.t('core', 'confirmRemoveAuthor'), + cancelText: H5PEditor.t('core', 'cancel'), + confirmText: H5PEditor.t('core', 'confirm'), + }, handleFormDiaologActions); } }).appendTo(listItem); @@ -152,6 +155,40 @@ H5PEditor.metadataAuthorWidget = function (semantics, params, $wrapper, parent) wrapper.append(authorList); } + /** + * Callback confirm/cancel action + * @param {boolean} [confirmFlag] Which button is clicked + */ + function handleFormDiaologActions(confirmFlag) { + if (confirmFlag) { + removeAuthor(author); + } + } + + /** + * Add confirmation dialog to button. + * @param {object} dialogOptions Dialog options. + * @param {function} handleActions Handle both actions Confirmed and Canceled. + */ + function showConfirmationDialog(dialogOptions, handleActions) { + const confirmationDialog = new H5P.ConfirmationDialog(dialogOptions) + .appendTo(document.body); + + confirmationDialog.on('confirmed', () => { + if (handleActions) { + handleActions(true); + } + }); + + confirmationDialog.on('canceled', () => { + if (handleActions) { + handleActions(false); + } + }); + + confirmationDialog.show(); + } + return { addAuthor: addAuthor, addDefaultAuthor: addDefaultAuthor diff --git a/scripts/h5peditor-metadata-changelog-widget.js b/scripts/h5peditor-metadata-changelog-widget.js index e664dbe2..b65772ce 100644 --- a/scripts/h5peditor-metadata-changelog-widget.js +++ b/scripts/h5peditor-metadata-changelog-widget.js @@ -169,11 +169,12 @@ H5PEditor.metadataChangelogWidget = function (semantics, params, $wrapper, paren logButtons.find('.h5p-metadata-delete').click(function () { // Ask for confirmation - if (confirm(H5PEditor.t('core', 'confirmDeleteChangeLog'))) { - var wrapper = $(this).closest('.h5p-metadata-log'); - var index = $(wrapper).data('index'); - deleteLog(index); - } + showConfirmationDialog({ + headerText: H5PEditor.t('core', 'deleteAuthorChangeLogTitle'), + dialogText: H5PEditor.t('core', 'confirmDeleteChangeLog'), + cancelText: H5PEditor.t('core', 'cancel'), + confirmText: H5PEditor.t('core', 'confirm'), + }, handleFormDiaologActions); }); logButtons.find('.h5p-metadata-edit').click(function () { @@ -196,6 +197,18 @@ H5PEditor.metadataChangelogWidget = function (semantics, params, $wrapper, paren } } + /** + * Callback confirm/cancel action + * @param {boolean} [confirmFlag] Which button is clicked + */ + function handleFormDiaologActions (confirmFlag) { + if (confirmFlag) { + var wrapper = $(this).closest('.h5p-metadata-log'); + var index = $(wrapper).data('index'); + deleteLog(index); + } + } + function editLog(index) { state.editing = true; state.currentLog = index; @@ -271,4 +284,28 @@ H5PEditor.metadataChangelogWidget = function (semantics, params, $wrapper, paren async: true }); } + + /** + * Add confirmation dialog to button. + * @param {object} dialogOptions Dialog options. + * @param {function} handleActions Handle both actions Confirmed and Canceled. + */ + function showConfirmationDialog (dialogOptions, handleActions) { + const confirmationDialog = new H5P.ConfirmationDialog(dialogOptions) + .appendTo(document.body); + + confirmationDialog.on('confirmed', () => { + if (handleActions) { + handleActions(true); + } + }); + + confirmationDialog.on('canceled', () => { + if (handleActions) { + handleActions(false); + } + }); + + confirmationDialog.show(); + } }; -- GitLab