From 5f7bd9a9c42900a0478f93155dd868a4c8ded28d Mon Sep 17 00:00:00 2001
From: Mani <12841290+krmanik@users.noreply.github.com>
Date: Sun, 2 Oct 2022 19:01:08 +0530
Subject: [PATCH] show or hide pinyin or zhuyin when multiple exists

---
 card templates/Card 1/back.html  | 24 ++++++++++++++++++------
 card templates/Card 2/back.html  | 24 ++++++++++++++++++------
 card templates/Card 3/back.html  | 24 ++++++++++++++++++------
 card templates/Card 4/back.html  | 24 ++++++++++++++++++------
 card templates/Card 5/front.html | 29 +++++++++++++++++++++++++++--
 5 files changed, 99 insertions(+), 26 deletions(-)

diff --git a/card templates/Card 1/back.html b/card templates/Card 1/back.html
index ed4bfc0..a3ede5b 100644
--- a/card templates/Card 1/back.html	
+++ b/card templates/Card 1/back.html	
@@ -46,10 +46,10 @@
                 document.getElementById(_id).checked = false;
                 document.getElementById(divId).style.display = "none";
                 if (_id == "text-pinyin") {
-                    document.querySelector(".pinyin").style.display = "none";
+                    showHide(".pinyin", false);
                 }
                 if (_id == "text-zhuyin") {
-                    document.querySelectorAll(".zhuyin")[1].style.display = "none";
+                    showHide(".zhuyin", false);
                 }
             } else {
                 document.getElementById(_id).checked = true;
@@ -70,21 +70,33 @@
         }
         if (e.id == "text-pinyin") {
             if (e.checked) {
-                document.querySelector(".pinyin").style.display = "inline";
+                showHide(".pinyin", true);
             } else {
-                document.querySelector(".pinyin").style.display = "none";
+                showHide(".pinyin", false);
             }
         }
 
         if (e.id == "text-zhuyin") {
             if (e.checked) {
-                document.querySelectorAll(".zhuyin")[1].style.display = "inline";
+                showHide(".zhuyin", true);
             } else {
-                document.querySelectorAll(".zhuyin")[1].style.display = "none";
+                showHide(".zhuyin", false);
             }
         }
     }
 
+    function showHide(type, isShow) {
+        if (isShow) {
+            document.querySelectorAll(type).forEach(function (val) {
+                val.style.display = 'inline';
+            });
+        } else {
+            document.querySelectorAll(type).forEach(function (val) {
+                val.style.display = 'none';
+            });
+        }
+    }
+
     function openSidebar(id) {
         var width = id == "sidebar" ? "250px" : "160px";
         document.getElementById(id).style.width = width;
diff --git a/card templates/Card 2/back.html b/card templates/Card 2/back.html
index ed4bfc0..a3ede5b 100644
--- a/card templates/Card 2/back.html	
+++ b/card templates/Card 2/back.html	
@@ -46,10 +46,10 @@
                 document.getElementById(_id).checked = false;
                 document.getElementById(divId).style.display = "none";
                 if (_id == "text-pinyin") {
-                    document.querySelector(".pinyin").style.display = "none";
+                    showHide(".pinyin", false);
                 }
                 if (_id == "text-zhuyin") {
-                    document.querySelectorAll(".zhuyin")[1].style.display = "none";
+                    showHide(".zhuyin", false);
                 }
             } else {
                 document.getElementById(_id).checked = true;
@@ -70,21 +70,33 @@
         }
         if (e.id == "text-pinyin") {
             if (e.checked) {
-                document.querySelector(".pinyin").style.display = "inline";
+                showHide(".pinyin", true);
             } else {
-                document.querySelector(".pinyin").style.display = "none";
+                showHide(".pinyin", false);
             }
         }
 
         if (e.id == "text-zhuyin") {
             if (e.checked) {
-                document.querySelectorAll(".zhuyin")[1].style.display = "inline";
+                showHide(".zhuyin", true);
             } else {
-                document.querySelectorAll(".zhuyin")[1].style.display = "none";
+                showHide(".zhuyin", false);
             }
         }
     }
 
+    function showHide(type, isShow) {
+        if (isShow) {
+            document.querySelectorAll(type).forEach(function (val) {
+                val.style.display = 'inline';
+            });
+        } else {
+            document.querySelectorAll(type).forEach(function (val) {
+                val.style.display = 'none';
+            });
+        }
+    }
+
     function openSidebar(id) {
         var width = id == "sidebar" ? "250px" : "160px";
         document.getElementById(id).style.width = width;
diff --git a/card templates/Card 3/back.html b/card templates/Card 3/back.html
index ed4bfc0..a3ede5b 100644
--- a/card templates/Card 3/back.html	
+++ b/card templates/Card 3/back.html	
@@ -46,10 +46,10 @@
                 document.getElementById(_id).checked = false;
                 document.getElementById(divId).style.display = "none";
                 if (_id == "text-pinyin") {
-                    document.querySelector(".pinyin").style.display = "none";
+                    showHide(".pinyin", false);
                 }
                 if (_id == "text-zhuyin") {
-                    document.querySelectorAll(".zhuyin")[1].style.display = "none";
+                    showHide(".zhuyin", false);
                 }
             } else {
                 document.getElementById(_id).checked = true;
@@ -70,21 +70,33 @@
         }
         if (e.id == "text-pinyin") {
             if (e.checked) {
-                document.querySelector(".pinyin").style.display = "inline";
+                showHide(".pinyin", true);
             } else {
-                document.querySelector(".pinyin").style.display = "none";
+                showHide(".pinyin", false);
             }
         }
 
         if (e.id == "text-zhuyin") {
             if (e.checked) {
-                document.querySelectorAll(".zhuyin")[1].style.display = "inline";
+                showHide(".zhuyin", true);
             } else {
-                document.querySelectorAll(".zhuyin")[1].style.display = "none";
+                showHide(".zhuyin", false);
             }
         }
     }
 
