From 27476d85562ea3ceb5abda338cc76c0fa05c8cc9 Mon Sep 17 00:00:00 2001
From: Dave Redfern <dave@daveredfern.com>
Date: Thu, 3 Nov 2016 14:05:09 +0000
Subject: [PATCH] #64 Adding code previews

---
 inc/footer.php                           |  3 +-
 inc/functions.php                        | 31 ++++++++++++++++--
 inc/head.php                             |  3 +-
 index.php                                |  5 +--
 pattern/base/blockquote.php              |  1 +
 pattern/base/button/1-base.php           |  4 +--
 pattern/branding/color.php               |  1 +
 pattern/branding/logo/1-logo.php         |  1 +
 pattern/branding/logo/2-favicon.php      |  1 +
 pattern/branding/logo/3-apple.php        |  1 +
 pattern/branding/logo/4-android.php      |  1 +
 pattern/branding/logo/5-placeholder.php  |  1 +
 pattern/branding/typography/1-font.php   |  3 +-
 pattern/branding/typography/2-tester.php |  3 +-
 pattern/utility/color/1-fill.php         |  1 +
 pattern/utility/color/2-text.php         |  1 +
 src/scss/base/_text.scss                 | 14 ++++-----
 src/scss/chopchop-ui.scss                | 40 ++++++++++++++++++++----
 18 files changed, 90 insertions(+), 25 deletions(-)

diff --git a/inc/footer.php b/inc/footer.php
index 6c0d78c5..f721d49c 100644
--- a/inc/footer.php
+++ b/inc/footer.php
@@ -15,6 +15,7 @@
 
 <?php if(!isset($_GET['preview'])) : ?>
     <script src="<?php echo getUrl('build/vendor/jquery.cookie/jquery.cookie.js'); ?>"></script>
+    <script src="<?php echo getUrl('build/vendor/prismjs/prism.js'); ?>"></script>
     <script src="<?php echo getUrl('build/js/chopchop-ui.js'); ?>"></script>
 <?php endif; ?>
