Merge pull request #117 from Gautham/Dev

Add Support for Hiding or inlining Code Blocks at UI level.

README.md

@@ -133,13 +133,21 @@ To create a custom color scheme, set the `theme` property to `custom` and then d
 ```
 
 ###Code Floating:
-By deafult 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`.
+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
 {
 	"float": false
 }
 ```
+###Toggling Code Blocks
+Some users might wish to hide the code blocks & view just the documentation. By setting the `toggle_code` property to `true`, you can offer a toggle button on the page.
+
+```json
+{
+	"toggle_code": true
+}
+```
 
 
 ###GitHub Repo:

css/daux-blue.css

@@ -816,6 +816,7 @@ code {
 }
 pre {
   display: block;
+  overflow: hidden;
   padding: 9.5px;
   margin: 0 0 10px;
   font-size: 13px;
@@ -6476,6 +6477,7 @@ body {
 .columns .left-column {
   background-color: #f7f7f7;
   border-right: 1px solid #e7e7e9;
+  overflow-x: hidden;
 }
 .columns .right-column.span9 {
   width: 76.4866339334%;
@@ -6808,6 +6810,9 @@ pre code {
     position: absolute;
     z-index: -1;
   }
+  .hideCode:before {
+      width: 100% !important;
+  }
   .float-view .content-page table {
     float: left;
     clear: left;
@@ -6841,6 +6846,10 @@ pre code {
     margin-right: 1.5%;
     background-color: white;
   }
+  .hideCode2 {
+    width: 900px !important;
+    width: calc(100% - 130px) !important;
+  }
   .float-view .content-page .page-header:before,
   .float-view .content-page p:before,
   .float-view .content-page ul:before,
@@ -6973,6 +6982,9 @@ pre code {
     margin: 0px 0px 10px 0px;
     padding: 0px 0px 0px 10px;
   }
+  .hideCode3 {
+    display: none;
+  }
 }
 table {
   width: 100%;

css/daux-green.css

@@ -6476,6 +6476,7 @@ body {
 .columns .left-column {
   background-color: #f5f5f6;
   border-right: 1px solid #e7e7e9;
+  overflow-x: hidden;
 }
 .columns .right-column.span9 {
   width: 76.4866339334%;
@@ -6808,6 +6809,9 @@ pre code {
     position: absolute;
     z-index: -1;
   }
+  .hideCode:before {
+    width:100% !important;
+  }
   .float-view .content-page table {
     float: left;
     clear: left;
@@ -6841,6 +6845,10 @@ pre code {
     margin-right: 1.5%;
     background-color: white;
   }
+  .hideCode2 {
+    width: 900px !important;
+    width: calc(100% - 130px) !important;
+  }
   .float-view .content-page .page-header:before,
   .float-view .content-page p:before,
   .float-view .content-page ul:before,
@@ -6973,6 +6981,9 @@ pre code {
     margin: 0px 0px 10px 0px;
     padding: 0px 0px 0px 10px;
   }
+  .hideCode3 {
+    display: none;
+  }
 }
 table {
   width: 100%;

css/daux-navy.css

@@ -6476,6 +6476,7 @@ body {
 .columns .left-column {
   background-color: #f5f5f6;
   border-right: 1px solid #e7e7e9;
+  overflow-x: hidden;
 }
 .columns .right-column.span9 {
   width: 76.4866339334%;
@@ -6808,6 +6809,9 @@ pre code {
     position: absolute;
     z-index: -1;
   }
+  .hideCode:before {
+    width:100% !important;
+  }
   .float-view .content-page table {
     float: left;
     clear: left;
@@ -6841,6 +6845,10 @@ pre code {
     margin-right: 1.5%;
     background-color: white;
   }
+  .hideCode2 {
+    width: 900px !important;
+    width: calc(100% - 130px) !important;
+  }
   .float-view .content-page .page-header:before,
   .float-view .content-page p:before,
   .float-view .content-page ul:before,
@@ -6973,6 +6981,9 @@ pre code {
     margin: 0px 0px 10px 0px;
     padding: 0px 0px 0px 10px;
   }
+  .hideCode3 {
+    display: none;
+  }
 }
 table {
   width: 100%;

css/daux-red.css

@@ -6476,6 +6476,7 @@ body {
 .columns .left-column {
   background-color: #f7f7f7;
   border-right: 1px solid #eeeeee;
+  overflow-x: hidden;
 }
 .columns .right-column.span9 {
   width: 76.4866339334%;
@@ -6808,6 +6809,10 @@ pre code {
     position: absolute;
     z-index: -1;
   }
+  .hideCode:before {
+    width:100% !important;
+  }
+
   .float-view .content-page table {
     float: left;
     clear: left;
@@ -6841,6 +6846,10 @@ pre code {
     margin-right: 1.5%;
     background-color: white;
   }
+  .hideCode2 {
+    width: 900px !important;
+    width: calc(100% - 130px) !important;
+  }
   .float-view .content-page .page-header:before,
   .float-view .content-page p:before,
   .float-view .content-page ul:before,
@@ -6973,6 +6982,9 @@ pre code {
     margin: 0px 0px 10px 0px;
     padding: 0px 0px 0px 10px;
   }
+  .hideCode3 {
+    display: none;
+  }
 }
 table {
   width: 100%;

docs/config.json

@@ -5,6 +5,7 @@
 	"image": "img/app.png",
 	"theme": "navy",
 	"template":"default",
+	"toggle_code": true,
 	"date_modified": true,
 	"repo": "justinwalsh/daux.io",
 	"twitter": ["justin_walsh", "todaymade"],

js/custom.js

@@ -20,3 +20,49 @@ $(function() {
 			$('#sub-nav-collapse').removeAttr('style');
 	});
 });
+
+//Fix GitHub Ribbon overlapping Scrollbar
+if ($('article')[0].scrollHeight > $('.right-column').height()) $('#github-ribbon')[0].style.right = '16px'
+
+//Toggle Code Block Visibility
+function toggleCodeBlocks() {
+    var t = localStorage.getItem("toggleCodeStats")
+    t = (t + 1) % 3;
+    localStorage.setItem("toggleCodeStats", t);
+    var a = $('.content-page article');
+    var b = a.children();
+    var c = b.filter('pre');
+    var d = $('.right-column');
+    if (d.hasClass('float-view')) {
+        d.removeClass('float-view');
+        $('#toggleCodeBlockBtn')[0].innerHTML = "Hide Code Blocks";
+    } else {
+        if (a.hasClass('hideCode')) {
+            d.addClass('float-view');
+            a.removeClass('hideCode');
+            b.removeClass('hideCode2');
+            c.removeClass('hideCode3');
+            $('#toggleCodeBlockBtn')[0].innerHTML = "Show Code Blocks Inline";
+        } else {
+            a.addClass('hideCode');
+            b.addClass('hideCode2');
+            c.addClass('hideCode3');
+            $('#toggleCodeBlockBtn')[0].innerHTML = "Show Code Blocks";
+        }
+    }
+}
+
+if (localStorage.getItem("toggleCodeStats") >= 0) {
+    var t = localStorage.getItem("toggleCodeStats");
+    if (t == 1) {
+        toggleCodeBlocks();
+        localStorage.setItem("toggleCodeStats", 1);
+    }
+    if (t == 2) {
+        toggleCodeBlocks();
+        toggleCodeBlocks();
+        localStorage.setItem("toggleCodeStats", 2);
+    }
+} else {
+    localStorage.setItem("toggleCodeStats", 0);
+}

less/import/daux-base.less

@@ -232,6 +232,7 @@ html, body {
     .left-column {
 		background-color: @sidebar-background;
 		border-right: 1px solid @lines;
+		overflow-x: hidden;
 	}
 	.right-column {
 		&.span9 {
@@ -561,6 +562,9 @@ pre {
 					z-index: -1;
 				}
 			}
+            .hideCode:before {
+                width:100% !important;
+            }
 			table {
 				float: left;
 				clear: left;
@@ -597,6 +601,10 @@ pre {
 					display: block;
 				}
 			}
+			.hideCode2 {
+    			width: 900px !important;
+    			width: calc(100% - 130px) !important;
+  			}
 			ul,ol {
 				li {
 					margin-left: 30px;
@@ -611,6 +619,9 @@ pre {
 				margin: 0px 0px 10px 0px;
 				padding: 0px 0px 0px 10px;
 			}
+			hideCode3 {
+				display: none;
+			}
 		}
 	}
 }

libs/functions.php

@@ -46,6 +46,7 @@ function get_options() {
 		'date_modified' => true,
 		'float' => true,
 		'repo' => false,
+        'toggle_code' => false,
 		'twitter' => array(),
 		'links' => array(),
 		'colors' => false,

template/default.tpl

@@ -163,6 +163,9 @@
                                 <?php foreach($options['links'] as $name => $url) { ?>
                                     <a href="<?php echo $url;?>" target="_blank"><?php echo $name;?></a><br>
                                 <?php } ?>
+                                <?php if ($options['toggle_code']) { ?>
+                                    <a href="#" id="toggleCodeBlockBtn" onclick="toggleCodeBlocks();">Show Code Blocks Inline</a><br>
+                                <?php } ?>
                                 <!-- Twitter -->
                                 <?php foreach($options['twitter'] as $handle) { ?>
                                     <div class="twitter">