2 files changed, 36 insertions, 26 deletions

diff --git a/haddock-api/resources/html/js-src/quick-jump.tsx b/haddock-api/resources/html/js-src/quick-jump.tsx
index e64dae0b..20ff8e15 100644
--- a/haddock-api/resources/html/js-src/quick-jump.tsx
+++ b/haddock-api/resources/html/js-src/quick-jump.tsx
@@ -78,7 +78,7 @@ type QuickJumpState = {
   activeLinkIndex: number
   moduleResults: ResultsInModule[]
   failedLoading?: boolean
-  fuse: Fuse
+  fuse: Fuse<DocItem>
 }
 
 class QuickJump extends Component<QuickJumpProps, QuickJumpState> {
@@ -182,7 +182,7 @@ class QuickJump extends Component<QuickJumpProps, QuickJumpState> {
 
   updateResults() {
     const searchString = (this.input && this.input.value) || '';
-    const results: FuseResult<DocItem>[] = this.state.fuse.search(searchString);
+    const results: FuseResult<DocItem>[] = this.state.fuse.search(searchString) as any as FuseResult<DocItem>[];
 
     const resultsByModule: { [name: string]: FuseResult<DocItem>[] } = {};
 
diff --git a/haddock-api/resources/html/js-src/style-menu.ts b/haddock-api/resources/html/js-src/style-menu.tsx
index 3911655b..bab840ca 100644
--- a/haddock-api/resources/html/js-src/style-menu.ts
+++ b/haddock-api/resources/html/js-src/style-menu.tsx
@@ -1,7 +1,9 @@
 // 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
+}