Jake.codes

GroupMe Notifications and Theme, for Fluid

Saturday, May 25, 2013

GroupMe-userscript.js

Adds OS X dock badges and notifications to GroupMe fluid apps.

// Allow: *groupme.com*
// For Fluid.app http://fluidapp.com
window.fluid.dockBadge = '';
var oldTotal = 0;
var lastTimestamp = "";
setTimeout(updateDockBadge, 1000);
setTimeout(updateDockBadge, 3000);
setInterval(updateDockBadge, 5000);

setTimeout(fixTooltips, 1000);
setTimeout(fixTooltips, 3000);
setInterval(fixTooltips, 5000);

function updateDockBadge() {
    var total = 0;
    if ($('.navbar .nav li.recently-active.unread small.count').length > 0) {
        $.each($('.navbar .nav li.recently-active.unread small.count'), function() {
            total += parseInt($(this).text());
        });
    }
    if (total !== oldTotal) {
        window.fluid.dockBadge = (total === 0) ? "" : total;
        if (total > 0 && Notification.permission == "granted") {
            var fiveMinuteLimit = new Date(Math.round((new Date()).getTime() / (1000 * 60 * 5)) * (1000 * 60 * 5));
            var plural = (total === 1) ? "message" : "messages";
            var n = new Notification(
                        total + ' new ' + plural,
                        {
                            'body': 'GroupMe',
                            'tag' : fiveMinuteLimit
                        }
                    );
            n.onclick = function() {
                this.close();
            };
        }
    }
    var lastMention = $('.message.mention:last-of-type');
    if (lastMention.attr('data-timestamp') !== lastTimestamp) {
        var currentMinute = new Date(Math.round((new Date()).getTime() / (1000 * 60)) * (1000 * 60));
        var mentionedBy = $('.text .nickname',lastMention).text();
        var mentionedMessage = $('.text .body',lastMention).text();
        var nb = new Notification(
                    mentionedBy,
                    {
                        'body': mentionedMessage,
                        'tag' : currentMinute
                    }
                );
        nb.onclick = function() {
            this.close();
        };
        lastTimestamp = lastMention.attr('data-timestamp');
    }
    oldTotal = total;
}

function fixTooltips() {
    $.each($('.favorites .tooltip.right.in'),function(i,el) {
        $(el).removeClass('right').addClass('left').css('left',0-10-$(el).width());
        $('.liker',el).css('overflow-x','hidden').css('text-overflow','ellipsis');
    });
}

GroupMe-userstyle.css

Makes GroupMe work better in smaller windows, less bulky.

/*
    Allow: *groupme.com/groups/*
    works with:
        * Fluid.app http://fluidapp.com
        * User CSS http://code.grid.in.th
        * and other userstyles browser extensions
*/
* {
    font-family: "Avenir Next", "Helvetica Neue" !important;
    font-weight: 400 !important;
}
h1, h2, h3, h4, h5, h6, strong, b, .heading, .navbar .nav li.recently-active a, a.group-create, .group-list .group_name {
    font-weight: 500 !important;
}
.navbar-fixed-top .container,
.navbar-fixed-bottom .container,
#page.container,
#chat-messages.span9,
#chat-input.span9,
#chat-compose .mousetrap {
    min-width: 320px !important;
    width: 100% !important;
}
#nav-bar .brand img,
#feedback,
#chat-compose .avatar,
#chat-compose a#attach-picture-link {
    display: none !important;
    background-color: transparent !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
}
body {
    padding-top: 45px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.navbar-fixed-top .navbar-inner {
    padding: 0px !important;
}
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
    padding-left: 10px;
    padding-right: 10px;
}
.navbar .nav li a.brand {
    padding: 0 4px 0 20px !important;
}
#chat-input {
    padding: 3px 0 !important;
}
#chat-input textarea {
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    position: relative !important;
    top: 22px !important;
    height: 70px !important;
}
#typing {
    margin-top: 6px !important;
    margin-left: 10px !important;
}
#chat-messages .favorite {
    float: right !important;
}
img.avatar {
    border-radius: 100px !important;
    border: 0 none transparent !important;
}
#chat-messages .message.me {
    background: #fcfcfc !important;
}
.navbar-inner {
    background: #f0f0f0 !important;
}
.navbar .nav li.recently-active.current a {
    background: #a4a4a4 !important;
    color: #fff !important;
}
.navbar .nav li.recently-active a:hover {
    background: #cecece !important;
    color: #fff !important;
}
.navbar .nav li > a {
    color: #363636 !important;
    text-shadow: none !important;
}
.navbar .nav li.profile > a {
    color: #b0b0b0 !important;
    text-shadow: none !important;
}
.dropdown b.caret {
    border-top-color: #b0b0b0 !important;
    border-bottom-color: #b0b0b0 !important;
}
#chat-messages .avatar.gutter {
    width: 38px !important;
    margin-right: 10px !important;
}
.nav.pull-right {
    float: right !important;
}
.navbar-fixed-top, .navbar-fixed-bottom {
    margin-right: 0 !important;
    margin-left: 0 !important;
}
#nav-bar {
    opacity: 0;
    -webkit-transition:all 200ms ease-in-out !important;
    -moz-transition:all 200ms ease-in-out !important;
    -o-transition:all 200ms ease-in-out !important;
    transition:all 200ms ease-in-out !important;
}
#nav-bar:hover {
    opacity: 1 !important;
}
.modal-backdrop {
    background-color: #ffffff !important;
}
.lightbox-content {
    background-color: transparent !important;
    border: 0 none transparent !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}
.lightbox-content .lightbox-caption {
    color: #888 !important;
    background-color: rgba(255,255,255,.5) !important;
}
.tray-module .top {
    background: #a4a4a4 !important;
}
.buddy-list-container.minimized .top {
    background: #FFFFFF !important;
}
.buddy-list .content ul.members li a:hover {
    background: #f9f9f9 !important;
}
div#chat-sidebar-alerts,
#members-list,
#chat-sidebar .phone_number {
    display: none !important;
}
.group-avatar img {
        display: block !important;
}
.group-avatar .overlay {
    opacity: 0 !important;
}
#chat-sidebar {
        height: auto !important;
        top: 20px !important;
        margin: 0 !important;
        right: 0 !important;
        transform: scale(0.5) translateX(0px) translateY(-100px);
        -webkit-transform: scale(0.5) translateX(0px) translateY(-100px);
        opacity: 0 !important;
        -webkit-transition:all 200ms ease-in-out !important;
        -moz-transition:all 200ms ease-in-out !important;
        -o-transition:all 200ms ease-in-out !important;
        transition:all 200ms ease-in-out !important;
}
#chat-sidebar:hover {
        opacity: 1 !important;
        transform: scale(1) translateX(0px) translateY(0px);
        -webkit-transform: scale(1) translateX(0px) translateY(0px);
        z-index: 1040;
}
#chat-sidebar-gallery {
        width: 0px !important;
}
#chat-sidebar-gallery button {
        overflow: hidden !important;
        text-indent: 999em !important;
        background-color: transparent !important;
        box-shadow: none !important;
        position: relative !important;
        margin: -65px 0 0 0 !important;
        padding: 0px 10px 14px 25px !important;
}
body.galleryShow {
    padding-top: 0 !important;
}
body.galleryShow #nav-bar {
    display: none !important;
}
body.galleryShow #nav-overlay,
body.galleryShow #gallery-scroll {
    top: 0 !important;
}