Skip to content

Commit 93c46a3

Browse files
hapticdatahapticdata
committed
query moves from side-panel to group
1 parent fda0fe4 commit 93c46a3

4 files changed

Lines changed: 192 additions & 165 deletions

File tree

‎dist/acc-components.js‎

Lines changed: 74 additions & 74 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example.html‎

Lines changed: 37 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,24 @@
3232
</head>
3333
<body>
3434

35-
<acc-side-panel label="Example">
35+
<acc-side-panel label="Components">
3636
<acc-group label="Tracking Group" hidelabel>
3737
<acc-input-mode-select contentselector="#main-content">
3838
<acc-mouse-input amplification="10" label="Custom Mouse/Keyboard"></acc-mouse-input>
3939
<acc-pose-input amplification="2" smoothing="0.5"></acc-pose-input>
4040
</acc-input-mode-select>
4141
</acc-group>
42+
<acc-group id="snackbar-ui" label="Snackbar Features">
43+
<p>Snackbar displays status updates on top of your application and works well with ARIA Live Regions.</p>
44+
<acc-range label="duration" min="0" max="10" step="1" value="4"></acc-range>
45+
<acc-toggle label="Error"></acc-toggle>
46+
<acc-toggle label="Dismissable"></acc-toggle>
47+
<acc-select label="Message">
48+
<acc-item label="Basic"></acc-item>
49+
<acc-item label="With Image"></acc-item>
50+
</acc-select>
51+
<acc-button label="Update Snackbar"></acc-button>
52+
</acc-group>
4253
<acc-group label="Range Group">
4354
<acc-range label="Range test" value="5" min="0" max="10" step="0.1" shortcut="Shift l"></acc-range>
4455
<acc-range label="Range test disabled" value="5" min="0" max="10" step="0.1" disabled></acc-range>
@@ -78,7 +89,7 @@
7889
</acc-group>
7990
</acc-group>
8091

81-
<acc-snackbar aria-live="polite" duration="0" dismissable></acc-snackbar>
92+
<acc-snackbar aria-live="polite"></acc-snackbar>
8293

8394
</acc-side-panel>
8495
<acc-content id="main-content" shortcut="Shift c" webcamopacity="0.25" grayscale mounted>
@@ -87,6 +98,8 @@
8798

8899

89100
<script type="text/javascript">
101+
const panel = document.querySelector('acc-side-panel');
102+
90103
const inputModeSelect = document.querySelector('acc-input-mode-select');
91104
const cursor = document.querySelector('#cursor');
92105
const cursorSize = cursor.clientWidth;
@@ -103,17 +116,29 @@
103116
content.addEventListener('shortcut', ()=> console.log('content shortcut', content.shortcut));
104117

105118

119+
120+
106121
const snackbar = document.querySelector('acc-snackbar');
107-
document.querySelector('acc-side-panel').query('snackbar is error', 'change', (event) => {
108-
snackbar.error = event.target.checked;
109-
});
110-
document.querySelector('acc-side-panel').query('send message to snackbar', 'click', () => {
111-
snackbar.innerHTML = `
112-
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Love_Heart_symbol.svg/1000px-Love_Heart_symbol.svg.png" width="32">
113-
<div style="display: inline-block; transform: translate(0, -50%); padding-left: 8px;">
114-
<strong>bold test</strong> message sent from button
115-
</div>`;
116-
});
122+
123+
124+
const snackbarMessages = [
125+
() => 'update ' + Math.random() + ' duration ' + snackbar.duration,
126+
() => `<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Love_Heart_symbol.svg/1000px-Love_Heart_symbol.svg.png" width="32">
127+
<div style="display: inline-block; transform: translate(0, -50%); padding-left: 8px;">
128+
<strong>duration: ${snackbar.duration}</strong> snackbar html with image and styling
129+
</div>`
130+
];
131+
132+
133+
const snackbarGroup = document.querySelector("#snackbar-ui");
134+
snackbarGroup.query('duration', 'input', (event) => snackbar.duration = event.target.value);
135+
snackbarGroup.query('error', 'change', (event) => snackbar.error = event.target.checked);
136+
snackbarGroup.query('dismissable', 'change', (event)=> snackbar.dismissable = event.target.checked);
137+
const updateMessage = () => snackbar.innerHTML = snackbarMessages[snackbarGroup.query('message').selectedIndex]();
138+
snackbarGroup.query('update snackbar', 'click', updateMessage);
139+
snackbarGroup.query('message', 'change', updateMessage);
140+
141+
117142

118143
</script>
119144
</body>

‎src/components/group.ts‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,42 @@ import { bodyFontFamily, outlineBorderColor } from "./styles";
1818
import { property } from './decorators';
1919
import autobind from 'autobind-decorator';
2020

