From efd18af9b769440ae2096f4e0296e8f38121e30e Mon Sep 17 00:00:00 2001
From: Herwin <Herwin@DESKTOP-VH5FH4E.local>
Date: Sat, 16 Nov 2024 17:11:47 +0100
Subject: [PATCH] Implemented text direction switch Update index.php,
 text-direction-switch.js, and text_alignment.php

---
 htdocs/index.php                   |  1 +
 htdocs/js/text-direction-switch.js | 16 ++++++++++++++++
 htdocs/parts/text_alignment.php    | 13 +++++++------
 3 files changed, 24 insertions(+), 6 deletions(-)
 create mode 100644 htdocs/js/text-direction-switch.js

diff --git a/htdocs/index.php b/htdocs/index.php
index e3d7691..7f727a4 100644
--- a/htdocs/index.php
+++ b/htdocs/index.php
@@ -131,5 +131,6 @@
 </footer>
 
 <script src="/js/sidebar.js"></script>
+<script src="/js/text-direction-switch.js"></script>
 </body>
 </html>
diff --git a/htdocs/js/text-direction-switch.js b/htdocs/js/text-direction-switch.js
new file mode 100644
index 0000000..4e3332d
--- /dev/null
+++ b/htdocs/js/text-direction-switch.js
@@ -0,0 +1,16 @@
+const eTextDirectionSwitches = document.querySelectorAll(".text-direction-switch");
+const eTextDirectionTargets = document.querySelectorAll(".text-direction-target");
+
+document.addEventListener("DOMContentLoaded", () => {
+    eTextDirectionSwitches.forEach(eSwitch => {
+        eSwitch.onclick = function() {
+            eTextDirectionTargets.forEach(eTarget => {
+                if(eTarget.style.direction === "rtl") {
+                    eTarget.style.direction = 'ltr';
+                } else {
+                    eTarget.style.direction = 'rtl';
+                }
+            });
+        };
+    });
+});
diff --git a/htdocs/parts/text_alignment.php b/htdocs/parts/text_alignment.php
index 74c527b..67cfcc7 100644
--- a/htdocs/parts/text_alignment.php
+++ b/htdocs/parts/text_alignment.php
@@ -20,27 +20,27 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         <tbody>
         <tr>
             <td><p class="t-bold">Left</p></td>
-            <td><p class="t-left">Left</p></td>
+            <td><p class="t-left text-direction-target">Left</p></td>
             <td><span class="code">t-left</span></td>
         </tr>
         <tr>
             <td><p class="t-bold">Center</p></td>
-            <td><p class="t-center">Centered</p></td>
+            <td><p class="t-center text-direction-target">Centered</p></td>
             <td><span class="code">t-center</span></td>
         </tr>
         <tr>
             <td><p class="t-bold">Right</p></td>
-            <td><p class="t-right">Right</p></td>
+            <td><p class="t-right text-direction-target">Right</p></td>
             <td><span class="code">t-right</span></td>
         </tr>
         <tr>
             <td><p class="t-bold">Start</p></td>
-            <td><p class="t-start">Start</p></td>
+            <td><p class="t-start text-direction-target">Start</p></td>
             <td><span class="code">t-start</span></td>
         </tr>
         <tr>
             <td><p class="t-bold">End</p></td>
-            <td><p class="t-end">End</p></td>
+            <td><p class="t-end text-direction-target">End</p></td>
             <td><span class="code">t-end</span></td>
         </tr>
         <tr>
@@ -50,5 +50,6 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         </tr>
         </tbody>
     </table>
-    <button>Switch text direction</button>
+
+    <button class="p-xs r-s border primary mt-s text-direction-switch">Switch text direction</button>
 </section>