From c4c2f6b16ab0cde0a7eec24e0cbb52799c29711b Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Tue, 24 Mar 2015 16:17:26 +0100
Subject: [PATCH] Display dialog when content user data is reset.

---
 js/h5p.js      | 23 ++++++++++++++++++++---
 styles/h5p.css | 15 +++++++++++++++
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/js/h5p.js b/js/h5p.js
index d473f66..7902733 100644
--- a/js/h5p.js
+++ b/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,
diff --git a/styles/h5p.css b/styles/h5p.css
index e6bd6fd..a9ecaf9 100644
--- a/styles/h5p.css
+++ b/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;
+}