-
-
Notifications
You must be signed in to change notification settings - Fork 25
/
cycling-link.ts
84 lines (69 loc) · 2.08 KB
/
cycling-link.ts
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
import {BodyContent} from '../../display/custom-elements/body-content';
import {MarginalContent} from '../../display/custom-elements/marginal-content';
import {createLoggers} from '../../logger';
import {set} from '../../state';
import {InlineButton} from './inline-button';
const {warn} = createLoggers('inserts');
/**
* A button that changes its content based on choices defined in its `choices`
* attribute. If it has a `set` attribute, clicking this element also sets the
* variable to the currently visible choice.
*
* (It's a button because it doesn't navigate anywhere.)
*
* Available as `<cycling-link>`.
*/
export class CyclingLink extends InlineButton {
constructor() {
super();
this.addEventListener('click', () => {
const choicesAttribute = this.getAttribute('choices');
if (choicesAttribute) {
let choices: unknown[];
try {
choices = JSON.parse(choicesAttribute);
} catch (error) {
warn(
`The choices attribute, "${choicesAttribute}" couldn't be parsed.`
);
return;
}
// If choices can't be deserialized, do nothing.
if (!Array.isArray(choices)) {
warn(
"The choices attribute of this cycling link doesn't deserialize to an array."
);
return;
}
// Coerce choices here to strings because the value in the DOM will have
// been converted to one.
let index =
choices
.map(choice =>
typeof choice === 'string'
? choice
: (choice as object).toString()
)
.indexOf((this.textContent ?? '').trim()) + 1;
if (index === choices.length) {
index = 0;
}
const parent: BodyContent | MarginalContent | null = this.closest(
'body-content, marginal-content'
);
if (!parent) {
throw new Error(
"Couldn't find suitable parent element to do a cycle link transition on."
);
}
parent.changeContent(() => {
this.textContent = (choices[index] as object).toString();
});
const setAttribute = this.getAttribute('set');
if (setAttribute) {
set(setAttribute, choices[index]);
}
}
});
}
}