From 97082b38ceba83374e8f91782d2fb154a412fdfc Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 29 Mar 2021 19:14:12 +0200
Subject: [PATCH] wait #4375 @2.5

---
 js/libs/fluidbook/fluidbook.contentlock.js    |  5 +-
 js/libs/fluidbook/special/mirakleaster2021.js | 57 +++++++++++++++++++
 style/special/mirakleaster2021.less           | 44 ++++++++++++++
 3 files changed, 104 insertions(+), 2 deletions(-)
 create mode 100644 js/libs/fluidbook/special/mirakleaster2021.js
 create mode 100644 style/special/mirakleaster2021.less

diff --git a/js/libs/fluidbook/fluidbook.contentlock.js b/js/libs/fluidbook/fluidbook.contentlock.js
index f91cca5e..c6f7d167 100644
--- a/js/libs/fluidbook/fluidbook.contentlock.js
+++ b/js/libs/fluidbook/fluidbook.contentlock.js
@@ -156,12 +156,13 @@ FluidbookContentLock.prototype = {
             if (unlockEvenPages && lockPage % 2 === 1) {
                 lockPage--;
             }
-            if (currentPage !== lockPage) {
+            if (currentPage < lockPage) {
                 return;
             }
+            console.log('unlock '+lockPage+'('+currentPage+')');
             $this.locks[k].unlocked = 1;
             change = true;
-            return true;
+
         });
 
         if (change) {
diff --git a/js/libs/fluidbook/special/mirakleaster2021.js b/js/libs/fluidbook/special/mirakleaster2021.js
new file mode 100644
index 00000000..dcb55848
--- /dev/null
+++ b/js/libs/fluidbook/special/mirakleaster2021.js
@@ -0,0 +1,57 @@
+var MiraklEaster2021 = {
+    init: function () {
+        var $this = this;
+        $(document).on('click', '[data-answers]', function () {
+            var answers = $(this).data('answers').toString().toLowerCase().trim().split(';');
+            $.confirm({
+                escapeKey: true,
+                backgroundDismiss:true,
+                title: '',
+                content: '' +
+                    '<form action="" class="formName">' +
+                    '<div class="form-group">' +
+                    '<label>Your answer:</label>' +
+                    '<input type="text" value="" placeholder="" class="name form-control" required autofocus />' +
+                    '</div>' +
+                    '</form>',
+                buttons: {
+                    formSubmit: {
+                        text: 'OK',
+                        btnClass: 'btn-ok',
+                        action: function () {
+                            var c = this.$content.find('.name').val().toString().trim().toLowerCase();
+                            if (answers.indexOf(c) >= 0) {
+                                console.log(':)');
+                                fluidbook.contentlock.unlockCurrentPage();
+                                fluidbook.goNextPage();
+                            } else {
+                                console.log(':(');
+                                fluidbook.links.triggerLinkById('wrong');
+                            }
+                            return true;
+                        }
+                    },
+                    cancel: function () {
+                        return true;
+                        //close
+                    },
+                },
+                onContentReady: function () {
+                    // bind to events
+                    var jc = this;
+                    this.$content.find('form').on('submit', function (e) {
+                        // if the user submits the form by pressing enter in the field.
+                        e.preventDefault();
+                        jc.$$formSubmit.trigger('click'); // reference the button and click it
+                    });
+                }
+            });
+            return false;
+        });
+    }
+}
+
+$(function () {
+    $(document).on('fluidbook.init', MiraklEaster2021.init);
+});
+
diff --git a/style/special/mirakleaster2021.less b/style/special/mirakleaster2021.less
new file mode 100644
index 00000000..12cea3a3
--- /dev/null
+++ b/style/special/mirakleaster2021.less
@@ -0,0 +1,44 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap');
+
+.jconfirm .jconfirm-box {
+  .form-group {
+    label {
+      text-align: center;
+      font-size: 30px;
+      display: block;
+      color: #052b4c;
+      margin-bottom: 30px;
+    }
+
+    input {
+      color: #052b4c;
+      border-color: #052b4c;
+      font-size: 30px;
+      border-width: 2px;
+      padding:8px;
+    }
+  }
+
+  .jconfirm-buttons {
+    float: none !important;
+
+    .btn-default {
+      display: none;
+    }
+
+    button.btn-ok {
+      font-family: "Roboto Slab";
+      background-color: #3fa9f5;
+      height: 70px;
+      border-radius: 35px;
+      font-size: 30px;
+      width: 150px;
+      margin: 15px auto;
+      display: block;
+      font-weight: 500;
+      &:hover{
+        background-color: darken(#3fa9f5,10%);
+      }
+    }
+  }
+}
-- 
2.39.5