Adds preview interface and express server + grunt options. Ignores co…

…mpiled preview/css
xavisavvy · Jul 10, 2015 · 4f22d79 · 4f22d79
1 parent eef5c3c
commit 4f22d79
Show file tree

Hide file tree

Showing 11 changed files with 519 additions and 4 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,4 @@ node_modules
 *.css.map
 secrets.json
 dist/*
+preview/css
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -15,7 +15,8 @@ module.exports = function(grunt) {
           src:        'src',
           src_img:    'src/img',
           dist:       'dist',
-          dist_img:   'dist/img'
+          dist_img:   'dist/img',
+          preview:    'preview'
         },
 
 
@@ -30,6 +31,14 @@ module.exports = function(grunt) {
             files: {
               '<%= paths.src %>/css/main.css': '<%= paths.src %>/css/scss/main.scss'
             }
+          },
+          preview: {
+            options: {
+              style: 'compressed'
+            },
+            files: {
+              '<%= paths.preview %>/css/preview.css': '<%= paths.preview %>/scss/preview.scss'
+            }
           }
         },
 
@@ -136,8 +145,24 @@ module.exports = function(grunt) {
 
         // Watches for changes to css or email templates then runs grunt tasks
         watch: {
-          files: ['<%= paths.src %>/css/scss/*','<%= paths.src %>/emails/*','<%= paths.src %>/layouts/*','<%= paths.src %>/partials/*','<%= paths.src %>/data/*'],
-          tasks: ['default']
+          emails: {
+            files: ['<%= paths.src %>/css/scss/*','<%= paths.src %>/emails/*','<%= paths.src %>/layouts/*','<%= paths.src %>/partials/*','<%= paths.src %>/data/*','<%= paths.src %>/helpers/*'],
+            tasks: ['default']
+          },
+          preview_dist: {
+            files: ['<%= paths.dist %>/*'],
+            tasks: [],
+            options: {
+              livereload: true
+            }
+          },
+          preview: {
+            files: ['<%= paths.preview %>/scss/*'],
+            tasks: ['sass:preview'],
+            options: {
+              livereload: true
+            }
+          }
         },
 
 
@@ -247,7 +272,20 @@ module.exports = function(grunt) {
               'ol2013', 'outlookcom', 'chromeoutlookcom', 'chromeyahoo', 'windowsphone8'] // https://#{company}.litmus.com/emails/clients.xml
             }
           }
-        }
+        },
+
+        // Express server for browser previews
+        express: {
+          server: {
+            options: {
+              port: 4000,
+              hostname: '127.0.0.1',
+              bases: ['<%= paths.dist %>', '<%= paths.preview %>', '<%= paths.src %>'],
+              server: './server.js',
+              livereload: true
+            }
+          }
+        },
 
     });
 
@@ -272,4 +310,6 @@ module.exports = function(grunt) {
     // Upload image files to Amazon S3
     grunt.registerTask('s3upload', ['aws_s3:prod', 'cdn:aws_s3']);
 
+    grunt.registerTask('serve', ['default', 'express', 'watch']);
+
 };
diff --git a/preview/_blank.html b/preview/_blank.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en" class="welcome-view">
+<head>
+  <meta charset="UTF-8">
+  <title>BLANK</title>
+  <link rel="stylesheet" href="/css/preview.css">
+</head>
+<body>
+  <div class="wrapper">
+    <div class="wrapper--inner">
+      <div class="animation">
+        <span class="animation--icon"><span></span></span>
+        <span class="animation--icon"><span></span></span>
+        <span class="animation--stem"></span>
+      </div>
+      <div class="instruct">
+        <h1>Alright. Let's roll...</h1>
+        <p>Select a template from the upper right.</p>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/preview/img/phone-icon.png b/preview/img/phone-icon.png
diff --git a/preview/img/phone.png b/preview/img/phone.png
diff --git a/preview/index.ejs b/preview/index.ejs
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en" class="preview-interface-view">
+<head>
+  <meta charset="UTF-8">
+  <title>Grunt Email Workflow :: (Preview)</title>
+  <link rel="stylesheet" href="/css/preview.css">
+</head>
+<body>
+  <div id="header" class="header">
+    <div class="header--brand"><a href="https://github.com/leemunroe/grunt-email-workflow" target="_blank">Grunt Email Workflow</a></div>
+    <div class="header--select">
+      Preview:&nbsp;
+      <select id="template-select">
+        <option value="_blank.html">Select a Template</option>
+        <% templates.forEach(function(template) { %>
+          <option value="<%= template %>"><%= template %></option>
+        <% }); %>
+      </select>
+    </div>
+  </div>
+  <section class="preview-ui">
+    <article class="preview-ui--full">
+      <div class="preview-ui--full__container">
+        <iframe src="_blank.html"></iframe>
+      </div>
+    </article>
+    <!-- http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions -->
+    <article id="mobile-drawer" class="preview-ui--mobile">
+      <a class="js-drawer-toggle preview-ui--mobile__toggle toggle-drawer-close"></a>
+      <a class="js-drawer-toggle preview-ui--mobile__toggle toggle-drawer-open"></a>
+      <div class="preview-ui--mobile__container">
+        <iframe src="_blank.html"></iframe>
+      </div>
+    </article>
+    <br style="clear:both;">
+  </section>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+<script>
+(function($) {
+
+  // Reusables
+  var $templateSelect = $('#template-select'),
+    $body = $('body'),
+    h = document.location.hash;
+
+  // On change, reload template
+  $templateSelect.on('change', function() {
+    var $s = $(this),
+      v = $s.val(),
+      ms = new Date().getTime();  // We'll timestamp each iframe load for cache-busting
+
+    if (!v)
+      return;
+    
+    $('iframe').attr('src', v + '?t=' + ms);
+    document.location.hash = 'template:' + v;
+
+  });
+
+  // Preload selected template from hashed template:
+  if (h && h.indexOf('template:') != -1) {
+    var tpl = h.split(':')[1];
+
+    $templateSelect.val(tpl).trigger('change');
+
+  }
+
+  // Mobile Preview Drawer
+  function mobilePreviewDrawer() {
+    var $toggleBtns = $('.js-drawer-toggle'),
+      $mobileDrawer = $('#mobile-drawer'),
+      drawerHiddenClass = 'mobile-drawer-hidden';
+
+    $toggleBtns.on('click', function() {
+
+      $body.toggleClass(drawerHiddenClass);
+
+    });
+  }
+
+  mobilePreviewDrawer();
+
+  // Debounce helper
+  // url: http://davidwalsh.name/javascript-debounce-function
+  function _debounce(func, wait, immediate) {
+    var timeout;
+    return function() {
+      var context = this, args = arguments;
+      var later = function() {
+        timeout = null;
+        if (!immediate) func.apply(context, args);
+      };
+      var callNow = immediate && !timeout;
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+      if (callNow) func.apply(context, args);
+    };
+  };
+
+  // iFrame Sizing
+  function resizeUi() {
+    var headerHeight = $('#header').height(),
+      windowHeight = $(window).height(),
+      uiHeightAvail = windowHeight - headerHeight,
+      $fullHeightEls = $('.preview-ui, .preview-ui--full, .preview-ui--full iframe, .preview-ui--mobile');
+
+    $fullHeightEls.height(uiHeightAvail);
+  }
+
+  // Debouce UI resizing
+  var resizeUiDebouced = _debounce(function() {
+    resizeUi();
+  }, 200);
+
+  window.addEventListener('resize', resizeUiDebouced);
+
+  // Trigger UI resize since the page is painted
+  resizeUi();
+
+})(jQuery);
+</script>
+</body>
+</html>
diff --git a/preview/scss/_reset-ish.scss b/preview/scss/_reset-ish.scss
@@ -0,0 +1,12 @@
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  background: #fff;
+  margin: 0;
+  padding: 0;
+}