Permalink
Browse files

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

…deosn't drag down.
  • Loading branch information...
1 parent 6a94c40 commit e32a9487db435dbe698969621469f56ed826b745 @akavlie committed Nov 24, 2011
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
@@ -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
@@ -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
@@ -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>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
File renamed without changes.
File renamed without changes.
File renamed without changes.

0 comments on commit e32a948

Please sign in to comment.