-
Notifications
You must be signed in to change notification settings - Fork 418
/
target_observer.ts
120 lines (98 loc) · 3.45 KB
/
target_observer.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
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
import { Multimap } from "../multimap"
import { ElementObserver, ElementObserverDelegate, Token, TokenListObserver, TokenListObserverDelegate } from "../mutation-observers"
import { Context } from "./context"
export interface TargetObserverDelegate {
targetConnected(element: Element, name: string): void
targetDisconnected(element: Element, name: string): void
targetAttributeChanged(element: Element, name: string, attributeName: string, oldValue: string | null, newValue: string | null): void
}
export class TargetObserver implements ElementObserverDelegate, TokenListObserverDelegate {
readonly context: Context
readonly delegate: TargetObserverDelegate
readonly targetsByName: Multimap<string, Element>
private tokenListObserver?: TokenListObserver
private elementObserver?: ElementObserver
constructor(context: Context, delegate: TargetObserverDelegate) {
this.context = context
this.delegate = delegate
this.targetsByName = new Multimap
}
start() {
if (!this.tokenListObserver) {
this.tokenListObserver = new TokenListObserver(this.element, this.attributeName, this)
this.tokenListObserver.start()
}
if (!this.elementObserver) {
this.elementObserver = new ElementObserver(this.element, this, { attributeOldValue: true })
this.elementObserver.start()
}
}
stop() {
if (this.tokenListObserver) {
this.disconnectAllTargets()
this.tokenListObserver.stop()
delete this.tokenListObserver
}
if (this.elementObserver) {
this.elementObserver.stop()
delete this.elementObserver
}
}
// Token list observer delegate
tokenMatched({ element, content: name }: Token) {
if (this.scope.containsElement(element)) {
this.connectTarget(element, name)
}
}
tokenUnmatched({ element, content: name }: Token) {
this.disconnectTarget(element, name)
}
// Element observer delegate
matchElement(element: Element) {
return this.targetsByName.hasValue(element)
}
matchElementsInTree(tree: Element) {
return this.targetsByName.values
}
elementAttributeChanged(element: Element, attributeName: string, mutationRecord: MutationRecord) {
for (const name of this.targetsByName.getKeysForValue(element)) {
this.mutateTarget(element, name, attributeName, mutationRecord)
}
}
// Target management
connectTarget(element: Element, name: string) {
if (!this.targetsByName.has(name, element)) {
this.targetsByName.add(name, element)
this.delegate.targetConnected(element, name)
}
}
disconnectTarget(element: Element, name: string) {
if (this.targetsByName.has(name, element)) {
this.targetsByName.delete(name, element)
this.delegate.targetDisconnected(element, name)
}
}
disconnectAllTargets() {
for (const name of this.targetsByName.keys) {
for (const element of this.targetsByName.getValuesForKey(name)) {
this.disconnectTarget(element, name)
}
}
}
mutateTarget(element: Element, name: string, attributeName: string, { oldValue }: MutationRecord) {
const newValue = element.getAttribute(attributeName)
this.elementObserver?.pause(() => {
this.delegate.targetAttributeChanged(element, name, attributeName, oldValue, newValue)
})
}
// Private
private get attributeName() {
return `data-${this.context.identifier}-target`
}
private get element() {
return this.context.element
}
private get scope() {
return this.context.scope
}
}