Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

SlickGrid channel list working with throttled grid update so the app …

…deosn't drag down.
  • Loading branch information...
commit e32a9487db435dbe698969621469f56ed826b745 1 parent 6a94c40
@akavlie authored
Showing with 56 additions and 12 deletions.
  1. +2 −2 public/app.css
  2. +51 −7 public/app.js
  3. +3 −3 public/index.html
  4. BIN  public/js/slickgrid/images/actions.gif
  5. BIN  public/js/slickgrid/images/ajax-loader-small.gif
  6. BIN  public/js/slickgrid/images/arrow_redo.png
  7. BIN  public/js/slickgrid/images/arrow_right_peppermint.png
  8. BIN  public/js/slickgrid/images/arrow_right_spearmint.png
  9. BIN  public/js/slickgrid/images/arrow_undo.png
  10. BIN  public/js/slickgrid/images/bullet_blue.png
  11. BIN  public/js/slickgrid/images/bullet_star.png
  12. BIN  public/js/slickgrid/images/bullet_toggle_minus.png
  13. BIN  public/js/slickgrid/images/bullet_toggle_plus.png
  14. BIN  public/js/slickgrid/images/calendar.gif
  15. BIN  public/js/slickgrid/images/collapse.gif
  16. BIN  public/js/slickgrid/images/comment_yellow.gif
  17. BIN  public/js/slickgrid/images/down.gif
  18. BIN  public/js/slickgrid/images/drag-handle.png
  19. BIN  public/js/slickgrid/images/editor-helper-bg.gif
  20. BIN  public/js/slickgrid/images/expand.gif
  21. BIN  public/js/slickgrid/images/header-bg.gif
  22. BIN  public/js/slickgrid/images/header-columns-bg.gif
  23. BIN  public/js/slickgrid/images/header-columns-over-bg.gif
  24. BIN  public/js/slickgrid/images/help.png
  25. BIN  public/js/slickgrid/images/info.gif
  26. BIN  public/js/slickgrid/images/listview.gif
  27. BIN  public/js/slickgrid/images/pencil.gif
  28. BIN  public/js/slickgrid/images/row-over-bg.gif
  29. BIN  public/js/slickgrid/images/sort-asc.gif
  30. BIN  public/js/slickgrid/images/sort-asc.png
  31. BIN  public/js/slickgrid/images/sort-desc.gif
  32. BIN  public/js/slickgrid/images/sort-desc.png
  33. BIN  public/js/slickgrid/images/stripes.png
  34. BIN  public/js/slickgrid/images/tag_red.png
  35. BIN  public/js/slickgrid/images/tick.png
  36. BIN  public/js/slickgrid/images/user_identity.gif
  37. BIN  public/js/slickgrid/images/user_identity_plus.gif
  38. 0  public/js/{ → slickgrid}/slick.core.js
  39. 0  public/js/{ → slickgrid}/slick.grid.css
  40. 0  public/js/{ → slickgrid}/slick.grid.js
