Mark owned ScummVM Games

A simple aid for collecting ScummVM-supported games
Ekde 2016/06/10. Vidu La ĝisdata versio.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name        Mark owned ScummVM Games
// @namespace   ssokolow.com
// @description A simple aid for collecting ScummVM-supported games
// @license MIT
// @version     5
// @require     https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
//
// @match       *://scummvm.org/compatibility
// @match       *://scummvm.org/compatibility/*
// @match       *://www.scummvm.org/compatibility
// @match       *://www.scummvm.org/compatibility/*
//
// @compatible  firefox Developed and dogfooded under Greasemonkey.
// @compatible  chrome  Tested periodically under Tampermonkey.
//
// @grant       GM_setValue
// @grant       GM_getValue
// @grant       GM_deleteValue
// @grant       GM_listValues
// ==/UserScript==

const OWNED_OPACITY = 0.3;
var owned_games = GM_listValues();
GM_deleteValue('__SHOW_OWNED');
var hide_owned = GM_getValue('__HIDE_OWNED', false);

/// Code shared between initial setup and the click handler
var mark_owned = function(node, state) {
    var row = $(node).closest('tr');
    if (state) {
        row.css('opacity', OWNED_OPACITY).addClass('owned');
    } else {
        row.css('opacity', 1.0).removeClass('owned');
    }
};

/// click() handler for the per-game toggle button
var toggleOwnership = function(e) {
    //e.preventDefault();

    var $this = $(this);
    var game_id = $this.data('game_id');

    // Toggle based on what's displayed so that it will always act as the
    // user expects, regardless of changes since last reload
    if ($this.text() == '+') {
        $this.text('-');
        mark_owned($this, true);
        GM_setValue(game_id, true);
    } else {
        $this.text('+');
        mark_owned($this, false);
        GM_deleteValue(game_id);
    }
};

/// click() handler for the whole-table hide/show button
var toggleVisible = function(e) {
    $('tr.owned')[hide_owned ? 'show' : 'hide']();
    $(this).text(hide_owned ? '-' : '+');
    GM_setValue('__HIDE_OWNED', hide_owned = !hide_owned);
};

/// Shared code to generate a toggle button
var makeButton = function(initial_state, label) {
    return $('<div>', {title: label})
        .text(initial_state ? '+' : '-')
        .css({
            background: '#c0c0c0',
            borderRadius: 3,
            color: 'black',
            display: 'inline-block',
            marginRight: 5,
            paddingLeft: 2,
            paddingRight: 2,
            textAlign: 'center',
            width: '1em',
            cursor: 'pointer',
        })
};

// Per-entry code
$('.content a').each(function() {
    var $this = $(this);

    // Extract the game ID for use in record-keeping
    var url = $(this).attr('href').split('/');
    var game_id = url[url.length-1] ? url[url.length-1] : url[url.length-2];

    // Craft a button to toggle ownership status
    var $td = $this.parents('td');
    var togglebutton = makeButton(owned_games.indexOf(game_id) == -1,
                                  "Toggle Owned")
        .css('visibility', 'hidden')
        .data('game_id', game_id)
        .click(toggleOwnership)
        .prependTo($td);

    // On-hover display in a manner which won't reposition the game title
    $td.hover(function() { togglebutton.css('visibility', 'visible'); },
              function() { togglebutton.css('visibility', 'hidden'); });

    // TODO: Profile alternatives like an x|y|z regexp or a popping iteration
    if (owned_games.indexOf(game_id) !== -1){ mark_owned($this, true); }
});

// Global toggle-button code
var $g_button = makeButton(hide_owned, "Show/Hide Owned Games")
    .click(toggleVisible)
    .attr('id', 'gm_visible_toggle')
    .css({
        'position': 'relative',
        'margin-right': '-100%',
        'top': 14,
        'left': 0,
    }).prependTo('#content .content');

$g_button.data('pos_orig', $g_button.css('position'))
         .data('top_orig', $g_button.css('top'))
         .data('left_orig', $g_button.css('left'));

// Source: http://www.sitepoint.com/css-position-sticky-introduction-polyfills/
// TODO: Fix this for Firefox's new asynchronous panning
//  https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects
var btnOffset = $g_button.offset();
window.addEventListener('scroll', function() {
    if (window.pageYOffset >= btnOffset.top) {
        $g_button
            .css({
                'position': 'fixed',
                'top': 5,
                'left': btnOffset.left,
            });
    } else {
        $g_button.css({
            'position': $g_button.data('pos_orig'),
            'top': $g_button.data('top_orig'),
            'left': $g_button.data('left_orig'),
        });
    }
});

if (hide_owned) { $('tr.owned').hide(); }

var add_print_styles = function() {
    var print_stylesheet = "@media print { body, #container { " +
            " min-width: 0 !important; background: none !important; }\n" +
        " #header, #menu, #footer, #legal, " +
        " .tentacle, .intro, .rbtop, .rbbot, .colorKeyTable, " +
        " #gm_visible_toggle { " +
            " display: none !important; }\n" +
        " #container { width: inherit !important; }\n" +
        " #content, .rbcontent, .rbwrapper, .box { " +
            "margin: 0 !important; padding: 0 !important; " +
            "border: none !important }\n" +
        "}";

    $('<style media="print"></style>').html(print_stylesheet).appendTo('head');
};

// Inject a better print stylesheet to make "thrifting TODO" printouts easier
add_print_styles();