Skip to content

Commit 965c9e3

Browse files
TemplarianTemplarian
committed
Progress moving to CSS anchor positioning.
1 parent df2c7a9 commit 965c9e3

File tree

8 files changed

+182
-3
lines changed

8 files changed

+182
-3
lines changed

‎src/pg/buttonMenu/README.md‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# `<pg-button-toggle>`
2+
3+
The `pg-button-toggle` component is essentially just a button with swappable slotted content. Commonly used with icons, but using `span` elements will allow assigning text content.
4+
5+
```typescript
6+
import '@pictogrammers/components/pg/buttonToggle';
7+
import PgButtonToggle from '@pictogrammers/components/pg/buttonToggle';
8+
```
9+
10+
```html
11+
<pg-button-toggle>
12+
<pg-icon slot="active" path="M...Z"></pg-icon>
13+
<pg-icon slot="inactive" path="M...Z"></pg-icon>
14+
</pg-button-toggle>
15+
```
16+
17+
| Slots | Tested | Description |
18+
| ----------- | -------- | ----------- |
19+
| default | &#x2705; | Button contents. |
20+
21+
| Attribute | Tested | Description |
22+
| ---------- | -------- | ----------- |
23+
| block | | block sizing |
24+
| active | | Depressed visual state. |
25+
| start | | Internal Only |
26+
| end | | Internal Only |
27+
| center | | Internal Only |
28+
29+
| Events | Tested | Description |
30+
| ---------- | -------- | ----------- |
31+
| click | &#x2705; | Standard click. |
32+
33+
| CSS Variables | Default | Description |
34+
| ------------------- | --------- | ----------- |
35+
| `--pg-button-color` | `#453C4F` | Text color |
36+
| `--pg-button-background-color` | `#fff` | Background color |
37+
| `--pg-button-border-color` | `#453C4F` | Border color |
38+
| `--pg-button-hover-color` | `#fff` | `:hover` Text color |
39+
| `--pg-button-hover-background-color` | `#453C4F` | `:hover` Background color |
40+
| `--pg-button-hover-border-color` | `#453C4F` | `:hover` Border color |
41+
| `--pg-button-active-color` | `#fff` | `active` Text color |
42+
| `--pg-button-active-background-color` | `#453C4F` | `active` Background color |
43+
| `--pg-button-active-border-color` | `#453C4F` | `active` Border color |
44+
45+
### Slots
46+
47+
Special styling is applied for `pg-icon`.
48+
49+
```html
50+
<pg-button-toggle>
51+
<pg-icon slot="active" path="M...Z"></pg-icon>
52+
<pg-icon slot="inactive" path="M...Z"></pg-icon>
53+
</pg-button-toggle>
54+
```

‎src/pg/buttonMenu/__examples__/basic/basic.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<div class="example">
2+
<pg-button-menu part="menu"></pg-button-menu>
3+
<div>
4+
<code>value: <code part="value"></code></code>
5+
</div>
6+
</div>

‎src/pg/buttonMenu/__examples__/basic/basic.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Component, Part } from '@pictogrammers/element';
2+
import PgButtonMenu from '../../buttonMenu';
3+
4+
import template from './basic.html';
5+
6+
@Component({
7+
selector: 'x-pg-button-menu-basic',
8+
template
9+
})
10+
export default class XPgButtonMenuBasic extends HTMLElement {
11+
12+
@Part() $menu: PgButtonMenu;
13+
@Part() $value: HTMLSpanElement;
14+
15+
connectedCallback() {
16+
this.$menu.items = [{
17+
value: 'item1',
18+
label: 'Item 1'
19+
}, {
20+
value: 'item2',
21+
label: 'Item 2'
22+
}];
23+
this.$menu.value = this.$menu.items[0];
24+
this.$menu.addEventListener('change', this.handleChange.bind(this));
25+
}
26+
27+
handleChange(e: any) {
28+
const { active } = e.detail;
29+
this.$value.textContent = `${active}`;
30+
}
31+
}

