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