Skip to content

Instantly share code, notes, and snippets.

@rauhryan

rauhryan/index.html

Created September 25, 2014 21:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rauhryan/db33adf9ba3fb75e2ad4 to your computer and use it in GitHub Desktop.
Save rauhryan/db33adf9ba3fb75e2ad4 to your computer and use it in GitHub Desktop.
Download ZIP
Ember Starter Kit Advanced views // source http://jsbin.com/rijoh/12
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<meta name="description" content="Advanced views" />
<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://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.2.1.js"></script>
<script src="http://builds.emberjs.com/tags/v1.4.0/ember.js"></script>
<style id="jsbin-css">
* {
box-sizing: border-box;
}
.ember-application > .ember-view {
display: flex;
min-height: 100vh;
}
.board {
display: flex;
flex: 1 1 auto;
justify-content: space-between;
background: #fafafa;
padding: 60px 24px;
}
@media only screen and (max-width: 960px) {
.board {
flex-flow: column nowrap;
}
}
.board .column {
display: flex;
}
.board .column > div {
display: flex;
flex: 1 1 auto;
flex-flow: column nowrap;
min-width: 230px;
padding: 0 10px;
}
.board .column h3 {
color: #999;
border-bottom: 1px solid #e5e5e5;
}
.board .column ul {
flex: 1 1 auto;
margin: 0;
padding: 0;
list-style: none;
}
.card {
padding: 10px 10px 20px 10px;
margin-bottom: 10px;
background: #fff;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
border: 1px solid #e5e5e5;
}
.card.clicked {
transform: scale(1.2);
}
</style>
</head>
<body>
<script type="text/x-handlebars">
{{outlet}}
{{outlet modal}}
</script>
<script type="text/x-handlebars" data-template-name="layouts/modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">{{view.title}}</h4>
</div>
<div class="modal-body">
{{yield}}
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</script>
<script type="text/x-handlebars" data-template-name="card/edit">
<label>
<span>Title</span>
{{input value=title}}
</label>
</script>
<script type="text/x-handlebars" data-template-name="card">
{{title}}
</script>
<script id="jsbin-javascript">
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return {
columns: [
{ title: "Backlog", issues:[{title: "Do some work", color: "7965cc"},{title: "Some other work"}]},
{ title: "Ready", issues:[{title: "Ready to work"}]},
{ title: "Working", issues:[{title: "Working on work"}]},
{ title: "Done", issues:[{title: "Done with work"}]}
]
};
},
afterModel: function(model) {
var colors = model.columns.reduce(function(arr, col) {
arr = arr.concat(col.issues)
return arr;
},[]).map(function(issue){
return issue.color || "";
});
var cssView = App.CssView.create({content:colors}).appendTo("head")
},
// 3.2 add an action handler
actions : {
"edit": function(issue){
this.controllerFor("card.edit").set("model", issue);
this.render("card.edit", {into: "application", outlet:"modal"});
},
closeModal: function(){
this.disconnectOutlet({
outlet: 'modal',
parentView: 'application'
});
}
}
});
App.CssView = Ember.View.extend({
tagName:"style",
attributeBindings: ["type"],
type: "text/css",
render: function(){
var buffer = this.buffer;
this.get('content').forEach(function(color){
buffer.push(".-x" + color + "{")
buffer.push("border-left: 3px solid #" + color + ";")
buffer.push("}");
})
}
})
App.CardController = Ember.ObjectController.extend({
})
App.IndexView = Ember.CollectionView.extend({
classNames:["board"],
content: Ember.computed.alias("controller.columns"),
itemViewClass: Ember.View.extend({
classNames:["column"],
template: Ember.Handlebars.compile("{{render 'column' view.content }}")
})
})
App.CardView = Ember.View.extend({
click: function(){
this.get("controller").send("edit", this.get("controller.model"))
}
})
App.ColumnCardsView = Ember.CollectionView.extend({
tagName: 'ul',
itemViewClass:Ember.View.extend({
tagName: 'li',
classNames: ["card"],
classNameBindings: ["customColor"],
customColor: function(){
return "-x" + this.get("content.color")
}.property("content.color"),
template: Ember.Handlebars.compile("{{render 'card' view.content }}")
}),
content: Ember.computed.alias("controller.issues"),
initializeSortable: function(){
this.$().sortable({connectWith: ".column ul"})
}.on("didInsertElement")
})
// 1. First thing lets make a column view so we can clean up our crappy sortable
App.ColumnView = Ember.ContainerView.extend({
childViews: ["headerView",App.ColumnCardsView],
headerView: Ember.View.extend({
tagName: 'h3',
template: Ember.Handlebars.compile("{{title}}")
})
})
// 3. OK so now let add the ability to edit a cards title, in a modal
// 3.1 Add an action on the li
// 3.3 Add a Edit Controller
App.CardEditController = Ember.ObjectController.extend({
})
App.ModalView = Ember.View.extend({
layoutName: "layouts/modal",
classNames:["modal","fade"],
fadeIn: function(){
this.$().show().addClass("in");
$('body').on('keyup.modal', function(event) {
if (event.keyCode === 27) this.get('controller').send('closeModal');
}.bind(this));
this.$(".modal-content").on('click.modal', function(event){
if($(event.target).is("[data-ember-action]")){return;}
event.stopPropagation();
}.bind(this))
this.$().on('click.modal', function(event){
if($(event.target).is("[data-ember-action]")){return;}
this.get('controller').send('closeModal');
}.bind(this))
this.$('.close').on('click.modal', function(event){
if($(event.target).is("[data-ember-action]")){return;}
this.get('controller').send('closeModal');
}.bind(this))
}.on("didInsertElement"),
cleanUpEvents: function() {
this.$().off('click.modal');
this.$('.close').off('click.modal');
$("body").off("keyup.modal");
}.on("willDestroyElement")
})
App.CardEditView = App.ModalView.extend({title: "Issue"})
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"><\/script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"><\/script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<meta name="description" content="Advanced views" />
<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://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.2.1.js"><\/script>
<script src="http://builds.emberjs.com/tags/v1.4.0/ember.js"><\/script>
</head>
<body>
<script type="text/x-handlebars">
{{outlet}}
{{outlet modal}}
<\/script>
<script type="text/x-handlebars" data-template-name="layouts/modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">{{view.title}}</h4>
</div>
<div class="modal-body">
{{yield}}
</div>
</div><\!-- /.modal-content -->
</div><\!-- /.modal-dialog -->
<\/script>
<script type="text/x-handlebars" data-template-name="card/edit">
<label>
<span>Title</span>
{{input value=title}}
</label>
<\/script>
<script type="text/x-handlebars" data-template-name="card">
{{title}}
<\/script>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">* {
box-sizing: border-box;
}
.ember-application {
> .ember-view{
display:flex;
min-height: 100vh;
}
}
.board {
display: flex;
flex: 1 1 auto;
justify-content: space-between;
background: #fafafa;
padding: 60px 24px;
@media only screen
and (max-width : 960px) {
flex-flow: column nowrap;
}
.column {
display:flex;
> div {
display:flex;
flex: 1 1 auto;
flex-flow: column nowrap;
min-width: 230px;
padding: 0 10px;
}
h3 {
color: #999;
border-bottom: 1px solid #e5e5e5;
}
ul {
flex: 1 1 auto;
margin: 0;
padding: 0;
list-style: none;
}
}
}
.card {
padding: 10px 10px 20px 10px;
margin-bottom: 10px;
background: #fff;
box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
border: 1px solid #e5e5e5;
&.clicked {
transform: scale(1.2);
}
}</script>
<script id="jsbin-source-javascript" type="text/javascript">App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return {
columns: [
{ title: "Backlog", issues:[{title: "Do some work", color: "7965cc"},{title: "Some other work"}]},
{ title: "Ready", issues:[{title: "Ready to work"}]},
{ title: "Working", issues:[{title: "Working on work"}]},
{ title: "Done", issues:[{title: "Done with work"}]}
]
};
},
afterModel: function(model) {
var colors = model.columns.reduce(function(arr, col) {
arr = arr.concat(col.issues)
return arr;
},[]).map(function(issue){
return issue.color || "";
});
var cssView = App.CssView.create({content:colors}).appendTo("head")
},
// 3.2 add an action handler
actions : {
"edit": function(issue){
this.controllerFor("card.edit").set("model", issue);
this.render("card.edit", {into: "application", outlet:"modal"});
},
closeModal: function(){
this.disconnectOutlet({
outlet: 'modal',
parentView: 'application'
});
}
}
});
App.CssView = Ember.View.extend({
tagName:"style",
attributeBindings: ["type"],
type: "text/css",
render: function(){
var buffer = this.buffer;
this.get('content').forEach(function(color){
buffer.push(".-x" + color + "{")
buffer.push("border-left: 3px solid #" + color + ";")
buffer.push("}");
})
}
})
App.CardController = Ember.ObjectController.extend({
})
App.IndexView = Ember.CollectionView.extend({
classNames:["board"],
content: Ember.computed.alias("controller.columns"),
itemViewClass: Ember.View.extend({
classNames:["column"],
template: Ember.Handlebars.compile("{{render 'column' view.content }}")
})
})
App.CardView = Ember.View.extend({
click: function(){
this.get("controller").send("edit", this.get("controller.model"))
}
})
App.ColumnCardsView = Ember.CollectionView.extend({
tagName: 'ul',
itemViewClass:Ember.View.extend({
tagName: 'li',
classNames: ["card"],
classNameBindings: ["customColor"],
customColor: function(){
return "-x" + this.get("content.color")
}.property("content.color"),
template: Ember.Handlebars.compile("{{render 'card' view.content }}")
}),
content: Ember.computed.alias("controller.issues"),
initializeSortable: function(){
this.$().sortable({connectWith: ".column ul"})
}.on("didInsertElement")
})
// 1. First thing lets make a column view so we can clean up our crappy sortable
App.ColumnView = Ember.ContainerView.extend({
childViews: ["headerView",App.ColumnCardsView],
headerView: Ember.View.extend({
tagName: 'h3',
template: Ember.Handlebars.compile("{{title}}")
})
})
// 3. OK so now let add the ability to edit a cards title, in a modal
// 3.1 Add an action on the li
// 3.3 Add a Edit Controller
App.CardEditController = Ember.ObjectController.extend({
})
App.ModalView = Ember.View.extend({
layoutName: "layouts/modal",
classNames:["modal","fade"],
fadeIn: function(){
this.$().show().addClass("in");
$('body').on('keyup.modal', function(event) {
if (event.keyCode === 27) this.get('controller').send('closeModal');
}.bind(this));
this.$(".modal-content").on('click.modal', function(event){
if($(event.target).is("[data-ember-action]")){return;}
event.stopPropagation();
}.bind(this))
this.$().on('click.modal', function(event){
if($(event.target).is("[data-ember-action]")){return;}
this.get('controller').send('closeModal');
}.bind(this))
this.$('.close').on('click.modal', function(event){
if($(event.target).is("[data-ember-action]")){return;}
this.get('controller').send('closeModal');
}.bind(this))
}.on("didInsertElement"),
cleanUpEvents: function() {
this.$().off('click.modal');
this.$('.close').off('click.modal');
$("body").off("keyup.modal");
}.on("willDestroyElement")
})
App.CardEditView = App.ModalView.extend({title: "Issue"})
</script></body>
</html>
Raw
jsbin.rijoh.css
* {
box-sizing: border-box;
}
.ember-application > .ember-view {
display: flex;
min-height: 100vh;
}
.board {
display: flex;
flex: 1 1 auto;
justify-content: space-between;
background: #fafafa;
padding: 60px 24px;
}
@media only screen and (max-width: 960px) {
.board {
flex-flow: column nowrap;
}
}
.board .column {
display: flex;
}
.board .column > div {
display: flex;
flex: 1 1 auto;
flex-flow: column nowrap;
min-width: 230px;
padding: 0 10px;
}
.board .column h3 {
color: #999;
border-bottom: 1px solid #e5e5e5;
}
.board .column ul {
flex: 1 1 auto;
margin: 0;
padding: 0;
list-style: none;
}
.card {
padding: 10px 10px 20px 10px;
margin-bottom: 10px;
background: #fff;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
border: 1px solid #e5e5e5;
}
.card.clicked {
transform: scale(1.2);
}
Raw
jsbin.rijoh.js
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return {
columns: [
{ title: "Backlog", issues:[{title: "Do some work", color: "7965cc"},{title: "Some other work"}]},
{ title: "Ready", issues:[{title: "Ready to work"}]},
{ title: "Working", issues:[{title: "Working on work"}]},
{ title: "Done", issues:[{title: "Done with work"}]}
]
};
},
afterModel: function(model) {
var colors = model.columns.reduce(function(arr, col) {
arr = arr.concat(col.issues)
return arr;
},[]).map(function(issue){
return issue.color || "";
});
var cssView = App.CssView.create({content:colors}).appendTo("head")
},
// 3.2 add an action handler
actions : {
"edit": function(issue){
this.controllerFor("card.edit").set("model", issue);
this.render("card.edit", {into: "application", outlet:"modal"});
},
closeModal: function(){
this.disconnectOutlet({
outlet: 'modal',
parentView: 'application'
});
}
}
});
App.CssView = Ember.View.extend({
tagName:"style",
attributeBindings: ["type"],
type: "text/css",
render: function(){
var buffer = this.buffer;
this.get('content').forEach(function(color){
buffer.push(".-x" + color + "{")
buffer.push("border-left: 3px solid #" + color + ";")
buffer.push("}");
})
}
})
App.CardController = Ember.ObjectController.extend({
})
App.IndexView = Ember.CollectionView.extend({
classNames:["board"],
content: Ember.computed.alias("controller.columns"),
itemViewClass: Ember.View.extend({
classNames:["column"],
template: Ember.Handlebars.compile("{{render 'column' view.content }}")
})
})
App.CardView = Ember.View.extend({
click: function(){
this.get("controller").send("edit", this.get("controller.model"))
}
})
App.ColumnCardsView = Ember.CollectionView.extend({
tagName: 'ul',
itemViewClass:Ember.View.extend({
tagName: 'li',
classNames: ["card"],
classNameBindings: ["customColor"],
customColor: function(){
return "-x" + this.get("content.color")
}.property("content.color"),
template: Ember.Handlebars.compile("{{render 'card' view.content }}")
}),
content: Ember.computed.alias("controller.issues"),
initializeSortable: function(){
this.$().sortable({connectWith: ".column ul"})
}.on("didInsertElement")
})
// 1. First thing lets make a column view so we can clean up our crappy sortable
App.ColumnView = Ember.ContainerView.extend({
childViews: ["headerView",App.ColumnCardsView],
headerView: Ember.View.extend({
tagName: 'h3',
template: Ember.Handlebars.compile("{{title}}")
})
})
// 3. OK so now let add the ability to edit a cards title, in a modal
// 3.1 Add an action on the li
// 3.3 Add a Edit Controller
App.CardEditController = Ember.ObjectController.extend({
})
App.ModalView = Ember.View.extend({
layoutName: "layouts/modal",
classNames:["modal","fade"],
fadeIn: function(){
this.$().show().addClass("in");
$('body').on('keyup.modal', function(event) {
if (event.keyCode === 27) this.get('controller').send('closeModal');
}.bind(this));
this.$(".modal-content").on('click.modal', function(event){
if($(event.target).is("[data-ember-action]")){return;}
event.stopPropagation();
}.bind(this))
this.$().on('click.modal', function(event){
if($(event.target).is("[data-ember-action]")){return;}
this.get('controller').send('closeModal');
}.bind(this))
this.$('.close').on('click.modal', function(event){
if($(event.target).is("[data-ember-action]")){return;}
this.get('controller').send('closeModal');
}.bind(this))
}.on("didInsertElement"),
cleanUpEvents: function() {
this.$().off('click.modal');
this.$('.close').off('click.modal');
$("body").off("keyup.modal");
}.on("willDestroyElement")
})
App.CardEditView = App.ModalView.extend({title: "Issue"})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment