A Tampermonkey Script for Bitbucket Wiki Viewer Extensions

Bitbucket Wiki Viewer Extensions.user.js

// ==UserScript==
// @name         Bitbucket Wiki Viewer Extensions
// @namespace    http://tampermonkey.net/
// @version      0.0.6
// @updateURL    https://gist.github.com/appetizermonster/3967520e271a69138e367e6de16bdfd5/raw/Bitbucket%2520Wiki%2520Viewer%2520Extensions.user.js
// @downloadURL  https://gist.github.com/appetizermonster/3967520e271a69138e367e6de16bdfd5/raw/Bitbucket%2520Wiki%2520Viewer%2520Extensions.user.js
// @description  Bitbucket Wiki Viewer Extensions
// @author       Heejin Lee
// @include      https://bitbucket.org/*/wiki/*
// @exclude      https://bitbucket.org/*/wiki/edit/*
// @exclude      https://bitbucket.org/*/wiki/browse/
// @exclude      https://bitbucket.org/*/wiki/create
// @exclude      https://bitbucket.org/*/wiki/create/*
// @require      https://code.jquery.com/jquery-2.2.4.min.js
// @require      http://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.0/raphael-min.js
// @require      http://flowchart.js.org/flowchart-latest.js
// @grant        none
// ==/UserScript==

(function () {
  'use strict';

  console.log('%c + Bitbucket Wiki Viewer Extensions by Heejin ', 'background: #eae; color: #aa00aa');

  installHashShortcut();
  installFlowchartExtension();

  $('body').ready(() => {
    if (location.hash)
      _scrollToElement(location.hash);
  });
})();

function installHashShortcut() {
  $('a').click((e) => {
    if (!e.target.hash)
      return;

    _scrollToElement(e.target.hash);
  });
}

function _scrollToElement(hash) {
  if (!hash)
    return;

  const targetId = hash.substring(1).toLowerCase(); // Remove # character
  const headerElems = $('[id^=\'markdown-header-\']');
  if (headerElems.length <= 0)
    return;

  for (let i = 0; i < headerElems.length; ++i) {
    const elem = $(headerElems[i]);
    const elemId = elem.text().replace(/\s+/g, '-').toLowerCase();
    if (elemId != targetId)
      continue;

    $('html, body').animate({
      scrollTop: elem.offset().top - 50
    }, 500);
    break;
  }
}

function installFlowchartExtension() {
  $('.codehilite.language-flow').each(function () {
    console.log('trying to parse flowchart');
    const flowSrc = $(this).children().text();
    $(this).children().remove();

    const canvasDiv = $('<div><br /></div>');
    const diagram = flowchart.parse(flowSrc);
    $(this).append(canvasDiv);

    diagram.drawSVG(canvasDiv.get(0));
  });
}