Merge pull request #2 from hashicorp/website-demo

Initial demo interface

website/source/_ember_templates.html.erb

@@ -0,0 +1,31 @@
+<!-- TODO Precompile ember templates -->
+
+<script type="text/x-handlebars" data-template-name="application">
+    {{outlet}}
+</script>
+
+<script type="text/x-handlebars" data-template-name="demo">
+    <div class="terminal">
+        {{outlet}}
+    </div>
+</script>
+
+<script type="text/x-handlebars" data-template-name="demo/crud">
+{{#if notCleared}}
+    <div class="welcome">
+        Any Vault command you run passes through remotely to
+        the real Vault interface, so feel free to explore, but
+        be careful of the values you set.
+    </div>
+{{/if}}
+
+<div class="log">
+{{#each line in currentLog}}
+{{logPrefix}}{{line}}
+{{/each}}
+</div>
+
+<form {{action "submitText" on="submit"}}>
+    {{logPrefix}} {{input value=currentText class="shell" spellcheck="false"}}
+</form>
+</script>

website/source/assets/javascripts/application.js

@@ -1,6 +1,8 @@
 //= require jquery
 //= require bootstrap
 //= require jquery.waypoints.min
+//= require lib/ember-template-compiler
+//= require lib/ember-1-10.min
 
 //= require lib/String.substitute
 //= require lib/Function.prototype.bind
@@ -11,3 +13,6 @@
 //= require docs
 //= require app/Sidebar
 //= require app/Init
+
+//= require demo
+//= require_tree ./demo

website/source/assets/javascripts/demo.js

@@ -0,0 +1,9 @@
+window.Demo = Ember.Application.create({
+  rootElement: '#demo-app',
+});
+
+Demo.deferReadiness();
+
+if (document.getElementById('demo-app')) {
+  Demo.advanceReadiness();
+}

website/source/assets/javascripts/demo/controllers/crud.js

@@ -0,0 +1,33 @@
+Demo.DemoCrudController = Ember.ObjectController.extend({
+  needs: ['demo'],
+  currentText: Ember.computed.alias('controllers.demo.currentText'),
+  currentLog: Ember.computed.alias('controllers.demo.currentLog'),
+  logPrefix: Ember.computed.alias('controllers.demo.logPrefix'),
+  currentMarker: Ember.computed.alias('controllers.demo.currentMarker'),
+  notCleared: Ember.computed.alias('controllers.demo.notCleared'),
+
+  actions: {
+    submitText: function() {
+      var command = this.getWithDefault('currentText', '');
+      var currentLogs = this.get('currentLog').toArray();
+
+      // Add the last log item
+      currentLogs.push(command);
+
+      // Clean the state
+      this.set('currentText', '');
+
+      // Push the new logs
+      this.set('currentLog', currentLogs);
+
+      switch(command) {
+        case "clear":
+          this.set('currentLog', []);
+          this.set('notCleared', false);
+          break;
+        default:
+          console.log("Submitting: ", command);
+      }
+    }
+  }
+});

website/source/assets/javascripts/demo/controllers/demo.js

@@ -0,0 +1,13 @@
+Demo.DemoController = Ember.ObjectController.extend({
+  currentText: "vault help",
+  currentLog: [],
+  logPrefix: "$ ",
+  cursor: 0,
+  notCleared: true,
+
+  setFromHistory: function() {
+    var index = this.get('currentLog.length') + this.get('cursor');
+
+    this.set('currentText', this.get('currentLog')[index]);
+  }.observes('cursor')
+});

website/source/assets/javascripts/demo/router.js

@@ -0,0 +1,5 @@
+Demo.Router.map(function() {
+  this.route('demo', { path: '/demo' }, function() {
+    this.route('crud', { path: '/crud' });
+  });
+});

website/source/assets/javascripts/demo/routes/crud.js

@@ -0,0 +1,2 @@
+Demo.DemoCrudRoute = Ember.Route.extend({
+});

website/source/assets/javascripts/demo/views/demo.js

@@ -0,0 +1,111 @@
+Demo.DemoView = Ember.View.extend({
+  classNames: ['demo-overlay'],
+
+  didInsertElement: function() {
+    var element  = this.$();
+
+    element.hide().fadeIn(300);
+
+    // Scroll to the bottom of the element
+    element.scrollTop(element[0].scrollHeight);
+
+    // Focus
+    element.find('input.shell')[0].focus();
+
+    // Hijack scrolling to only work within terminal
+    //
+    $(element).on('DOMMouseScroll mousewheel', function(ev) {
+      var scrolledEl = $(this),
+          scrollTop = this.scrollTop,
+          scrollHeight = this.scrollHeight,
+          height = scrolledEl.height(),
+          delta = (ev.type == 'DOMMouseScroll' ?
+              ev.originalEvent.detail * -40 :
+              ev.originalEvent.wheelDelta),
+          up = delta > 0;
+
+      var prevent = function() {
+          ev.stopPropagation();
+          ev.preventDefault();
+          ev.returnValue = false;
+          return false;
+      };
+
+      if (!up && -delta > scrollHeight - height - scrollTop) {
+          // Scrolling down, but this will take us past the bottom.
+          scrolledEl.scrollTop(scrollHeight);
+          return prevent();
+      } else if (up && delta > scrollTop) {
+          // Scrolling up, but this will take us past the top.
+          scrolledEl.scrollTop(0);
+          return prevent();
+      }
+    });
+  },
+
+  willDestroyElement: function() {
+    var element  = this.$();
+
+    element.fadeOut(400);
+
+    // Allow scrolling
+    $('body').unbind('DOMMouseScroll mousewheel');
+  },
+
+  click: function() {
+    var element  = this.$();
+    // Focus
+    element.find('input.shell')[0].focus();
+  },
+
+  keyDown: function(ev) {
+    var cursor = this.get('controller.cursor'),
+        currentLength = this.get('controller.currentLog.length');
+
+    console.log(ev);
+
+    switch(ev.keyCode) {
+      // Down arrow
+      case 40:
+        if (cursor === 0) {
+            return;
+        }
+
+        this.incrementProperty('controller.cursor');
+        break;
+
+      // Up arrow
+      case 38:
+        if ((currentLength + cursor) === 0) {
+            return;
+        }
+
+        this.decrementProperty('controller.cursor');
+        break;
+
+      // command + k
+      case 75:
+        if (ev.metaKey) {
+          this.set('controller.currentLog', []);
+          this.set('controller.notCleared', false);
+        }
+        break;
+
+      // escape
+      case 27:
+        this.get('controller').transitionTo('index');
+        break;
+    }
+  },
+
+  submitted: function() {
+    var element  = this.$();
+
+    // Focus the input
+    element.find('input.shell')[0].focus();
+
+    // Scroll to the bottom of the element
+    element.scrollTop(element[0].scrollHeight);
+
+  }.observes('controller.currentLog')
+});

website/source/assets/stylesheets/_demo.scss

@@ -0,0 +1,38 @@
+.demo-overlay {
+    z-index: 100;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 80%;
+    max-height: 80%;
+    position: fixed;
+    background-color: black;
+    color: #DDDDDD;
+    overflow: scroll;
+    font-size: 18px;
+    font-family: 'Ubuntu Mono', 'Monaco', monospace;
+}
+
+.terminal {
+    padding: 0px 25px;
+    padding-bottom: 50px;
+
+    .welcome {
+        padding-top: 20px;
+    }
+
+    .log {
+        white-space: pre;
+    }
+
+    input.shell {
+        padding: 0;
+        margin: 0;
+        display: inline-block;
+        bottom: 0;
+        width: 90%;
+        background-color: black;
+        border: 0;
+        outline: 0;
+    }
+}

website/source/assets/stylesheets/application.scss

@@ -1,7 +1,7 @@
 @import 'bootstrap-sprockets';
 @import 'bootstrap';
 
-@import url("//fonts.googleapis.com/css?family=Lato:300,400,700|Open+Sans:300,600,400");
+@import url("//fonts.googleapis.com/css?family=Lato:300,400,700|Open+Sans:300,600,400|Ubuntu+Mono");
 
 // Core variables and mixins
 @import '_variables';
@@ -28,3 +28,7 @@
 @import '_community';
 @import '_docs';
 @import '_downloads';
+
+// Demo
+@import '_demo';
+

website/source/index.html.erb

@@ -16,6 +16,8 @@
 	</div>
 </div>
 
+<div id="demo-app"></div>
+
 <div id="content">
 	<div class="container">
 		<div class="row">
@@ -40,7 +42,7 @@
 						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et purus at orci cursus mattis. Maecenas ullamcorper dictum elit. Vivamus sit amet nisi eu lacus lacinia iaculis. Nulla non massa ultricies, placerat lectus vel, mattis mauris. Nullam urna risus, volutpat quis viverra in, convallis at magna.
 						<div class="feature-footer">
 							<a class="v-btn black sml" href="/intro">Learn more</a>
-							<a class="v-btn black sml terminal" href="/intro">Launch Interactive Terminal</a>
+							<a class="v-btn black sml terminal" href="/#/demo/crud">Launch Interactive Terminal</a>
 						</div>
 					</p>
 				</div> <!-- .feature -->

website/source/layouts/layout.erb

@@ -1,4 +1,8 @@
 <%= partial "layouts/meta" %>
 <%= partial "layouts/header" %>
+
 <%= yield %>
+
+<%= partial "ember_templates" %>
 <%= partial "layouts/footer" %>
+