24. Carpeta « js »

Versión para imprimir.

A. js / configura.js

1/** Barra de navegación. */
2import "./nav-drw.js"
3import "./nav-tab-scrollable.js"
4import "./nav-tab-fixed.js"
5import "./nav-bar.js"
6/** Elementos utilizados */
7import "../lib/js/custom/md-menu-button.js"
8import "../lib/js/custom/md-options-menu.js"
9import "../lib/js/custom/md-overflow-button.js"
10import "../lib/js/custom/md-overflow-menu.js"
11import "../lib/js/custom/md-select-menu.js"
12import "../lib/js/custom/md-top-app-bar.js"
13import "../lib/js/custom/md-slider-field.js"
14import {
15 registraServiceWorkerSiEsSoportado
16} from "../lib/js/registraServiceWorkerSiEsSoportado.js"
17
18registraServiceWorkerSiEsSoportado("sw.js")
19
20/* Evita los cambios de apariencia al cargar estilos y custom elements, que
21 * son conocidos como Flash Of Unstyled Content (fouc). */
22addEventListener("load", () => document.body.classList.add("fouc"))

B. js / nav-bar.js

1import { resaltaSiEstasEn } from "../lib/js/resaltaSiEstasEn.js"
2
3export class NavBar extends HTMLElement {
4
5 connectedCallback() {
6 this.classList.add("md-navigation-bar")
7
8 this.innerHTML = /* HTML */`
9 <a ${resaltaSiEstasEn(["/index.html", "", "/"])} href="index.html">
10 <span class="material-symbols-outlined">home</span>
11 Inicio
12 </a>
13
14 <a ${resaltaSiEstasEn(["/navTabFixed.html"])} href="navTabFixed.html">
15 <span class="material-symbols-outlined">tabs</span>
16 Pestañas
17 </a>
18
19 <a ${resaltaSiEstasEn(["/navbar.html"])} href="navbar.html">
20 <span class="material-symbols-outlined">bottom_navigation</span>
21 Barra
22 </a>
23
24 <a ${resaltaSiEstasEn(["/formulario.html"])} href="formulario.html">
25 <span class="material-symbols-outlined">newspaper</span>
26 Forma
27 </a>`
28
29 }
30
31}
32
33customElements.define("nav-bar", NavBar)

C. js / nav-drw.js

1import { resaltaSiEstasEn } from "../lib/js/resaltaSiEstasEn.js"
2import { MdNavigationDrawer } from "../lib/js/custom/MdNavigationDrawer.js"
3
4export class NavDrw extends MdNavigationDrawer {
5
6 /**
7 * @override
8 */
9 getHipervinculos() {
10 return /* HTML */`
11 <h1>PWA con MD</h1>
12
13 <a ${resaltaSiEstasEn(["/index.html", "", "/"])} href="index.html">
14 <span class="material-symbols-outlined">home</span>
15 Inicio
16 </a>
17
18 <a ${resaltaSiEstasEn(["/secundaria.html"])} href="secundaria.html">
19 <span class="material-symbols-outlined">scrollable_header</span>
20 Página secundaria
21 </a>
22
23 <a ${resaltaSiEstasEn(["/iconos.html"])} href="iconos.html">
24 <span class="material-symbols-outlined">sentiment_satisfied</span>
25 Íconos
26 </a>
27
28 <a ${resaltaSiEstasEn(["/botones.html"])} href="botones.html">
29 <span class="material-symbols-outlined">right_click</span>
30 Botones
31 </a>
32
33 <a ${resaltaSiEstasEn(["/campos.html"])} href="campos.html">
34 <span class="material-symbols-outlined">password</span>
35 Campos de texto
36 </a>
37
38 <a ${resaltaSiEstasEn(["/select.html"])} href="select.html">
39 <span class="material-symbols-outlined">bottom_panel_close</span>
40 Select
41 </a>
42
43 <a ${resaltaSiEstasEn(["/interruptor.html"])} href="interruptor.html">
44 <span class="material-symbols-outlined">toggle_on</span>
45 Interruptores
46 </a>
47
48 <a ${resaltaSiEstasEn(["/slider.html"])} href="slider.html">
49 <span class="material-symbols-outlined">linear_scale</span>
50 Sliders
51 </a>
52
53 <a ${resaltaSiEstasEn(["/segmentado.html"])} href="segmentado.html">
54 <span class="material-symbols-outlined">splitscreen_left</span>
55 Botón segmentado
56 </a>
57
58 <a ${resaltaSiEstasEn(["/one-line.html"])} href="one-line.html">
59 <span class="material-symbols-outlined">list</span>
60 Listas one-line
61 </a>
62
63 <a ${resaltaSiEstasEn(["/two-line.html"])} href="two-line.html">
64 <span class="material-symbols-outlined">lists</span>
65 Listas two-line
66 </a>
67
68 <a ${resaltaSiEstasEn(["/three-line.html"])} href="three-line.html">
69 <span class="material-symbols-outlined">receipt_long</span>
70 Listas three-line
71 </a>
72
73 <a ${resaltaSiEstasEn(["/tarjetas.html"])} href="tarjetas.html">
74 <span class="material-symbols-outlined">cards</span>
75 Tarjetas
76 </a>
77
78 <a ${resaltaSiEstasEn(["/navtab.html"])} href="navtab.html">
79 <span class="material-symbols-outlined">swipe_left</span>
80 Pestañas scrollable
81 </a>
82
83 <a ${resaltaSiEstasEn(["/navTabFixed.html"])} href="navTabFixed.html">
84 <span class="material-symbols-outlined">tabs</span>
85 Pestañas fijas
86 </a>
87
88 <a ${resaltaSiEstasEn(["/navbar.html"])} href="navbar.html">
89 <span class="material-symbols-outlined">bottom_navigation</span>
90 Barra de navegación
91 </a>
92
93 <a ${resaltaSiEstasEn(["/formulario.html"])} href="formulario.html">
94 <span class="material-symbols-outlined">newspaper</span>
95 Formulario
96 </a>
97
98 <a ${resaltaSiEstasEn(["/ayuda.html"])} href="ayuda.html">
99 <span class="material-symbols-outlined">help</span>
100 Ayuda
101 </a>`
102 }
103
104}
105
106customElements.define("nav-drw", NavDrw)

