Merge pull request #11 from wildbit/feature/template-preview

Template preview command

package.json

@@ -1,27 +1,35 @@
 {
   "name": "postmark-cli",
-  "version": "1.2.2",
+  "version": "1.3.2",
   "description": "A CLI tool for managing templates, sending emails, and fetching servers on Postmark.",
   "main": "./dist/index.js",
   "dependencies": {
     "@types/traverse": "^0.6.32",
+    "@types/watch": "^1.0.1",
     "chalk": "^2.4.2",
+    "consolidate": "^0.15.1",
     "directory-tree": "^2.2.3",
+    "ejs": "^2.6.2",
+    "express": "^4.17.1",
     "fs-extra": "^7.0.1",
     "inquirer": "^6.2.1",
     "lodash": "^4.17.11",
     "ora": "^3.0.0",
     "postmark": "^2.2.7",
     "request": "^2.88.0",
+    "socket.io": "^2.3.0",
     "table": "^5.2.0",
     "traverse": "^0.6.6",
     "untildify": "^4.0.0",
+    "watch": "^1.0.2",
     "yargonaut": "^1.1.4",
     "yargs": "^13.2.4"
   },
   "devDependencies": {
     "@types/chai": "^4.1.4",
+    "@types/consolidate": "^0.14.0",
     "@types/execa": "^0.9.0",
+    "@types/express": "^4.17.0",
     "@types/fs-extra": "^5.0.5",
     "@types/inquirer": "^6.0.0",
     "@types/lodash": "^4.14.123",
@@ -39,8 +47,7 @@
     "nconf": "^0.10.0",
     "pre-commit": "^1.2.2",
     "ts-node": "^8.0.3",
-    "typescript": "^3.4.3",
-    "watch": "^1.0.2"
+    "typescript": "^3.4.3"
   },
   "scripts": {
     "start:dev": "watch 'npm run build' './src'",

preview/assets/js/preview.js

@@ -0,0 +1,87 @@
+var activeToggleClass = 'is-active'
+
+/**
+ * Mode toggles
+ */
+var mode = document.querySelectorAll('.js-mode')
+var currentMode = 'html'
+
+mode.forEach(function(toggle) {
+  toggle.addEventListener('click', function(event) {
+    // Reset all classes
+    mode.forEach(function(modeToggle) {
+      // Remove active class from all toggles
+      modeToggle.classList.remove(activeToggleClass)
+
+      // Hide all views
+      document
+        .querySelector('.js-' + modeToggle.dataset.mode)
+        .classList.add('is-hidden')
+    })
+
+    // Add active class
+    currentMode = this.dataset.mode
+    this.classList.add(activeToggleClass)
+
+    // Show view
+    document
+      .querySelector('.js-' + this.dataset.mode)
+      .classList.remove('is-hidden')
+  })
+})
+
+/**
+ * View toggles
+ */
+var view = document.querySelectorAll('.js-view')
+var currentView = 'desktop'
+
+view.forEach(function(toggle) {
+  // Add click event
+  toggle.addEventListener('click', function(event) {
+    view.forEach(function(viewToggle) {
+      // Remove active class from all toggles
+      viewToggle.classList.remove(activeToggleClass)
+
+      document.querySelectorAll('.preview-iframe').forEach(function(item) {
+        item.classList.remove('preview-iframe--mobile')
+      })
+    })
+
+    currentView = this.dataset.view
+    this.classList.add(activeToggleClass)
+
+    if (this.dataset.view === 'mobile') {
+      document.querySelectorAll('.preview-iframe').forEach(function(item) {
+        item.classList.add('preview-iframe--mobile')
+      })
+    }
+  })
+})
+
+function keypress(e) {
+  var evt = window.event ? event : e
+
+  // ctrl + v
+  if (evt.keyCode == 86 && evt.ctrlKey) {
+    var view = currentView === 'desktop' ? 'mobile' : 'desktop'
+    document.querySelector('.js-view[data-view="' + view + '"]').click()
+  }
+
+  // ctrl + m
+  if (evt.keyCode == 77 && evt.ctrlKey) {
+    var mode = currentMode === 'html' ? 'text' : 'html'
+    document.querySelector('.js-mode[data-mode="' + mode + '"]').click()
+  }
+}
+
+document.onkeydown = keypress
+
+// Manage state when HTML iframe is finished loading
+document.querySelector('.js-html').onload = function() {
+  // Hide loading indicator
+  document.querySelector('.js-loader').classList.add('is-hidden')
+
+  // Add state class to HTML iframe
+  this.classList.add('is-loaded')
+}