Resurrect the style-switcher

This fixes #810. Looks like things were broken during the quickjump
refactor of the JS.

For the (git) record: I do not think the style switcher is a good idea.
I'm fixing it for the same reason @mzero added it; as an answer to

  "rumblings from some that they didn't want their pixels changed on bit"

haddock-api/resources/html/Classic.theme/xhaddock.css

@@ -153,6 +153,7 @@ div#style-menu-holder {
 	text-align: center;
 	right: 0;
 	padding: 2px 2px 1px;
+	top: 1.25em;
 }
 
 #style-menu li {

haddock-api/resources/html/NewOcean.std-theme/new-ocean.css

@@ -138,6 +138,7 @@ body.js-enabled .hide-when-js-enabled {
       white-space: nowrap;
       height: 40px;
       padding: 4px 1.5em 0px 1.5em;
+      overflow: visible;
 
       display: flex;
       justify-content: space-between;
@@ -336,7 +337,7 @@ ul.links li {
   padding: 0;
 }
 
-ul.links li + li:before {
+ul.links > li + li:before {
   content: '\00B7';
 }
 
@@ -428,7 +429,6 @@ pre + pre {
   font-size: 1.2em;
   text-align: left;
   margin: 0 auto;
-  overflow: hidden;
 }
 
 #package-header .caption {
@@ -480,16 +480,17 @@ div#style-menu-holder {
 }
 
 #style-menu li {
-	display: list-item;
+	display: inline-block;
 	border-style: none;
 	margin: 0;
 	padding: 0;
 	color: #000;
 	list-style-type: none;
+	border-top: 1px solid #919191
 }
 
 #style-menu li + li {
-	border-top: 1px solid #919191;
+	border-left: 1px solid #919191;
 }
 
 #style-menu a {

haddock-api/resources/html/js-src/style-menu.ts → haddock-api/resources/html/js-src/style-menu.tsx

 // Haddock JavaScript utilities
 
 import {getCookie, setCookie, clearCookie} from "./cookies";
+import preact = require("preact");
 
+const { h, Component } = preact;
 const rspace = /\s\s+/g,
     rtrim = /^\s+|\s+$/g;
 
@@ -47,34 +49,43 @@ function makeClassToggle(valueOn: string, valueOff: string): (elem: Element, boo
 
 const toggleShow = makeClassToggle("show", "hide");
 
-function addMenuItem(html: string) {
-  const menu = document.getElementById("page-menu");
-  if (menu && menu.firstChild) {
-    const btn = menu.firstChild.cloneNode(false) as Element;
-    btn.innerHTML = html;
-    menu.appendChild(btn);
-  }
-}
-
 function styles(): HTMLLinkElement[] {
   const es = Array.prototype.slice.call(document.getElementsByTagName("link"));
   return es.filter((a: HTMLLinkElement) => a.rel.indexOf("style") != -1 && a.title);
 }
 
+class StyleMenuButton extends Component<any, any> {
+
+  render(props: { stys: string[] }) {
+    function action() {
+      styleMenu();
+      return false;
+    };
+
+    return <li><div id='style-menu-holder' onClick={action}>
+      <a href='#'>Style &#9662;</a>
+      <ul id='style-menu' class='hide'>
+        {props.stys.map((sty) => {
+              function action() {
+                setActiveStyleSheet(sty);
+                return false;
+              };
+
+              return <li><a href='#' onClick={action}>{sty}</a></li>;
+        })}
+      </ul>
+    </div></li>;
+  }
+
+}
+
 function addStyleMenu() {
-  const as = styles();
-  let btns = "";
-  as.forEach((a) => {
-    btns += "<li><a href='#' onclick=\"setActiveStyleSheet('"
-      + a.title + "'); return false;\">"
-      + a.title + "</a></li>"
-  });
-  if (as.length > 1) {
-    const h = "<div id='style-menu-holder'>"
-      + "<a href='#' onclick='styleMenu(); return false;'>Style &#9662;</a>"
-      + "<ul id='style-menu' class='hide'>" + btns + "</ul>"
-      + "</div>";
-    addMenuItem(h);
+  const stys = styles().map((s) => s.title);
+  if (stys.length > 1) {
+    const pageMenu = document.querySelector('#page-menu') as HTMLUListElement;
+    const dummy = document.createElement('li');
+    pageMenu.appendChild(dummy);
+    preact.render(<StyleMenuButton stys={stys} title="Style"/>, pageMenu, dummy);
   }
 }
 
@@ -97,7 +108,6 @@ function setActiveStyleSheet(title: string) {
     as[0].disabled = false;
     clearCookie("haddock-style");
   }
-  styleMenu(false);
 }
 
 function resetStyle() {
@@ -113,4 +123,4 @@ function styleMenu(show?: boolean) {
 export function init() {
   addStyleMenu();
   resetStyle();
-}
\ No newline at end of file
+}