1 | /** Barra de navegación. */ |
2 | import "./nav-drw.js" |
3 | import "./nav-tab-scrollable.js" |
4 | import "./nav-tab-fixed.js" |
5 | import "./nav-bar.js" |
6 | /** Elementos utilizados */ |
7 | import "../lib/js/custom/md-menu-button.js" |
8 | import "../lib/js/custom/md-options-menu.js" |
9 | import "../lib/js/custom/md-overflow-button.js" |
10 | import "../lib/js/custom/md-overflow-menu.js" |
11 | import "../lib/js/custom/md-select-menu.js" |
12 | import "../lib/js/custom/md-top-app-bar.js" |
13 | import "../lib/js/custom/md-slider-field.js" |
14 | import { |
15 | registraServiceWorkerSiEsSoportado |
16 | } from "../lib/js/registraServiceWorkerSiEsSoportado.js" |
17 | |
18 | registraServiceWorkerSiEsSoportado("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). */ |
22 | addEventListener("load", () => document.body.classList.add("fouc")) |
1 | import { resaltaSiEstasEn } from "../lib/js/resaltaSiEstasEn.js" |
2 | |
3 | export 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 | |
33 | customElements.define("nav-bar", NavBar) |
1 | import { resaltaSiEstasEn } from "../lib/js/resaltaSiEstasEn.js" |
2 | import { MdNavigationDrawer } from "../lib/js/custom/MdNavigationDrawer.js" |
3 | |
4 | export 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 | |
106 | customElements.define("nav-drw", NavDrw) |
1 | import { resaltaSiEstasEn } from "../lib/js/resaltaSiEstasEn.js" |
2 | |
3 | export 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 | |
32 | customElements.define("nav-tab-fixed", NavTabFixed) |
1 | import { resaltaSiEstasEn } from "../lib/js/resaltaSiEstasEn.js" |
2 | |
3 | export 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 | |
103 | customElements.define("nav-tab-scrollable", NavTabScrollable) |