From e862cf9d2b6529aafeb042787db9d9d983fdfb36 Mon Sep 17 00:00:00 2001
From: chandu-programmer
 <65494930+Chandra-sekhar-pilla@users.noreply.github.com>
Date: Fri, 29 Oct 2021 20:26:30 +0530
Subject: [PATCH] toggleClass() works even the element has multiple classes

---
 README.md  | 17 +++++++++++------
 Toggler.js | 39 ++++++++++++++++++++++++++-------------
 2 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index e4de8de..8731833 100644
--- a/README.md
+++ b/README.md
@@ -10,10 +10,14 @@ A package (atleast the code) to toggle properties of tags.
 ## through Toggler.js CDN
 
 Official CDN:
+
+For latest version
+
 ```html
 <script src="https://the-atelier.ml/external-scripts/Toggler.js"></script>
 ```
 jsDelivr:
+
 ```html
 <script src="https://cdn.jsdelivr.net/gh/Chandra-sekhar-pilla/Toggler/Toggler.js"></script>
 ```
@@ -52,7 +56,7 @@ for example:
 
 **Toggle Properties:**
 
-- Now toggle properties.
+- Now toggleClass() works for multiple classes.
 
 **Syntax:**
 
@@ -96,19 +100,20 @@ toggler.toggleSlide('testElement2', 'vertical', 60);//toggles the slide vertical
 
 **Note: To avoid problems use `left: 30px` or `top: 30px` instead of `margin-left: 30px` or `margin-top: 30px` because the code calculats the offset values.**
 
+# Improvements done
+
+- Improve toggleProperty() cause only changing when it is clicked second time at the beginning.
+
 # Planned improvements
 
-- Upgrade Toggler so users can use class names too for toggling.
 - Improve toggleSlide() for vertical toggles.
-- Improve toggleProperty() cause only changing when it is clicked second time at the beginning.
 
 **Note: You can request some features by opening a PR or issuing a feature request through issue.**
 
 # Optimizations:
 
-- Now Toggler is a class.
-- Removed `InteractionCount()` which sometimes doesn't work properly.
-- Added vertical slide support.
+- toggleClass() works even the element contains multiple classes.
+- Optimised code.
 
 # How to download
 
diff --git a/Toggler.js b/Toggler.js
index 435618f..518be21 100644
--- a/Toggler.js
+++ b/Toggler.js
@@ -1,21 +1,30 @@
 class Toggler {
+    //toggleClass() will toggle the provided class name and the current class name. Works for multiple classes too
     toggleClass(elementId, preClass, aftClass) {
-        var el = document.getElementById(`${elementId}`)
-        if (el.className == `${preClass}`) {
-            el.className = `${aftClass}`;
+        var el = document.getElementById(elementId)
+        const isCCGO = el.className.split(" ").length > 1 //isCCGO stands for isClassCountGreaterThanOne
+        if (el.className.includes(preClass) && !isCCGO) {
+            el.className = aftClass;
+        }
+        else if (el.className.includes(preClass) && isCCGO) {
+            var replaced = el.className.replace(preClass, '')
+            el.className = replaced + aftClass;
+        } else if (el.className.includes(aftClass) && !isCCGO) {
+            el.className = preClass;
         }
-        else if (el.className == `${aftClass}`) {
-            el.className = `${preClass}`;
+        else if (el.className.includes(aftClass) && isCCGO) {
+            var replaced = el.className.replace(aftClass, '')
+            el.className = replaced + preClass;
         }
     }
+
+    //toggleImage() is the method which will toggle the src image of the image tag
     toggleImage(elementId, fromImg, toImg) {
         var el = document.getElementById(`${elementId}`)
-        if (el.src == `${fromImg}`) {
-            el.src = `${toImg}`
-            console.log(`image source set to ${toImg}`)
-        } else if (el.src == `${toImg}`) {
-            el.src = `${fromImg}`
-            console.log(`image source set to ${fromImg}`)
+        if (el.src.includes(fromImg)) {
+            el.src = toImg
+        } else if (el.src.includes(toImg)) {
+            el.src = fromImg
         }
     }
 
@@ -78,7 +87,11 @@ class Toggler {
     //togglers the Property of the element with reference to the id of the element
     toggleProperty(elementIdOrClass, property, fromValue, toValue) {
         var el = document.getElementById(elementIdOrClass);
-        if (el.style.getPropertyValue(`${property}`) == `${fromValue}`) el.style.setProperty(`${property}`, `${toValue}`)
-        else el.style.setProperty(`${property}`, `${fromValue}`)
+        if (el.style.getPropertyValue(property) == null || el.style.getPropertyValue(property) == '') {
+            el.style.setProperty(property, toValue)
+            return
+        }
+        if (el.style.getPropertyValue(property) == fromValue) el.style.setProperty(property, toValue)
+        else el.style.setProperty(property, fromValue)
     }
 }
\ No newline at end of file