-<!-- End template: _footer !-->
\ No newline at end of file
+<!-- End template: _footer !-->
diff --git a/inc/functions.php b/inc/functions.php
index afcfc962..35c29930 100644
--- a/inc/functions.php
+++ b/inc/functions.php
@@ -193,6 +193,7 @@ class TemplateHelper {
         public function __construct($data = array(), $path, $options=array()) {
             $this->printTitle = isset($options['print_title']) && $options['print_title'];
             $this->printContainer = isset($options['print_container']) && $options['print_container'];
+            $this->printCode = isset($options['print_code']) && $options['print_code'];
             $this->data = $data;
             $this->path = $path;
             $this->options = $options;
@@ -209,6 +210,10 @@ public function shouldPrintContainer(){
             return $this->printContainer && $this->Container !== false;
         }
 
+        public function shouldPrintCode(){
+            return $this->printCode && $this->Code !== false;
+        }
+
         public function printTitle() {
             if(!$this->printTitle) {
                 return '';
@@ -310,7 +315,7 @@ protected function pathToLocation($path) {
     }
 
     public function getContent($options) {
-        $contents = '<section id="section-'.basename($this->location, '.php').'" >';
+        $contents = '<section id="section-'.basename($this->location, '.php').'" class="cc-pattern">';
         foreach($this->children as $child) {
             $contents .= $child->getContent($options);
         }
@@ -323,23 +328,43 @@ public function getContent($options) {
 
     protected function getContents($paths, $options) {
         $printContainer = false;
+        $printCode = false;
         ob_start();
         foreach($paths as $path) {
             $_t = new TemplateHelper(parseComments(file_get_contents($path)), $path, $options);
             $printContainer |= $_t->shouldPrintContainer();
+            $printCode |= $_t->shouldPrintCode();
             $classes = array('cc-section');
             if($_t->Section){
                 $classes[] =  $_t->Section;
             }
+
             if($printContainer) {
-                echo '<section class="'.implode(' ', $classes).'"><div class="u-container">';
+                echo '<div class="u-container">';
             }
 
             echo $_t->printTitle();
+
+            if($printContainer) {
+                echo '</div>';
+                echo '<div class="u-container"><section class="'.implode(' ', $classes).'"><div class="cc-demo">';
+            }
+
             include $path;
 
             if($printContainer) {
-                echo '</div></section>';
+                echo '</div>';
+            }
+
+            if($printCode) {
+                echo '<div class="u-toggle"><pre class="cc-code"><code class="language-html">';
+                    $html = file_get_contents($path);
+                    echo htmlentities(trim(preg_replace('/<\\?.*(\\?>|$)/Us', '', $html)));
+                echo '</code></pre></div>';
+            }
+
+            if($printContainer) {
+                echo '</section></div>';
             }
         }
         $contents .= ob_get_contents();
diff --git a/inc/head.php b/inc/head.php
index 4f1866bf..65fc999d 100644
--- a/inc/head.php
+++ b/inc/head.php
@@ -6,6 +6,7 @@
 <script src="<?php echo getUrl('build/vendor/element-queries/ElementQueries.js'); ?>"></script>
 <?php */ ?>
 <?php if(!isset($_GET['preview'])) : ?>
+<link rel="stylesheet" type="text/css" href="<?php echo getUrl('build/vendor/prismjs/prism.css'); ?>" media="all" />
     <link rel="stylesheet" type="text/css" href="<?php echo getUrl('build/css/chopchop-ui.css'); ?>" media="screen" />
 <?php endif; ?>
-<!-- End template: _head !-->
\ No newline at end of file
+<!-- End template: _head !-->
diff --git a/index.php b/index.php
index 8cdd3f1f..8c2c2db4 100644
--- a/index.php
+++ b/index.php
@@ -43,7 +43,8 @@
              <?php } else {
                  $options = array(
                     'print_title' => !((isset($_GET['title']) && $_GET['title'] === 'false')),
-                    'print_container' => !((isset($_GET['container']) && $_GET['container'] === 'false'))
+                    'print_container' => !((isset($_GET['container']) && $_GET['container'] === 'false')),
+                    'print_code' => !((isset($_GET['code']) && $_GET['code'] === 'false'))
                  );
                  echo Section::get(getRequestPath(), $options);
              }?>
@@ -54,6 +55,6 @@
     <?php endif; ?>
 
     <?php include('inc/footer.php'); ?>
-    
+
 </body>
 </html>
diff --git a/pattern/base/blockquote.php b/pattern/base/blockquote.php
index 11ef15a9..274571ff 100644
--- a/pattern/base/blockquote.php
+++ b/pattern/base/blockquote.php
@@ -1,6 +1,7 @@
 <?php /*
 Title: Blockquote
 Class: &lt;blockquote&gt;
+Code: false
 */ ?>
 
 <blockquote>
diff --git a/pattern/base/button/1-base.php b/pattern/base/button/1-base.php
index 4fa2de02..b2175caa 100644
--- a/pattern/base/button/1-base.php
+++ b/pattern/base/button/1-base.php
@@ -3,6 +3,4 @@
 Class: &lt;button&gt;
 */ ?>
 
-<p>
-    <button type="button">Button</button>
-</p>
+<button type="button">Button</button>
diff --git a/pattern/branding/color.php b/pattern/branding/color.php
index 2f3bf0f5..2c2e6bba 100644
--- a/pattern/branding/color.php
+++ b/pattern/branding/color.php
@@ -1,5 +1,6 @@
 <?php /*
 Title: Colour
+Code: false
 */ ?>
 <div class="grid g-gutter">
 <?php
diff --git a/pattern/branding/logo/1-logo.php b/pattern/branding/logo/1-logo.php
index 15fcdeb6..d6281c38 100644
--- a/pattern/branding/logo/1-logo.php
+++ b/pattern/branding/logo/1-logo.php
@@ -1,5 +1,6 @@
 <?php /*
 Title: Logo
+Code: false
 */ ?>
 
 <p><img src="<?php echo getUrl('build/img/logos/logo.png'); ?>" class="u-img-responsive" width="260" height="260" /></p>
diff --git a/pattern/branding/logo/2-favicon.php b/pattern/branding/logo/2-favicon.php
index 29131383..101b5a0a 100755
--- a/pattern/branding/logo/2-favicon.php
+++ b/pattern/branding/logo/2-favicon.php
@@ -1,5 +1,6 @@
 <?php /*
 Title: Favicon
+Code: false
 */ ?>
 
 <div class="grid g-gutter">
diff --git a/pattern/branding/logo/3-apple.php b/pattern/branding/logo/3-apple.php
index d2038034..82f6ec4a 100755
--- a/pattern/branding/logo/3-apple.php
+++ b/pattern/branding/logo/3-apple.php
@@ -1,5 +1,6 @@
 <?php /*
 Title: Apple Icons
+Code: false
 */ ?>
 
 <ul class="u-list-unstyled">
diff --git a/pattern/branding/logo/4-android.php b/pattern/branding/logo/4-android.php
index 530001e1..61f35fb1 100755
--- a/pattern/branding/logo/4-android.php
+++ b/pattern/branding/logo/4-android.php
@@ -1,5 +1,6 @@
 <?php /*
 Title: Android Icons
+Code: false
 */ ?>
 
 <div class="grid g-gutter">
diff --git a/pattern/branding/logo/5-placeholder.php b/pattern/branding/logo/5-placeholder.php
index 56e58506..3542c078 100755
--- a/pattern/branding/logo/5-placeholder.php
+++ b/pattern/branding/logo/5-placeholder.php
@@ -1,5 +1,6 @@
 <?php /*
 Title: Image Placeholder
+Code: false
 */ ?>
 
 <p><img src="<?php echo getUrl('build/img/placeholders/300x300.jpg'); ?>" class="u-img-responsive" width="300" height="300" /></p>
diff --git a/pattern/branding/typography/1-font.php b/pattern/branding/typography/1-font.php
index c467ec73..f85251ca 100644
--- a/pattern/branding/typography/1-font.php
+++ b/pattern/branding/typography/1-font.php
@@ -1,10 +1,11 @@
 <?php /*
 Title: Font
 Class: .u-font-family
+Code: false
 */ ?>
 
 <div class="u-font-family">
     a b c d e f g h i j k l m n o p q r s t u v w x y z <br>
     A B C D E F G H I J K L M N O P Q R S T U V W X Y Z <br>
     1 2 3 4 5 6 7 8 9 0
-</div>
\ No newline at end of file
+</div>
diff --git a/pattern/branding/typography/2-tester.php b/pattern/branding/typography/2-tester.php
index 9d5774e3..c2a3af85 100644
--- a/pattern/branding/typography/2-tester.php
+++ b/pattern/branding/typography/2-tester.php
@@ -1,5 +1,6 @@
 <?php /*
 Title: Typography
+Code: false
 */ ?>
 
 <div class="u-container-sm">
@@ -73,4 +74,4 @@
     </ol>
 
     <p>Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <b>This is bold</b>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. <i>This is an i tag</i>. Quisque volutpat condimentum velit.</p>
-</div>
\ No newline at end of file
+</div>
diff --git a/pattern/utility/color/1-fill.php b/pattern/utility/color/1-fill.php
index 32375042..5b25d4a2 100644
--- a/pattern/utility/color/1-fill.php
+++ b/pattern/utility/color/1-fill.php
@@ -1,6 +1,7 @@
 <?php /*
 Title: Fill
 Container: true
+Code: false
 */ ?>
 
 <div class="grid g-gutter">
diff --git a/pattern/utility/color/2-text.php b/pattern/utility/color/2-text.php
index f03c4dcf..ef1a44bd 100644
--- a/pattern/utility/color/2-text.php
+++ b/pattern/utility/color/2-text.php
@@ -1,6 +1,7 @@
 <?php /*
 Title: Text
 Container: true
+Code: false
 */ ?>
 <div class="grid g-gutter">
 <?php
diff --git a/src/scss/base/_text.scss b/src/scss/base/_text.scss
index 82b7c933..6f791667 100644
--- a/src/scss/base/_text.scss
+++ b/src/scss/base/_text.scss
@@ -53,6 +53,13 @@ small {
     font-size: $font-size-sm;
 }
 
+code,
+kbd,
+pre,
+samp {
+    font-size: $font-size;
+}
+
 code {
     padding: 2px 4px;
     font-size: $font-size-sm;
@@ -61,13 +68,6 @@ code {
     border-radius: $border-radius;
 }
 
-code,
-kbd,
-pre,
-samp {
-    font-size: $font-size;
-}
-
 mark {
     background: color(error);
     color: color(black);
diff --git a/src/scss/chopchop-ui.scss b/src/scss/chopchop-ui.scss
index fc65d40c..6ce3a684 100644
--- a/src/scss/chopchop-ui.scss
+++ b/src/scss/chopchop-ui.scss
@@ -178,8 +178,12 @@
 // =============================================
 
 .cc-section {
-    padding-top: 60px;
-    padding-bottom: 60px;
+    border: 5px solid color(grey,lighter);
+    border-top: 0;
+}
+
+.cc-demo {
+    padding: 20px;
 }
 
 
@@ -188,7 +192,6 @@
 // =============================================
 
 .cc-title-container {
-    margin-bottom: 20px;
 }
 
 
@@ -202,7 +205,6 @@
     @include justify-content(space-between);
     @include align-items(center);
     padding: 10px 5px;
-    border-bottom: 2px solid color(grey,light);
 
     * {
         margin: 0;
@@ -230,12 +232,15 @@
 // =============================================
 
 .cc-title-desc {
-    padding: 10px;
-    border: 2px solid color(grey,lighter);
+    padding: 20px 20px 0;
+    border-left: 5px solid color(grey,lighter);
+    border-right: 5px solid color(grey,lighter);
     border-top: 0;
 
     > *:last-child {
         margin-bottom: 0;
+        border-bottom: 2px solid color(grey,lighter);
+        padding-bottom: 20px;
     }
 }
 
@@ -313,3 +318,26 @@
 //    display: block;
 //    position: static;
 //}
+
+
+// =============================================
+// Code
+// =============================================
+
+.cc-code {
+    margin: 0 !important;
+    display: block;
+    max-height: 20em;
+    overflow: scroll;
+    background-color: color(grey,lighter) !important;
+}
+
+
+// =============================================
+// Pattern
+// =============================================
+
+.cc-pattern {
+    margin-top: 60px;
+    margin-bottom: 60px;
+}