add confirmation dialog, style button

Author: rileyodonnelld2l

language/en.js

@@ -220,6 +220,7 @@ H5PEditor.language.core = {
   newChangeHasBeenLogged: 'New change has been logged',
   loggedChanges: 'Logged changes',
   noChangesHaveBeenLogged: 'No changes have been logged',
+  confirmCloseMetadataModal: 'Are you would like to close this modal? Any unsaved changes will be lost.',
   errorHeader: 'An error occured',
   errorCalculatingMaxScore: 'Could not calculate the max score for this content. The max score is assumed to be 0. Contact your administrator if this isn’t correct.',
   maxScoreSemanticsMissing: 'Could not find the expected semantics in the content.',

scripts/h5peditor-metadata.js

@@ -86,7 +86,13 @@ H5PEditor.MetadataForm = (function (EventDispatcher, $, metadataSemantics) {
      * @private
      */
     const handleClose = function () {
-      if (confirm(H5PEditor.t('core', 'confirmDeleteChangeLog'))) {
+      // if changes have been made to the params object, display a confirmation 
+      if (JSON.stringify(params) !== JSON.stringify(paramsOnModalOpen)) {
+        if (confirm(H5PEditor.t('core', 'confirmCloseMetadataModal'))) {
+          resetMetadataForm();
+          closePopup();
+        }
+      } else {
         resetMetadataForm();
         closePopup();
       }

styles/css/application.css

@@ -186,6 +186,12 @@
     background-color: #095345;
   }
 
+  .h5p-cancel {
+    border-radius: 0.3rem;
+    margin-left: 12px;
+    padding: 0.75rem;
+  }
+
   .h5peditor-label {
     font-size: 0.8em;
     color: #333;