Skip to content

Commit d1d2546

Browse files
shgysk8zer0shgysk8zer0
authored
Merge pull request #9 from AegisJSProject/patch/update
Update dependencies & event handling
2 parents 505c66b + 4abdd6e commit d1d2546

File tree

8 files changed

+138
-34
lines changed

8 files changed

+138
-34
lines changed

‎CHANGELOG.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
66

77
## [Unreleased]
88

9+
## [v0.0.2] - 2024-03-12
10+
11+
### Changed
12+
- Updates to dependencies
13+
- Remove use of Aegis event class constant
14+
15+
### Fixed
16+
- Fix disconnected callback
17+
918
## [v0.0.1] - 2024-03-04
1019

1120
Initial Release

‎aegis-modal.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ export class AegisModalElement extends AegisComponent {
2020
internals.ariaHidden = this.open ? 'false' : 'true';
2121
internals.ariaLabel = 'Aegis Modal Dialog';
2222
internals.ariaModal = 'true';
23-
setTimeout(() => console.log(internals), 2000);
2423
this.hidden = ! this.open;
2524
break;
2625

@@ -30,7 +29,7 @@ export class AegisModalElement extends AegisComponent {
3029
}
3130
break;
3231

33-
case TRIGGERS.discononected:
32+
case TRIGGERS.disconnected:
3433
if (this.open) {
3534
this.close();
3635
}

‎package-lock.json

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

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@aegisjsproject/aegis-modal",
3-
"version": "0.0.1",
3+
"version": "0.0.2",
44
"description": "An `<aegis-modal>` component built using [`@aegisjsproject/component`](https://npmjs.org/package/@aegisjsproject/component)",
55
"keywords": [
66
"aegis",
@@ -86,8 +86,8 @@
8686
"rollup": "^4.12.0"
8787
},
8888
"dependencies": {
89-
"@aegisjsproject/component": "^0.1.1",
90-
"@aegisjsproject/core": "^0.1.2",
89+
"@aegisjsproject/component": "^0.1.2",
90+
"@aegisjsproject/core": "^0.1.5",
9191
"@aegisjsproject/styles": "^0.1.1"
9292
}
9393
}

‎template.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { html } from '@aegisjsproject/core/parsers/html.js';
22
import { registerCallback } from '@aegisjsproject/core/callbackRegistry.js';
3-
import { EVENTS, AEGIS_EVENT_HANDLER_CLASS } from '@aegisjsproject/core/events.js';
3+
import { EVENTS } from '@aegisjsproject/core/events.js';
44
import { closeIcon } from './icons.js';
55

