Merge pull request #949 from haskell/wip/new-ocean

Introduce NewOcean theme.

1 files changed, 126 insertions, 0 deletions

diff --git a/haddock-api/resources/html/js-src/style-menu.tsx b/haddock-api/resources/html/js-src/style-menu.tsx
new file mode 100644
index 00000000..bab840ca
--- /dev/null
+++ b/haddock-api/resources/html/js-src/style-menu.tsx
@@ -0,0 +1,126 @@
+// 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;
+
+function spaced(s: string) { return (" " + s + " ").replace(rspace, " "); }
+function trim(s: string)   { return s.replace(rtrim, ""); }
+
+function hasClass(elem: Element, value: string) {
+  const className = spaced(elem.className || "");
+  return className.indexOf( " " + value + " " ) >= 0;
+}
+
+function addClass(elem: Element, value: string) {
+  const className = spaced(elem.className || "");
+  if ( className.indexOf( " " + value + " " ) < 0 ) {
+    elem.className = trim(className + " " + value);
+  }
+}
+
+function removeClass(elem: Element, value: string) {
+  let className = spaced(elem.className || "");
+  className = className.replace(" " + value + " ", " ");
+  elem.className = trim(className);
+}
+
+function toggleClass(elem: Element, valueOn: string, valueOff: string, bool?: boolean): boolean {
+  if (bool == null) { bool = ! hasClass(elem, valueOn); }
+  if (bool) {
+    removeClass(elem, valueOff);
+    addClass(elem, valueOn);
+  }
+  else {
+    removeClass(elem, valueOn);
+    addClass(elem, valueOff);
+  }
+  return bool;
+}
+
+function makeClassToggle(valueOn: string, valueOff: string): (elem: Element, bool?: boolean) => boolean {
+  return function(elem, bool) {
+    return toggleClass(elem, valueOn, valueOff, bool);
+  }
+}
+
+const toggleShow = makeClassToggle("show", "hide");
+
+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 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);
+  }
+}
+
+function setActiveStyleSheet(title: string) {
+  const as = styles();
+  let found: null | HTMLLinkElement = null;
+  for(let i = 0; i < as.length; i++) {
+    const a = as[i];
+    a.disabled = true;
+          // need to do this always, some browsers are edge triggered
+    if(a.title == title) {
+      found = a;
+    }
+  }
+  if (found) {
+    found.disabled = false;
+    setCookie("haddock-style", title);
+  }
+  else {
+    as[0].disabled = false;
+    clearCookie("haddock-style");
+  }
+}
+
+function resetStyle() {
+  const s = getCookie("haddock-style");
+  if (s) setActiveStyleSheet(s);
+}
+
+function styleMenu(show?: boolean) {
+  const m = document.getElementById('style-menu');
+  if (m) toggleShow(m, show);
+}
+
+export function init() {
+  addStyleMenu();
+  resetStyle();
+}