Skip to content

Commit cbaea16

Browse files
nfreearnfreear
committed
fix: Re-factor MyTestElement validation button (#61)(#63)
1 parent b50e62f commit cbaea16

1 file changed

Lines changed: 81 additions & 60 deletions

File tree

‎src/components/MyTestElement.js‎

Lines changed: 81 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
import attachTemplate from '../util/attachTemplate.js';
2+
3+
const { fetch, FormData, Node, Request, HTMLElement } = window;
4+
15
/**
26
* Run the W3C / Nu Html Checker on the serialized DOM.
37
* Possibly other tests ...?
@@ -9,95 +13,76 @@
913
* @status experimental, for demos, Codepen
1014
* @since 1.3.0
1115
*/
16+
export class MyTestElement extends HTMLElement {
17+
#validatorUrl = 'https://validator.w3.org/nu/';
18+
#result = {};
1219

13-
import { MyElement } from '../MyElement.js';
14-
15-
const { fetch, FormData, Node, Request } = window;
16-
17-
const filterStrings = ['tag seen', 'Stray end tag', 'Bad start tag', 'violates nesting rules', 'Duplicate ID', 'first occurrence of ID', 'Unclosed element', 'not allowed as child of element', 'unclosed elements', 'not allowed on element', 'unquoted attribute value', 'Duplicate attribute'];
18-
19-
const TEMPLATE = `
20-
<template>
21-
<slot></slot>
22-
<style>
23-
form { margin: 1rem 0; }
24-
button { font: inherit; padding: .4rem .75rem; }
25-
a, label { margin-right: .5rem; }
26-
textarea { width: 8rem; }
27-
[ name = out ] { width: 2rem; }
28-
</style>
29-
<form method="POST" action="https://validator.w3.org/nu/"
30-
target="_blank" acceptCharset="utf-8" enctype="multipart/form-data">
31-
<button type="submit">Check HTML! 💙</button>
32-
<details>
33-
<summary>(data)</summary>
34-
<a href="https://validator.w3.org/nu/about.html">Validator</a>
35-
<label>Source <input name="showsource" value="yes" checked type="checkbox"></label>
36-
<label>Outline <input name="showoutline" value="yes" checked type="checkbox"></label>
37-
<label>Output <input name="out" value="html"></label>
38-
<label>Content <textarea name="content"></textarea></label>
39-
</details>
40-
</form>
41-
</template>
42-
`;
43-
44-
export class MyTestElement extends MyElement {
4520
static getTag () {
4621
return 'my-test';
4722
}
4823

24+
get #autoRun () { return this.hasAttribute('auto-run'); }
25+
26+
get #filterStrings () {
27+
return ['tag seen', 'Stray end tag', 'Bad start tag', 'violates nesting rules', 'Duplicate ID', 'first occurrence of ID', 'Unclosed element', 'not allowed as child of element', 'unclosed elements', 'not allowed on element', 'unquoted attribute value', 'Duplicate attribute'];
28+
}
29+
30+
get #filterRegex () { return new RegExp(this.#filterStrings.join('|')); }
31+
32+
get #form () { return this.shadowRoot.querySelector('form'); }
33+
get #elements () { return this.#form.elements; }
34+
4935
async connectedCallback () {
5036
// Doesn't work!
51-
const autoRun = this.getAttribute('auto-run') === 'true';
37+
// const autoRun = this.getAttribute('auto-run') === 'true';
5238

53-
this.$$ = { autoRun };
39+
attachTemplate(this.#htmlTemplate).to.shadowDOM(this);
40+
// this._attachLocalTemplate(TEMPLATE);
5441

55-
this._attachLocalTemplate(TEMPLATE);
42+
this.#elements.content.value = this.#getDocument(document);
5643

57-
this.$$.form = this.shadowRoot.querySelector('form');
58-
59-
this.$$.form.elements.content.value = this._getDocument(document);
44+
// console.debug('Document:', this.#elements.content.value);
6045

6146
// Facilitate Bootstrap ;).
62-
this.style.display = 'block';
63-
this.classList.add('container');
47+
// this.style.display = 'block';
48+
// this.classList.add('container');
6449

65-
// this.$$.form.addEventListener('submit', ev => this._handleSubmit(ev));
50+
// this.#form.addEventListener('submit', ev => this.#handleSubmit(ev));
6651

67-
if (autoRun) {
52+
if (this.#autoRun) {
6853
await this._run();
6954
}
7055

71-
console.debug('my-test:', this.$$, this);
56+
console.debug('my-test:', this.#autoRun, [this]);
7257
}
7358

7459
async _run (form) {
75-
const { data, res, req } = await this._fetchValidatorResult(form || this.$$.form);
60+
const { data, res, req } = await this.#fetchValidatorResult(form || this.#form);
7661

77-
const { accRelevant, accNotRel, filter } = this._filterAccessibilityRelevant(data.messages || []);
62+
const { accRelevant, accNotRelevant } = this.#filterAccessibilityRelevant(data.messages || []);
7863

79-
this.$$.result = { accRelevant, accNotRel, all: data, filter, res, req };
64+
this.#result = { accRelevant, accNotRelevant, all: data, res, req };
8065

8166
// console.debug('my-test, run:', this.$$);
8267

83-
return this.$$.result;
68+
return this.#result;
8469
}
8570

8671
get _result () {
87-
return this.$$.result;
72+
return this.#result;
8873
}
8974

90-
async _handleSubmit (ev) {
75+
async #handleSubmit (ev) {
9176
if (ev) { ev.preventDefault(); }
9277

9378
const FORM = ev ? ev.target : this.$$.form;
9479

95-
FORM.elements.content.value = this._getDocument(document);
80+
FORM.elements.content.value = this.#getDocument(document);
9681

9782
return await this._run(FORM);
9883
}
9984

100-
async _fetchValidatorResult (FORM) {
85+
async #fetchValidatorResult (FORM) {
10186
const formData = new FormData(FORM);
10287

10388
formData.set('out', 'json');
@@ -117,7 +102,7 @@ export class MyTestElement extends MyElement {
117102
return { data, res, req };
118103
}
119104

120-
_getDocument (elem) {
105+
#getDocument (elem) {
121106
/* eslint-disable-next-line */ // let doc;
122107
for (var doc = '', elem = elem.firstChild; elem;) {
123108
switch (elem.nodeType) {
@@ -142,19 +127,55 @@ export class MyTestElement extends MyElement {
142127
return doc;
143128
}
144129

145-
_filterAccessibilityRelevant (messages) {
146-
const filterRE = filterStrings.join('|');
147-
const accNotRel = [];
130+
#filterAccessibilityRelevant (messages) {
131+
const accNotRelevant = [];
148132

149133
const accRelevant = messages.filter(it => {
150-
const isRel = it.message.match(filterRE) !== null;
134+
const isRelevant = this.#filterRegex.test(it.message);
135+
// const isRel = it.message.match(this.#filterRegex) !== null;
151136

152-
if (!isRel) {
153-
accNotRel.push(it);
137+
if (!isRelevant) {
138+
accNotRelevant.push(it);
154139
}
155-
return isRel;
140+
return isRelevant;
156141
});
157142

158-
return { accRelevant, accNotRel, filter: filterStrings };
143+
return { accRelevant, accNotRelevant };
144+
}
145+
146+
get #htmlTemplate () {
147+
return `
148+
<template>
149+
<slot></slot>
150+
<style>${this.#stylesheet}</style>
151+
<form part="form" method="POST" action="${this.#validatorUrl}"
152+
target="_blank" acceptCharset="utf-8" enctype="multipart/form-data">
153+
<button part="button" type="submit">Check HTML!</button>
154+
<details part="details">
155+
<summary part="summary">(data)</summary>
156+
<a part="a" href="https://validator.w3.org/nu/about.html">Validator</a>
157+
<label>Source <input name="showsource" value="yes" checked type="checkbox"></label>
158+
<label>Outline <input name="showoutline" value="yes" checked type="checkbox"></label>
159+
<label>Output <input name="out" value="html"></label>
160+
<label>Content <textarea name="content" part="textarea"></textarea></label>
161+
</details>
162+
</form>
163+
</template>`;
164+
}
165+
166+
get #stylesheet () {
167+
return `
168+
form { margin: 1rem 0; }
169+
.X_button { font: inherit; padding: .4rem .75rem; }
170+
button::after {
171+
content: '💙';
172+
margin-left: .25rem;
173+
}
174+
a, label { margin-right: .5rem; }
175+
textarea { width: 8rem; }
176+
[ name = out ] { width: 2rem; }
177+
`;
159178
}
160179
}
180+
181+
export default MyTestElement;

0 commit comments

Comments
 (0)