From a69311708493efe8524aed0e9d19365f79f2fab3 Mon Sep 17 00:00:00 2001 From: Alec Theriault Date: Wed, 24 Oct 2018 17:31:09 -0700 Subject: 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/js-src/style-menu.ts | 116 --------------------- haddock-api/resources/html/js-src/style-menu.tsx | 126 +++++++++++++++++++++++ 2 files changed, 126 insertions(+), 116 deletions(-) delete mode 100644 haddock-api/resources/html/js-src/style-menu.ts create mode 100644 haddock-api/resources/html/js-src/style-menu.tsx (limited to 'haddock-api/resources/html/js-src') diff --git a/haddock-api/resources/html/js-src/style-menu.ts b/haddock-api/resources/html/js-src/style-menu.ts deleted file mode 100644 index 3911655b..00000000 --- a/haddock-api/resources/html/js-src/style-menu.ts +++ /dev/null @@ -1,116 +0,0 @@ -// Haddock JavaScript utilities - -import {getCookie, setCookie, clearCookie} from "./cookies"; - -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 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); -} - -function addStyleMenu() { - const as = styles(); - let btns = ""; - as.forEach((a) => { - btns += "
  • " - + a.title + "
    • " - }); - if (as.length > 1) { - const h = "
    " - + "Style ▾" - + "" - + "
    "; - addMenuItem(h); - } -} - -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"); - } - styleMenu(false); -} - -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(); -} \ No newline at end of file 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 { + + render(props: { stys: string[] }) { + function action() { + styleMenu(); + return false; + }; + + return
  • + Style ▾ +
      + {props.stys.map((sty) => { + function action() { + setActiveStyleSheet(sty); + return false; + }; + + return
    • {sty}
      • ; + })} +
    +
    • ; + } + +} + +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(, 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(); +} -- cgit v1.2.3