1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
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 ▾</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();
}
|
