vielle.dev
Personal Site
Create 2 utility functions for selecting elements.
- elIs takes an Element | null (ex: from document.querySelector()), and a class (ex: HTMLAnchorElement), then returns the element if it exists and is an instanceof the class, and throws an error if its null or the wrong type. Also optionally takes a name for the error message. This should be used when it's known that the element will be of a given type and it's critical failure if its wrong.
- querySelector wraps elIs by performing the query for you, to reduce line length.
- querySelectorAll performs elIs/querySelector on a nodelist. Again to reduce line length
+108
-1
src/components/playing/NowPlaying.astro
+108
-1
src/components/playing/NowPlaying.astro
···
343
</style>
344
345
<script>
346
+
/*************
347
+
* FUNCTIONS *
348
+
*************/
349
+
350
+
// utility
351
+
function elIs<T extends typeof Element>(
352
+
el: Element | null,
353
+
is: T,
354
+
name?: string,
355
+
): T["prototype"] {
356
+
if (!(el instanceof is))
357
+
throw new Error(
358
+
(name ? name : "Node") +
359
+
" did not match type " +
360
+
is.name +
361
+
".\nFound type " +
362
+
el,
363
+
);
364
+
return el;
365
+
}
366
+
367
+
function querySelector<T extends typeof Element>(
368
+
parent: Element,
369
+
selector: string,
370
+
is: T,
371
+
): T["prototype"];
372
+
function querySelector<T extends typeof Element>(
373
+
selector: string,
374
+
is: T,
375
+
): T["prototype"];
376
+
function querySelector<T extends typeof Element>(
377
+
el: Element | null,
378
+
is: T,
379
+
name?: string,
380
+
): T["prototype"];
381
+
function querySelector<T extends typeof Element>(
382
+
arg1: Element | string | null,
383
+
arg2: T | string,
384
+
arg3?: T | string,
385
+
): T["prototype"] {
386
+
const element =
387
+
arg1 instanceof Element && typeof arg2 === "string"
388
+
? arg1.querySelector(arg2)
389
+
: typeof arg1 === "string"
390
+
? document.querySelector(arg1)
391
+
: arg1;
392
+
393
+
const is = typeof arg2 !== "string" ? arg2 : arg3;
394
+
if (!is || typeof is === "string")
395
+
throw new Error("parameter is: invalid value: " + is);
396
+
397
+
const name =
398
+
typeof arg3 === "string"
399
+
? arg3
400
+
: typeof arg2 === "string"
401
+
? arg2
402
+
: typeof arg1 === "string"
403
+
? arg1
404
+
: undefined;
405
+
406
+
return elIs<T>(element, is, name);
407
+
}
408
+
409
+
function querySelectorAll<T extends typeof Element>(
410
+
parent: Element,
411
+
selector: string,
412
+
is: T,
413
+
): NodeListOf<T["prototype"]>;
414
+
function querySelectorAll<T extends typeof Element>(
415
+
selector: string,
416
+
is: T,
417
+
): NodeListOf<T["prototype"]>;
418
+
function querySelectorAll<T extends typeof Element>(
419
+
el: NodeListOf<Element>,
420
+
is: T,
421
+
name?: string,
422
+
): NodeListOf<T["prototype"]>;
423
+
function querySelectorAll<T extends typeof Element>(
424
+
arg1: Element | string | NodeListOf<Element>,
425
+
arg2: T | string,
426
+
arg3?: T | string,
427
+
): NodeListOf<T["prototype"]> {
428
+
const nodeList =
429
+
typeof arg1 === "string"
430
+
? document.querySelectorAll(arg1)
431
+
: arg1 instanceof NodeList
432
+
? arg1
433
+
: arg1.querySelectorAll(
434
+
typeof arg2 === "string" ? arg2 : (undefined as never),
435
+
);
436
+
437
+
const is = typeof arg2 !== "string" ? arg2 : arg3;
438
+
if (!is || typeof is === "string")
439
+
throw new Error("parameter is: invalid value: " + is);
440
+
441
+
const name =
442
+
typeof arg3 === "string"
443
+
? arg3
444
+
: typeof arg2 === "string"
445
+
? arg2
446
+
: typeof arg1 === "string"
447
+
? arg1
448
+
: undefined;
449
+
450
+
nodeList.forEach((el) => elIs(el, is, name));
451
+
452
+
return nodeList;
453
+
}
454
</script>