Skip to content

Instantly share code, notes, and snippets.

@selvagsz

selvagsz/jsbin.blogarchive.css

Last active December 20, 2015 18:18
Show Gist options
  • Save selvagsz/6174421 to your computer and use it in GitHub Desktop.
Save selvagsz/6174421 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.blogarchive.css
a{
cursor: pointer;
}
a:hover {
text-decoration: none;
}
a.active {
color: #e64d33;
font-size: 16px
}
Raw
jsbin.blogarchive.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="http://builds.erikbryn.com/ember-model/ember-model-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<script type="text/x-handlebars" id="components/blog-archive">
<h4 class="cursive"> Blog Archive </h4>
{{#each archives itemController="yearItem"}}
<div class="span12">
<div class="span12"><a {{action toggleProperty 'isExpanded'}}><i {{bindAttr class="isExpanded:icon-chevron-down:icon-chevron-right"}}></i> {{key}}</a><span class="muted"> ({{totalYearPosts}}) </span></div>
{{#if isExpanded}}
{{#each value itemController="monthItem"}}
<div class="span12" style="margin-left: 10px;">
<div class="span12"><a {{action toggleProperty 'isExpanded'}}> <i {{bindAttr class="isExpanded:icon-chevron-down:icon-chevron-right"}}></i> {{key}}</a> <span class="muted"> ({{value.length}}) </span></div>
{{#if isExpanded}}
{{#each value}}
<div class="span12" style="margin-left: 30px;">
{{#linkTo 'post' this}}{{name}}{{/linkTo}}
</div>
{{/each}}
{{/if}}
</div>
{{/each}}
{{/if}}
</div>
{{/each}}
</script>
<script type="text/x-handlebars" id="posts">
<div class="span10" style="margin-bottom: 30px;">
{{blog-archive content=content}}
</div>
<div class="span2">
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" id="post">
{{name}} template
</script>
</body>
</html>
Raw
jsbin.blogarchive.js
App = Ember.Application.create();
App.Router.map(function () {
this.resource('posts', function(){
this.resource('post',{path: "posts/post/:id"});
});
});
App.IndexRoute = Ember.Route.extend({
redirect: function(){
console.log('called');
this.transitionTo('posts');
}
});
App.PostsRoute = Ember.Route.extend({
model: function() {
return App.Post.find();
},
});
App.PostRoute = Ember.Route.extend({
model: function(model){
return App.Post.find(model.id);
},
serialize: function(model){
return {id: model.id};
},
renderTemplate: function(){
this.render('post',{into: 'posts'})
}
});
//Ember Component
App.BlogArchiveComponent = Ember.Component.extend({
months: ['January','Feburary','March','April','May','June','July','August','September','October','November','December'],
archives: function(){
var content = this.get('content.content'),
tempMonth,
tempYear,
yearArray = Em.A(),
monthArray,monthObj,yearObj,
self = this;
if(Em.isArray(content)){
return content.map(function(itm,idx){
var date = itm.get('date'),
year = date.getFullYear(),
month = date.getMonth();
if(year !== tempYear)
monthArray = Em.A();
if(month != tempMonth){
tempMonth = month;
monthObj = Em.Object.create();
monthObj.set('key',self.get('months')[month]);
monthObj.set('value',Em.A());
monthArray.pushObject(monthObj);
}
monthObj.get('value').pushObject(itm);
if(year != tempYear){
tempYear = year;
yearObj = Em.Object.create();
yearObj.set('key',year);
yearObj.set('value',monthArray);
return yearObj;
}
}).compact();
}
}.property('content.length')
});
//ItemControllers
App.YearItemController = Ember.ObjectController.extend({
isExpanded: false,
totalYearPosts: function(){
var totalPosts = 0;
this.get('content.value').forEach(function(post,idx){
totalPosts += post.get('value.length');
})
return totalPosts;
}.property()
});
App.MonthItemController = Ember.ObjectController.extend({
isExpanded: false
});
//Model
App.Post = Ember.Model.extend({
description : Ember.attr(),
date: Ember.attr(Date),
name: Ember.attr()
});
App.Post.adapter = Ember.FixtureAdapter.create();
App.Post.FIXTURES = [
{ id: '12',name:'Post12', description: 'This is post12 description', date: '2013-06-01' },
{ id: '11',name:'Post11', description: 'This is post11 description', date: '2013-07-01' },
{ id: '10',name:'Post10', description: 'This is post10 description', date: '2013-07-03' },
{ id: '9',name:'Post9', description: 'This is post9 description', date: '2013-04-23' },
{ id: '8',name:'Post8', description: 'This is post8 description', date: '2013-03-30' },
{ id: '7',name:'Post7', description: 'This is post7 description', date: '2013-02-03' },
{ id: '6',name:'Post6', description: 'This is post6 description', date: '2012-07-01' },
{ id: '5',name:'Post5', description: 'This is post5 description', date: '2012-07-01' },
{ id: '4',name:'Post4', description: 'This is post4 description', date: '2012-02-03' },
{ id: '3',name:'Post3', description: 'This is post3 description', date: '2012-02-23' },
{ id: '2',name:'Post2', description: 'This is post2 description', date: '2012-02-30' },
{ id: '1',name:'Post1', description: 'This is post1 description', date: '2012-01-03' }
];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment