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"

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 id="navbar" ${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 id="navtabfixed" ${resaltaSiEstasEn(["/navTabFixed.html"])}
20 href="navTabFixed.html">
21 <span class="material-symbols-outlined">tabs</span>
22 Pestañas fijas
23 </a>
24
25 <a ${resaltaSiEstasEn(["/navbar.html"])} href="navbar.html">
26 <span class="material-symbols-outlined">bottom_navigation</span>
27 Barra de navegación
28 </a>`
29 }
30
31}
32
33customElements.define("nav-tab-fixed", NavTabFixed)

E. js / nav-tab-scrollable.js

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

F. js / registraServiceWorker.js

1"use strict" // usa JavaScript en modo estricto.
2
3const nombreDeServiceWorker = "sw.js"
4
5try {
6 navigator.serviceWorker.register(nombreDeServiceWorker)
7 .then(registro => {
8 console.log(nombreDeServiceWorker, "registrado.")
9 console.log(registro)
10 })
11 .catch(error => console.log(error))
12} catch (error) {
13 console.log(error)
14}