SB100 / GGn Custom Web Links

// ==UserScript==
// @namespace    https://openuserjs.org/users/SB100
// @name         GGn Custom Web Links
// @description  Allows you to add custom weblinks to torrent pages
// @updateURL    https://openuserjs.org/meta/SB100/GGn_Custom_Web_Links.meta.js
// @version      1.1.1
// @author       SB100
// @copyright    2021, SB100 (https://openuserjs.org/users/SB100)
// @license      MIT
// @include      https://gazellegames.net/torrents.php?*id=*
// ==/UserScript==

// ==OpenUserJS==
// @author SB100
// ==/OpenUserJS==

/* jshint esversion: 6 */

/*
 * BEGIN SETUP!
 *
 * For each new web link that you would like to add, please add an object with the following format:
 * {
 *   name: 'The name of the web link',
 *   iconUrl: 'A link to the icon you'd like to show in the weblink panel',
 *   searchUrl: 'The search url to use against the main game title. The variable ${TITLE} will be replaced with the actual title, so make sure to include this somewhere in the url',
 *   searchAliasUrl: 'The search url to use with any aliases that the game lists. This is useful for games that have a name in another language, and require a different search url'
 * }
 *
 * All of the keys are case sensitive, so please pay close attention to how you spell them out.
 * If the game has any aliases listed, a popup will appear when you hover over the box itself, with extra links using the searchAliasUrl url instead
 */
const CONFIG = [{
  name: 'Amazon',
  iconUrl: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Amazon_icon.png',
  searchUrl: 'https://www.amazon.com/s?k=${TITLE}',
  searchAliasUrl: 'https://www.amazon.com/s?k=${TITLE}',
}];

/*
 * END SETUP!
 * DO NOT MODIFY BELOW THIS LINE
 */

/**
 * Gets the game title from the title tag and cleans it up
 */
function getGameTitle() {
  const matches = document.title.match(/\-\s(.*?)\:\:/);
  return matches && matches[1] && matches[1].replace(/[^\w\d\s]/g, '').trim();
}

/**
 * Gets the game aliases, if they exist
 */
function getGameAliases() {
  const aliases = document.getElementById('group_aliases');
  const text = aliases && aliases.childNodes && Array.from(aliases.childNodes).find(node => node.nodeType === 3);
  return text && text.textContent.split(',').map(t => t.trim());
}

/**
 * Creates the new icons in the weblinks box. If there are game aliases, it will create the popover too
 */
function createIcons(gameTitle, gameAliases) {
  const fragment = document.createDocumentFragment();

  CONFIG.forEach(c => {
    const a = document.createElement('a');
    a.href = c.searchUrl.replace('${TITLE}', encodeURI(gameTitle));
    a.title = c.name;
    a.target = '_blank';
    a.rel = 'noopener noreferrer';
    a.style.position = 'relative';

    const div = document.createElement('div');
    div.classList.add('weblinks', 'tilt');
    div.style.backgroundImage = `url(${c.iconUrl})`;

    a.appendChild(div);

    if (gameAliases && gameAliases.length > 0) {
      a.classList.add('has-weblink-popover');

      const popupDiv = document.createElement('div');
      popupDiv.classList.add('weblink-popover');

      popupDiv.innerHTML = `<ul style='display: inline-block; margin: 0; padding: 0; text-align: left;'>
  ${gameAliases.map(g => `<li style='display: inline-block; line-height: 20px; white-space: nowrap; width: 100%;'>
    <a href='${c.searchAliasUrl.replace('${TITLE}', encodeURI(g))}' target='_blank' rel='noopener noreferrer'>${g}</a>
  </li>`).join(' ')}
</ul>`

      a.appendChild(popupDiv);
    }

    fragment.appendChild(a);
  });

  document.getElementById('weblinksdiv').querySelector('.body').appendChild(fragment);
}

/**
 * Creates css that powers the popover appearing when you hover over a weblink that has aliases
 */
function createStyleTag() {
  const css = `.weblink-popover {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  border-radius: 5px;
  padding: 7px;
  background-color: #0e0e0e;
  z-index: 2;
}

.has-weblink-popover:hover .weblink-popover {
  display: block;
}`;

  const style = document.createElement('style');
  style.type = 'text/css';
  style.appendChild(document.createTextNode(css));

  document.head.appendChild(style);
}

// runs the script. If no title is found, we don't create extra tags
(function () {
  'use strict';

  const gameTitle = getGameTitle();
  const gameAliases = getGameAliases();

  if (!gameTitle) {
    console.log('[GGn Custom Web Links], No Game Title Found, not adding extra web links');
    return;
  }

  createStyleTag();
  createIcons(gameTitle, gameAliases);
})();