From e764322a90d5a70cd0fa76100fbd6ba3736a6eb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zolt=C3=A1n=20Sz=C5=91gy=C3=A9nyi?= Date: Tue, 3 Oct 2023 13:34:25 +0300 Subject: [PATCH 001/181] docs(RTL): add RTL mode button --- layouts/shortcodes/example.html | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/layouts/shortcodes/example.html b/layouts/shortcodes/example.html index 8fb3f2846..8b2893c33 100644 --- a/layouts/shortcodes/example.html +++ b/layouts/shortcodes/example.html @@ -70,7 +70,15 @@ {{ end }} -
+
+ + {{- if eq $show_dark true -}}
- {{- if eq $show_dark true -}} diff --git a/src/docs.js b/src/docs.js index 4424ee958..230d99120 100644 --- a/src/docs.js +++ b/src/docs.js @@ -106,26 +106,40 @@ const updateiFrameDarkMode = (iFrame, theme) => { } }; -const updatePreviewThemeToggleButton = (buttonEl, theme) => { - const moonIconEl = buttonEl.querySelector('[data-toggle-icon="moon"]'); - const sunIconEl = buttonEl.querySelector('[data-toggle-icon="sun"]'); - const tooltipId = buttonEl.getAttribute('data-tooltip-target'); +const updateiFrameRTL = (iFrame, direction) => { + let html = iFrame.contentDocument.querySelector('html'); + + if (direction === 'rtl') { + html.setAttribute('dir', 'rtl'); + } else { + html.removeAttribute('dir'); + } +}; + +const updatePreviewThemeToggleButton = (darkModeButtonEl, theme) => { + const moonIconEl = darkModeButtonEl.querySelector( + '[data-toggle-icon="moon"]' + ); + const sunIconEl = darkModeButtonEl.querySelector( + '[data-toggle-icon="sun"]' + ); + const tooltipId = darkModeButtonEl.getAttribute('data-tooltip-target'); let buttonTextEl = null; if (tooltipId) { buttonTextEl = document.getElementById( - buttonEl.getAttribute('data-tooltip-target') + darkModeButtonEl.getAttribute('data-tooltip-target') ); } if (theme === 'dark') { - buttonEl.setAttribute('data-toggle-dark', 'dark'); + darkModeButtonEl.setAttribute('data-toggle-dark', 'dark'); moonIconEl.classList.add('hidden'); sunIconEl.classList.remove('hidden'); if (tooltipId) { buttonTextEl.textContent = 'Toggle light mode'; } } else { - buttonEl.setAttribute('data-toggle-dark', 'light'); + darkModeButtonEl.setAttribute('data-toggle-dark', 'light'); moonIconEl.classList.remove('hidden'); sunIconEl.classList.add('hidden'); if (tooltipId) { @@ -134,30 +148,51 @@ const updatePreviewThemeToggleButton = (buttonEl, theme) => { } }; -const initiateToggleDarkState = (element) => { +const initiatePreviewState = (element) => { var codePreviewWrapper = element.getElementsByClassName( 'code-preview-wrapper' )[0]; var iframeCodeEl = element.getElementsByClassName('iframe-code')[0]; - var button = element.getElementsByClassName('toggle-dark-state-example')[0]; + var darkModeButton = element.getElementsByClassName( + 'toggle-dark-state-example' + )[0]; var fullViewButton = element.getElementsByClassName('toggle-full-view')[0]; var tabletViewButton = element.getElementsByClassName('toggle-tablet-view')[0]; var mobileViewButton = element.getElementsByClassName('toggle-mobile-view')[0]; + var RTLButton = element.getElementsByClassName('toggle-rtl')[0]; + + if (RTLButton) { + RTLButton.addEventListener('click', () => { + var RTLstate = RTLButton.getAttribute('data-toggle-direction'); + + if (RTLstate === 'ltr') { + RTLButton.setAttribute('data-toggle-direction', 'rtl'); + updateiFrameRTL(iframeCodeEl, 'rtl'); + RTLButton.textContent = 'RTL'; + } + + if (RTLstate === 'rtl') { + RTLButton.setAttribute('data-toggle-direction', 'ltr'); + updateiFrameRTL(iframeCodeEl, 'ltr'); + RTLButton.textContent = 'LTR'; + } + }); + } - if (button) { - button.addEventListener('click', function () { - var state = button.getAttribute('data-toggle-dark'); + if (darkModeButton) { + darkModeButton.addEventListener('click', function () { + var state = darkModeButton.getAttribute('data-toggle-dark'); if (state === 'light') { codePreviewWrapper.classList.add('dark'); - updatePreviewThemeToggleButton(button, 'dark'); + updatePreviewThemeToggleButton(darkModeButton, 'dark'); updateiFrameDarkMode(iframeCodeEl, 'dark'); } if (state === 'dark') { codePreviewWrapper.classList.remove('dark'); - updatePreviewThemeToggleButton(button, 'light'); + updatePreviewThemeToggleButton(darkModeButton, 'light'); updateiFrameDarkMode(iframeCodeEl, 'light'); } }); @@ -165,7 +200,8 @@ const initiateToggleDarkState = (element) => { if (mobileViewButton) { mobileViewButton.addEventListener('click', () => { - const theme = button.getAttribute('data-toggle-dark'); + const theme = darkModeButton.getAttribute('data-toggle-dark'); + const direction = RTLButton.getAttribute('data-toggle-direction'); iframeCodeEl.classList.add('max-w-sm'); iframeCodeEl.classList.add('max-w-lg'); iframeCodeEl.contentWindow.location.reload(); @@ -173,6 +209,7 @@ const initiateToggleDarkState = (element) => { iframeCodeEl.onload = () => { updateiFrameHeight(iframeCodeEl); updateiFrameDarkMode(iframeCodeEl, theme); + updateiFrameRTL(iframeCodeEl, direction); }; setTimeout(() => { iframeCodeEl.classList.remove('opacity-0'); @@ -181,7 +218,8 @@ const initiateToggleDarkState = (element) => { } if (tabletViewButton) { tabletViewButton.addEventListener('click', () => { - const theme = button.getAttribute('data-toggle-dark'); + const theme = darkModeButton.getAttribute('data-toggle-dark'); + const direction = RTLButton.getAttribute('data-toggle-direction'); iframeCodeEl.classList.add('max-w-lg'); iframeCodeEl.classList.remove('max-w-sm'); iframeCodeEl.contentWindow.location.reload(); @@ -189,6 +227,7 @@ const initiateToggleDarkState = (element) => { iframeCodeEl.onload = () => { updateiFrameHeight(iframeCodeEl); updateiFrameDarkMode(iframeCodeEl, theme); + updateiFrameRTL(iframeCodeEl, direction); }; setTimeout(() => { iframeCodeEl.classList.remove('opacity-0'); @@ -197,13 +236,15 @@ const initiateToggleDarkState = (element) => { } if (fullViewButton) { fullViewButton.addEventListener('click', () => { - const theme = button.getAttribute('data-toggle-dark'); + const theme = darkModeButton.getAttribute('data-toggle-dark'); + const direction = RTLButton.getAttribute('data-toggle-direction'); iframeCodeEl.classList.remove('max-w-sm', 'max-w-lg'); iframeCodeEl.contentWindow.location.reload(); iframeCodeEl.classList.add('opacity-0'); iframeCodeEl.onload = () => { updateiFrameHeight(iframeCodeEl); updateiFrameDarkMode(iframeCodeEl, theme); + updateiFrameRTL(iframeCodeEl, direction); }; setTimeout(() => { iframeCodeEl.classList.remove('opacity-0'); @@ -372,7 +413,7 @@ window.addEventListener('load', () => { // copy to clipboard var codeExamples = document.querySelectorAll('.code-example'); codeExamples.forEach((c) => { - initiateToggleDarkState(c); + initiatePreviewState(c); }); // toc menu item activation const deactivateMenuEl = (el) => { From 3634a1b24cb2fdcea065370b143f70f3b9f5aa53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zolt=C3=A1n=20Sz=C5=91gy=C3=A9nyi?= Date: Tue, 3 Oct 2023 14:09:01 +0300 Subject: [PATCH 003/181] docs(RTL): fix tooltip arrow hiding after toggling dark or RTL mode --- layouts/shortcodes/example.html | 4 ++-- src/docs.js | 12 ++++++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/layouts/shortcodes/example.html b/layouts/shortcodes/example.html index 349cc1a72..ee2c362c6 100644 --- a/layouts/shortcodes/example.html +++ b/layouts/shortcodes/example.html @@ -75,7 +75,7 @@ RTL {{- if eq $show_dark true -}} @@ -90,7 +90,7 @@ {{ if $id }} {{ end }} diff --git a/src/docs.js b/src/docs.js index 230d99120..0608a9670 100644 --- a/src/docs.js +++ b/src/docs.js @@ -136,14 +136,16 @@ const updatePreviewThemeToggleButton = (darkModeButtonEl, theme) => { moonIconEl.classList.add('hidden'); sunIconEl.classList.remove('hidden'); if (tooltipId) { - buttonTextEl.textContent = 'Toggle light mode'; + buttonTextEl.querySelector('.tooltip-text').textContent = + 'Toggle light mode'; } } else { darkModeButtonEl.setAttribute('data-toggle-dark', 'light'); moonIconEl.classList.remove('hidden'); sunIconEl.classList.add('hidden'); if (tooltipId) { - buttonTextEl.textContent = 'Toggle dark mode'; + buttonTextEl.querySelector('.tooltip-text').textContent = + 'Toggle dark mode'; } } }; @@ -171,12 +173,18 @@ const initiatePreviewState = (element) => { RTLButton.setAttribute('data-toggle-direction', 'rtl'); updateiFrameRTL(iframeCodeEl, 'rtl'); RTLButton.textContent = 'RTL'; + RTLButton.nextElementSibling.querySelector( + '.tooltip-text' + ).textContent = 'Toggle RTL mode'; } if (RTLstate === 'rtl') { RTLButton.setAttribute('data-toggle-direction', 'ltr'); updateiFrameRTL(iframeCodeEl, 'ltr'); RTLButton.textContent = 'LTR'; + RTLButton.nextElementSibling.querySelector( + '.tooltip-text' + ).textContent = 'Toggle LTR mode'; } }); } From b8a023bc8f4a5c82758f06a8607a51d48f6416b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zolt=C3=A1n=20Sz=C5=91gy=C3=A9nyi?= Date: Tue, 3 Oct 2023 14:21:43 +0300 Subject: [PATCH 004/181] feat(accordions): add RTL variant classes for question icons --- content/components/accordion.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/components/accordion.md b/content/components/accordion.md index bc4da3ec9..db8145eac 100644 --- a/content/components/accordion.md +++ b/content/components/accordion.md @@ -87,7 +87,7 @@ Use the `data-accordion="open"` option to keep previously opened accordion eleme