Skip to content

Instantly share code, notes, and snippets.

@grapho
Created November 13, 2014 23:14
Show Gist options
  • Save grapho/3a808fa94973c3021a51 to your computer and use it in GitHub Desktop.
Save grapho/3a808fa94973c3021a51 to your computer and use it in GitHub Desktop.
Ember Starter Kit // source http://emberjs.jsbin.com/gonivo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.8.0/ember.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.js"></script>
<style id="jsbin-css">
/* Put your CSS here */
html, body {
margin: 20px;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.interval-process {
margin: 25px 0 50px;
}
.progress {
height: 20px;
background: rgba(0, 0, 0, .1);
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 4px 4px 0 0;
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
padding: 3px
}
.progress-bar {
border-radius: 3px;
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background: linear-gradient(#888, #444);
-webkit-box-shadow: inset 0 -1px 1 rgba(0, 0, 0, .2);
box-shadow: inset 0 -1px 1 rgba(0, 0, 0, .2);
-webkit-transition: width .6s ease;
transition: width .6s ease;
}
.progress-bar:hover {
background: #444;
cursor: pointer;
}
.interval-track {
position: relative;
}
.interval-tooltip {
margin-left: -60px;
position: absolute;
top: 0;
}
.interval-marker {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 10px solid rgba(0, 0, 0, .2);
height: 0;
width: 0;
margin: 0 auto;
}
.interval-content {
height: 20px;
width: 120px;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 4px;
cursor: pointer;
overflow: hidden;
padding: 5px;
position: relative;
z-index: 500;
transition: 200ms;
}
.interval-content:hover {
height: 50px;
background: linear-gradient(#fff, #eee);
border: 1px solid rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, .5);
box-shadow: 0 2px 2px rgba(0, 0, 0, .5);
z-index: 1000;
}
.interval-content h6 {
margin: 0 0 5px;
}
.interval-content p {
margin: 0;
font-size: 55%;
}
.interval-content h6,
.interval-content p {
color: rgba(0, 0, 0, .6);
text-align: center;
}
.interval-tooltip.left-edge {
margin-left: -5px;
}
.left-edge .interval-marker {
margin-left: 5px;
}
.left-edge .interval-content h6,
.left-edge .interval-content p {
text-align: left;
}
.interval-tooltip.right-edge {
margin-left: -115px;
}
.right-edge .interval-marker {
margin-right: 5px;
}
.right-edge .interval-content h6,
.right-edge .interval-content p {
text-align: right;
}
</style>
</head>
<body>
<script type="text/x-handlebars">
<h2>Interval Processes</h2>
{{#each process in processes}}
{{interval-process process=process}}
{{/each}}
</script>
<script type="text/x-handlebars" data-template-name="components/interval-process">
<h3>{{processTitle}}</h3>
<div class="progress">
<div class="progress-bar"></div>
</div>
<div class="interval-track">
<div class="interval-ticks">
</div>
{{#each step in steps}}
{{interval-step content=step position=step.step_position}}
{{/each}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="components/interval-step">
<div class="interval-marker"></div>
<div class="interval-content">
<h6>{{content.step_name}}</h6>
<p>Due Date: {{content.step_run_date}}</p>
<p>Completed: {{content.step_completed_date}}</p>
</div>
</script>
<script id="jsbin-javascript">
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IntervalProcessComponent = Ember.Component.extend({
classNames: ['interval-process'],
processTitle: Ember.computed.alias('process.process_name'),
intervalTotal: function() {
var steps = this.get('process.steps'),
total = 0;
steps.forEach(function(step) {
total += step.step_interval;
});
return total;
}.property('process.steps.@each.step_interval'),
steps: function() {
var steps = this.get('process.steps'),
total = this.get('intervalTotal'),
intervals = 0,
position = 0;
return steps.map(function(step) {
intervals += step.step_interval;
position = Math.ceil((intervals / total)*100);
console.log(position);
return Ember.Object.create({
id: step.step_number,
step_name: step.step_name,
step_interval: step.step_interval,
step_position: position,
step_run_date: step.step_run_date,
step_completed_date: step.step_completed_date,
});
});
}.property('process.steps.[]'),
processProgress: function() {
return Math.ceil((this.get('process.interval_current') / this.get('intervalTotal'))*100);
}.property('process.interval_total', 'process.interval_current'),
showProgress: function() {
var percent = this.get('processProgress') || 0,
component = this;
Ember.run.later(function() {
component.$('.progress-bar').css('width', percent + '%');
}, 100);
}.on('didInsertElement')
});
App.IntervalStepComponent = Ember.Component.extend({
classNames: ['interval-tooltip'],
classNameBindings: ['leftEdge', 'rightEdge'],
leftEdge: function() {
return this.get('position') <= 1;
}.property('position'),
rightEdge: function() {
return this.get('position') >= 99;
}.property('position'),
setPosition: function() {
var position = this.get('position') || 0,
component = this;
component.$(0).css('left', position + '%');
}.on('didInsertElement')
});
App.ApplicationController = Ember.Controller.extend({
processes: [
{
id: 1,
process_name: "Letter Process 1",
start_date: null,
interval_current: 2,
steps: [
{
step_number: 1,
step_name: "Letter 1",
step_interval: 0,
step_run_date: "15-11-2014",
step_completed_date: null,
process_percent_complete: null,
},
{
step_number: 2,
step_name: "Letter 2",
step_interval: 10,
step_run_date: "15-01-2015",
step_completed_date: null,
process_percent_complete: null,
},
{
step_number: 5,
step_name: "Letter 5",
step_interval: 10,
step_run_date: "30-03-2015",
step_completed_date: null,
process_percent_complete: null,
}
]
}
]
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"><\/script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"><\/script>
<script src="http://builds.emberjs.com/tags/v1.8.0/ember.js"><\/script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.js"><\/script>
</head>
<body>
<script type="text/x-handlebars">
<h2>Interval Processes</h2>
{{#each process in processes}}
{{interval-process process=process}}
{{/each}}
<\/script>
<script type="text/x-handlebars" data-template-name="components/interval-process">
<h3>{{processTitle}}</h3>
<div class="progress">
<div class="progress-bar"></div>
</div>
<div class="interval-track">
<div class="interval-ticks">
</div>
{{#each step in steps}}
{{interval-step content=step position=step.step_position}}
{{/each}}
</div>
<\/script>
<script type="text/x-handlebars" data-template-name="components/interval-step">
<div class="interval-marker"></div>
<div class="interval-content">
<h6>{{content.step_name}}</h6>
<p>Due Date: {{content.step_run_date}}</p>
<p>Completed: {{content.step_completed_date}}</p>
</div>
<\/script>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">/* Put your CSS here */
html, body {
margin: 20px;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.interval-process {
margin: 25px 0 50px;
}
.progress {
height: 20px;
background: rgba(0, 0, 0, .1);
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 4px 4px 0 0;
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
padding: 3px
}
.progress-bar {
border-radius: 3px;
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background: linear-gradient(#888, #444);
-webkit-box-shadow: inset 0 -1px 1 rgba(0, 0, 0, .2);
box-shadow: inset 0 -1px 1 rgba(0, 0, 0, .2);
-webkit-transition: width .6s ease;
transition: width .6s ease;
}
.progress-bar:hover {
background: #444;
cursor: pointer;
}
.interval-track {
position: relative;
}
.interval-tooltip {
margin-left: -60px;
position: absolute;
top: 0;
}
.interval-marker {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 10px solid rgba(0, 0, 0, .2);
height: 0;
width: 0;
margin: 0 auto;
}
.interval-content {
height: 20px;
width: 120px;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 4px;
cursor: pointer;
overflow: hidden;
padding: 5px;
position: relative;
z-index: 500;
transition: 200ms;
}
.interval-content:hover {
height: 50px;
background: linear-gradient(#fff, #eee);
border: 1px solid rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, .5);
box-shadow: 0 2px 2px rgba(0, 0, 0, .5);
z-index: 1000;
}
.interval-content h6 {
margin: 0 0 5px;
}
.interval-content p {
margin: 0;
font-size: 55%;
}
.interval-content h6,
.interval-content p {
color: rgba(0, 0, 0, .6);
text-align: center;
}
.interval-tooltip.left-edge {
margin-left: -5px;
}
.left-edge .interval-marker {
margin-left: 5px;
}
.left-edge .interval-content h6,
.left-edge .interval-content p {
text-align: left;
}
.interval-tooltip.right-edge {
margin-left: -115px;
}
.right-edge .interval-marker {
margin-right: 5px;
}
.right-edge .interval-content h6,
.right-edge .interval-content p {
text-align: right;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IntervalProcessComponent = Ember.Component.extend({
classNames: ['interval-process'],
processTitle: Ember.computed.alias('process.process_name'),
intervalTotal: function() {
var steps = this.get('process.steps'),
total = 0;
steps.forEach(function(step) {
total += step.step_interval;
});
return total;
}.property('process.steps.@each.step_interval'),
steps: function() {
var steps = this.get('process.steps'),
total = this.get('intervalTotal'),
intervals = 0,
position = 0;
return steps.map(function(step) {
intervals += step.step_interval;
position = Math.ceil((intervals / total)*100);
console.log(position);
return Ember.Object.create({
id: step.step_number,
step_name: step.step_name,
step_interval: step.step_interval,
step_position: position,
step_run_date: step.step_run_date,
step_completed_date: step.step_completed_date,
});
});
}.property('process.steps.[]'),
processProgress: function() {
return Math.ceil((this.get('process.interval_current') / this.get('intervalTotal'))*100);
}.property('process.interval_total', 'process.interval_current'),
showProgress: function() {
var percent = this.get('processProgress') || 0,
component = this;
Ember.run.later(function() {
component.$('.progress-bar').css('width', percent + '%');
}, 100);
}.on('didInsertElement')
});
App.IntervalStepComponent = Ember.Component.extend({
classNames: ['interval-tooltip'],
classNameBindings: ['leftEdge', 'rightEdge'],
leftEdge: function() {
return this.get('position') <= 1;
}.property('position'),
rightEdge: function() {
return this.get('position') >= 99;
}.property('position'),
setPosition: function() {
var position = this.get('position') || 0,
component = this;
component.$(0).css('left', position + '%');
}.on('didInsertElement')
});
App.ApplicationController = Ember.Controller.extend({
processes: [
{
id: 1,
process_name: "Letter Process 1",
start_date: null,
interval_current: 2,
steps: [
{
step_number: 1,
step_name: "Letter 1",
step_interval: 0,
step_run_date: "15-11-2014",
step_completed_date: null,
process_percent_complete: null,
},
{
step_number: 2,
step_name: "Letter 2",
step_interval: 10,
step_run_date: "15-01-2015",
step_completed_date: null,
process_percent_complete: null,
},
{
step_number: 5,
step_name: "Letter 5",
step_interval: 10,
step_run_date: "30-03-2015",
step_completed_date: null,
process_percent_complete: null,
}
]
}
]
});
</script></body>
</html>
/* Put your CSS here */
html, body {
margin: 20px;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.interval-process {
margin: 25px 0 50px;
}
.progress {
height: 20px;
background: rgba(0, 0, 0, .1);
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 4px 4px 0 0;
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 5px rgba(0, 0, 0, .1);
padding: 3px
}
.progress-bar {
border-radius: 3px;
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background: linear-gradient(#888, #444);
-webkit-box-shadow: inset 0 -1px 1 rgba(0, 0, 0, .2);
box-shadow: inset 0 -1px 1 rgba(0, 0, 0, .2);
-webkit-transition: width .6s ease;
transition: width .6s ease;
}
.progress-bar:hover {
background: #444;
cursor: pointer;
}
.interval-track {
position: relative;
}
.interval-tooltip {
margin-left: -60px;
position: absolute;
top: 0;
}
.interval-marker {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 10px solid rgba(0, 0, 0, .2);
height: 0;
width: 0;
margin: 0 auto;
}
.interval-content {
height: 20px;
width: 120px;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 4px;
cursor: pointer;
overflow: hidden;
padding: 5px;
position: relative;
z-index: 500;
transition: 200ms;
}
.interval-content:hover {
height: 50px;
background: linear-gradient(#fff, #eee);
border: 1px solid rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, .5);
box-shadow: 0 2px 2px rgba(0, 0, 0, .5);
z-index: 1000;
}
.interval-content h6 {
margin: 0 0 5px;
}
.interval-content p {
margin: 0;
font-size: 55%;
}
.interval-content h6,
.interval-content p {
color: rgba(0, 0, 0, .6);
text-align: center;
}
.interval-tooltip.left-edge {
margin-left: -5px;
}
.left-edge .interval-marker {
margin-left: 5px;
}
.left-edge .interval-content h6,
.left-edge .interval-content p {
text-align: left;
}
.interval-tooltip.right-edge {
margin-left: -115px;
}
.right-edge .interval-marker {
margin-right: 5px;
}
.right-edge .interval-content h6,
.right-edge .interval-content p {
text-align: right;
}
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IntervalProcessComponent = Ember.Component.extend({
classNames: ['interval-process'],
processTitle: Ember.computed.alias('process.process_name'),
intervalTotal: function() {
var steps = this.get('process.steps'),
total = 0;
steps.forEach(function(step) {
total += step.step_interval;
});
return total;
}.property('process.steps.@each.step_interval'),
steps: function() {
var steps = this.get('process.steps'),
total = this.get('intervalTotal'),
intervals = 0,
position = 0;
return steps.map(function(step) {
intervals += step.step_interval;
position = Math.ceil((intervals / total)*100);
console.log(position);
return Ember.Object.create({
id: step.step_number,
step_name: step.step_name,
step_interval: step.step_interval,
step_position: position,
step_run_date: step.step_run_date,
step_completed_date: step.step_completed_date,
});
});
}.property('process.steps.[]'),
processProgress: function() {
return Math.ceil((this.get('process.interval_current') / this.get('intervalTotal'))*100);
}.property('process.interval_total', 'process.interval_current'),
showProgress: function() {
var percent = this.get('processProgress') || 0,
component = this;
Ember.run.later(function() {
component.$('.progress-bar').css('width', percent + '%');
}, 100);
}.on('didInsertElement')
});
App.IntervalStepComponent = Ember.Component.extend({
classNames: ['interval-tooltip'],
classNameBindings: ['leftEdge', 'rightEdge'],
leftEdge: function() {
return this.get('position') <= 1;
}.property('position'),
rightEdge: function() {
return this.get('position') >= 99;
}.property('position'),
setPosition: function() {
var position = this.get('position') || 0,
component = this;
component.$(0).css('left', position + '%');
}.on('didInsertElement')
});
App.ApplicationController = Ember.Controller.extend({
processes: [
{
id: 1,
process_name: "Letter Process 1",
start_date: null,
interval_current: 2,
steps: [
{
step_number: 1,
step_name: "Letter 1",
step_interval: 0,
step_run_date: "15-11-2014",
step_completed_date: null,
process_percent_complete: null,
},
{
step_number: 2,
step_name: "Letter 2",
step_interval: 10,
step_run_date: "15-01-2015",
step_completed_date: null,
process_percent_complete: null,
},
{
step_number: 5,
step_name: "Letter 5",
step_interval: 10,
step_run_date: "30-03-2015",
step_completed_date: null,
process_percent_complete: null,
}
]
}
]
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment