replaced .c_toggled for buttons with two dedicated classes explicitly…

… indicating the status of the button (.c_on, .c_off)
OpenArabicPE · Aug 4, 2017 · 53d195a · 53d195a
1 parent 221f0c2
commit 53d195a
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 19 deletions.
diff --git a/css/teibp_sidebar-buttons.css b/css/teibp_sidebar-buttons.css
@@ -114,26 +114,31 @@ div.c_button-sidebar:focus > *.c_label {
     top:240px;
 }
 /* the first button toggling display features should have a leading gap*/
-#toggleLb {
+/*#toggleLb {
     bottom:0px;
-}
+}*/
 /* change toggled buttons*/
-#toggleLb.c_toggled{
+#toggleLb.c_toggled,
+#toggleLb.c_on{
     /*color: white;
     background-color: black;*/
     border: 1px solid rgba(0, 0, 0, 0.4);
     box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6);
 }
-.c_button-toggle >.c_on {
+.c_button-toggle >.c_on,
+.c_button-toggle.c_off >.c_on {
     display: block;
 }
-.c_button-toggle >.c_off {
+.c_button-toggle >.c_off,
+.c_button-toggle.c_off > .c_off {
     display: none;
 }
-.c_button-toggle.c_toggled >.c_on {
+.c_button-toggle.c_toggled >.c_on,
+.c_button-toggle.c_on >.c_on {
     display: none;
 }
-.c_button-toggle.c_toggled >.c_off {
+.c_button-toggle.c_toggled >.c_off,
+.c_button-toggle.c_on > .c_off {
     display: block;
 }
 /* content of buttons */

diff --git a/js/script.js b/js/script.js
@@ -1,7 +1,7 @@
 // jQuery
 $("document").ready(function() {
     // set variables for all functions
-    var $buttonToggleLb = $("#toggleLb"),
+    var $buttonToggleLb = $(".c_toggle-lb"),
     $buttonToggleNav = $("#toggleNav"),
     $buttonToggleSettings = $("#toggleSettings"),
     $body = $("#body"),
@@ -12,7 +12,14 @@ $("document").ready(function() {
 // toggle the display of line beginnings (<lb/>) by toggling a class
 $buttonToggleLb.on("click", function() {
     // toogle class of button
-    $buttonToggleLb.toggleClass("c_toggled");
+    // $buttonToggleLb.toggleClass("c_toggled");
+    if ($buttonToggleLb.hasClass("c_on")) {
+        $buttonToggleLb.removeClass("c_on");
+        $buttonToggleLb.addClass("c_off");
+    } else {
+        $buttonToggleLb.removeClass("c_off");
+        $buttonToggleLb.addClass("c_on");
+    };
     // change the class of all line breaks to "c_toggled". The display is then set to "display:block" in CSS
     $("lb").toggleClass("c_toggled");
     // or change <lb> to <br>, but <br> has currently no styles associated in CSS
@@ -22,13 +29,20 @@ $buttonToggleLb.on("click", function() {
 // toggle the display of the navigation panel by toggling a class
 $buttonToggleNav.on("click", function() {
     // toggle class of button
-    $buttonToggleNav.toggleClass("c_toggled");
+    // $buttonToggleNav.toggleClass("c_toggled");
+     if ($buttonToggleNav.hasClass("c_on")) {
+        $buttonToggleNav.removeClass("c_on");
+        $buttonToggleNav.addClass("c_off");
+    } else {
+        $buttonToggleNav.removeClass("c_off");
+        $buttonToggleNav.addClass("c_on");
+    };
     // three elements must be moved: $body, $sidebar, the sidebar
     // check the current state of these elements
     if ($body.hasClass("c_sidebar-visible")) {
         // a side panel is already visible
         if ($navigation.hasClass("c_sidebar-visible")) {
-            // if the settings panel is visible, everything should be closed
+            // if the navigation panel is visible, everything should be closed
             $body.removeClass("c_sidebar-visible");
             $sidebar.removeClass("c_sidebar-visible");
             $navigation.removeClass("c_sidebar-visible");
@@ -37,8 +51,9 @@ $buttonToggleNav.on("click", function() {
             // the navigation panel
             $settings.removeClass("c_sidebar-visible");
             $navigation.addClass("c_sidebar-visible");
-            // the button to close the navigation panel should be untoggled
-            $buttonToggleSettings.removeClass("c_toggled");
+            // the button to close the settings panel should be untoggled
+            $buttonToggleSettings.removeClass("c_on");
+            $buttonToggleSettings.addClass("c_off");
         };
     } else {
         // no side panel is visible
@@ -50,7 +65,14 @@ $buttonToggleNav.on("click", function() {
 // toggle the display of the navigation panel by toggling a class
 $buttonToggleSettings.on("click", function() {
     // toggle class of button
-    $buttonToggleSettings.toggleClass("c_toggled");
+    // $buttonToggleSettings.toggleClass("c_toggled");
+     if ($buttonToggleSettings.hasClass("c_on")) {
+        $buttonToggleSettings.removeClass("c_on");
+        $buttonToggleSettings.addClass("c_off");
+    } else {
+        $buttonToggleSettings.removeClass("c_off");
+        $buttonToggleSettings.addClass("c_on");
+    };
     // three elements must be moved: $body, $sidebar, the sidebar
     // check the current state of these elements
     if ($body.hasClass("c_sidebar-visible")) {
@@ -66,7 +88,9 @@ $buttonToggleSettings.on("click", function() {
             $navigation.removeClass("c_sidebar-visible");
             $settings.addClass("c_sidebar-visible");
             // the button to close the navigation panel should be untoggled
-            $buttonToggleNav.removeClass("c_toggled");
+            // $buttonToggleNav.removeClass("c_toggled");
+            $buttonToggleNav.removeClass("c_on");
+            $buttonToggleNav.addClass("c_off");
         };
     } else {
         // no side panel is visible

diff --git a/xslt-boilerplate/teibp_main.xsl b/xslt-boilerplate/teibp_main.xsl
@@ -889,10 +889,6 @@
                 </span>
                 <a href="#footer" class="c_label" lang="en">Bottom of the page</a>
             </div>
-            <div id="toggleLb" class="c_button c_button-sidebar c_button-toggle c_off c_toggle-lb">
-                <span class="c_icon" lang="en">lb</span>
-                <span class="c_label" lang="en">Toggle line breaks</span>
-            </div>
         </div>
     </xsl:variable>