From e41c1cbe9f0476997eac7b4a3f17cbc6b2262faf Mon Sep 17 00:00:00 2001 From: Tim Baumann Date: Mon, 9 Oct 2017 18:33:09 +0200 Subject: Use
element for collapsibles (#690) * Remove unnecessary call to 'collapseSection' The call is unnecessary since there is no corresponding toggle for hiding the section of orphan instances. * Use
for collapsibles This makes them work even when JS is disabled. Closes #560. --- haddock-api/resources/html/js-src/cookies.ts | 20 +++ .../resources/html/js-src/details-helper.ts | 106 +++++++++++++ haddock-api/resources/html/js-src/haddock-util.ts | 173 --------------------- haddock-api/resources/html/js-src/init.ts | 9 +- haddock-api/resources/html/js-src/style-menu.ts | 116 ++++++++++++++ 5 files changed, 247 insertions(+), 177 deletions(-) create mode 100644 haddock-api/resources/html/js-src/cookies.ts create mode 100644 haddock-api/resources/html/js-src/details-helper.ts delete mode 100644 haddock-api/resources/html/js-src/haddock-util.ts create mode 100644 haddock-api/resources/html/js-src/style-menu.ts (limited to 'haddock-api/resources/html/js-src') diff --git a/haddock-api/resources/html/js-src/cookies.ts b/haddock-api/resources/html/js-src/cookies.ts new file mode 100644 index 00000000..3b68d6d8 --- /dev/null +++ b/haddock-api/resources/html/js-src/cookies.ts @@ -0,0 +1,20 @@ +export function setCookie(name: string, value: string) { + document.cookie = name + "=" + encodeURIComponent(value) + ";path=/;"; +} + +export function clearCookie(name: string) { + document.cookie = name + "=;path=/;expires=Thu, 01-Jan-1970 00:00:01 GMT;"; +} + +export function getCookie(name: string) { + const nameEQ = name + "="; + const ca = document.cookie.split(';'); + for (let i = 0; i < ca.length; i++) { + let c = ca[i]; + while (c.charAt(0)==' ') c = c.substring(1,c.length); + if (c.indexOf(nameEQ) == 0) { + return decodeURIComponent(c.substring(nameEQ.length,c.length)); + } + } + return null; +} \ No newline at end of file diff --git a/haddock-api/resources/html/js-src/details-helper.ts b/haddock-api/resources/html/js-src/details-helper.ts new file mode 100644 index 00000000..f13ac905 --- /dev/null +++ b/haddock-api/resources/html/js-src/details-helper.ts @@ -0,0 +1,106 @@ +import {getCookie} from "./cookies"; + +interface HTMLDetailsElement extends HTMLElement { + open: boolean +} + +interface DetailsInfo { + element: HTMLDetailsElement + openByDefault: boolean + toggles: HTMLElement[] +} + +// Global state +const detailsRegistry: { [id: string]: DetailsInfo } = {}; +const toggled: { [id: string]: true } = {}; /* stores which
are not in their default state */ + +function lookupDetailsRegistry(id: string): DetailsInfo { + const info = detailsRegistry[id]; + if (info == undefined) { throw new Error(`could not find
element with id '${id}'`); } + return info; +} + +function onDetailsToggle(ev: Event) { + const element = ev.target as HTMLDetailsElement; + const id = element.id; + const info = lookupDetailsRegistry(id); + const isOpen = info.element.open; + for (const toggle of info.toggles) { + if (toggle.classList.contains('details-toggle-control')) { + toggle.classList.add(isOpen ? 'collapser' : 'expander'); + toggle.classList.remove(isOpen ? 'expander' : 'collapser'); + } + } + if (element.open == info.openByDefault) { + delete toggled[id]; + } else { + toggled[id] = true; + } + rememberToggled(); +} + +function gatherDetailsElements() { + const els: HTMLDetailsElement[] = Array.prototype.slice.call(document.getElementsByTagName('details')); + for (const el of els) { + if (typeof el.id == "string" && el.id.length > 0) { + detailsRegistry[el.id] = { + element: el, + openByDefault: !!el.open, + toggles: [] // added later + }; + el.addEventListener('toggle', onDetailsToggle); + } + } +} + +function toggleDetails(id: string) { + const {element} = lookupDetailsRegistry(id); + element.open = !element.open; +} + +function rememberToggled() { + const sections: string[] = Object.keys(toggled); + // cookie specific to this page; don't use setCookie which sets path=/ + document.cookie = "toggled=" + encodeURIComponent(sections.join('+')); +} + +function restoreToggled() { + const cookie = getCookie("toggled"); + if (!cookie) { return; } + const ids = cookie.split('+'); + for (const id of ids) { + const info = detailsRegistry[id]; + toggled[id] = true; + if (info) { + info.element.open = !info.element.open; + } + } +} + +function onToggleClick(ev: MouseEvent) { + ev.preventDefault(); + const toggle = ev.currentTarget as HTMLElement; + const id = toggle.getAttribute('data-details-id'); + if (!id) { throw new Error("element with class 'details-toggle' has no 'data-details-id' attribute!"); } + toggleDetails(id); +} + +function initCollapseToggles() { + const toggles: HTMLElement[] = Array.prototype.slice.call(document.getElementsByClassName('details-toggle')); + toggles.forEach(toggle => { + const id = toggle.getAttribute('data-details-id'); + if (!id) { throw new Error("element with class 'details-toggle' has no 'data-details-id' attribute!"); } + const info = lookupDetailsRegistry(id); + info.toggles.push(toggle); + toggle.addEventListener('click', onToggleClick); + if (toggle.classList.contains('details-toggle-control')) { + toggle.classList.add(info.element.open ? 'collapser' : 'expander'); + } + }); +} + +export function init() { + gatherDetailsElements(); + restoreToggled(); + initCollapseToggles(); +} \ No newline at end of file diff --git a/haddock-api/resources/html/js-src/haddock-util.ts b/haddock-api/resources/html/js-src/haddock-util.ts deleted file mode 100644 index 257ceb6a..00000000 --- a/haddock-api/resources/html/js-src/haddock-util.ts +++ /dev/null @@ -1,173 +0,0 @@ -// Haddock JavaScript utilities - -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"); -const toggleCollapser = makeClassToggle("collapser", "expander"); - -function toggleSection(id: string): boolean { - const b = toggleShow(document.getElementById("section." + id) as Element); - toggleCollapser(document.getElementById("control." + id) as Element, b); - rememberCollapsed(id); - return b; -} - -// TODO: get rid of global variables -if (typeof window !== 'undefined') { - (window as any).toggleSection = toggleSection; -} - -const collapsed: { [id: string]: boolean } = {}; -function rememberCollapsed(id: string) { - if(collapsed[id]) - delete collapsed[id] - else - collapsed[id] = true; - - const sections: string[] = []; - for(let i in collapsed) { - if(collapsed.hasOwnProperty(i)) - sections.push(i); - } - // cookie specific to this page; don't use setCookie which sets path=/ - document.cookie = "collapsed=" + encodeURIComponent(sections.join('+')); -} - -export function restoreCollapsed() { - const cookie = getCookie("collapsed"); - if(!cookie) - return; - - const ids = cookie.split('+'); - for(const i in ids) - { - if(document.getElementById("section." + ids[i])) - toggleSection(ids[i]); - } -} - -function setCookie(name: string, value: string) { - document.cookie = name + "=" + encodeURIComponent(value) + ";path=/;"; -} - -function clearCookie(name: string) { - document.cookie = name + "=;path=/;expires=Thu, 01-Jan-1970 00:00:01 GMT;"; -} - -function getCookie(name: string) { - const nameEQ = name + "="; - const ca = document.cookie.split(';'); - for (let i = 0; i < ca.length; i++) { - let c = ca[i]; - while (c.charAt(0)==' ') c = c.substring(1,c.length); - if (c.indexOf(nameEQ) == 0) { - return decodeURIComponent(c.substring(nameEQ.length,c.length)); - } - } - return null; -} - -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); -} - -export function addStyleMenu() { - const as = styles(); - let btns = ""; - as.forEach((a) => { - btns += "
  • " - + a.title + "
    • " - }); - if (as.length > 1) { - const h = "
    " - + "Style ▾" - + "
      " + btns + "
    " - + "
    "; - 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); -} - -export 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); -} \ No newline at end of file diff --git a/haddock-api/resources/html/js-src/init.ts b/haddock-api/resources/html/js-src/init.ts index 0619dfc3..877874ae 100644 --- a/haddock-api/resources/html/js-src/init.ts +++ b/haddock-api/resources/html/js-src/init.ts @@ -1,4 +1,5 @@ -import * as util from "./haddock-util"; +import * as styleMenu from "./style-menu"; +import * as detailsHelper from "./details-helper"; import * as quickJump from "./quick-jump"; function onDomReady(callback: () => void) { @@ -14,8 +15,8 @@ function onDomReady(callback: () => void) { } onDomReady(() => { - util.addStyleMenu(); - util.resetStyle(); - util.restoreCollapsed(); + document.body.classList.add('js-enabled'); + styleMenu.init(); + detailsHelper.init(); quickJump.init(); }); \ No newline at end of file diff --git a/haddock-api/resources/html/js-src/style-menu.ts b/haddock-api/resources/html/js-src/style-menu.ts new file mode 100644 index 00000000..3911655b --- /dev/null +++ b/haddock-api/resources/html/js-src/style-menu.ts @@ -0,0 +1,116 @@ +// 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 ▾" + + "
      " + btns + "
    " + + "
    "; + 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 -- cgit v1.2.3