Made by reissbaker, h4rry, clizzin, ssorallen, and spikebrehm.
This is an Airbnb nerds production. If you like this, check out other sweet JS work.
| /* Add this to the User Styles of your Fluid App */ | |
| /* @author: clizzin, reissbaker, and spikebrehm */ | |
| .content { | |
| float: left; | |
| width: 80%; | |
| } | |
| .user { | |
| float: left; | |
| width: 100px; | |
| } | |
| .message { | |
| overflow: auto; | |
| } | |
| .image { | |
| max-height: 600px !important; | |
| } | |
| /* This bit looks janky if your window is too narrow. :( */ | |
| .attachments { | |
| margin-left: 94px; | |
| } |
| /* Add this to the User Scripts of your Fluid App */ | |
| /* @author: reissbaker, h4rry, and ssorallen */ | |
| // Only show user name and avatar for first message in a group of messages | |
| !function(window, document, $, App) { | |
| var updateUI = (function() { | |
| var initialized = false, | |
| USERPIC_SELECTOR = '.userpic img'; | |
| // clean up the look of an individual message | |
| var cleanMessage = function($message) { | |
| $message.find(USERPIC_SELECTOR).css('visibility', 'hidden'); | |
| $message.find('.user').css('visibility', 'hidden'); | |
| $message.find('.separator').hide(); | |
| $message.css('margin-top', '-5px'); | |
| }; | |
| // loop through all unseen messages, calling `cleanMessage` on ones that need to be cleaned. | |
| return function() { | |
| var index, $prevMessage, $pic, $prevPic, $message, | |
| $messages = $('.message-list li' + (!initialized ? '' : ':visible')); | |
| initialized = true; | |
| for(index = $messages.length - 1; index >= 0; index--) { | |
| $message = $($messages[index]); | |
| if($message.attr('data-seen')) break; | |
| $message.attr('data-seen', true); | |
| $prevMessage = $message.prev(); | |
| if($prevMessage) { | |
| $pic = $message.find(USERPIC_SELECTOR); | |
| $prevPic = $prevMessage.find(USERPIC_SELECTOR); | |
| if($prevPic.attr('src') === $pic.attr('src')) cleanMessage($message); | |
| } | |
| } | |
| }; | |
| }()); | |
| $(window).load(function() { | |
| // shift+up and shift+down to move between channels | |
| var shiftChannel = function(delta) { | |
| var dir = (delta < 0) ? 'prev' : 'next'; | |
| $('#channel-nav .selected')[dir]().find('a').click(); | |
| updateUI(); | |
| return false; | |
| }; | |
| $(document).bind('keydown', function(e){ | |
| var shifted = e.shiftKey; | |
| if (e.keyCode == 40 && shifted) return shiftChannel(1); | |
| if (e.keyCode == 38 && shifted) return shiftChannel(-1); | |
| }); | |
| $('.main-wrapper').click(function(){ App.channelView.focusMessageForm(); }) | |
| App.on('newMessage', updateUI); | |
| App.on('newPrivateMessage', updateUI); | |
| App.on('routeClicked', updateUI); | |
| updateUI(); | |
| }); | |
| }(window, document, jQuery, App) |
var shiftChannel = function(delta) {
var dir = (delta > 0) ? 'prev' : 'next';
$('#channel-nav .selected')[dir]().find('a').click();
};
Nice. Merged in!
Nice stuff. Grove keeps getting better :)
You can stay outside the
Appglobal by clicking the room links and letting their code handle the routing. This gets you to the next room:And this'll get you to the previous room: