Improve toggle usability

gulpfile.js

@@ -23,6 +23,9 @@ var unusedRules = [
 
     //we dont need all buttons
     ".btn-",
+    "!.btn-group",
+    "!.btn-default",
+    "!.btn-sm",
     "!.btn-primary",
     "!.btn-secondary",
     "!.btn-hero",

templates/content.php

@@ -2,31 +2,17 @@
 <article>
     <?php if ($params['html']['date_modified']) { ?>
         <div class="page-header sub-header clearfix">
-            <h1><?php
-                if ($page['breadcrumbs']) {
-                    echo $this->get_breadcrumb_title($page, $base_page);
-                } else {
-                    echo $page['title'];
-                }
-                ?>
-            </h1>
-                    <span style="float: left; font-size: 10px; color: gray;">
-                        <?= date("l, F j, Y", $page['modified_time']); ?>
-                    </span>
-                    <span style="float: right; font-size: 10px; color: gray;">
-                        <?= date("g:i A", $page['modified_time']); ?>
-                    </span>
+            <h1><?= $page['breadcrumbs']? $this->get_breadcrumb_title($page, $base_page) : $page['title'] ?></h1>
+            <span style="float: left; font-size: 10px; color: gray;">
+                <?= date("l, F j, Y", $page['modified_time']); ?>
+            </span>
+            <span style="float: right; font-size: 10px; color: gray;">
+                <?= date("g:i A", $page['modified_time']); ?>
+            </span>
         </div>
     <?php } else { ?>
         <div class="page-header">
-            <h1><?php
-                if ($page['breadcrumbs']) {
-                    echo $this->get_breadcrumb_title($page, $base_page);
-                } else {
-                    echo $page['title'];
-                }
-                ?>
-            </h1>
+            <h1><?= $page['breadcrumbs']? $this->get_breadcrumb_title($page, $base_page) : $page['title'] ?></h1>
         </div>
     <?php } ?>
 

templates/layout/00_layout.php

@@ -25,7 +25,7 @@
 
     <?php if ($params['html']['search']) { ?>
         <!-- Tipue Search -->
-        <link href="<?php echo $base_url; ?>tipuesearch/tipuesearch.css" rel="stylesheet">
+        <link href="<?= $base_url; ?>tipuesearch/tipuesearch.css" rel="stylesheet">
     <?php } ?>
 
     <!--[if lt IE 9]>
@@ -44,9 +44,8 @@
     }
     ?>
 
-
     <!-- jQuery -->
-    <?= '<script src="' . $base_url . 'themes/daux/js/jquery-1.11.3.min.js' . '"></script>' ?>
+    <script src="<?= $base_url; ?>themes/daux/js/jquery-1.11.3.min.js"></script>
 
     <!-- hightlight.js -->
     <script src="<?= $base_url; ?>themes/daux/js/highlight.pack.js"></script>

templates/layout/05_page.php

@@ -37,11 +37,21 @@
                         <?php
                         foreach ($params['html']['links'] as $name => $url) {
                             echo '<a href="' . $url . '" target="_blank">' . $name . '</a><br>';
-                        }
-                        if ($params['html']['toggle_code']) {
-                            echo '<a href="#" id="toggleCodeBlockBtn" onclick="toggleCodeBlocks();">Show Code Blocks Inline</a><br>';
-                        }
-                        ?>
+                        } ?>
+
+                        <div id="toggleCodeBlock">
+                        <?php if ($params['html']['toggle_code'] && $params['html']['float']) { ?>
+                            <br />
+                            <span class="code-buttons-text">Code blocks</span>
+                            <div class="btn-group" role="group">
+                              <button id="code-hide" class="btn btn-sm btn-default">No</button>
+                              <button id="code-below" class="btn btn-sm btn-default">Below</button>
+                              <button id="code-float" class="btn btn-sm btn-default">Inline</button>
+                            </div>
+                        <?php } else if ($params['html']['toggle_code']) { ?>
+                            <a id="toggleCodeBlockBtn" href="#" onclick="toggleCodeBlocks();">Show Code Blocks Inline</a><br>
+                        <?php } ?>
+                        </div>
 
                         <!-- Twitter -->
                         <?php foreach ($params['html']['twitter'] as $handle) { ?>
@@ -64,7 +74,7 @@
                     <div id="tipue_search_content" style="display:none"></div>
                 <?php } ?>
 
