Geeklist Tweaks

Various tweaks to improve BGG.

As of 2016-09-19. See the latest version.

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name       Geeklist Tweaks
// @namespace  tequila_j-script
// @version    0.5.2
// @description  Various tweaks to improve BGG. 
// 
// @match      https://boardgamegeek.com/geeklist/*
// @match      https://www.boardgamegeek.com/geeklist/*
// @match      http://boardgamegeek.com/geeklist/*
// @match      http://www.boardgamegeek.com/geeklist/*
// @require	http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==

  
GM_addStyle("\
div.t-nav-container {\
	position: absolute;\
	//top: 0px;\
	//right: -35px;\
	top: -2px;\
	right: 0px;\
    background-color: rgba(120,120,180,0.4);\
    border-radius: 5px;\
    //opacity: 0.5;\
	width: 36px;\
	//height: 50px;\
	text-align: center;\
	padding: 3px 3px;\
	opacity: 0.4;\
}\
div.t-nav-container:hover {\
    opacity: 0.95;\
}\
div.t-nav-container span.fa {\
	font-size: 16px;\
	padding: 0px 2px;\
	cursor: pointer;\
}\
\
div.box-new-items:hover {\
	opacity: 1;\
}\
div.box-new-items {\
    position: fixed;\
    bottom: 0px;\
    /* height: 20px; */\
    background-color: lightgray;\
    right: 7px;\
    font-size: xx-small;\
    padding: 2px 5px;\
    border-radius: 3px;\
    opacity: 0.7;\
}\
.fa-caret-square-o-up::before {\
	content:\"\\21D1\";\
}\
.fa-caret-square-o-down:before {\
    content:\"\\21D3\";\
}\
");
            
$(document).ready(function() {
   'use strict';
    /*jshint multistr: true */
  
  $("head").append (
    '<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">'
  );
  
  //lets find items, excluding multiple comments
  var firstItems = [];
  var nonFirstItems = [];
  
  var geekItems = $('div.mb5');
  
  for (var i=0; i < geekItems.length; i++)  {
    var thisGI = $(geekItems[i]);
    var newSI = thisGI.find('div.subbed_selected,div.subbed');
    var firstIsGeekItem = false;
    if (newSI.length > 0) {
      var el = newSI[0];
      firstItems.push(newSI[0]);
      firstIsGeekItem = $(el).attr('data-objecttype') == "listitem";
    }
    if (newSI.length > 1 && firstIsGeekItem) {
      firstItems.push(newSI[1])
    }
  }
  
//  console.log('New items in geeklists:' + firstItems.length);
  
  //we will try to find comments at the end of the page also
  var pageComments = $('div.mb5:first').parent().children('div:not(.mb5)').find('div.comment_ctrl').find('div.subbed_selected,div.subbed');
  console.log(pageComments);
  if (pageComments.length > 0) {
    firstItems.push(pageComments[0]);
//    console.log("New page comments also ");
  }
  
//  console.log("Size: " + firstItems.length);
  
  var iconUp = $('<span class="fa fa-caret-square-o-up" aria-hidden="true"></span>');
  var iconDown = $('<span class="fa fa-caret-square-o-down" aria-hidden="true"></span>');
  var iconBox = $('<div class="t-nav-container"></div>');
  
  
  
  	$(firstItems).each(function(index) {
    
    	var thisItem = $(this);
    
    	thisItem.css('position','relative');

    	var iconContainer = iconBox.clone();
    	thisItem.append(iconContainer);
      
        thisItem.find("dl.commentbody > dd.right").css("padding-right","40px");
    	//go up
    	if (index != 0) {
      		var upI = iconUp.clone();
    		upI.click(function () {
	      		$("html, body").animate({ scrollTop: $(firstItems[index - 1]).offset().top }, "fast");
				return false;
	    	});
	      	iconContainer.append(upI);
	      	
	    } else {
	      iconContainer.append(iconDown.clone().css('visibility','hidden'));
	    }
    
	    //go down
	    if (index != firstItems.length - 1) {
	      	var downI = iconDown.clone();
	    	downI.click(function () {
	      		$("html, body").animate({ scrollTop: $(firstItems[index + 1]).offset().top }, "fast");
				return false;
	    	});
	      	iconContainer.append(downI);
	    } else {
          iconContainer.append(iconUp.clone().css('visibility','hidden'));
        }
  
  	});
  
  	//lets see if this is a selected article (user clicked to see a subjetc, not new items). If not, We can scroll to the top of the list
  	if ($("div.article.selected").length == 0) {
      $("html, body").scrollTop($(firstItems[0]).offset().top);
    }
  
  	//puts a small box saying how many new items are here:
  	var news = $(document.createElement("div")).addClass("box-new-items");
  	$("body").append(news);
  	news.html("New items in this page: " + $('div.subbed_selected,div.subbed').length);
  
  
});