@ons/design-system 46.1.2 → 46.1.3

package/components/timeout-modal/timeout-modal.js

@@ -8,6 +8,9 @@ export default class TimeoutModal {
     this.initialExpiryTime = initialExpiryTime;
     this.continueButton = context.querySelector('.ons-js-modal-btn');
     this.modalVisibleInMilliseconds = context.getAttribute('data-show-modal-time') * 1000;
+    this.expiryTime = '';
+    this.expiryTimeInMilliseconds = 0;
+    this.shouldRestartCheck = false;
 
     // Create modal instance
     this.modal = new Modal(this.context);
@@ -27,30 +30,52 @@ export default class TimeoutModal {
   startTimeout() {
     clearTimeout(this.showModalTimeout);
     if (this.initialExpiryTime) {
-      this.totalMilliseconds = this.timeout.expiryTimeInMilliseconds;
+      this.expiryTime = this.timeout.expiryTime;
+      this.expiryTimeInMilliseconds = this.timeout.convertTimeToMilliSeconds(this.expiryTime);
     } else {
       // For demo purposes
-      this.totalMilliseconds = 60000;
+      this.expiryTimeInMilliseconds = 60000;
     }
     this.showModalTimeout = setTimeout(
       this.openModalAndStartCountdown.bind(this),
-      this.totalMilliseconds - this.modalVisibleInMilliseconds,
+      this.expiryTimeInMilliseconds - this.modalVisibleInMilliseconds,
     );
   }
 
   async openModalAndStartCountdown() {
-    const modalWillOpen = await this.timeout.hasExpiryTimeResetInAnotherTab();
+    const modalWillOpen = await this.hasExpiryTimeResetInAnotherTab();
     if (modalWillOpen && !this.modal.isDialogOpen()) {
       this.modal.openDialog();
       this.timeout.startUiCountdown();
+
+      this.shouldRestartCheck = setInterval(async () => {
+        await this.hasExpiryTimeResetInAnotherTab();
+      }, 20000);
     }
   }
 
-  closeModalAndRestartTimeout() {
+  async hasExpiryTimeResetInAnotherTab() {
+    const checkExpiryTime = await this.timeout.getExpiryTime();
+    if (checkExpiryTime.substring(0, 19) != this.timeout.expiryTime.substring(0, 19)) {
+      // Substring is required as endpoint can at random return milliseconds with expiry time
+      this.expiryTime = checkExpiryTime;
+      this.expiryTimeInMilliseconds = this.timeout.convertTimeToMilliSeconds(checkExpiryTime);
+      this.closeModalAndRestartTimeout(this.expiryTimeInMilliseconds);
+    } else {
+      return true;
+    }
+  }
+
+  async closeModalAndRestartTimeout(time) {
+    clearInterval(this.shouldRestartCheck);
+
+    if (typeof timeInMilliSeconds !== 'string') {
+      time = false;
+    }
     if (this.modal.isDialogOpen()) {
       this.modal.closeDialog();
     }
-    this.timeout.restartTimeout();
+    await this.timeout.restartTimeout(time);
     this.startTimeout();
   }
 

package/js/timeout.js

@@ -51,14 +51,8 @@ export default class Timeout {
   async startUiCountdown() {
     this.clearTimers();
     this.countdownStarted = true;
-
-    if (this.enableTimeoutReset) {
-      this.shouldRestartCheck = setInterval(async () => {
-        await this.hasExpiryTimeResetInAnotherTab();
-      }, 20000);
-    }
-
     let milliseconds = this.convertTimeToMilliSeconds(this.expiryTime);
+
     let seconds = milliseconds / 1000;
     let timers = this.timers;
     let $this = this;
@@ -83,13 +77,9 @@ export default class Timeout {
         ($this.endWithFullStop ? '.' : '');
 
       if (timerExpired) {
-        const shouldExpire = this.enableTimeoutReset ? await $this.hasExpiryTimeResetInAnotherTab() : true;
-
-        if (shouldExpire) {
-          $this.countdown.innerHTML = '<span class="ons-u-fw-b">' + $this.countdownExpiredText + '</span>';
-          $this.accessibleCountdown.innerHTML = $this.countdownExpiredText;
-          setTimeout($this.redirect.bind($this), 2000);
-        }
+        $this.countdown.innerHTML = '<span class="ons-u-fw-b">' + $this.countdownExpiredText + '</span>';
+        $this.accessibleCountdown.innerHTML = $this.countdownExpiredText;
+        setTimeout($this.redirect.bind($this), 2000);
       } else {
         seconds--;
         $this.expiryTimeInMilliseconds = seconds * 1000;
@@ -111,24 +101,10 @@ export default class Timeout {
     })();
   }
 
-  async hasExpiryTimeResetInAnotherTab() {
-    const checkExpiryTime = await this.getExpiryTime();
-
-    if (checkExpiryTime != this.expiryTime) {
-      this.expiryTime = checkExpiryTime;
-      this.expiryTimeInMilliseconds = this.convertTimeToMilliSeconds(checkExpiryTime);
-      this.restartTimeout(this.expiryTimeInMilliseconds);
-    } else {
-      return true;
-    }
-  }
-
   async restartTimeout(timeInMilliSeconds) {
     this.clearTimers();
-    clearInterval(this.shouldRestartCheck);
     this.countdownStarted = false;
-
-    if (timeInMilliSeconds) {
+    if (timeInMilliSeconds !== false) {
       this.expiryTimeInMilliseconds = timeInMilliSeconds;
     } else {
       const createNewExpiryTime = await this.setNewExpiryTime();
@@ -138,11 +114,8 @@ export default class Timeout {
   }
 
   async handleWindowFocus() {
-    this.expiryTime = await this.getExpiryTime();
     this.clearTimers();
-    clearInterval(this.shouldRestartCheck);
     if (this.countdownStarted) {
-      this.countdownStarted = false;
       this.startUiCountdown();
     }
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ons/design-system",
   "description": "ONS Design System built CSS, JS, and Nunjucks templates",
-  "version": "46.1.2",
+  "version": "46.1.3",
   "main": "index.js",
   "license": "MIT",
   "author": {
@@ -78,8 +78,8 @@
     "chai": "^4.3.4",
     "chai-as-promised": "^7.1.1",
     "chai-spies": "^1.0.0",
-    "codecov": "3.7.2",
-    "core-js": "^3.15.2",
+    "codecov": "^3.8.3",
+    "core-js": "^3.21.1",
     "cssnano": "^4.1.11",
     "dialog-polyfill": "^0.5.6",
     "eslint": "^5.9.0",
@@ -119,7 +119,7 @@
     "karma-mocha-reporter": "^2.2.5",
     "lighthouse": "^7.5.0",
     "lint-staged": "^8.1.0",
-    "lodash": "^4.17.11",
+    "lodash": "^4.17.21",
     "marked": "^2.1.3",
     "mdn-polyfills": "^5.14.0",
     "minimist": "^1.2.5",