D. js / nav-tab-fixed.js

1import { resaltaSiEstasEn } from "../lib/js/resaltaSiEstasEn.js"
2
3export class NavTabFixed extends HTMLElement {
4
5 connectedCallback() {
6 this.classList.add("md-tab", "fixed")
7
8 this.innerHTML = /* HTML */`
9 <a ${resaltaSiEstasEn(["/index.html", "", "/"])} href="index.html">
10 <span class="material-symbols-outlined">home</span>
11 Inicio
12 </a>
13
14 <a ${resaltaSiEstasEn(["/navtab.html"])} href="navtab.html">
15 <span class="material-symbols-outlined">swipe_left</span>
16 Pestañas scrollable
17 </a>
18
19 <a ${resaltaSiEstasEn(["/navTabFixed.html"])} href="navTabFixed.html">
20 <span class="material-symbols-outlined">tabs</span>
21 Pestañas fijas
22 </a>
23
24 <a ${resaltaSiEstasEn(["/navbar.html"])} href="navbar.html">
25 <span class="material-symbols-outlined">bottom_navigation</span>
26 Barra de navegación
27 </a>`
28 }
29
30}
31
32customElements.define("nav-tab-fixed", NavTabFixed)

E. js / nav-tab-scrollable.js

1import { resaltaSiEstasEn } from "../lib/js/resaltaSiEstasEn.js"
2
3export class NavTabScrollable extends HTMLElement {
4
5 connectedCallback() {
6 this.classList.add("md-tab", "scrollable")
7
8 this.innerHTML = /* HTML */`
9 <a ${resaltaSiEstasEn(["/index.html", "", "/"])} href="index.html">
10 <span class="material-symbols-outlined">home</span>
11 Inicio
12 </a>
13
14 <a ${resaltaSiEstasEn(["/secundaria.html"])} href="secundaria.html">
15 <span class="material-symbols-outlined">scrollable_header</span>
16 Página secundaria
17 </a>
18
19 <a ${resaltaSiEstasEn(["/iconos.html"])} href="iconos.html">
20 <span class="material-symbols-outlined">sentiment_satisfied</span>
21 Íconos
22 </a>
23
24 <a ${resaltaSiEstasEn(["/botones.html"])} href="botones.html">
25 <span class="material-symbols-outlined">right_click</span>
26 Botones
27 </a>
28
29 <a ${resaltaSiEstasEn(["/campos.html"])} href="campos.html">
30 <span class="material-symbols-outlined">password</span>
31 Campos de texto
32 </a>
33
34 <a ${resaltaSiEstasEn(["/select.html"])} href="select.html">
35 <span class="material-symbols-outlined">bottom_panel_close</span>
36 Select
37 </a>
38
39 <a ${resaltaSiEstasEn(["/interruptor.html"])} href="interruptor.html">
40 <span class="material-symbols-outlined">toggle_on</span>
41 Interruptores
42 </a>
43
44 <a ${resaltaSiEstasEn(["/slider.html"])} href="slider.html">
45 <span class="material-symbols-outlined">linear_scale</span>
46 Sliders
47 </a>
48
49 <a ${resaltaSiEstasEn(["/segmentado.html"])} href="segmentado.html">
50 <span class="material-symbols-outlined">splitscreen_left</span>
51 Botón segmentado
52 </a>
53
54 <a ${resaltaSiEstasEn(["/one-line.html"])} href="one-line.html">
55 <span class="material-symbols-outlined">list</span>
56 Listas one-line
57 </a>
58
59 <a ${resaltaSiEstasEn(["/two-line.html"])} href="two-line.html">
60 <span class="material-symbols-outlined">lists</span>
61 Listas two-line
62 </a>
63
64 <a ${resaltaSiEstasEn(["/three-line.html"])} href="three-line.html">
65 <span class="material-symbols-outlined">receipt_long</span>
66 Listas three-line
67 </a>
68
69 <a ${resaltaSiEstasEn(["/tarjetas.html"])} href="tarjetas.html">
70 <span class="material-symbols-outlined">cards</span>
71 Tarjetas
72 </a>
73
74 <a ${resaltaSiEstasEn(["/navtab.html"])} href="navtab.html">
75 <span class="material-symbols-outlined">swipe_left</span>
76 Pestañas scrollable
77 </a>
78
79 <a ${resaltaSiEstasEn(["/navTabFixed.html"])} href="navTabFixed.html">
80 <span class="material-symbols-outlined">tabs</span>
81 Pestañas fijas
82 </a>
83
84 <a ${resaltaSiEstasEn(["/navbar.html"])} href="navbar.html">
85 <span class="material-symbols-outlined">bottom_navigation</span>
86 Barra de navegación
87 </a>
88
89 <a ${resaltaSiEstasEn(["/formulario.html"])} href="formulario.html">
90 <span class="material-symbols-outlined">newspaper</span>
91 Formulario
92 </a>
93
94 <a ${resaltaSiEstasEn(["/ayuda.html"])} href="ayuda.html">
95 <span class="material-symbols-outlined">help</span>
96 Ayuda
97 </a>`
98
99 }
100
101}
102
103customElements.define("nav-tab-scrollable", NavTabScrollable)