Display dialog when content user data is reset.

js/h5p.js

@@ -58,10 +58,27 @@ H5P.init = function (target) {
       return H5P.error('No data for content id ' + contentId + '. Perhaps the library is gone?');
     }
     if (contentData.contentUserDatas && contentData.contentUserDatas.state) {
-      try {
-        contentData.contentUserDatas.state = JSON.parse(contentData.contentUserDatas.state);
+      if (contentData.contentUserDatas.state === 'RESET') {
+        // Content has been reset. Display dialog.
+        delete contentData.contentUserDatas;
+        var dialog = new H5P.Dialog('content-user-data-reset', 'Data Reset', '<p>' + H5P.t('contentChanged') + '</p><p>' + H5P.t('startingOver') + '</p><div class="h5p-dialog-ok-button" tabIndex="0" role="button">OK</div>', $container);
+        H5P.jQuery(dialog).on('dialog-opened', function (event, $dialog) {
+          $dialog.find('.h5p-dialog-ok-button').click(function () {
+            dialog.close();
+          }).keypress(function (event) {
+            if (event.which === 32) {
+              dialog.close();
+            }
+          });
+        });
+        dialog.open();
+      }
+      else {
+        try {
+          contentData.contentUserDatas.state = JSON.parse(contentData.contentUserDatas.state);
+        }
+        catch (err) {}
       }
-      catch (err) {}
     }
     var library = {
       library: contentData.library,

styles/h5p.css

@@ -390,3 +390,18 @@ div.h5p-fullscreen {
   min-height: 30px;
   line-height: 30px;
 }
+.h5p-dialog-ok-button {
+  cursor: default;
+  float: right;
+  outline: none;
+  border: 2px solid #ccc;
+  padding: 0.25em 0.75em 0.125em;
+  background: #eee;
+}
+.h5p-dialog-ok-button:hover,
+.h5p-dialog-ok-button:focus {
+  background: #fafafa;
+}
+.h5p-dialog-ok-button:active {
+  background: #eeffee;
+}