Geeklist Tweaks

Various tweaks to improve BGG (boardgamegeek.com).

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name       Geeklist Tweaks
// @namespace  tequila_j-script
// @version    0.8.3
// @description  Various tweaks to improve BGG (boardgamegeek.com). 
// 
// @match      https://boardgamegeek.com/geeklist/*
// @match      https://www.boardgamegeek.com/geeklist/*
// @match      http://boardgamegeek.com/geeklist/*
// @match      http://www.boardgamegeek.com/geeklist/*
// @require	https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
// @require https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js
// @grant    GM_addStyle
// ==/UserScript==


function isMobileDevice() {
  var check = false;
  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
};

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;
	//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 3px;
	cursor: pointer;
}

div.t-nav-container span.fa-workaround {
	font-size: 16px;
	padding: 0px 3px;
	margin: 0px 2px;
	background-color: #090909;
	cursor: pointer;
	border-radius: 2px;
	color: white;
}

div.box-new-items:hover {
	opacity: 1;
}
div.box-new-items {
    position: fixed;
    bottom: 0px;
    /* height: 20px; */
    background-color: lightgray;
    right: 7px;
    font-size: x-small;
    padding: 2px 5px;
    border-radius: 3px;
    opacity: 0.7;
}

a.tj_geeklist-number {
  position: relative;
}

div.tj_url-copy-helper {
  position: absolute;
  display:none;
  background-color: rgba(120,120,180,0.4);
  color: black;
  border-radius: 3px;
  padding: 3px;
  right: -18px;
  top: -14px;
}

a.tj_geeklist-number:hover div.tj_url-copy-helper {
  display:block;
}

div.geekitem_flash_info {
  position: fixed;
  top:50px;
  left: 0;
  right:0;
  opacity: 0.9;
  background: #d0cece;
}

`);


if (isMobileDevice()) {
  console.debug("Mobile View");
  GM_addStyle(`
  div.t-nav-container span.fa {
    font-size: 28px;
    padding: 0px 15px;
    marging: 0px 7px;
    cursor: pointer;
  }
  div.t-nav-container span.fa-workaround {
    font-size: 28px;
    padding: 0px 15px;
    marging: 0px 7px;
    cursor: pointer;
  }
`);
}

var __tj = {
  'gap' : -75,
  show_gotosubbed: false
}



function urlParam(param) {
  var vars = {};
  window.location.href.replace(location.hash, '').replace(
    /[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
    function (m, key, value) { // callback
      vars[key] = value !== undefined ? value : '';
    }
  );

  if (param) {
    return vars[param] ? vars[param] : null;
  }
  return vars;
}

function insertParam(key, value, url) {
  key = escape(key); value = escape(value);
  var hash = url.substring(url.indexOf("#"));
  var localurl = url.substring(0, url.indexOf("#"));
  var urlparts = localurl.split('?');
  var resultquerystring = "";

  if (urlparts.length <= 1) { //there isn't a query string
    resultquerystring += '?' + key + '=' + value;
  }
  else { //there is query strings
    var pairs = urlparts[1].split("&");
    for (var i = 0; i < pairs.length; i++) {
      var t = pairs[i].split('=');
      if (t[0] == key) {
        if (value) {
          t[1] = value;
          pairs[i] = t.join('=');
        }
        else
          pairs[i] = t[0];
        break;
      }
    }
    //this will reload the page, it's likely better to store this until finished
    resultquerystring = pairs.join('&');
  }
  return urlparts + resultquerystring + hash;
}


$(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">'
//  );

  //Crete a container to display geekitem
  var $geekintemflash = $('<div class="geekitem_flash_info"></div>');
  $('body').append($geekintemflash);

  function displayGeekItemHeader(event, element) {
    $geekintemflash.finish().hide();
    event.preventDefault();
    //geeklists has class mb5, so, we ignore then
    console.log($(element).attr('class'));
    if ($(element).parent().hasClass('mb5')) return true; //this is a geekitem list, we do not need to show anything
    //display geekitem title
    var $element = $(element);
    var gl = $element.parents('div.mb5').find('div.geeklist_item_title:first');
    if (typeof gl === undefined) return true;
    
    $geekintemflash.html($(gl).clone());
    $geekintemflash.show().delay(3000).fadeOut('fast');
	}

  $(document).on( "scrollFinished",displayGeekItemHeader);



  //add a parameter to geeklist items so you can have no auto scroll between people that uises the script
  // also, put a small icon to copy url
  $(".geeklist_item_title > .fl").each(function () {
    var $this = $(this);
    if ($this.children('a').length < 2) return true; //this is not a geeklist item in a geeklist , it is just a direct item (only shows this item in page)
    var $listNumber = $this.children('a:first');
    $listNumber.addClass("tj_geeklist-number");
    var url = $listNumber.attr('href');
    var newurl = insertParam('__ns', 't', url);
    $listNumber.attr('href', newurl);
    var copyLink = $('<div class="tj_url-copy-helper"><i class="fa fa-files-o" aria-hidden="true"></i></div>');
    copyLink.attr('data-clipboard-text', $listNumber[0].href);
    copyLink.click(function (event) { event.preventDefault() });
    $listNumber.append(copyLink);
    new Clipboard(copyLink[0]);//convert jquery to htmlelemnt
  });


  //lets find items, excluding multiple comments
  var firstItems = [];
  var nonFirstItems = [];

  var geekItems = $('div.mb5');
  var geekSubbedPosition = -1;

  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";
      geekSubbedPosition = firstItems.length - 1
    }
    if (newSI.length > 1 && firstIsGeekItem) {
      firstItems.push(newSI[1])
      geekSubbedPosition = firstItems.length - 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]);
    geekSubbedPosition = firstItems.length - 1;
    //    console.log("New page comments also ");
  }

  //  console.log("Size: " + firstItems.length);

var iconUp = $('<span class="fa-workaround">&lt;&lt;</span>');
var iconDown = $('<span class="fa-workaround">&gt;&gt;</span>');
var iconNew = $('<span class="fa fa-ellipsis-h" 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 new
    if (__tj.show_gotosubbed) {
      if (!$(firstItems[index]).hasClass('subbed_selected')) {
        var upI = iconNew.clone();
        upI.click(function () {
          $( document ).trigger( "scrollFinished", [ firstItems[geekSubbedPosition ] ]);
          $("html, body").animate({ scrollTop: $(firstItems[geekSubbedPosition]).offset().top + __tj.gap }, "fast");
          console.log("subbed");
          return false;
        });
        iconContainer.append(upI);
      } else {
        iconContainer.append(iconNew.clone().css('visibility', 'hidden'));
      }
    }

    //go up
    if (index != 0) {
      var upI = iconUp.clone();
      upI.click(function () {
        $( document ).trigger( "scrollFinished", [ firstItems[index - 1] ] );        
        $("html, body").animate({ scrollTop: $(firstItems[index - 1]).offset().top + __tj.gap }, "fast");
        console.log("up");
        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 () {
        $( document ).trigger( "scrollFinished", [ firstItems[index + 1] ] );
        $("html, body").animate({ scrollTop: $(firstItems[index + 1]).offset().top + __tj.gap }, "fast");
        console.log("down");
        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 && urlParam("__ns") == null) {
    $("html, body").scrollTop($(firstItems[0]).offset().top + __tj.gap);
    $( document ).trigger( "scrollFinished", [ $(firstItems[0]) ] );
  } else {
    $( document ).trigger( "scrollFinished", [ $(selectedUrlItem) ] );
  }

    

  //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);

});