luxolus
/
open-vault
2
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

Merge pull request #2 from hashicorp/website-demo 

Initial demo interface
This commit is contained in:
Jack Pearkes 2015-03-15 23:09:34 -07:00
parent 7b1402b104 f9bb6b9504
commit 3d3ac3ff7a
15 changed files with 275 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
website/source/_ember_templates.html.erb Normal file
View File

@ -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>

5
website/source/assets/javascripts/application.js
View File

@ -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

9
website/source/assets/javascripts/demo.js Normal file
View File

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

33
website/source/assets/javascripts/demo/controllers/crud.js Normal file
View File

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

13
website/source/assets/javascripts/demo/controllers/demo.js Normal file
View File

@ -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')
});

5
website/source/assets/javascripts/demo/router.js Normal file
View File

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

2
website/source/assets/javascripts/demo/routes/crud.js Normal file
View File

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

111
website/source/assets/javascripts/demo/views/demo.js Normal file
View File

@ -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')
});

12
website/source/assets/javascripts/lib/ember-1-10.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
website/source/assets/javascripts/lib/ember-template-compiler.js Normal file
View File

File diff suppressed because one or more lines are too long

38
website/source/assets/stylesheets/_demo.scss Normal file
View File

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

6
website/source/assets/stylesheets/application.scss
View File

@ -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';

4
website/source/index.html.erb
View File

@ -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 -->

4
website/source/layouts/layout.erb
View File

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

93
website/source/package.json
View File

@ -1,93 +0,0 @@
{
"name": "bootstrap",
"description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
"version": "3.3.2",
"keywords": [
"css",
"less",
"mobile-first",
"responsive",
"front-end",
"framework",
"web"
],
"homepage": "http://getbootstrap.com",
"author": "Twitter, Inc.",
"scripts": {
"test": "grunt test"
},
"style": "dist/css/bootstrap.css",
"less": "less/bootstrap.less",
"main": "./dist/js/npm",
"repository": {
"type": "git",
"url": "https://github.com/twbs/bootstrap.git"
},
"bugs": {
"url": "https://github.com/twbs/bootstrap/issues"
},
"license": {
"type": "MIT",
"url": "https://github.com/twbs/bootstrap/blob/master/LICENSE"
},
"devDependencies": {
"btoa": "~1.1.2",
"glob": "~4.4.0",
"grunt": "~0.4.5",
"grunt-autoprefixer": "~2.2.0",
"grunt-banner": "~0.3.1",
"grunt-contrib-clean": "~0.6.0",
"grunt-contrib-compress": "~0.13.0",
"grunt-contrib-concat": "~0.5.1",
"grunt-contrib-connect": "~0.9.0",
"grunt-contrib-copy": "~0.8.0",
"grunt-contrib-csslint": "~0.4.0",
"grunt-contrib-cssmin": "~0.12.2",
"grunt-contrib-jade": "~0.14.1",
"grunt-contrib-jshint": "~0.11.0",
"grunt-contrib-less": "~1.0.0",
"grunt-contrib-qunit": "~0.5.2",
"grunt-contrib-uglify": "~0.8.0",
"grunt-contrib-watch": "~0.6.1",
"grunt-csscomb": "~3.0.0",
"grunt-exec": "~0.4.6",
"grunt-html": "~3.0.0",
"grunt-jekyll": "~0.4.2",
"grunt-jscs": "~1.5.0",
"grunt-saucelabs": "~8.6.0",
"grunt-sed": "~0.1.1",
"load-grunt-tasks": "~3.1.0",
"markdown-it": "^3.0.7",
"npm-shrinkwrap": "^200.1.0",
"time-grunt": "^1.1.0"
},
"engines": {
"node": ">=0.10.1"
},
"files": [
"dist",
"fonts",
"grunt/*.js",
"grunt/*.json",
"js/*.js",
"less/**/*.less",
"Gruntfile.js",
"LICENSE"
],
"jspm": {
"main": "js/bootstrap",
"directories": {
"example": "examples",
"lib": "dist"
},
"shim": {
"js/bootstrap": {
"imports": "jquery",
"exports": "$"
}
},
"buildConfig": {
"uglify": true
}
}
}