-
Notifications
You must be signed in to change notification settings - Fork 30
Expand file tree
/
Copy pathtweakpane-link-plugin.js
More file actions
136 lines (118 loc) · 3.07 KB
/
Copy pathtweakpane-link-plugin.js
File metadata and controls
136 lines (118 loc) · 3.07 KB
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
127
128
129
130
131
132
133
134
135
136
import {
bindValue,
createPlugin,
parseRecord,
BladeApi,
BladeController,
ValueMap
} from '@tweakpane/core';
class LinkController extends BladeController {
constructor(doc, config) {
super({
...config,
view: new LinkView(doc, {
props: config.props,
viewProps: config.viewProps,
}),
});
}
}
class LinkView {
constructor(doc, { props, viewProps }) {
// Create view elements
this.element = doc.createElement('div');
this.element.classList.add('tp-link');
viewProps.bindClassModifiers(this.element);
// Create an `a` element for user interaction
const linkElement = doc.createElement('a');
viewProps.bindDisabled(linkElement);
function setLink(link) {
linkElement.href = link ?? '';
}
function setLabel(label) {
linkElement.textContent = label ?? '';
}
function setActive(active) {
if (active) {
linkElement.classList.add('active');
linkElement.removeAttribute('href');
linkElement.removeAttribute('target');
} else {
linkElement.classList.remove('active');
setLink(props.get('link'));
setNewPage(props.get('newPage'));
}
}
function setNewPage(newPage) {
if (newPage) {
linkElement.target = '_blank';
} else {
linkElement.removeAttribute('target');
}
}
bindValue(props.value('link'), setLink);
bindValue(props.value('label'), setLabel);
bindValue(props.value('active'), setActive);
bindValue(props.value('newPage'), setNewPage);
this.element.appendChild(linkElement);
this.linkElement = linkElement;
}
}
class LinkApi extends BladeApi {
get label() {
return this.controller.props.get('label') ?? '';
}
set label(label) {
this.controller.props.set('label', label);
}
get link() {
return this.controller.props.get('link');
}
set link(link) {
this.controller.props.set('link', link);
}
get active() {
return this.controller.props.get('active');
}
set active(active) {
this.controller.props.set('active', Boolean(active));
}
get newPage() {
return this.controller.props.get('newPage');
}
set newPage(newPage) {
this.controller.props.set('newPage', Boolean(newPage));
}
}
export const LinkPlugin = createPlugin({
id: 'link',
type: 'blade',
accept(params) {
const result = parseRecord(params, (p) => ({
view: p.required.constant('link'),
link: p.required.string,
label: p.required.string,
active: p.optional.boolean,
newPage: p.optional.boolean,
}));
return result ? { params: result } : null;
},
controller(args) {
return new LinkController(args.document, {
blade: args.blade,
props: ValueMap.fromObject({
label: args.params.label,
link: args.params.link,
active: args.params.active,
newPage: args.params.newPage,
}),
viewProps: args.viewProps,
});
},
api(args) {
if (!(args.controller instanceof LinkController)) {
return null;
}
return new LinkApi(args.controller);
},
});