-
Notifications
You must be signed in to change notification settings - Fork 11
/
example.html
159 lines (147 loc) · 4.5 KB
/
example.html
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!doctype html>
<html lang="en">
<title>Invoker Buttons Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://unpkg.com/@oddbird/[email protected]/dist/popover.css"
/>
<script
type="module"
async
src="https://unpkg.com/@oddbird/[email protected]/dist/popover.js"
></script>
<script type="module" src="./invoker.js"></script>
<body>
<h1>commandfor & command attributes</h1>
<p>
This is a demonstration page for the
<a href="https://github.com/keithamus/invokers-polyfill"
>github:keithamus/invokers-polyfill</a
>, which polyfills the <a href="https://open-ui.org/components/invokers.explainer/">
Invoker Buttons proposal
</a>
</p>
<hr />
<h2>Initial Actions</h2>
<button commandfor="my-dialog" command="show-modal" interesttarget="dialog-explainer">
This will open the dialog
</button>
<dialog id="my-dialog">
<button
commandfor="my-dialog"
command="close"
aria-label="Close dialog"
>
x
</button>
This is a dialog. Press the Close button (X) to close it
</dialog>
<div popover id="dialog-explainer">
This button will open the dialog element
</div>
<hr />
<button commandfor="my-popover-1" command="toggle-popover">
Toggles a popover
</button>
<div popover id="my-popover-1">
<button commandfor="my-popover-1" command="hide-popover">X</button>
This is a popover
</div>
<hr />
<details>
<summary>Future Actions</summary>
<button commandfor="my-file-input" command="show-picker">
This will open the file picker
</button>
<input type="file" id="my-file-input" />
<hr />
<button commandfor="my-date-input" command="show-picker">
This should open the date picker
</button>
<input type="date" id="my-date-input" />
<hr />
<button commandfor="my-details" command="open" interesttarget="button-explainer">
This will open the details
</button>
<details id="my-details">
<summary>This is a details</summary>
This is the details
</details>
<div popover id="button-explainer">
This button will open the details element
</div>
<hr />
<button commandfor="my-select" command="show-picker" interesttarget="select-explainer">
This will open the select
</button>
<select id="my-select">
<option>Option 1</option>
<option>Option 2</option>
</select>
<div popover id="select-explainer">
This button will open the select element, in browsers that support
<code>select.showPicker()</code>
</div>
<hr />
<button
commandfor="my-video"
command="play-pause"
interesttarget="my-video-playpause-explainer"
>
Play/pause
</button>
<div popover id="my-video-playpause-explainer">
This button will cause the video to play or pause depending on the
current state
</div>
<button
commandfor="my-video"
command="play"
interesttarget="my-video-play-explainer"
>
Play
</button>
<div popover id="my-video-play-explainer">
This button will cause the video to play if it isn't already
</div>
<button
commandfor="my-video"
command="pause"
interesttarget="my-video-pause-explainer"
>
Pause
</button>
<div popover id="my-video-pause-explainer">
This button will cause the video to pause if it isn't already
</div>
<button
commandfor="my-video"
command="mute"
interesttarget="my-video-mute-explainer"
>
Mute
</button>
<div popover id="my-video-mute-explainer">
This button will cause the video mute or unmute depending on the current
state
</div>
<button
commandfor="my-video"
command="requestfullscreen"
interesttarget="my-video-fullscreen-explainer"
>
Fullscreen
</button>
<div popover id="my-video-fullscreen-explainer">
This button will cause the video to go into fullscreen
</div>
<video id="my-video" width="100%" controls>
<source
src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
type="video/mp4"
/>
</video>
</details>
</body>
</html>