feat(datepicker): Adapt JS for RTL support - FRONT-3595 (#2396)

src/implementations/vanilla/components/carousel/carousel.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import { queryOne, queryAll } from '@ecl/dom-utils';
 
 /**

src/implementations/vanilla/components/datepicker/_datepicker.scss

@@ -93,7 +93,7 @@ $_picker-theme-color: null !default;
   font: map.get(theme.$font, 'm');
   margin-top: $_picker-margin-top;
   overflow: hidden;
-  width: 100%;
+  width: auto;
 
   &.is-bound {
     box-shadow: none;
@@ -219,8 +219,6 @@ $_picker-theme-color: null !default;
 /* stylelint-disable-next-line order/order */
 @include breakpoints.up('m') {
   .ecl-datepicker-theme.pika-single {
-    width: auto;
-
     .pika-lendar {
       width: 20rem;
     }

src/implementations/vanilla/components/datepicker/datepicker.js

@@ -71,6 +71,7 @@ export class Datepicker {
     this.element = element;
 
     // Options
+    this.picker = null;
     this.format = format;
     this.theme = theme;
     this.yearRange = yearRange;
@@ -79,42 +80,65 @@ export class Datepicker {
     this.enableSelectionDaysInNextAndPreviousMonths =
       enableSelectionDaysInNextAndPreviousMonths;
     this.reposition = reposition;
+    this.direction = 'ltr';
   }
 
   /**
    * Initialise component.
    */
   init() {
-    const picker = new Pikaday({
+    this.direction = getComputedStyle(this.element).direction;
+
+    this.picker = new Pikaday({
       field: this.element,
       format: this.format,
       yearRange: this.yearRange,
       firstDay: 1,
       i18n: this.i18n,
       theme: this.theme,
       reposition: this.reposition,
+      isRTL: this.direction === 'rtl',
+      position: this.direction === 'rtl' ? 'bottom right' : 'bottom left',
       showDaysInNextAndPreviousMonths: this.showDaysInNextAndPreviousMonths,
       enableSelectionDaysInNextAndPreviousMonths:
         this.enableSelectionDaysInNextAndPreviousMonths,
       onOpen() {
-        // Fix picker size that exceeds vw on mobile
+        this.direction = getComputedStyle(this.el).direction;
+
+        // Extend picker size on mobile
         const vw = Math.max(
           document.documentElement.clientWidth || 0,
           window.innerWidth || 0
         );
         const elRect = this.el.getBoundingClientRect();
+        const pickerMargin =
+          this.direction === 'rtl' ? vw - elRect.right : elRect.left;
 
-        if (elRect.width >= vw) {
+        if (vw < 768) {
           this.el.style.width = 'auto';
-          this.el.style.right = `${elRect.left}px`;
+          this.el.style.left = `${pickerMargin}px`;
+          this.el.style.right = `${pickerMargin}px`;
         }
       },
     });
 
     // Set ecl initialized attribute
     this.element.setAttribute('data-ecl-auto-initialized', 'true');
 
-    return picker;
+    return this.picker;
+  }
+
+  /**
+   * Destroy component.
+   */
+  destroy() {
+    if (this.picker) {
+      this.picker.destroy();
+      this.picker = null;
+    }
+    if (this.element) {
+      this.element.removeAttribute('data-ecl-auto-initialized');
+    }
   }
 }
 

src/implementations/vanilla/components/menu/menu.js

@@ -194,6 +194,10 @@ export class Menu {
    * Destroy component.
    */
   destroy() {
+    if (this.stickyInstance) {
+      this.stickyInstance.remove();
+    }
+
     if (this.attachClickListener && this.open) {
       this.open.removeEventListener('click', this.handleClickOnOpen);
     }

src/playground/ec/.storybook/manager-head.html

@@ -26,22 +26,6 @@
       );
     }
   }
-
-  // Re-initialize component in the preview frame when changing #ecl-rtl CSS resource checkbox.
-  window.onload = function (event) {
-    var inputRtlCss = document.getElementById('ecl-rtl');
-    inputRtlCss.addEventListener('change', (event) => {
-      setTimeout(() => {
-        const iframePreview = document.getElementById(
-          'storybook-preview-iframe'
-        ).contentWindow;
-        if (iframePreview) {
-          iframePreview.ECL.autoInit().destroy();
-          iframePreview.ECL.autoInit();
-        }
-      }, 100);
-    });
-  };
 </script>
 <script
   src="https://ec.europa.eu/wel/cookie-consent/consent.js"

src/playground/ec/.storybook/preview-head.html

@@ -32,6 +32,15 @@
     window.frameElement.id === 'storybook-preview-iframe'
   ) {
     // Let CSS Resources inject the styles
+
+    // Re-initialize component from the parent frame when changing #ecl-rtl CSS resource checkbox
+    window.parent.document.addEventListener('click', (e) => {
+      if (e.target && e.target.getAttribute('id') === 'ecl-rtl') {
+        const dir = e.target.checked ? 'rtl' : 'ltr';
+        document.body.setAttribute('dir', dir);
+        runOnPageChange();
+      }
+    });
   } else {
     // Manually inject styles
     var head = document.head || document.getElementsByTagName('head')[0];
@@ -47,6 +56,7 @@
 <script>
   // https://github.com/storybookjs/storybook/issues/6113#issuecomment-473965255
   function runOnPageChange() {
+    ECL.autoInit().destroy();
     ECL.autoInit();
   }
 

src/playground/eu/.storybook/manager-head.html

@@ -26,22 +26,6 @@
       );
     }
   }
-
-  // Re-initialize component in the preview frame when changing #ecl-rtl CSS resource checkbox.
-  window.onload = function (event) {
-    var inputRtlCss = document.getElementById('ecl-rtl');
-    inputRtlCss.addEventListener('change', (event) => {
-      setTimeout(() => {
-        const iframePreview = document.getElementById(
-          'storybook-preview-iframe'
-        ).contentWindow;
-        if (iframePreview) {
-          iframePreview.ECL.autoInit().destroy();
-          iframePreview.ECL.autoInit();
-        }
-      }, 100);
-    });
-  };
 </script>
 <script
   src="https://ec.europa.eu/wel/cookie-consent/consent.js"

src/playground/eu/.storybook/preview-head.html

@@ -32,6 +32,15 @@
     window.frameElement.id === 'storybook-preview-iframe'
   ) {
     // Let CSS Resources inject the styles
+
+    // Re-initialize component from the parent frame when changing #ecl-rtl CSS resource checkbox
+    window.parent.document.addEventListener('click', (e) => {
+      if (e.target && e.target.getAttribute('id') === 'ecl-rtl') {
+        const dir = e.target.checked ? 'rtl' : 'ltr';
+        document.body.setAttribute('dir', dir);
+        runOnPageChange();
+      }
+    });
   } else {
     // Manually inject styles
     var head = document.head || document.getElementsByTagName('head')[0];
@@ -47,6 +56,7 @@
 <script>
   // https://github.com/storybookjs/storybook/issues/6113#issuecomment-473965255
   function runOnPageChange() {
+    ECL.autoInit().destroy();
     ECL.autoInit();
   }
 

src/tools/dom-utils/autoinit/index.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import { queryAll } from '..';
 
 export const autoInit = ({ root = document, ...options } = {}) => {
@@ -51,12 +50,12 @@ export const autoInit = ({ root = document, ...options } = {}) => {
   // Destroy should not throw, in order to be non-blocking.
   const destroy = () => {
     if (ECL.components) {
-      ECL.components.forEach((component, index, object) => {
-        if (component.destroy) {
-          component.destroy();
-          object.splice(index, 1);
+      for (let i = ECL.components.length - 1; i >= 0; i -= 1) {
+        if (ECL.components[i].destroy) {
+          ECL.components[i].destroy();
+          ECL.components.splice(i, 1);
         }
-      });
+      }
     }
   };