21+
22+
type queryPattern = (v:string)=> string;
23+
24+
const queries: queryPattern[] = [
25+
(v)=> v,
26+
(v)=> `acc-${v}`,
27+
(v)=> `[name="${v}" i]`,
28+
(v)=> `[label="${v}" i]`,
29+
(v)=> `[value="${v}" i]`,
30+
(v)=> `.${v}`,
31+
(v)=> `#${v}`
32+
];
33+
34+
35+
const extractValue = (el:any):any => {
36+
if(el.value) {
37+
if(typeof el.value === 'string') {
38+
if(el.value.toLowerCase() === 'true') {
39+
return true;
40+
} else if(el.value.toLowerCase() === 'false') {
41+
return false;
42+
} else if(isFinite(parseInt(el.value, 10))) {
43+
return parseInt(el.value, 10);
44+
}
45+
}
46+
return el.value;
47+
}
48+
if(el.selected) {
49+
if(el.selected.value){
50+
return el.selected.value;
51+
}
52+
return el.selected;
53+
}
54+
return null;
55+
}
56+
2157
export class GroupElement extends AbstractUIElement {
2258

2359
/**
@@ -44,6 +80,50 @@ export class GroupElement extends AbstractUIElement {
4480
}
4581
}
4682

83+
getValue(name:string) {
84+
const el = this.query(name);
85+
if(!el){
86+
return null;
87+
}
88+
return extractValue(el);
89+
}
90+
91+
query(name:string, eventType?: string, eventHandler?: EventHandlerNonNull):HTMLElement|null {
92+
const _query = () => {
93+
let i:number = 0;
94+
while(i < queries.length) {
95+
const el = this.querySelector(queries[i](name));
96+
if(el !== null){
97+
return el as HTMLElement;
98+
}
99+
i++;
100+
}
101+
const find = (baseElement: Element, query: string): Element => {
102+
const asAny = (baseElement as any);
103+
if(asAny.value && asAny.value.toLowerCase && asAny.value.toLowerCase() === query.toLowerCase()) {
104+
return baseElement;
105+
} else if(asAny.label && asAny.label.toLowerCase && asAny.label.toLowerCase() === query.toLowerCase()) {
106+
return baseElement;
107+
}
108+
let found = null;
109+
for(let child of baseElement.children) {
110+
found = find(child, query);
111+
if(found) {
112+
return found;
113+
}
114+
}
115+
}
116+
return find(this, name) as HTMLElement;
117+
};
118+
119+
const element = _query();
120+
121+
if(element && typeof eventType === 'string' && typeof eventHandler === 'function') {
122+
element.addEventListener(eventType, eventHandler);
123+
}
124+
return element;
125+
}
126+
47127
_render({label, disabled}: UIProperties){
48128

49129
return html`

‎src/components/side-panel.ts‎

Lines changed: 1 addition & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import {
2323
} from './styles';
2424
import { UIProperties } from './abstract-ui';
2525
import { GroupElement } from './group';
26-
import { html, LitElement } from '@polymer/lit-element';
26+
import { html } from '@polymer/lit-element';
2727
import { property } from './decorators';
2828
import { setBooleanAttribute } from '../utils';
2929
import './icon'
@@ -34,40 +34,6 @@ interface PanelProperties extends UIProperties {
3434
closed: boolean;
3535
}
3636

37-
type queryPattern = (v:string)=> string;
38-
39-
const queries: queryPattern[] = [
40-
(v)=> v,
41-
(v)=> `acc-${v}`,
42-
(v)=> `[name="${v}" i]`,
43-
(v)=> `[label="${v}" i]`,
44-
(v)=> `[value="${v}" i]`,
45-
(v)=> `.${v}`,
46-
(v)=> `#${v}`
47-
];
48-
49-
50-
const extractValue = (el:any):any => {
51-
if(el.value) {
52-
if(typeof el.value === 'string') {
53-
if(el.value.toLowerCase() === 'true') {
54-
return true;
55-
} else if(el.value.toLowerCase() === 'false') {
56-
return false;
57-
} else if(isFinite(parseInt(el.value, 10))) {
58-
return parseInt(el.value, 10);
59-
}
60-
}
61-
return el.value;
62-
}
63-
if(el.selected) {
64-
if(el.selected.value){
65-
return el.selected.value;
66-
}
67-
return el.selected;
68-
}
69-
return null;
70-
}
7137

7238
/**
7339
* <acc-side-panel label="App Name">
@@ -89,50 +55,6 @@ export class SidePanel extends GroupElement {
8955
public closed: boolean = false;
9056

9157

92-
getValue(name:string) {
93-
const el = this.query(name);
94-
if(!el){
95-
return null;
96-
}
97-
return extractValue(el);
98-
}
99-
100-
query(name:string, eventType?: string, eventHandler?: EventHandlerNonNull):HTMLElement|null {
101-
const _query = () => {
102-
let i:number = 0;
103-
while(i < queries.length) {
104-
const el = this.querySelector(queries[i](name));
105-
if(el !== null){
106-
return el as HTMLElement;
107-
}
108-
i++;
109-
}
110-
const find = (baseElement: Element, query: string): Element => {
111-
const asAny = (baseElement as any);
112-
if(asAny.value && asAny.value.toLowerCase && asAny.value.toLowerCase() === query.toLowerCase()) {
113-
return baseElement;
114-
} else if(asAny.label && asAny.label.toLowerCase && asAny.label.toLowerCase() === query.toLowerCase()) {
115-
return baseElement;
116-
}
117-
let found = null;
118-
for(let child of baseElement.children) {
119-
found = find(child, query);
120-
if(found) {
121-
return found;
122-
}
123-
}
124-
}
125-
return find(this, name) as HTMLElement;
126-
};
127-
128-
const element = _query();
129-
130-
if(element && typeof eventType === 'string' && typeof eventHandler === 'function') {
131-
element.addEventListener(eventType, eventHandler);
132-
}
133-
return element;
134-
}
135-
13658
focus(){
13759
//when focused, move focus to the main header
13860
super.focus();

0 commit comments

Comments
 (0)