+    function showHide(type, isShow) {
+        if (isShow) {
+            document.querySelectorAll(type).forEach(function (val) {
+                val.style.display = 'inline';
+            });
+        } else {
+            document.querySelectorAll(type).forEach(function (val) {
+                val.style.display = 'none';
+            });
+        }
+    }
+
     function openSidebar(id) {
         var width = id == "sidebar" ? "250px" : "160px";
         document.getElementById(id).style.width = width;
diff --git a/card templates/Card 4/back.html b/card templates/Card 4/back.html
index ed4bfc0..a3ede5b 100644
--- a/card templates/Card 4/back.html	
+++ b/card templates/Card 4/back.html	
@@ -46,10 +46,10 @@
                 document.getElementById(_id).checked = false;
                 document.getElementById(divId).style.display = "none";
                 if (_id == "text-pinyin") {
-                    document.querySelector(".pinyin").style.display = "none";
+                    showHide(".pinyin", false);
                 }
                 if (_id == "text-zhuyin") {
-                    document.querySelectorAll(".zhuyin")[1].style.display = "none";
+                    showHide(".zhuyin", false);
                 }
             } else {
                 document.getElementById(_id).checked = true;
@@ -70,21 +70,33 @@
         }
         if (e.id == "text-pinyin") {
             if (e.checked) {
-                document.querySelector(".pinyin").style.display = "inline";
+                showHide(".pinyin", true);
             } else {
-                document.querySelector(".pinyin").style.display = "none";
+                showHide(".pinyin", false);
             }
         }
 
         if (e.id == "text-zhuyin") {
             if (e.checked) {
-                document.querySelectorAll(".zhuyin")[1].style.display = "inline";
+                showHide(".zhuyin", true);
             } else {
-                document.querySelectorAll(".zhuyin")[1].style.display = "none";
+                showHide(".zhuyin", false);
             }
         }
     }
 
+    function showHide(type, isShow) {
+        if (isShow) {
+            document.querySelectorAll(type).forEach(function (val) {
+                val.style.display = 'inline';
+            });
+        } else {
+            document.querySelectorAll(type).forEach(function (val) {
+                val.style.display = 'none';
+            });
+        }
+    }
+
     function openSidebar(id) {
         var width = id == "sidebar" ? "250px" : "160px";
         document.getElementById(id).style.width = width;
diff --git a/card templates/Card 5/front.html b/card templates/Card 5/front.html
index cb47b0a..9b72ae7 100644
--- a/card templates/Card 5/front.html	
+++ b/card templates/Card 5/front.html	
@@ -250,10 +250,10 @@ <h3>xie hanzi</h3>
                     continue;
                 }
                 if (_id == "text-pinyin") {
-                    document.querySelector(".pinyin").style.display = "none";
+                    showHide(".pinyin", false);
                 }
                 if (_id == "text-zhuyin") {
-                    document.querySelectorAll(".zhuyin")[1].style.display = "none";
+                    showHide(".zhuyin", false);
                 }
                 document.getElementById(divId).style.display = "none";
             } else {
@@ -292,8 +292,21 @@ <h3>xie hanzi</h3>
 
             if (e.checked) {
                 document.getElementById(divId).style.display = "block";
+                if (e.id == "text-pinyin") {
+                    showHide(".pinyin", true);
+                }
+                if (e.id == "text-zhuyin") {
+                    showHide(".zhuyin", true);
+                }
             } else {
                 document.getElementById(divId).style.display = "none";
+
+                if (e.id == "text-pinyin") {
+                    showHide(".pinyin", false);
+                }
+                if (e.id == "text-zhuyin") {
+                    showHide(".zhuyin", false);
+                }
             }
         }
 
@@ -304,6 +317,18 @@ <h3>xie hanzi</h3>
         }
     }
 
+    function showHide(type, isShow) {
+        if (isShow) {
+            document.querySelectorAll(type).forEach(function (val) {
+                val.style.display = 'inline';
+            });
+        } else {
+            document.querySelectorAll(type).forEach(function (val) {
+                val.style.display = 'none';
+            });
+        }
+    }
+
     function openSidebar(id) {
         var width = id == "sidebar" ? "250px" : "160px";
         document.getElementById(id).style.width = width;