66
const closeHandler = registerCallback(
@@ -15,7 +15,7 @@ const template = html`
1515
<div class="header-container">
1616
<slot name="header"></slot>
1717
</div>
18-
<button type="button" title="Close modal" ${EVENTS.onClick}="${closeHandler}" id="close" class="btn close-btn ${AEGIS_EVENT_HANDLER_CLASS}" part="btn close" aria-label="Close Modal" aria-keyshortcuts="Escape">
18+
<button type="button" title="Close modal" ${EVENTS.onClick}="${closeHandler}" id="close" class="btn close-btn" part="btn close" aria-label="Close Modal" aria-keyshortcuts="Escape">
1919
<slot name="close-icon">X</slot>
2020
</button>
2121
</div>

‎test/bacon-ipsum.js

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import { AegisComponent } from '@aegisjsproject/component/base.js';
2+
import { SYMBOLS, TRIGGERS } from '@aegisjsproject/component/consts.js';
3+
import { css } from '@aegisjsproject/core/parsers/css.js';
4+
import { getInt, setInt } from '@aegisjsproject/component/attrs.js';
5+
6+
const styles = [css`:host {padding: 1.2em;}`];
7+
const ATTRS = ['paragraphs', 'startwithlorem', 'filler'];
8+
9+
class BaconIpsum extends AegisComponent {
10+
constructor() {
11+
super({ styles, exportParts: ['ipsum'] });
12+
}
13+
14+
async [SYMBOLS.render](type, { shadow, name, signal }) {
15+
switch(type) {
16+
case TRIGGERS.connected:
17+
shadow.replaceChildren(await this.generate({ signal }));
18+
break;
19+
20+
case TRIGGERS.attributeChanged:
21+
if (ATTRS.includes(name)) {
22+
shadow.replaceChildren(await this.generate({ signal }));
23+
}
24+
break;
25+
}
26+
}
27+
28+
get paragraphs() {
29+
return getInt(this, 'paragraphs', { min: 1, fallback: 5 });
30+
}
31+
32+
set paragraphs(val) {
33+
setInt(this, 'paragraphs', { min: 1 });
34+
}
35+
36+
get startWithLorem() {
37+
return this.hasAttribute('startwithlorem');
38+
}
39+
40+
set startWithLorem(val) {
41+
this.toggleAttribute('startwithlorem', val);
42+
}
43+
44+
get filler() {
45+
return this.hasAttribute('filler');
46+
}
47+
48+
set filler(val) {
49+
this.toggleAttribute('filler', val);
50+
}
51+
52+
async generate({ signal } = {}) {
53+
const { paragraphs, startWithLorem, filler } = this;
54+
const url = new URL(BaconIpsum.ENDPOINT);
55+
56+
url.searchParams.set('paras', paragraphs);
57+
url.searchParams.set('format', 'json');
58+
59+
if (startWithLorem) {
60+
url.searchParams.set('start-with-lorem', 1);
61+
}
62+
63+
if (filler) {
64+
url.searchParams.set('type', 'meat-and-filler');
65+
} else {
66+
url.searchParams.set('type', 'all-meat');
67+
}
68+
69+
const resp = await fetch(url, {
70+
referrerPolicy: 'no-referrer',
71+
headers: new Headers({ Accept: 'application/json' }),
72+
signal,
73+
});
74+
75+
const lines = await resp.json();
76+
const frag = document.createDocumentFragment();
77+
78+
lines.forEach(line => {
79+
const p = document.createElement('p');
80+
p.textContent = line;
81+
p.part.add('ipsum');
82+
frag.append(p);
83+
});
84+
85+
return frag;
86+
}
87+
88+
static get ENDPOINT() {
89+
return 'https://baconipsum.com/api/';
90+
}
91+
92+
static get observedAttributes() {
93+
return [...AegisComponent.observedAttributes, ...ATTRS];
94+
}
95+
}
96+
97+
BaconIpsum.register('bacon-ipsum');

‎test/index.html

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
default-src 'none';
1010
style-src 'self' blob:;
1111
script-src 'self' https://unpkg.com/@shgysk8zer0/ https://unpkg.com/@aegisjsproject/ 'sha384-PrVhYjmV60TGly9I77ejsQH45+H41Oa5GLjZmd+oj/mHiY4+vxn2pZ9AgoMkRSWp';
12-
connect-src 'self' https://icanhazdadjoke.com/;
13-
trusted-types emtpy#html empty#script sanitizer-raw#html;
12+
connect-src 'self' https://icanhazdadjoke.com/ https://baconipsum.com/api/;
13+
trusted-types empty#html empty#script sanitizer-raw#html;
1414
require-trusted-types-for 'script';
1515
" />
1616
<title>@aegisjsproject/template</title>
@@ -30,23 +30,9 @@
3030
}
3131
}
3232
</script>
33-
<script type="application/javascript" defer="" referrerpolicy="no-referrer" crossorigin="anonymous" integrity="sha384-Shkrmxly5RI9mCU8DQr6l4VLVJzjPzgx9KP/f5i7pEcl7ZUt0wHiAweGjbpjU2d5" src="https://unpkg.com/@shgysk8zer0/polyfills@0.3.1/all.min.js" fetchpriority="auto"></script>
33+
<script type="application/javascript" defer="" referrerpolicy="no-referrer" crossorigin="anonymous" integrity="sha384-da+idpfYh2JjIk81mlgAuhkV0bSAuVW1TA9XLcjht0WOsiSQgwi+uzPM4a2t6A9i" src="https://unpkg.com/@shgysk8zer0/polyfills@0.3.2/all.min.js" fetchpriority="auto"></script>
3434
<script type="application/javascript" defer="" referrerpolicy="no-referrer" crossorigin="anonymous" integrity="sha384-55L/wO9o0uIVTeubRIDQB4bewfNqyxrj4OXuxlW24NMEk+ioZwMHVw/tFV78mM+k" src="https://unpkg.com/@shgysk8zer0/kazoo@0.3.2/harden.js" fetchpriority="auto"></script>
35-
<script type="module" src="../aegis-modal.js" referrerpolicy="no-referrer"></script>
3635
<script type="module" src="./index.js" referrerpolicy="no-referrer"></script>
3736
</head>
38-
<body>
39-
<header>
40-
<button type="button" id="show-btn" accesskey="m" disabled="" autofocus="">Show Modal</button>
41-
</header>
42-
<main></main>
43-
<aegis-modal>
44-
<h2 slot="header">Lorem Ipsum</h2>
45-
<p>Error aut mollitia qui alias aut. Temporibus vitae impedit deserunt repellat voluptatibus et. Minima aut et tempore. Ut officiis sed consectetur. Voluptas praesentium ipsam rerum eligendi dolorum. Voluptatem similique omnis quis quidem.</p>
46-
<p>Quasi totam eum rem. Ut voluptas ut provident consectetur. Aspernatur enim voluptatem nulla qui magni et aut. Consequatur at et beatae.</p>
47-
<p>Id qui aliquid natus et. Qui sed libero autem ad et rem. Nam quis laudantium atque.</p>
48-
<p>Non dolorum nemo quaerat et eveniet id occaecati. Delectus maxime at repellat dolorem ducimus. Et odit aut laudantium commodi ducimus veritatis. Hic totam esse quam. Veniam qui dolorum magni laboriosam voluptate. Officia natus necessitatibus et quia neque tenetur magni.</p>
49-
<p>Consequuntur quod eaque praesentium et. Voluptas est nihil tempora doloribus et dolore nulla. Nobis sit sed delectus consectetur. Ducimus dolores incidunt repellendus tempora placeat velit recusandae libero.</p>
50-
</aegis-modal>
51-
</body>
37+
<body></body>
5238
</html>

‎test/index.js

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
1-
customElements.whenDefined('aegis-modal').then(() => {
2-
const btn = document.getElementById('show-btn');
3-
btn.disabled = false;
4-
btn.addEventListener('click', () => document.querySelector('aegis-modal').show());
5-
});
1+
import '../aegis-modal.js';
2+
import './bacon-ipsum.js';
3+
import { appendTo } from '@aegisjsproject/core/dom.js';
4+
import { html } from '@aegisjsproject/core/parsers/html.js';
5+
import { EVENTS } from '@aegisjsproject/core/events.js';
6+
7+
appendTo(document.body, html`
8+
<header>
9+
<button type="button" ${EVENTS.onClick}="${() => document.querySelector('aegis-modal').show()}" accesskey="m">Show Modal</button>
10+
</header>
11+
<main>
12+
<bacon-ipsum></bacon-ipsum>
13+
</main>
14+
<aegis-modal>
15+
<h2 slot="header">Bacon Ipsum</h2>
16+
<bacon-ipsum></bacon-ipsum>
17+
</aegis-modal>
18+
`);

0 commit comments

Comments
 (0)