Switch to easytimer lib (so we can pause!)

css/main.css

@@ -821,6 +821,10 @@ select option:disabled {
   opacity: 25%;
 }
 
+#timer:hover:before {
+    content: "⏸"
+}
+
 .sk-cube-grid {
   width: 60px;
   height: 60px;
@@ -910,3 +914,10 @@ display: block
     opacity: 50%;
     text-align: center;
     }
+
+#resume-exam-button {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

index.html

@@ -137,9 +137,13 @@
         </div>
     </div>
 
+    <div id="pause" class="fullscreen-overlay">
+    </div>
+
     <script src="lib/jquery-3.4.1.min.js" type="text/javascript"></script>
     <script src="lib/notify.min.js" type="text/javascript"></script>
     <script src="lib/jq-ajax-progress.min.js" type="text/javascript"></script>
+    <script src="lib/easytimer.min.js" type="module"></script>
     <script src="lib/hammer.js"></script>
     <script src="lib/cornerstone.js"></script>
     <script src="lib/dicomParser.min.js"></script>

js/helpers.js

@@ -40,55 +40,3 @@ export function formatBytes(bytes, decimals = 2) {
 
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
 }
-
-export function CountDownTimer(duration, granularity) {
-  this.duration = duration;
-  this.granularity = granularity || 1000;
-  this.tickFtns = [];
-  this.running = false;
-}
-
-CountDownTimer.prototype.start = function () {
-  if (this.running) {
-    return;
-  }
-  this.running = true;
-  var start = Date.now(),
-    that = this,
-    diff,
-    obj;
-
-  (function timer() {
-    diff = that.duration - (((Date.now() - start) / 1000) | 0);
-
-    if (diff > 0) {
-      setTimeout(timer, that.granularity);
-    } else {
-      diff = 0;
-      that.running = false;
-    }
-
-    obj = CountDownTimer.parse(diff);
-    that.tickFtns.forEach(function (ftn) {
-      ftn.call(this, obj.minutes, obj.seconds);
-    }, that);
-  })();
-};
-
-CountDownTimer.prototype.onTick = function (ftn) {
-  if (typeof ftn === 'function') {
-    this.tickFtns.push(ftn);
-  }
-  return this;
-};
-
-CountDownTimer.prototype.expired = function () {
-  return !this.running;
-};
-
-CountDownTimer.parse = function (seconds) {
-  return {
-    'minutes': (seconds / 60) | 0,
-    seconds: seconds % 60 | 0,
-  };
-};

js/main.js

@@ -149,16 +149,15 @@ function setUpQuestions() {
   loadQuestion(0, 1, true);
   createQuestionListPanel();
 
-
   if (window.question_type == "rapid") {
     window.exam_time = 35 * 60;
-  } else if (window.question_type == "anatomy"){
+  } else if (window.question_type == "anatomy") {
     window.exam_time = 90 * 60;
-  } else if (window.question_type == "long"){
+  } else if (window.question_type == "long") {
     window.exam_time = 75 * 60;
   }
 
-  $("#exam-time").text(window.exam_time / 60)
+  $("#exam-time").text(window.exam_time / 60);
 
   $("#start-dialog").modal();
 }
@@ -1683,29 +1682,50 @@ $("#start-exam-button").click(function (evt) {
 });
 
 $("#start-packet-button").click(function (evt) {
-  //window.cid = parseInt($("#candidate-number").val());
+  let timer = new easytimer.Timer();
-  // const t = 35 * 60;
+  //window.exam_time = 2;
-
+  timer.start({ countdown: true, startValues: { seconds: window.exam_time } });
-  //const t = 2;
+  timer.addEventListener("secondsUpdated", function (e) {
-  let display = document.querySelector("#timer");
+    $('#timer').html("Time left: " + timer.getTimeValues().toString());
-  let timer = new helper.CountDownTimer(window.exam_time);
+  });
-  let timeObj = helper.CountDownTimer.parse(window.exam_time);
+  timer.addEventListener("targetAchieved", function (e) {
-
-  format(timeObj.minutes, timeObj.seconds);
-
-  timer.onTick(format);
-
-  timer.start();
-
-  function format(minutes, seconds) {
-    minutes = minutes < 10 ? "0" + minutes : minutes;
-    seconds = seconds < 10 ? "0" + seconds : seconds;
-    display.textContent = "Time left: " + minutes + ":" + seconds;
-
-    if (minutes == 0 && seconds == 0) {
     $("#time-up-dialog").modal();
-    }
+  });
-  }
+
+  $("#timer").click(() => {
+    timer.pause();
+    $("#pause").empty();
+    $("#pause").append(
+      $(
+        '<button id="resume-exam-button" class="navigation dialog-yes">Resume</button>'
+      ).click(() => {
+        $("#pause").hide();
+        timer.start();
+      })
+    );
+    $("#pause").show();
+  });
+
+  // //const t = 2;
+  // let display = document.querySelector("#timer");
+  // let timer = new helper.CountDownTimer(window.exam_time);
+  // let timeObj = helper.CountDownTimer.parse(window.exam_time);
+
+  // format(timeObj.minutes, timeObj.seconds);
+
+  // timer.onTick(format);
+
+  // timer.start();
+
+  // function format(minutes, seconds) {
+  //   minutes = minutes < 10 ? "0" + minutes : minutes;
+  //   seconds = seconds < 10 ? "0" + seconds : seconds;
+  //   display.textContent = "Time left: " + minutes + ":" + seconds;
+
+  //   if (minutes == 0 && seconds == 0) {
+  //     $("#time-up-dialog").modal();
+  //   }
+  // }
 
   $.modal.close();
 });