Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

/jsbin.nefiwoco.css

Created July 17, 2014 16:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/997027a795b9d15ed6e1 to your computer and use it in GitHub Desktop.
Save anonymous/997027a795b9d15ed6e1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.nefiwoco.css
/* Put your CSS here */
html, body {
margin: 20px;
}
.table-container {
height: 600px;
}
Raw
jsbin.nefiwoco.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<meta name="description" content="Ember-Table Starter Kit" />
<meta charset="utf-8">
<title>Ember Table Starter Kit</title>
<!-- Note that you need antiscroll CSS to support ember-table -->
<link rel="stylesheet" href="http://rawgit.com/LearnBoost/antiscroll/master/antiscroll.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<link rel="stylesheet" href="http://rawgit.com/Addepar/ember-table/v0.2.1/dist/ember-table.css">
<!-- Ember and dependencies -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js
"></script>
<script src="http://builds.emberjs.com/tags/v1.5.1/ember.js"></script>
<!-- Ember Table and dependencies -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.js"></script>
<script src="http://rawgit.com/LearnBoost/antiscroll/master/antiscroll.js"></script>
<script src="http://rawgit.com/Addepar/ember-table/v0.2.1/dependencies/ember-addepar-mixins/resize_handler.js"></script>
<script src="http://rawgit.com/Addepar/ember-table/v0.2.1/dependencies/ember-addepar-mixins/style_bindings.js"></script>
<script src="http://rawgit.com/Addepar/ember-table/v0.2.1/dist/ember-table.js"></script>
</head>
<body>
<script type="text/x-handlebars">
<h2> Welcome to Ember Table!</h2>
<p>Version 0.2.1</p>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="sortable-header-cell">
<div class="ember-table-content-container" {{action sortByColumn view.content}}>
<span class="ember-table-content">
{{view.content.headerCellName}}
{{#if view.content.supportSort}}
<div style="float:right;">
{{#if view.content.sorted}}
{{#if sortAscending}}
<div style="cursor:s-resize;" title="Ascending">
&#8593;
</div>
{{else}}
<div style="cursor:n-resize;" title="Descending">
&#8595;
</div>
{{/if}}
{{else}}
&#8645;
{{/if}}
</div>
{{/if}}
</span>
</div>
</script>
<script type="text/x-handlebars" data-template-name="index">
<div class="table-container">
{{sortable-table-component
hasFooter=false
columnsBinding="columns"
contentBinding="content"
enableContentSelection=true
sortAction="sort"
sortAscendingBinding="sortAscending"
}}
<ul class="pagination">
<li class="disabled"><a {{action previousPage}}>&laquo;</a></li>
<li class="active">
<span>{{page}} <span class="sr-only">(current)</span></span>
</li>
<li class="disabled"><a {{action nextPage}}>&raquo;</a></li>
</ul>
</div>
</script>
</body>
</html>
Raw
jsbin.nefiwoco.js
App = Ember.Application.create();
App.SortableTableComponent = Ember.Table.EmberTableComponent.extend({
onColumnSort: function (column, newIndex) {
this._super(column, newIndex);
console.log('column "' + column.get('headerCellName') + '" sorted');
},
actions: {
sortByColumn: function (column) {
this.sendAction('sortAction', column);
}
}
});
Ember.Handlebars.helper('sortable-table-component', App.SortableTableComponent);
App.SortableHeaderCellView = Ember.Table.HeaderCell.extend({
templateName: 'sortable-header-cell'
});
App.SortableColumnMixin = Ember.Object.create({
supportSort: true,
sorted: false,
headerCellViewClass: App.SortableHeaderCellView
});
App.IndexController = Ember.Controller.extend({
page: 1,
per_page: 30,
sortAscending: false,
sortColumn: null,
content: Em.A(),
columns: function () {
return Em.A([
Ember.Table.ColumnDefinition.create({
columnWidth: 50,
textAlign: 'text-align-left',
headerCellName: 'State',
contentPath: 'state'
}),
Ember.Table.ColumnDefinition.create({
columnWidth: 200,
textAlign: 'text-align-left',
headerCellName: 'Title',
contentPath: 'title'
}),
Ember.Table.ColumnDefinition.create(
App.SortableColumnMixin, {
columnWidth: 100,
textAlign: 'text-align-center',
headerCellName: '# Comments',
contentPath: 'comments',
sortKey: 'comments'
}),
Ember.Table.ColumnDefinition.create({
columnWidth: 100,
textAlign: 'text-align-left',
headerCellName: 'Created By',
contentPath: 'creator'
}),
Ember.Table.ColumnDefinition.create(
App.SortableColumnMixin, {
columnWidth: 100,
textAlign: 'text-align-left',
headerCellName: 'Updated At',
contentPath: 'updatedAt',
sortKey: 'updated_at'
}),
Ember.Table.ColumnDefinition.create(
App.SortableColumnMixin, {
columnWidth: 100,
textAlign: 'text-align-left',
headerCellName: 'Created At',
contentPath: 'createdAt',
sortKey: 'created_at'
}),
Ember.Table.ColumnDefinition.create({
columnWidth: 100,
textAlign: 'text-align-left',
headerCellName: 'Created At',
contentPath: 'longLine'
})]);
}.property(),
createGithubIssue: function (event) {
var row = Ember.Object.create();
row.set('state', event.state);
row.set('createdAt', event.created_at);
row.set('updatedAt', event.updated_at);
row.set('creator', event.user.login);
row.set('title', event.title);
row.set('comments', event.comments);
row.set('longLine', JSON.stringify(event));
return row;
},
requestGithubIssues: function () {
var page, content, url, i, self = this;
page = this.get('page');
content = this.get('content');
content.clear();
if (true) {
url = "https://api.github.com/repos/emberjs/ember.js/issues?page=" + page + "&per_page=30";
if (this.get('sortColumn')) {
var asc = this.get('sortAscending');
url = url + '&direction=' + (asc ? 'asc' : 'desc');
url = url + '&sort=' + this.get('sortColumn.sortKey');
}
url = url + '&callback=?';
Ember.$.getJSON(url, function (json) {
var a = json.data.map(function (event, index) {
return self.createGithubIssue(event);
});
content.pushObjects(a);
});
} else {
for (i = 0; i != 30; i++) {
issue = self.createGithubIssue({
'state': 'a',
'created_at': 'today',
'user': {
'login': 'me'
},
'updated_at': 'today',
'comments': i,
'title': 'Big Bug'
});
content.pushObject(issue);
}
}
}.on('init').observes('page', 'sortColumn', 'sortAscending'),
hasPreviousPage: Ember.computed.notEmpty('previousPageLink'),
hasNextPage: Ember.computed.notEmpty('nextPageLink'),
actions: {
nextPage: function () {
this.incrementProperty('page');
},
previousPage: function () {
this.decrementProperty('page');
},
sort: function (column) {
if (!column.get('supportSort')) {
return;
}
if (this.get('sortColumn') !== column) {
console.log('New column');
this.get('columns').setEach('sorted', false);
column.set('sorted', true);
this.set('sortAscending', false);
this.set('sortColumn', column);
} else if (this.get('sortColumn') === column) {
console.log('Same column');
// Handle disabling sorts
if (this.get('sortAscending') === true) {
console.log('disabling sort');
this.set('sortColumn', undefined);
this.set('sortAscending', false);
this.get('columns').setEach('sorted', false);
column.set('sorted', false);
return;
} else {
console.log('change sort');
this.toggleProperty('sortAscending');
}
}
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment