@ons/design-system 46.0.0 → 46.1.0

package/components/modal/_macro.njk

@@ -1,4 +1,4 @@
-{% macro onsModal(params) %}    
+{% macro onsModal(params) %}
     {% set modalID = params.id | default('dialog') %}
     <dialog class="ons-modal ons-js-modal {{ params.classes }}"
         id="{{ modalID }}"

package/components/panel/_macro.njk

@@ -29,6 +29,8 @@
     {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement" %}
     <div class="{{containerClass}}">
         <div class="ons-container">
+    {% elif params.type is defined and params.type == "warn" %}
+        <div class="ons-container">
     {% endif %}
 
         <div {% if params is defined and params and params.type == 'error' and params.title is defined and params.title %}aria-labelledby="error-summary-title" role="alert" tabindex="-1" {% if params.dsExample != true %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params is defined and params and params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params is defined and params and params.attributes is mapping and params.attributes.items is defined and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params is defined and params and params.id is defined and params.id %} id="{{params.id}}"{% endif %}>
@@ -86,7 +88,7 @@
                 {% endif %}
             {% endif %}
 
-            <div class="ons-panel__body{% if params is defined and params and params.iconSize is defined and params.iconSize %} ons-svg-icon-margin--{{ params.iconSize }}{% endif %}" {% if params is defined and params and params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params is defined and params and params.attributes is mapping and params.attributes.items is defined and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}>{{ (params.body if params else "") | safe }}
+            <div class="ons-panel__body{% if params is defined and params and params.iconSize is defined and params.iconSize %} ons-svg-icon-margin--{{ params.iconSize }}{% endif %}">{{ (params.body if params else "") | safe }}
                 {{ caller() if caller }}
             </div>
 
@@ -95,6 +97,8 @@
     {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement"  %}
         </div>
     </div>
+    {% elif params.type is defined and params.type == "warn" %}
+    </div>
     {% endif %}
 
 {% endmacro %}

package/components/panel/_panel.scss

@@ -47,6 +47,10 @@
     padding: 0.75rem 1rem;
   }
 
+  &__timer {
+    white-space: nowrap;
+  }
+
   &__title {
     margin: 0;
   }

package/components/timeout-modal/_macro.njk

@@ -1,5 +1,5 @@
 {% from "components/modal/_macro.njk" import onsModal %}
-{% macro onsTimeoutModal(params) %}    
+{% macro onsTimeoutModal(params) %}
     {% call onsModal({
             "title": params.title,
             "btnText": params.btnText,
@@ -10,11 +10,12 @@
                 "data-show-modal-time": params.showModalTimeInSeconds,
                 "data-server-session-expiry-endpoint": params.serverSessionExpiryEndpoint,
                 "data-countdown-text": params.countdownText,
-                "data-redirecting-text": params.redirectingText,
+                "data-countdown-expired-text": params.countdownExpiredText,
                 "data-minutes-text-singular": params.minutesTextSingular,
                 "data-minutes-text-plural": params.minutesTextPlural,
                 "data-seconds-text-singular": params.secondsTextSingular,
                 "data-seconds-text-plural": params.secondsTextPlural,
+                "data-full-stop": params.endWithFullStop,
                 "aria-describedby": "timeout-time-remaining"
             }
         })

package/components/timeout-modal/{timeout.dom.js → timeout-modal.dom.js}

@@ -4,12 +4,12 @@ async function modals() {
   const timeouts = [...document.querySelectorAll('.ons-js-timeout-modal')];
 
   if (timeouts.length) {
-    const Timeout = (await import('./timeout')).default;
+    const TimeoutModal = (await import('./timeout-modal')).default;
 
     timeouts.forEach(context => {
       let url = context.getAttribute('data-server-session-expiry-endpoint');
       let time = context.getAttribute('data-server-session-expires-at');
-      new Timeout(context, url, time);
+      new TimeoutModal(context, url, time);
     });
   }
 }

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

@@ -0,0 +1,62 @@
+import Modal from '../modal/modal';
+import Timeout from '../../js/timeout';
+
+export default class TimeoutModal {
+  constructor(context, sessionExpiryEndpoint, initialExpiryTime) {
+    this.context = context;
+    this.sessionExpiryEndpoint = sessionExpiryEndpoint;
+    this.initialExpiryTime = initialExpiryTime;
+    this.continueButton = context.querySelector('.ons-js-modal-btn');
+    this.modalVisibleInMilliseconds = context.getAttribute('data-show-modal-time') * 1000;
+
+    // Create modal instance
+    this.modal = new Modal(this.context);
+
+    // Create timeout instance
+    this.timeout = new Timeout(this.context, this.sessionExpiryEndpoint, this.initialExpiryTime, true);
+
+    this.bindEventListeners();
+  }
+
+  bindEventListeners() {
+    window.onload = this.startTimeout();
+    window.addEventListener('keydown', this.escToClose.bind(this));
+    this.continueButton.addEventListener('click', this.closeModalAndRestartTimeout.bind(this));
+  }
+
+  startTimeout() {
+    clearTimeout(this.showModalTimeout);
+    if (this.initialExpiryTime) {
+      this.expiryTimeInMilliseconds = this.timeout.convertTimeToMilliSeconds(this.initialExpiryTime);
+    } else {
+      // For demo purposes
+      this.expiryTimeInMilliseconds = 60000;
+    }
+    this.showModalTimeout = setTimeout(
+      this.openModalAndStartCountdown.bind(this),
+      this.expiryTimeInMilliseconds - this.modalVisibleInMilliseconds,
+    );
+  }
+
+  async openModalAndStartCountdown() {
+    const modalWillOpen = await this.timeout.hasExpiryTimeResetInAnotherTab();
+    if (modalWillOpen && !this.modal.isDialogOpen()) {
+      this.modal.openDialog();
+      this.timeout.startUiCountdown();
+    }
+  }
+
+  closeModalAndRestartTimeout() {
+    if (this.modal.isDialogOpen()) {
+      this.modal.closeDialog();
+    }
+    this.timeout.restartTimeout();
+    this.startTimeout();
+  }
+
+  escToClose(event) {
+    if (this.modal.isDialogOpen() && event.keyCode === 27) {
+      this.closeModalAndRestartTimeout();
+    }
+  }
+}

package/components/timeout-panel/_macro.njk

@@ -0,0 +1,26 @@
+{% from "components/panel/_macro.njk" import onsPanel %}
+{% macro onsTimeoutPanel(params) %}
+    {% call onsPanel({
+            "id": params.id,
+            "classes": "ons-js-panel-with-countdown",
+            "type": "warn",
+            "attributes": {
+                "data-redirect-url": params.redirectUrl,
+                "data-server-session-expires-at": params.sessionExpiresAt,
+                "data-server-session-expiry-endpoint": params.serverSessionExpiryEndpoint,
+                "data-countdown-text": params.countdownText,
+                "data-countdown-expired-text": params.countdownExpiredText,
+                "data-minutes-text-singular": params.minutesTextSingular,
+                "data-minutes-text-plural": params.minutesTextPlural,
+                "data-seconds-text-singular": params.secondsTextSingular,
+                "data-seconds-text-plural": params.secondsTextPlural,
+                "data-full-stop": params.endWithFullStop,
+                "aria-describedby": "timeout-time-remaining"
+            }
+        })
+    %}
+        <noscript><p class="ons-js-nojs-text">{{ params.nojsText }}</p></noscript>
+        <p class="ons-js-timeout-timer" aria-hidden="true" aria-relevant="additions"></p>
+        <p class="ons-js-timeout-timer-acc ons-u-vh" role="status" id="timeout-time-remaining"></p>
+    {% endcall %}
+{% endmacro %}

package/components/timeout-panel/timeout-panel.dom.js

@@ -0,0 +1,17 @@
+import domready from '../../js/domready';
+
+async function timeoutPanels() {
+  const panels = [...document.querySelectorAll('.ons-js-panel-with-countdown')];
+
+  if (panels.length) {
+    const Timeout = (await import('../../js/timeout')).default;
+
+    panels.forEach(context => {
+      let url = context.getAttribute('data-server-session-expiry-endpoint');
+      let time = context.getAttribute('data-server-session-expires-at');
+      new Timeout(context, url, time, false, true);
+    });
+  }
+}
+
+domready(timeoutPanels);