Remove ability to have code floating on the side

docs/05_Configuration/Html_export.md

@@ -60,16 +60,6 @@ You can *optionally* specify the separator used for breadcrumbs.
 }
 ```
 
-## Code Floating
-By default your code blocks will be floated to a column on the right side of your content. 
-To disable this feature, set the `float` property to `false`.
-
-```json
-{
-  "html": { "float": false }
-}
-```
-
 ## Date Modified
 By default, daux.io will display the last modified time as reported by the system underneath the title for each document. 
 To disable this, change the option in your config.json to `false`.

docs/config.json

@@ -16,7 +16,6 @@
         "breadcrumb_separator": "Chevrons",
         "toggle_code": true,
         "date_modified": true,
-        "float": true,
         "inherit_index": true,
 
         "repo": "dauxio/daux.io",

global.json

@@ -119,7 +119,6 @@
 		"breadcrumb_separator": "Chevrons",
         "toggle_code": true,
         "date_modified": false,
-        "float": false,
         "auto_landing": true,
         "search": true,
         "auto_toc": false,

src/css/theme_daux/_components.scss

@@ -62,53 +62,6 @@ Components
     }
 }
 
-.ButtonGroup {
-    position: relative;
-    display: inline-block;
-    vertical-align: middle; // match .Button alignment given font-size hack above
-
-    .Button + .Button {
-        margin-left: -1px;
-    }
-
-    > .Button {
-        position: relative;
-        float: left;
-
-        // Bring the "active" button to the front
-        &:hover,
-        &:focus {
-            z-index: 2;
-        }
-
-        &:active,
-        &.Button--active {
-            z-index: 3;
-        }
-
-        &:not(:first-child):not(:last-child) {
-            border-radius: 0;
-        }
-
-        // Set corners individually because sometimes
-        // a single button can be in a .ButtonGroup
-        // and we need :first-child and :last-child to both match
-        &:first-child {
-            margin-left: 0;
-        }
-
-        &:first-child:not(:last-child) {
-            border-bottom-right-radius: 0;
-            border-top-right-radius: 0;
-        }
-
-        &:last-child:not(:first-child) {
-            border-bottom-left-radius: 0;
-            border-top-left-radius: 0;
-        }
-    }
-}
-
 .Brand {
     display: block;
     background-color: var(--brand-background);
@@ -338,6 +291,11 @@ Components
 }
 
 .TableOfContentsContainer {
+    float: right;
+    min-width: 300px;
+    max-width: 25%;
+    padding-left: 1em;
+
     &__title {
         border-bottom: 4px solid #efefef;
         margin-bottom: 0 !important;
@@ -345,6 +303,7 @@ Components
 
     &__content > .TableOfContents {
         margin-top: 0;
+        border-right: 2px solid #efefef;
     }
 }
 
@@ -360,34 +319,17 @@ ul.TableOfContents {
 
     a {
         text-decoration: none;
+        display: block;
+        border-bottom: 1px solid #ddd;
+        padding: 0.2em 0;
     }
 
     .TableOfContents {
         border-left-width: 0;
-    }
-}
-
-.Columns__right--full .TableOfContentsContainer {
-    float: right;
-    min-width: 300px;
-    max-width: 25%;
-    padding-left: 1em;
-
-    .TableOfContentsContainer__content > .TableOfContents {
-        border-right: 2px solid #efefef;
-    }
-
-    .TableOfContents {
         list-style-type: none;
         padding-left: 0;
     }
 
-    a {
-        display: block;
-        border-bottom: 1px solid #ddd;
-        padding: 0.2em 0;
-    }
-
     li a {
         padding-left: 0.75em;
     }

src/css/theme_daux/_typography.scss

@@ -252,132 +252,3 @@ h6 {
         color: inherit;
     }
 }
-
-//Content pages float view
-@media (min-width: 1150px) {
-    .Columns__right--float .Columns__right__content {
-        height: 100%;
-        overflow: auto;
-        padding: 0 !important;
-        background-color: transparent !important;
-        position: relative;
-
-        article {
-            width: 100%;
-            min-height: 100%;
-            overflow: auto;
-            position: relative;
-            z-index: 1;
-        }
-
-        article:before {
-            content: "";
-            width: 50%;
-            min-height: 100%;
-            overflow: auto;
-            background-color: white;
-            display: block;
-            margin: 0;
-            position: absolute;
-            z-index: -1;
-        }
-    }
-
-    .Columns__right--float {
-        .Pager,
-        .Page__header,
-        .s-content blockquote,
-        .s-content p,
-        .s-content ul,
-        .s-content ol,
-        .s-content dl,
-        .s-content h2,
-        .s-content h3,
-        .s-content h4,
-        .s-content h5,
-        .s-content h6,
-        .s-content hr,
-        .s-content table {
-            float: left;
-            clear: left;
-            width: 47%;
-            margin-left: 1.5%;
-            margin-right: 1.5%;
-        }
-    }
-
-    .Columns__right--float .s-content {
-        table {
-            background-color: white;
-            white-space: normal;
-
-            pre,
-            code {
-                white-space: normal;
-            }
-        }
-
-        blockquote,
-        p,
-        ul,
-        ol,
-        dl,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6,
-        hr {
-            &:before {
-                width: 100%;
-                height: 10px;
-                display: block;
-                clear: both;
-            }
-
-            p,
-            ul,
-            ol,
-            dl,
-            h2,
-            h3,
-            h4,
-            h5,
-            h6,
-            pre,
-            hr {
-                width: auto;
-                float: none;
-                display: block;
-            }
-        }
-
-        hr {
-            border-color: #ddd;
-        }
-
-        // Paragraphs and code inside lists and
-        // blockquotes should have 100% width
-        li,
-        blockquote {
-            p,
-            pre {
-                width: 100%;
-            }
-        }
-
-        pre {
-            float: left;
-            clear: right;
-            width: 50%;
-            border: none;
-            border-left: 10px solid white;
-            margin: 0 0 10px;
-            padding: 0;
-
-            code {
-                padding: 0 0.5em;
-            }
-        }
-    }
-}

src/js/theme_daux/code_toggle.js

@@ -1,147 +1,49 @@
 const codeBlocks = document.querySelectorAll(".s-content pre");
 const toggleCodeSection = document.querySelector(".CodeToggler");
 
-function setCodeBlockStyle(
+const LOCAL_STORAGE_KEY = "daux_code_blocks_hidden";
-    codeBlockState,
+
-    toggleCodeBlockBtnList,
+function setCodeBlockStyle(hidden) {
-    toggleCodeBlockBtnFloat,
-    toggleCodeBlockBtnBelow,
-    toggleCodeBlockBtnHide,
-    codeBlockView
-) {
-    for (let a = 0; a < toggleCodeBlockBtnList.length; a++) {
-        toggleCodeBlockBtnList[a].classList.remove("Button--active");
-    }
-    let hidden;
-    switch (codeBlockState) {
-        case true: // Show code blocks below (flowed); checkbox
-            hidden = false;
-            break;
-        case false: // Hidden code blocks; checkbox
-            hidden = true;
-            break;
-        case 2: // Show code blocks inline (floated)
-            toggleCodeBlockBtnFloat.classList.add("Button--active");
-            codeBlockView.classList.add("Columns__right--float");
-            codeBlockView.classList.remove("Columns__right--full");
-            hidden = false;
-            break;
-        case 1: // Show code blocks below (flowed)
-        case "checked":
-            toggleCodeBlockBtnBelow.classList.add("Button--active");
-            codeBlockView.classList.remove("Columns__right--float");
-            codeBlockView.classList.add("Columns__right--full");
-            hidden = false;
-            break;
-        case 0: // Hidden code blocks
-        default:
-            toggleCodeBlockBtnHide.classList.add("Button--active");
-            codeBlockView.classList.remove("Columns__right--float");
-            codeBlockView.classList.add("Columns__right--full");
-            hidden = true;
-            break;
-    }
     for (let a = 0; a < codeBlocks.length; a++) {
-        if (hidden) {
+        codeBlocks[a].classList.toggle("Hidden", hidden);
-            codeBlocks[a].classList.add("Hidden");
-        } else {
-            codeBlocks[a].classList.remove("Hidden");
-        }
     }
     try {
-        localStorage.setItem("codeBlockState", +codeBlockState);
+        localStorage.setItem(LOCAL_STORAGE_KEY, hidden);
     } catch (e) {
         // local storage operations can fail with the file:// protocol
     }
 }
 
 function enableToggler() {
-    const toggleCodeBlockBtnList = toggleCodeSection.querySelectorAll(
-        ".CodeToggler__button"
-    );
     const toggleCodeBlockBtnSet = toggleCodeSection.querySelector(
         ".CodeToggler__button--main"
     ); // available when floating is disabled
-    const toggleCodeBlockBtnHide = toggleCodeSection.querySelector(
-        ".CodeToggler__button--hide"
-    );
-    const toggleCodeBlockBtnBelow = toggleCodeSection.querySelector(
-        ".CodeToggler__button--below"
-    );
-    const toggleCodeBlockBtnFloat = toggleCodeSection.querySelector(
-        ".CodeToggler__button--float"
-    );
-    const codeBlockView = document.querySelector(".Columns__right");
-    const floating = document.body.classList.contains("with-float");
 
-    const setStyle = style => {
+    toggleCodeBlockBtnSet.addEventListener(
-        setCodeBlockStyle(
+        "change",
-            style,
+        ev => {
-            toggleCodeBlockBtnList,
+            setCodeBlockStyle(!ev.target.checked);
-            toggleCodeBlockBtnFloat,
+        },
-            toggleCodeBlockBtnBelow,
+        false
-            toggleCodeBlockBtnHide,
+    );
-            codeBlockView
-        );
-    };
 
-    if (floating) {
+    let hidden = false;
-        toggleCodeBlockBtnHide.addEventListener(
-            "click",
-            () => {
-                setStyle(0);
-            },
-            false
-        );
-        toggleCodeBlockBtnBelow.addEventListener(
-            "click",
-            () => {
-                setStyle(1);
-            },
-            false
-        );
-        toggleCodeBlockBtnFloat.addEventListener(
-            "click",
-            () => {
-                setStyle(2);
-            },
-            false
-        );
-    } else {
-        toggleCodeBlockBtnSet.addEventListener(
-            "change",
-            ev => {
-                setStyle(ev.target.checked);
-            },
-            false
-        );
-    }
-
-    let codeBlockState = null;
     try {
-        codeBlockState = localStorage.getItem("codeBlockState");
+        hidden = localStorage.getItem(LOCAL_STORAGE_KEY);
+
+        if (hidden === "false") {
+            hidden = false;
+        } else if (hidden === "true") {
+            hidden = true;
+        }
+
+        if (hidden) {
+            setCodeBlockStyle(!!hidden);
+            toggleCodeBlockBtnSet.checked = !hidden;
+        }
     } catch (e) {
         // local storage operations can fail with the file:// protocol
     }
-
-    if (codeBlockState) {
-        codeBlockState = parseInt(codeBlockState, 10);
-    } else {
-        codeBlockState = floating ? 2 : 1;
-    }
-
-    if (!floating) {
-        codeBlockState = !!codeBlockState;
-    }
-
-    setCodeBlockStyle(
-        codeBlockState,
-        toggleCodeBlockBtnList,
-        toggleCodeBlockBtnFloat,
-        toggleCodeBlockBtnBelow,
-        toggleCodeBlockBtnHide,
-        codeBlockView
-    );
 }
 
 if (toggleCodeSection) {

templates/layout/00_layout.php

@@ -47,7 +47,7 @@
         <link href="<?= $base_url; ?>_libraries/search.css" rel="stylesheet">
     <?php } ?>
 </head>
-<body class="<?= $params['html']['float'] ? 'with-float' : ''; ?> <?= $this->section('classes'); ?>">
+<body class="<?= $this->section('classes'); ?>">
     <?= $this->section('content'); ?>
 
     <?php

templates/layout/05_page.php

@@ -35,23 +35,14 @@
             </div>
 
             <?php if ($params['html']['toggle_code']) { ?>
-                    <div class="CodeToggler">
+                <div class="CodeToggler">
-                        <hr/>
+                    <hr/>
-                        <?php if ($params['html']['float']) { ?>
+                    <label class="Checkbox"><?=$this->translate("CodeBlocks_show") ?>
-                            <span class="CodeToggler__text"><?=$this->translate("CodeBlocks_title") ?></span>
+                        <input type="checkbox" class="CodeToggler__button--main" checked="checked"/>
-                            <div class="ButtonGroup" role="group">
+                        <div class="Checkbox__indicator"></div>
-                                <button class="Button Button--default Button--small CodeToggler__button CodeToggler__button--hide"><?=$this->translate("CodeBlocks_hide") ?></button>
+                    </label>
-                                <button class="Button Button--default Button--small CodeToggler__button CodeToggler__button--below"><?=$this->translate("CodeBlocks_below") ?></button>
+                </div>
-                                <button class="Button Button--default Button--small CodeToggler__button CodeToggler__button--float"><?=$this->translate("CodeBlocks_inline") ?></button>
+            <?php } ?>
-                            </div>
-                        <?php } else { ?>
-                            <label class="Checkbox"><?=$this->translate("CodeBlocks_show") ?>
-                                <input type="checkbox" class="CodeToggler__button--main" checked="checked"/>
-                                <div class="Checkbox__indicator"></div>
-                            </label>
-                        <?php } ?>
-                    </div>
-                <?php } ?>
 
                 <?php if (!empty($params['html']['twitter'])) { ?>
                     <div class="Twitter">
@@ -72,7 +63,7 @@
                 <?php } ?>
         </div>
     </aside>
-    <div class="Columns__right <?= $params['html']['float'] ? 'Columns__right--float' : 'Columns__right--full'; ?>">
+    <div class="Columns__right">
         <div class="Columns__right__content">
             <div class="doc_content">
                 <?= $this->section('content'); ?>

tests/Format/Template/TranslateTest.php

@@ -72,7 +72,6 @@ class TranslateTest extends TestCase
 
         $config['html'] = [
             'search'           => '',
-            'float'            => false,
             'toggle_code'      => false,
             'piwik_analytics'  => '',
             'google_analytics' => '',

themes/daux/js/daux.min.js

@@ -1,2 +1,2 @@
-var e=document.querySelectorAll(".s-content pre"),t=document.querySelector(".CodeToggler");function a(t,a,o,l,n,s){for(var c=0;c<a.length;c++)a[c].classList.remove("Button--active");var i;switch(t){case!0:i=!1;break;case!1:i=!0;break;case 2:o.classList.add("Button--active"),s.classList.add("Columns__right--float"),s.classList.remove("Columns__right--full"),i=!1;break;case 1:case"checked":l.classList.add("Button--active"),s.classList.remove("Columns__right--float"),s.classList.add("Columns__right--full"),i=!1;break;case 0:default:n.classList.add("Button--active"),s.classList.remove("Columns__right--float"),s.classList.add("Columns__right--full"),i=!0}for(var r=0;r<e.length;r++)i?e[r].classList.add("Hidden"):e[r].classList.remove("Hidden");try{localStorage.setItem("codeBlockState",+t)}catch(e){}}t&&(e.length?function(){var e=t.querySelectorAll(".CodeToggler__button"),o=t.querySelector(".CodeToggler__button--main"),l=t.querySelector(".CodeToggler__button--hide"),n=t.querySelector(".CodeToggler__button--below"),s=t.querySelector(".CodeToggler__button--float"),c=document.querySelector(".Columns__right"),i=document.body.classList.contains("with-float"),r=function(t){a(t,e,s,n,l,c)};i?(l.addEventListener("click",(function(){r(0)}),!1),n.addEventListener("click",(function(){r(1)}),!1),s.addEventListener("click",(function(){r(2)}),!1)):o.addEventListener("change",(function(e){r(e.target.checked)}),!1);var d=null;try{d=localStorage.getItem("codeBlockState")}catch(e){}d=d?parseInt(d,10):i?2:1,i||(d=!!d),a(d,e,s,n,l,c)}():t.classList.add("Hidden"));var o=document.querySelector(".Collapsible__trigger");if(o){var l=document.querySelector(".Collapsible__content");o.addEventListener("click",(function(e){l.classList.contains("Collapsible__content--open")?(l.style.height=0,l.classList.remove("Collapsible__content--open")):(l.style.transitionDuration="".concat(Math.max(l.scrollHeight,150),"ms"),l.style.height="".concat(l.scrollHeight,"px"),l.classList.add("Collapsible__content--open"))}))}var n=document.querySelectorAll("pre > code:not(.hljs)");if(n.length){var s=document.getElementsByTagName("head")[0],c=document.createElement("script");c.type="text/javascript",c.async=!0,c.src="".concat(window.base_url,"_libraries/highlight.pack.js"),c.onload=function(e){[].forEach.call(n,window.hljs.highlightBlock)},s.appendChild(c)}function i(e){"0px"!==e.target.style.height&&(e.target.style.height="auto"),e.target.removeEventListener("transitionend",i)}function r(e){void 0!==e.preventDefault&&e.preventDefault();var t=e.target.parentNode.parentNode,a=t.querySelector("ul.Nav");void 0!==e.preventDefault&&t.classList.contains("Nav__item--open")?(a.style.height="".concat(a.scrollHeight,"px"),a.style.transitionDuration="".concat(Math.max(a.scrollHeight,150),"ms"),a.style.height="0px",t.classList.remove("Nav__item--open")):void 0===e.preventDefault?a.style.height="auto":(a.style.transitionDuration="".concat(Math.max(a.scrollHeight,150),"ms"),a.addEventListener("transitionend",i),a.style.height="".concat(a.scrollHeight,"px"),t.classList.add("Nav__item--open"))}for(var d,u=document.querySelectorAll(".Nav__item.has-children i.Nav__arrow"),h=u.length-1;h>=0;h--)(d=u[h]).addEventListener("click",r),d.parentNode.parentNode.classList.contains("Nav__item--open")&&r({target:d});
+var e=document.querySelectorAll(".s-content pre"),t=document.querySelector(".CodeToggler"),a="daux_code_blocks_hidden";function n(t){for(var n=0;n<e.length;n++)e[n].classList.toggle("Hidden",t);try{localStorage.setItem(a,t)}catch(e){}}t&&(e.length?function(){var e=t.querySelector(".CodeToggler__button--main");e.addEventListener("change",(function(e){n(!e.target.checked)}),!1);var o=!1;try{"false"===(o=localStorage.getItem(a))?o=!1:"true"===o&&(o=!0),o&&(n(!!o),e.checked=!o)}catch(e){}}():t.classList.add("Hidden"));var o=document.querySelector(".Collapsible__trigger");if(o){var l=document.querySelector(".Collapsible__content");o.addEventListener("click",(function(e){l.classList.contains("Collapsible__content--open")?(l.style.height=0,l.classList.remove("Collapsible__content--open")):(l.style.transitionDuration="".concat(Math.max(l.scrollHeight,150),"ms"),l.style.height="".concat(l.scrollHeight,"px"),l.classList.add("Collapsible__content--open"))}))}var c=document.querySelectorAll("pre > code:not(.hljs)");if(c.length){var i=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="".concat(window.base_url,"_libraries/highlight.pack.js"),r.onload=function(e){[].forEach.call(c,window.hljs.highlightBlock)},i.appendChild(r)}function s(e){"0px"!==e.target.style.height&&(e.target.style.height="auto"),e.target.removeEventListener("transitionend",s)}function d(e){void 0!==e.preventDefault&&e.preventDefault();var t=e.target.parentNode.parentNode,a=t.querySelector("ul.Nav");void 0!==e.preventDefault&&t.classList.contains("Nav__item--open")?(a.style.height="".concat(a.scrollHeight,"px"),a.style.transitionDuration="".concat(Math.max(a.scrollHeight,150),"ms"),a.style.height="0px",t.classList.remove("Nav__item--open")):void 0===e.preventDefault?a.style.height="auto":(a.style.transitionDuration="".concat(Math.max(a.scrollHeight,150),"ms"),a.addEventListener("transitionend",s),a.style.height="".concat(a.scrollHeight,"px"),t.classList.add("Nav__item--open"))}for(var h,g=document.querySelectorAll(".Nav__item.has-children i.Nav__arrow"),u=g.length-1;u>=0;u--)(h=g[u]).addEventListener("click",d),h.parentNode.parentNode.classList.contains("Nav__item--open")&&d({target:h});
 //# sourceMappingURL=daux.min.js.map