From d354e099af4bb4fcc761fea283ee7e18f8758900 Mon Sep 17 00:00:00 2001 From: Alexis Gaillard Date: Thu, 21 Apr 2022 15:09:27 +0200 Subject: [PATCH] feat(datepicker): Adapt JS for RTL support - FRONT-3595 (#2396) --- .../vanilla/components/carousel/carousel.js | 1 - .../components/datepicker/_datepicker.scss | 4 +-- .../components/datepicker/datepicker.js | 34 ++++++++++++++++--- .../vanilla/components/menu/menu.js | 4 +++ .../ec/.storybook/manager-head.html | 16 --------- .../ec/.storybook/preview-head.html | 10 ++++++ .../eu/.storybook/manager-head.html | 16 --------- .../eu/.storybook/preview-head.html | 10 ++++++ src/tools/dom-utils/autoinit/index.js | 11 +++--- 9 files changed, 59 insertions(+), 47 deletions(-) diff --git a/src/implementations/vanilla/components/carousel/carousel.js b/src/implementations/vanilla/components/carousel/carousel.js index c24103d5682..6cccc6668e2 100644 --- a/src/implementations/vanilla/components/carousel/carousel.js +++ b/src/implementations/vanilla/components/carousel/carousel.js @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import { queryOne, queryAll } from '@ecl/dom-utils'; /** diff --git a/src/implementations/vanilla/components/datepicker/_datepicker.scss b/src/implementations/vanilla/components/datepicker/_datepicker.scss index 917b3ad4385..c20a17a1c47 100644 --- a/src/implementations/vanilla/components/datepicker/_datepicker.scss +++ b/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; } diff --git a/src/implementations/vanilla/components/datepicker/datepicker.js b/src/implementations/vanilla/components/datepicker/datepicker.js index e53df1408e8..982b973e982 100644 --- a/src/implementations/vanilla/components/datepicker/datepicker.js +++ b/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,13 +80,16 @@ 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, @@ -93,20 +97,27 @@ export class Datepicker { 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`; } }, }); @@ -114,7 +125,20 @@ export class Datepicker { // 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'); + } } } diff --git a/src/implementations/vanilla/components/menu/menu.js b/src/implementations/vanilla/components/menu/menu.js index 09d7f9ce635..dd3050ee8bb 100644 --- a/src/implementations/vanilla/components/menu/menu.js +++ b/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); } diff --git a/src/playground/ec/.storybook/manager-head.html b/src/playground/ec/.storybook/manager-head.html index 19ab62d08bc..6d81089c535 100644 --- a/src/playground/ec/.storybook/manager-head.html +++ b/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); - }); - };