-                <div class="doc_content"">
+                <div class="doc_content">
                     <?= $this->section('content'); ?>
                 </div>
             </div>

themes/daux/js/daux.js

@@ -37,16 +37,15 @@ _.debounce = function(func, wait, immediate) {
     };
 };
 
-var codeBlocks, codeBlockView, toggleCodeBlockBtn, codeBlockState;
+var codeBlocks, codeBlockView, toggleCodeBlockBtn, toggleCodeSection, codeBlockState;
 function toggleCodeBlocks() {
-    var hasFloat = $(document.body).hasClass("with-float")? 3 : 2;
-    codeBlockState = (codeBlockState + 1) % hasFloat;
-    localStorage.setItem("codeBlockState", codeBlockState);
-    setCodeBlockStyle(codeBlockState);
+    setCodeBlockStyle(codeBlocks.hasClass('hidden') ? 1 : 0);
 }
 
-function setCodeBlockStyle(x) {
-    switch (x) {
+function setCodeBlockStyle(codeBlockState) {
+    localStorage.setItem("codeBlockState", codeBlockState);
+
+    switch (codeBlockState) {
         default:
         case 0:
             toggleCodeBlockBtn.html("Show Code Blocks");
@@ -69,21 +68,25 @@ function setCodeBlockStyle(x) {
 //Initialize CodeBlock Visibility Settings
 $(function () {
     codeBlocks = $('.content-page article > pre');
+    toggleCodeSection = $('#toggleCodeBlock');
     toggleCodeBlockBtn = $('#toggleCodeBlockBtn');
 
     // If there is no code block we hide the link
     if (!codeBlocks.size()) {
-        toggleCodeBlockBtn.addClass('hidden');
+        toggleCodeSection.addClass('hidden');
         return;
     }
 
+    $('#code-hide').click(function() { setCodeBlockStyle(0); });
+    $('#code-below').click(function() { setCodeBlockStyle(1); });
+    $('#code-float').click(function() { setCodeBlockStyle(2); });
+
     codeBlockView = $('.right-column');
     if (!codeBlockView.size()) return;
 
     codeBlockState = localStorage.getItem("codeBlockState");
     if (!codeBlockState) {
         codeBlockState = 2;
-        localStorage.setItem("codeBlockState", codeBlockState);
     } else codeBlockState = parseInt(codeBlockState);
 
     setCodeBlockStyle(codeBlockState);
@@ -99,7 +102,7 @@ $(function () {
     });
 
     // New Tree navigation
-    $("ul.nav.nav-list > li.has-children > a > .arrow").click(function() {
+    $('ul.nav.nav-list > li.has-children > a > .arrow').click(function() {
         $(this).parent().parent().toggleClass('open');
         return false;
     });

themes/daux/less/bootstrap/bootstrap.less

@@ -25,7 +25,7 @@
 // Components
 //@import "component-animations.less";
 //@import "dropdowns.less";
-//@import "button-groups.less";
+@import "button-groups.less";
 //@import "input-groups.less";
 @import "navs.less";
 @import "navbar.less";

themes/daux/less/components.less

@@ -68,6 +68,14 @@ code {
     }
 }
 
+.code-buttons-text {
+    font-size: 12px;
+    line-height: 1.5;
+    padding: 6px 10px 6px 0;
+    display: inline-block;
+    vertical-align: middle;
+}
+
 //Sidebar Nav List
 .nav.nav-list {
     padding-left: 0;