FetLife Feed Picture Lightbox Viewer

Allows you to view feed pictures in a lightbox and includes keyboard shortcuts (left/right arrow, l for like, escape to close)

/**
 */
// ==UserScript==
// @name           FetLife Feed Picture Lightbox Viewer
// @version        1.0
// @namespace      https://fetlife.com
// @description    Allows you to view feed pictures in a lightbox and includes keyboard shortcuts (left/right arrow, l for like, escape to close)
// @include        https://fetlife.com/home
// @grant          GM_log
// @grant          GM_xmlhttpRequest
// @grant          GM_addStyle
// ==/UserScript==

GM_addStyle('\
#gm_lightbox { position: fixed; display: none; width: 100%; height: ' + window.innerHeight + 'px; top: 0; left: 0; background-color: rgba(206, 206, 206, 0.51); }\
#gm_lightbox .gm_container { height: 85%; margin: 30px; padding: 20px; box-sizing: border-box; background-color: #0e0e0e; border-radius: 10px; }\
#gm_lightbox .gm_container .clear { clear:both; }\
#gm_lightbox .gm_container .top { }\
#gm_lightbox .gm_container .top .gallery .gm_current img { background-color: #949494; }\
#gm_lightbox .gm_container hr { margin: 10px 0; }\
#gm_lightbox .gm_container .left { float: left; width: 33%; }\
#gm_lightbox .gm_container .left .caption { margin-top: 20px; clear: both; padding: 10px; background-color: #2b2b2b; }\
#gm_lightbox .gm_container .right { height: 80%; margin-left: 35%; }\
\
#gm_lightbox .gm_container .love { position: relative; display: inline-block; border: 1px solid #888; padding: 7px 12px; background-color: #111; color: #111; font-weight: bold;\
text-decoration: none; text-align: center; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 1px 0 rgba(255,255,255,0.3);\
cursor: pointer; background-image: -webkit-linear-gradient(top, #272727, #030303); color: #DDD; border-color: #171717; }\
#gm_lightbox .gm_container .love .picto { font-family: "Pictos"; line-height: 0; }\
#gm_lightbox .gm_container .love .picto.red { color: #A00; }\
');

(function() {
    'use strict';

    $('body #maincontent').append('<div id="gm_lightbox"><div class="gm_container">\
<div class="top"><div class="gallery"></div></div>\
<div class="clear"></div><hr>\
<div class="left"><a class="love btnsqr dark"><span class="picto pu2">k</span> Love</a><div class="caption"></div></div>\
<div class="right"><div class="img"></div></div>\
</div></div>');

    var $currentImg = {};
    var $lightbox = $('#gm_lightbox');
    var $gallery = $('#gm_lightbox .top .gallery');
    var $caption = $('#gm_lightbox .left .caption');
    var $love = $('#gm_lightbox a.love .picto');

    // hide lightbox when clicking outside
    $(document).click(function(event) {
        if($(event.target).attr('id') == 'gm_lightbox') {
            hideLightbox();
        }
    });

    $('#stories').on('click', '.story a[href*=pictures]', function(e) {
        e.preventDefault();

        $(this).addClass('gm_current');
        $lightbox.find('.gallery').html($(this).parent().html());

        loadImage($(this).attr('href'));
    });

    $lightbox.on('click', 'a.love', function(e) {
        e.preventDefault();

        loveImage();
    });

    $gallery.on('click', 'a[href*=pictures]', function(e) {
        e.preventDefault();

        if ($(this).hasClass('gm_current')) {
            return;
        }

        $gallery.find('a.gm_current').removeClass('gm_current');
        $(this).addClass('gm_current');

        loadImage($(this).attr('href'));
    });

    $(document).keyup(function(e) {
        if (e.keyCode == 27) { // escape key
            hideLightbox();
        } else if (e.keyCode == 37) { // left key
            setGalleryImage($gallery.find('.gm_current'), $gallery.find('.gm_current').prev());
        } else if (e.keyCode == 39) { // right key
            setGalleryImage($gallery.find('.gm_current'), $gallery.find('.gm_current').next());
        } else if (e.keyCode == 76) { // l key
            loveImage();
        }
    });

    function loadImage(link) {
        GM_xmlhttpRequest({
            'method': 'GET',
            headers: {
                "Accept": "application/json"
            },
            'url': 'https://fetlife.com' + link,
            'onload': function (response) {
                $currentImg = JSON.parse(response.responseText);

                $lightbox.find('.img').html('<img src="' + $currentImg.image_url + '"/>');
                showLightbox();

                // set caption
                $caption.html(($currentImg.caption == '') ? '<em>No caption</em>' : $currentImg.caption);

                // set love button
                if ($currentImg.current_user_loves_this && !$love.hasClass('red')) {
                    $love.addClass('red');
                } else if (!$currentImg.current_user_loves_this && $love.hasClass('red')) {
                    $love.removeClass('red');
                }
            }
        });
    }

    function setGalleryImage(currentImg, newImg) {
        if (newImg.length == 0) {
            return;
        }

        currentImg.removeClass('gm_current');
        newImg.addClass('gm_current');

        loadImage(newImg.attr('href'));
    }

    function loveImage() {
        GM_xmlhttpRequest({
            'method': 'POST',
            headers: {
                "Accept": "application/json",
                "x-csrf-token": $('meta[name="csrf-token"]').attr('content'),
                "x-requested-with": "XMLHttpRequest"
            },
            'url': $currentImg.toggle_love_status_url,
            'onload': function (response) {
                if (response.status == 200) {
                    $love.toggleClass('red');
                }
                else {
                    alert('An error occured with the request');
                }
            }
        });
    }

    function hideLightbox() {
        $lightbox.hide();
        $('nav.fl-nav').show();
    }
    function showLightbox() {
        $lightbox.show();
        $('nav.fl-nav').hide();

        var height = $lightbox.find('.right').height();
        $lightbox.find('.right img').css('max-height', height+'px');
    }
    function toggleLightbox() {
        if ($lightbox.css('display') == 'block') {
            hideLightbox();
        }
        else {
            showLightbox();
        }
    }
})();