View
4 public/app.css
@@ -57,9 +57,9 @@ header {
position: absolute;
height: 400px;
width: 800px;
- margin-left: -300px;
+ margin-left: -401px;
left: 50%;
- top: -401px;
+ top: -402px;
background-color: white;
z-index: 15;
border: 1px solid gray;
View
58 public/app.js
@@ -340,7 +340,7 @@ $(function() {
initialize: function() {
frames.bind('add', this.addTab, this);
- allChannels.bind('add', this.populateList, this);
+ allChannels.bind('add', this.updateChannelList, this);
this.input = this.$('#prime-input');
this.render();
},
@@ -411,28 +411,72 @@ $(function() {
// Initialize slickgrid
// binds directly to allChannels.models as data source
var columns = [
- {id: 'name', field: 'name', name: 'Channel Name'},
- {id: 'userCount', field: 'userCount', name: 'Users'},
- {id: 'topic', field: 'topic', name: 'Topic'}
+ {
+ id: 'name', field: 'name', name: 'Channel Name',
+ width: 20, sortable: true
+ },
+ {
+ id: 'userCount', field: 'userCount', name: 'Users',
+ width: 10, sortable: true
+ },
+ {
+ id: 'topic', field: 'topic', name: 'Topic',
+ width: 80
+ }
];
var options = {
- enableColumnReorder: false
+ enableColumnReorder: false,
+ forceFitColumns: true
};
- window.grid = new Slick.Grid('#channel-list', this.channelList, columns, options);
+ window.irc.grid = new Slick.Grid('#channel-list', this.channelList, columns, options);
$('#channel-list').show();
+ // Sort grid results
+ var self = this;
+ irc.grid.onSort.subscribe(function(e, args) {
+ var field = args.sortCol.field;
+
+ self.channelList.sort(function(a, b) {
+ var result;
+ if (field === 'userCount') {
+ // numeric sort
+ result = a[field] - b[field];
+ } else {
+ // string sort
+ if (a[field] > b[field]) result = 1;
+ else if (a[field] < b[field]) result = -1;
+ else result = 0;
+ }
+
+ return args.sortAsc ? result : -result;
+ });
+
+ irc.grid.setData(self.channelList);
+ irc.grid.updateRowCount();
+ irc.grid.render();
+
+ });
+
allChannels.reset();
socket.emit('list');
},
+ // Throttled update of SlickGrid
+ gridRefresh: _.throttle(function() {
+ irc.grid.updateRowCount();
+ irc.grid.render();
+ }, 250),
+
// Add to channel list
- populateList: function(channel) {
+ updateChannelList: function(channel) {
this.channelList.push({
name: channel.get('name'),
userCount: channel.get('userCount'),
topic: channel.get('topic')
});
+
+ this.gridRefresh();
},
render: function() {
View
6 public/index.html
@@ -3,7 +3,7 @@
<head>
<title>web-irc</title>
- <link rel="stylesheet" type="text/css" href="js/slick.grid.css">
+ <link rel="stylesheet" type="text/css" href="js/slickgrid/slick.grid.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app.css">
</head>
@@ -91,8 +91,8 @@
<script src="js/backbone.js"></script>
<script src="js/bootstrap/bootstrap-modal.js"></script>
<script src="js/jquery.event.drag-2.0.min.js"></script>
- <script src="js/slick.core.js"></script>
- <script src="js/slick.grid.js"></script>
+ <script src="js/slickgrid/slick.core.js"></script>
+ <script src="js/slickgrid/slick.grid.js"></script>
<script src="js/util.js"></script>
<script src="app.js"></script>
View
BIN  public/js/slickgrid/images/actions.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/ajax-loader-small.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/arrow_redo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/arrow_right_peppermint.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/arrow_right_spearmint.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/arrow_undo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/bullet_blue.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/bullet_star.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/bullet_toggle_minus.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/bullet_toggle_plus.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/calendar.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/collapse.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/comment_yellow.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/down.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/drag-handle.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/editor-helper-bg.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/expand.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/header-bg.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/header-columns-bg.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/header-columns-over-bg.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/help.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/info.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/listview.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/pencil.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/row-over-bg.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/js/slickgrid/images/sort-asc.gif
Diff not rendered
View
BIN  public/js/slickgrid/images/sort-asc.png
Diff not rendered
View
BIN  public/js/slickgrid/images/sort-desc.gif
Diff not rendered
View
BIN  public/js/slickgrid/images/sort-desc.png
Diff not rendered
View
BIN  public/js/slickgrid/images/stripes.png
Diff not rendered
View
BIN  public/js/slickgrid/images/tag_red.png
Diff not rendered
View
BIN  public/js/slickgrid/images/tick.png
Diff not rendered
View
BIN  public/js/slickgrid/images/user_identity.gif
Diff not rendered
View
BIN  public/js/slickgrid/images/user_identity_plus.gif
Diff not rendered
View
0  public/js/slick.core.js → public/js/slickgrid/slick.core.js
File renamed without changes
View
0  public/js/slick.grid.css → public/js/slickgrid/slick.grid.css
File renamed without changes
View
0  public/js/slick.grid.js → public/js/slickgrid/slick.grid.js
File renamed without changes
Please sign in to comment.
Something went wrong with that request. Please try again.