FFXIV Store better links

fix-ffxiv-store-links.user.js

// ==UserScript==
// @name         FFXIV Store better links
// @description  Make FFXIV's store item cards actual links to help navigation
// @icon         https://www.google.com/s2/favicons?domain=finalfantasyxiv.com
//
// @author       jjspace
// @namespace    https://github.com/jjspace
// @downloadURL  https://gist.github.com/jjspace/0feb636d5c8ea6e0f8b65d95d0f240f6/raw/fix-ffxiv-store-links.user.js
//
// @version      0.3
// @updateURL    https://gist.github.com/jjspace/0feb636d5c8ea6e0f8b65d95d0f240f6/raw/fix-ffxiv-store-links.user.js
//
// @match        https://store.finalfantasyxiv.com/ffxivstore/*
//
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  // Some debugging tools
  const DEBUG = false;
  const group = (label) => {if (DEBUG) console.group(label);}
  const groupEnd = (label) => {if (DEBUG) console.groupEnd(label);}
  const log = (...args) => {if (DEBUG) console.log(...args);}

  // Call a function when the target changes
  // function is also called when first linked
  // pass in a function to the third argument to decide whether to ignore a mutation
  const updateOnMutate = (target, callback, ignoreMutation = (mutationTarget) => false) => {
    callback();

    const mutationCallback = (mutationsList, observer) => {
      log('mutation Triggered', target.className);
      mutationsList.forEach(mutation => {
        // only react to a change on the whole list
        if (ignoreMutation(mutation.target)) return;
        if (mutation.type === 'childList') {
          log('childlist mutation', mutation);
          callback();
        }
        else if (mutation.type === 'subtree') {
          log('subtree mutation');
        }
      })
    }

    const observer = new MutationObserver(mutationCallback);
    observer.observe(target, {childList: true, subtree: true});
    log('observer listening', target.className);

  }

  function fixItemLinks() {
    log('fixItemLinks called')

    const { pathname } = window.location;
    if (pathname.includes('ranking')) {
      // the ranking page uses different cards with the vue object at a higher level
      log('on ranking page, special behavior');

      const itemList = document.querySelector('.item-ranking-list')
      if (!itemList || !itemList.__vue__) {
        log('item list not found');
        return;
      }
      const { products } = itemList.__vue__;

      // alter the list click event handler function
      // I couldn't figure out where the event handler is actually attached to $off it
      itemList.__vue__.clickItemCard = () => {}

      document.querySelectorAll('.item-card').forEach((item, index) => {
        // set the a tag's href so normal interactions can take over
        item.href = `/ffxivstore/en-us/product/${products[index].id}`
        item.rel = 'noreferrer';
        // highlight effected items when debugging
        if (DEBUG) item.style.border = '1px solid red';
      });

      return;
    }

    document.querySelectorAll('.item-card').forEach(item => {
      // remove the click handler in vue to navigate
      // this could be removing some analytics logic which SE may not like...
      item.__vue__.$off('click-item-card')

      // set the a tag's href so normal interactions can take over
      item.href = `/ffxivstore/en-us/product/${item.__vue__.item.id}`
      item.rel = 'noreferrer';
      // highlight effected items when debugging
      if (DEBUG) item.style.border = '1px solid red';
    });
  }

  // set up an observer so we can react to new cards when clicking "Show more" or the list is filtered
  // Probably want to add a filter to ignore some mutations but this works for now
  const observeTarget = document.querySelector('.main');
  updateOnMutate(
    observeTarget,
    fixItemLinks,
  );

  log('FFXIV Store better links loaded');

})();