sane-lex/eur-lex/eur-lex_toc.user.js

// ==UserScript==
// @name        eur-lex toc
// @namespace   eur-lex
// @include     http://eur-lex.europa.eu/legal-content/EN/*
// @version     1
// @grant       none 
// ==/UserScript==

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '\
#the-toc-this-website-lacks {\
  position: fixed;\
  top: 0em;\
  left: 0em;\
  height: 100%;\
  overflow-y: auto;\
  direction: rtl;\
  white-space: nowrap;\
}\
#the-toc-this-website-lacks > button {\
  width: 100%;\
}\
#the-toc-this-website-lacks > div {\
  direction: ltr;\
  overflow-x: auto;\
  background-color: antiquewhite;\
  resize: both;\
}\
#the-toc-this-website-lacks li {\
  padding: 0.5em;\
  margin: 0.5em;\
  border-radius: 0.2em;\
}\
#the-toc-this-website-lacks h1 {\
  text-align: center;\
  font-size: x-large;\
  margin: 0.5em;\
}\
';

var toc = document.createElement('div');
var toc_ltr = document.createElement('div');
var visibility_button = document.createElement('button');
var h1_articles = document.createElement('h1');
var ol_articles = document.createElement('ol');
var h1_annexes = document.createElement('h1');
var ol_annexes = document.createElement('ol');

toc.style = "resize: both;";
var has_css_resize = (toc.style !== "");
toc.style = "";

h1_articles.textContent = 'Articles';
h1_annexes.textContent = 'Annexes';

var article_titles = document.evaluate("//div[@lang='EN']/p[@class='ti-art'][starts-with(text(), 'Article')]",
  document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

var annex_titles = document.evaluate("//div[@lang='EN']/div[@id]/p[1][@class='doc-ti'][starts-with(text(), 'ANNEX')]",
  document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

/* TODO: there are non-article and non-annex sections that should go in the TOC too. */

for (var i = 0; i < article_titles.snapshotLength; i++) {
  var id = article_titles.snapshotItem(i);
  var title = id.nextElementSibling;
  
  var n = id.textContent.replace(/Article /, '');
  
  id.id = 'article-' + n;
  
  var li = document.createElement('li');
  var a = document.createElement('a');
  a.href = '#' + id.id;
  a.textContent = title.textContent;
  li.appendChild(a);
  ol_articles.appendChild(li);
}

for (var i = 0; i < annex_titles.snapshotLength; i++) {
  var id = annex_titles.snapshotItem(i);
  var title = id.nextElementSibling;

  var n = id.textContent.replace(/ANNEX /, '');

  id.id = 'annex-' + n;

  var li = document.createElement('li');
  var a = document.createElement('a');
  a.href = '#' + id.id;
  a.textContent = title.textContent;
  li.appendChild(a);
  ol_annexes.appendChild(li);
}

visibility_button.textContent = "Toggle TOC";
toc.id = 'the-toc-this-website-lacks';

visibility_button.onclick = (function() {
  var visible = true;
  return function() {
    visible = ! visible;
    toc_ltr.style = visible ? "" : "height: 0px;";
  }
})();

if (! has_css_resize) {
  toc.appendChild(visibility_button);
}
if (article_titles.snapshotLength > 0) {
  toc_ltr.appendChild(h1_articles);
  toc_ltr.appendChild(ol_articles);
}
if (annex_titles.snapshotLength > 0) {
  toc_ltr.appendChild(h1_annexes);
  toc_ltr.appendChild(ol_annexes);
}
toc.appendChild(toc_ltr);
document.getElementsByTagName('body')[0].appendChild(toc);
document.getElementsByTagName('head')[0].appendChild(style);