#64 Adding code previews

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 !-->
+<!-- End template: _footer !-->

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();

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 !-->
+<!-- End template: _head !-->

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>

pattern/base/blockquote.php

@@ -1,6 +1,7 @@
 <?php /*
 Title: Blockquote
 Class: &lt;blockquote&gt;
+Code: false
 */ ?>
 
 <blockquote>

pattern/base/button/1-base.php

@@ -3,6 +3,4 @@
 Class: <button>
 */ ?>
 
-<p>
-    <button type="button">Button</button>
-</p>
+<button type="button">Button</button>

pattern/branding/color.php

@@ -1,5 +1,6 @@
 <?php /*
 Title: Colour
+Code: false
 */ ?>
 <div class="grid g-gutter">
 <?php

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>

pattern/branding/logo/2-favicon.php

@@ -1,5 +1,6 @@
 <?php /*
 Title: Favicon
+Code: false
 */ ?>
 
 <div class="grid g-gutter">

pattern/branding/logo/3-apple.php

@@ -1,5 +1,6 @@
 <?php /*
 Title: Apple Icons
+Code: false
 */ ?>
 
 <ul class="u-list-unstyled">

pattern/branding/logo/4-android.php

@@ -1,5 +1,6 @@
 <?php /*
 Title: Android Icons
+Code: false
 */ ?>
 
 <div class="grid g-gutter">

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>

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>
+</div>

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>
+</div>

pattern/utility/color/1-fill.php

@@ -1,6 +1,7 @@
 <?php /*
 Title: Fill
 Container: true
+Code: false
 */ ?>
 
 <div class="grid g-gutter">

pattern/utility/color/2-text.php

@@ -1,6 +1,7 @@
 <?php /*
 Title: Text
 Container: true
+Code: false
 */ ?>
 <div class="grid g-gutter">
 <?php

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);

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;
+}