‎src/pg/buttonMenu/buttonMenu.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
:host {
2+
display: inline-flex;
3+
}
4+
5+
span {
6+
align-self: center;
7+
display: flex;
8+
}

‎src/pg/buttonMenu/buttonMenu.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<pg-button part="button">
2+
<span part="expand">
3+
<pg-icon path="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></pg-icon>
4+
</span>
5+
<span part="collapse">
6+
<pg-icon path="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"></pg-icon>
7+
</span>
8+
</pg-button>

‎src/pg/buttonMenu/buttonMenu.ts‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { Component, Part, Prop } from '@pictogrammers/element';
2+
3+
import PgMenuItem from '../menuItem/menuItem';
4+
import PgOverlayMenu from '../overlayMenu/overlayMenu';
5+
6+
import '../button/button';
7+
import PgButton from '../button/button';
8+
9+
import template from './buttonMenu.html';
10+
import style from './buttonMenu.css';
11+
12+
const t = [true, 'true', ''];
13+
14+
@Component({
15+
selector: 'pg-button-menu',
16+
style,
17+
template
18+
})
19+
export default class PgButtonMenu extends HTMLElement {
20+
@Prop() items: any[] = [];
21+
@Prop() value: any = null;
22+
23+
@Part() $button: PgButton;
24+
@Part() $expand: HTMLSlotElement;
25+
@Part() $collapse: HTMLSlotElement;
26+
27+
connectedCallback() {
28+
this.$button.addEventListener('click', (e) => {
29+
e.stopPropagation();
30+
this.#handleClick();
31+
// open menu
32+
/*this.dispatchEvent(
33+
new CustomEvent('click', {
34+
detail: {
35+
active: this.active
36+
}
37+
})
38+
);*/
39+
});
40+
}
41+
42+
#menuOpen = false;
43+
async #handleClick() {
44+
if (this.#menuOpen) { return; }
45+
const items = this.items.map((item) => {
46+
return {
47+
type: PgMenuItem,
48+
label: item.label,
49+
value: item.value
50+
};
51+
});
52+
this.#menuOpen = true;
53+
/*
54+
if (result !== undefined) {
55+
this.#value = result;
56+
}
57+
this.$result.textContent = result;
58+
*/
59+
this.#menuOpen = false;
60+
}
61+
62+
63+
render(changes) {
64+
if (changes.active) {
65+
this.$expand.style.display = this.$button.active ? 'flex' : 'none';
66+
this.$collapse.style.display = this.$button.active ? 'none' : 'flex';
67+
}
68+
}
69+
}

‎src/pg/overlayMenu/overlayMenu.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,7 @@
99
background: transparent;
1010
overflow: visible;
1111
--pg-menu-box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);
12+
top: anchor(top);
13+
left: anchor(left);
14+
min-width: calc(anchor-size(width) + calc(2 * var(--pg-menu-padding, 0.25rem)));
1215
}

‎src/pg/overlayMenu/overlayMenu.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,9 @@ export default class PgOverlayMenu extends PgOverlay {
3939
});
4040
}
4141
this.$overlay.addEventListener('toggle', this.#toggle.bind(this));
42-
// Position (replace with css once Firefox supports it)
42+
// Position
4343
const rect = this.source?.getBoundingClientRect();
44-
let x = rect?.left ?? 0, y = rect?.top ?? 0;
45-
this.$overlay.style.minWidth = `${rect?.width}px`;
44+
let x = 0, y = 0;
4645
const value = this.value === null || typeof this.value !== 'object'
4746
? this.value
4847
: this.value.value;
@@ -70,6 +69,7 @@ export default class PgOverlayMenu extends PgOverlay {
7069
y += (rect.height - height) / 2;
7170
}
7271
}
72+
// ToDo: update to CSS Variables
7373
this.$overlay.style.translate = `${x}px ${y}px`;
7474
// Focus
7575
this.$menu.focus(index);

0 commit comments

Comments
 (0)