12. Carpeta « lib / js / custom »

Versión para imprimir.

A. lib / js / custom / md-menu-button.js

1import { MdNavigationDrawer } from "./MdNavigationDrawer.js"
2
3export class MdMenuButton extends HTMLButtonElement {
4
5 constructor() {
6 super()
7 this.abreDrawer = this.abreDrawer.bind(this)
8 }
9
10 connectedCallback() {
11 this.type = "button"
12 this.classList.add("md-standard-icon-button")
13 this.innerHTML = /* HTML */
14 `<span class="material-symbols-outlined">menu</span>`
15 this.addEventListener("click", this.abreDrawer)
16 }
17
18 disconnectedCallback() {
19 this.removeEventListener("click", this.abreDrawer)
20 }
21
22 abreDrawer() {
23 const drawer = document.querySelector(".drawer")
24 if (drawer instanceof MdNavigationDrawer) {
25 drawer.abre()
26 }
27 }
28}
29
30customElements.define("md-menu-button", MdMenuButton, { extends: "button" })

B. lib / js / custom / md-options-menu.js

1import { abreElementoHtml } from "../abreElementoHtml.js"
2import { cierraElementoHtmo } from "../cierraElementoHtmo.js"
3import { querySelector } from "../querySelector.js"
4
5export class MdOptionsMenu extends HTMLElement {
6
7 getContent() {
8 return /* HTML */`
9
10 <style>
11
12 :host {
13 position: absolute;
14 }
15
16 </style>
17
18 <slot></slot>`
19 }
20
21 constructor() {
22 super()
23 const shadow = this.attachShadow({ mode: "open" })
24 shadow.innerHTML = this.getContent()
25 this._configuraOpciones = this._configuraOpciones.bind(this)
26
27 /**
28 * @private
29 * @type { HTMLSlotElement }
30 */
31 this._slot = querySelector(shadow, "slot")
32 /**
33 * @private
34 * @type { HTMLElement[] }
35 */
36 this._opciones = []
37 this._slot.addEventListener("slotchange", this._configuraOpciones)
38 }
39
40 connectedCallback() {
41 this.classList.add("md-menu")
42 this.role = "listbox"
43 }
44
45 /**
46 * @returns {readonly Readonly<HTMLElement>[]}
47 */
48 get opciones() {
49 return this._opciones
50 }
51
52 get seleccion() {
53 /** @type { HTMLInputElement | null } */
54 const seleccionado = this.querySelector(".selected")
55 return seleccionado === null ? "" : seleccionado.value
56 }
57
58 _configuraOpciones() {
59 /**
60 * @type {HTMLElement[]}
61 */
62 const opciones = []
63 for (const opcion of this._slot.assignedElements()) {
64 opcion.role = "option"
65 if (opcion instanceof HTMLElement) {
66 opciones.push(opcion)
67 }
68 }
69 this._opciones = opciones
70 }
71
72 abre() {
73 abreElementoHtml(this)
74 }
75
76
77 cierra() {
78 cierraElementoHtmo(this)
79 }
80
81 /**
82 * @param {string} value
83 */
84 muestraValue(value) {
85 let texto = ""
86 for (const opcion of this._opciones) {
87 if (opcion.dataset.value === value) {
88 opcion.classList.add("selected")
89 let textContent = opcion.textContent
90 if (texto === "" && textContent !== null) {
91 textContent = textContent.trim()
92 if (textContent !== "") {
93 texto = textContent
94 }
95 }
96 } else {
97 opcion.classList.remove("selected")
98 }
99 }
100 return texto
101 }
102
103}
104
105customElements.define("md-options-menu", MdOptionsMenu)

C. lib / js / custom / md-overflow-button.js

1import { ES_APPLE } from "../const/ES_APPLE.js"
2
3export class MdOverflowButton extends HTMLButtonElement {
4
5 connectedCallback() {
6 this.type = "button"
7 this.classList.add("md-standard-icon-button")
8 this.innerHTML = ES_APPLE
9 ? /* HTML */
10 `<span style="color: var(--md-sys-color-on-surface-variant)"
11 class="material-symbols-outlined">
12 more_horiz
13 </span>`
14 : /* HTML */
15 `<span style="color: var(--md-sys-color-on-surface-variant)"
16 class="material-symbols-outlined">
17 more_vert
18 </span>`
19 }
20
21}
22
23customElements
24 .define("md-overflow-button", MdOverflowButton, { extends: "button" })

D. lib / js / custom / md-overflow-menu.js

1import { abreElementoHtml } from "../abreElementoHtml.js"
2import { cierraElementoHtmo } from "../cierraElementoHtmo.js"
3
4export class MdOverflowMenu extends HTMLElement {
5
6 getContent() {
7 return /* HTML */`
8
9 <style>
10
11 :host {
12 position: fixed;
13 min-width: 7rem;
14 max-width: 280px;
15 }
16
17 ::slotted(*) {
18 text-align: start;
19 width: 100%;
20 border: none;
21 background-color: transparent;
22 }
23
24 </style>
25
26 <slot></slot>`
27 }
28
29 constructor() {
30 super()
31 const shadow = this.attachShadow({ mode: "open" })
32 shadow.innerHTML = this.getContent()
33 this.clicCierra = this.clicCierra.bind(this)
34 /**
35 * @private
36 * @type {HTMLButtonElement| null}
37 */
38 this._toggleButton = null
39 }
40
41 connectedCallback() {
42 this.classList.add("md-menu")
43 this.role = "menu"
44 }
45
46 /**
47 * @param {HTMLButtonElement} toggleButton
48 */
49 alterna(toggleButton) {
50 this._toggleButton = toggleButton
51 const top = toggleButton.offsetTop + toggleButton.offsetHeight - 4
52 const right =
53 innerWidth - (toggleButton.offsetLeft + toggleButton.offsetWidth) - 3
54 this.style.top = `${top}px`
55 this.style.right = `${right}px`
56 const list = this.classList
57 if (list.contains("open")) {
58 this.cierra()
59 } else {
60 this.abre()
61 }
62 }
63
64 abre() {
65 document.addEventListener("click", this.clicCierra)
66 abreElementoHtml(this)
67 }
68
69 cierra() {
70 document.removeEventListener("click", this.clicCierra)
71 cierraElementoHtmo(this)
72 }
73
74 /**
75 * @param {Event} evt
76 */
77 clicCierra(evt) {
78 const target = evt.target
79 if (this.classList.contains("open")
80 && this._toggleButton !== null
81 && target instanceof HTMLElement
82 && !this._toggleButton.contains(target)) {
83 this.cierra()
84 }
85 }
86}
87
88customElements.define("md-overflow-menu", MdOverflowMenu)

E. lib / js / custom / md-select-menu.js

1import { getAttribute } from "../getAttribute.js"
2import { querySelector } from "../querySelector.js"
3import { MdOptionsMenu } from "./md-options-menu.js"
4
5export class MdSelectMenu extends HTMLElement {
6
7 static get observedAttributes() {
8 return ["options", "value", "required"]
9 }
10
11 getContent() {
12 return /* HTML */ `
13 <link rel="stylesheet" href="/lib/css/material-symbols-outlined.css">
14
15 <style>
16 :host {
17 display: block;
18 cursor: default;
19 }
20
21 output {
22 display: block;
23 padding-right: 2rem;
24 white-space: nowrap;
25 text-overflow: ellipsis;
26 overflow: hidden;
27 }
28
29 #up {
30 position: absolute;
31 bottom: 0.5rem;
32 right: 0.75rem;
33 display: none;
34 color: var(--md-sys-color-on-surface-variant);
35 }
36
37 #down {
38 position: absolute;
39 bottom: 0.5rem;
40 right: 0.75rem;
41 color: var(--md-sys-color-on-surface-variant);
42 }
43
44 :host(.open) #up {
45 display: inline-block;
46 }
47
48 :host(.open) #down {
49 display: none;
50 }
51
52 :host(:invalid) #up,
53 :host(:invalid) #down {
54 color: var(--md-sys-color-error);
55 }
56
57 </style>
58 <output></output>
59 <span id="down" class="material-symbols-outlined">
60 arrow_drop_down
61 </span>
62 <span id="up" class="material-symbols-outlined">
63 arrow_drop_up
64 </span>`
65 }
66
67 constructor() {
68 super()
69
70 const shadow = this.attachShadow({ mode: "open" })
71 shadow.innerHTML = this.getContent()
72
73 this._alterna = this._alterna.bind(this)
74 this._onKeyDown = this._onKeyDown.bind(this)
75 this._cierra = this._cierra.bind(this)
76 this._clicEnDialogo = this._clicEnDialogo.bind(this)
77 this.clicExterno = this.clicExterno.bind(this)
78 this.muestraValue = this.muestraValue.bind(this)
79
80 /**
81 * @private
82 * @type {string}
83 */
84 this._customValidity = ""
85
86 /**
87 * @private
88 * @type { HTMLOutputElement }
89 */
90 this.output = querySelector(shadow, "output")
91 /**
92 * @private
93 * @type { MdOptionsMenu | null }
94 */
95 this._optionsMenu = null
96 /**
97 * @protected
98 * @readonly
99 */
100 this._internals = this.attachInternals()
101 this._internals.role = "select"
102 addEventListener("load", this.muestraValue)
103 }
104
105 connectedCallback() {
106 this.tabIndex = 0
107 this.role = "combobox"
108 this.ariaHasPopup = "listbox"
109 this.ariaExpanded = "false"
110 this["aria-controls"] = this.options
111 this.addEventListener("keydown", this._onKeyDown)
112 const parentElement = this.parentElement
113 if (parentElement !== null) {
114 parentElement.addEventListener("click", this._alterna)
115 }
116 }
117
118 /**
119 * @param {string} nombreDeAtributo
120 * @param {string} _valorAnterior
121 * @param {string} _nuevoValor
122 */
123 attributeChangedCallback(nombreDeAtributo, _valorAnterior, _nuevoValor) {
124 switch (nombreDeAtributo) {
125 case "options":
126 this._cambiaOptions()
127 break
128 case "value":
129 this.muestraValue()
130 break
131 case "required":
132 this.checkValidity()
133 break
134 }
135 }
136
137 get options() {
138 return getAttribute(this, "options")
139 }
140
141 set options(options) {
142 this.setAttribute("options", options)
143 }
144
145 _cambiaOptions() {
146 if (this._optionsMenu !== null) {
147 this._optionsMenu = null
148 }
149 this["aria-controls"] = this.options
150 }
151
152 get required() {
153 return this.hasAttribute("required")
154 }
155
156 set required(required) {
157 this.toggleAttribute("required", Boolean(required))
158 }
159
160 get value() {
161 return getAttribute(this, "value")
162 }
163
164 set value(value) {
165 this.setAttribute("value", value)
166 }
167
168 get name() {
169 return getAttribute(this, "name")
170 }
171
172 set name(name) {
173 this.setAttribute("name", name)
174 }
175
176 muestraValue() {
177 const value = this.value
178 this._internals.setFormValue(value)
179
180 // En un futuro se usará esto en vez de la clase populated.
181 // if (value === "") {
182 // this._internals.states.delete("populated")
183 // } else {
184 // this._internals.states.add("populated")
185 // }
186
187 if (this.isConnected) {
188 if (value === "") {
189 this.classList.remove("populated")
190 } else {
191 this.classList.add("populated")
192 }
193 this._checkValidity()
194 const optionsMenu = this.optionsMenu
195 if (optionsMenu !== null) {
196 this.output.value = optionsMenu.muestraValue(value)
197 }
198 }
199 }
200
201 get form() {
202 return this._internals && this._internals.form
203 }
204
205 get willValidate() {
206 return this._internals ? this._internals.willValidate : true
207 }
208
209 /**
210 * @param {string} message
211 */
212 setCustomValidity(message) {
213 this._customValidity = message
214 this._checkValidity()
215 }
216
217 /**
218 * @returns {ValidityState}
219 */
220 get validity() {
221 return this._internals.validity
222 }
223
224 checkValidity() {
225 return this._internals.checkValidity()
226 }
227
228 reportValidity() {
229 return this._internals.reportValidity()
230 }
231
232 get validationMessage() {
233 return this._internals.validationMessage
234 }
235 /** @returns {boolean} */
236 _checkValidity() {
237 if (this._customValidity !== "") {
238 this._internals.setValidity({ customError: true }, this._customValidity)
239 return false
240 } else if (this.required && this.value === "") {
241 this._internals.setValidity({ valueMissing: true }, "Seleccione una opción.")
242 return false
243 } else {
244 this._internals.setValidity({})
245 return true
246 }
247 }
248
249 /** @private */
250 _alterna() {
251 if (this.classList.contains("open")) {
252 this._cierra()
253 } else {
254 this._abre()
255 }
256 }
257
258 /** @private */
259 _abre() {
260 this.classList.add("open")
261 const parentElement = this.parentElement
262 if (parentElement !== null) {
263 const optionsMenu = this.optionsMenu
264 if (optionsMenu !== null) {
265 optionsMenu.style.top = `${parentElement.offsetTop + 58}px`
266 optionsMenu.style.left = `${parentElement.offsetLeft}px`
267 optionsMenu.style.width = `${parentElement.offsetWidth}px`
268 optionsMenu.abre()
269 this.focus()
270 optionsMenu.addEventListener("click", this._clicEnDialogo)
271 }
272 this.ariaExpanded = "true"
273 document.addEventListener("click", this.clicExterno)
274 }
275 }
276
277 /** @private */
278 _cierra() {
279 this.classList.remove("open")
280 const optionsMenu = this.optionsMenu
281 if (optionsMenu !== null) {
282 optionsMenu.cierra()
283 optionsMenu.removeEventListener("click", this._clicEnDialogo)
284 }
285 this.ariaExpanded = "false"
286 document.removeEventListener("click", this.clicExterno)
287 this.dispatchEvent(new Event("input", { bubbles: true }))
288 }
289
290 get optionsMenu() {
291 if (this._optionsMenu === null) {
292 if (this.options !== "") {
293 const optionsMenu = document.getElementById(this.options)
294 if (optionsMenu instanceof MdOptionsMenu) {
295 this._optionsMenu = optionsMenu
296 } else {
297 throw new Error(`Valor incorrecto para options: "${this.options}".`)
298 }
299 }
300 }
301 return this._optionsMenu
302 }
303
304 /** @private */
305 _avanzaOpcion() {
306 const i = this._valueIndex
307 if (i > -1) {
308 const optionsMenu = this.optionsMenu
309 if (optionsMenu !== null) {
310 const opciones = optionsMenu.opciones
311 if (i < opciones.length - 1) {
312 this.value = getAttribute(opciones[i + 1], "data-value")
313 }
314 }
315 }
316 }
317
318 /** @private */
319 _retrocedeOpcion() {
320 const i = this._valueIndex
321 if (i > -1) {
322 const optionsMenu = this.optionsMenu
323 if (optionsMenu !== null) {
324 const opciones = optionsMenu.opciones
325 if (i > 0) {
326 this.value = getAttribute(opciones[i - 1], "data-value")
327 }
328 }
329 }
330 }
331
332 /**
333 * @private
334 * @returns {number}
335 */
336 get _valueIndex() {
337 const value = this.value
338 const optionsMenu = this.optionsMenu
339 return (optionsMenu === null
340 ? -1
341 : optionsMenu.opciones.findIndex(opcion => opcion.dataset.value === value))
342 }
343
344 /**
345 * @private
346 * @param {Event} event
347 */
348 _clicEnDialogo(event) {
349 const target = event.target
350 const optionsMenu = this.optionsMenu
351 let value = ""
352 if (optionsMenu !== null) {
353 for (const opcion of optionsMenu.opciones) {
354 if (opcion === target) {
355 opcion.classList.add("selected")
356 value = getAttribute(opcion, "data-value")
357 } else {
358 opcion.classList.remove("selected")
359 }
360 }
361 }
362 this.value = value
363 this._cierra()
364 this.focus()
365}
366
367 /**
368 * @param {Event} evt
369 */
370 clicExterno(evt) {
371 const target = evt.target
372 const parentElement = this.parentElement
373 const optionsMenu = this._optionsMenu
374 if (this.classList.contains("open")
375 && target instanceof HTMLElement
376 && parentElement !== null
377 && !parentElement.contains(target)
378 && optionsMenu !== null
379 && !optionsMenu.contains(target)) {
380 this._cierra()
381 }
382 }
383
384 /**
385 * @param { KeyboardEvent } event
386 */
387 _onKeyDown(event) {
388 const key = event.key
389 const optionsMenu = this._optionsMenu
390 if (optionsMenu !== null) {
391 if (optionsMenu.classList.contains("open")) {
392 if (key === "ArrowDown") {
393 event.preventDefault()
394 this._avanzaOpcion()
395 } else if (key === "ArrowUp") {
396 event.preventDefault()
397 this._retrocedeOpcion()
398 } else if (key === "Escape") {
399 event.preventDefault()
400 this._cierra()
401 } else if (key === " ") {
402 event.preventDefault()
403 this._cierra()
404 } else if (key === "Tab") {
405 this._cierra()
406 } else {
407 event.preventDefault()
408 }
409 } else if (key === " ") {
410 event.preventDefault()
411 this._abre()
412 } else if (key === "Tab") {
413 this._cierra()
414 } else {
415 event.preventDefault()
416 }
417 }
418 }
419
420}
421
422MdSelectMenu.formAssociated = true
423
424customElements.define("md-select-menu", MdSelectMenu)

F. lib / js / custom / md-slider-field.js

1import { querySelector } from "../querySelector.js"
2
3export class MdSliderField extends HTMLElement {
4
5 getContent() {
6 return /* HTML */`
7 <style>
8 :host {
9 display: block;
10 margin: 1rem;
11 }
12
13 :host([hidden]) {
14 display: none;
15 }
16
17 #label::slotted(*) {
18 display: block;
19 white-space: nowrap;
20 text-overflow: ellipsis;
21 overflow: hidden;
22 color: var(--md-sys-color-on-surface-variant);
23 font-family: var(--md-sys-typescale-body-small-font);
24 font-weight: var(--md-sys-typescale-body-small-weight);
25 font-size: var(--md-sys-typescale-body-small-size);
26 font-style: var(--md-sys-typescale-body-small-font-style);
27 letter-spacing: var(--md-sys-typescale-body-small-tracking);
28 line-height: var(--md-sys-typescale-body-small-line-height);
29 text-transform: var(--md-sys-typescale-body-small-text-transform);
30 text-decoration: var(--md-sys-typescale-body-small-text-decoration);
31 }
32
33 [name="slider"]::slotted(input) {
34 -webkit-appearance: none;
35 appearance: none;
36 height: 0.25rem;
37 border-radius: 0.125rem;
38 background-image:
39 linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-primary) 50%, var(--md-sys-color-surface-container-highest) 50%, var(--md-sys-color-surface-container-highest) 100%);
40 }
41
42 [name="slider"]::slotted(input:focus) {
43 outline: none;
44 }
45
46 [name="supporting"]::slotted(*) {
47 display: block;
48 color: var(--md-sys-color-on-surface-variant);
49 font-family: var(--md-sys-typescale-body-small-font);
50 font-weight: var(--md-sys-typescale-body-small-weight);
51 font-size: var(--md-sys-typescale-body-small-size);
52 font-style: var(--md-sys-typescale-body-small-font-style);
53 letter-spacing: var(--md-sys-typescale-body-small-tracking);
54 line-height: var(--md-sys-typescale-body-small-line-height);
55 text-transform: var(--md-sys-typescale-body-small-text-transform);
56 text-decoration: var(--md-sys-typescale-body-small-text-decoration);
57 padding-top: 0.5rem;
58 white-space: nowrap;
59 text-overflow: ellipsis;
60 overflow: hidden;
61 }
62 </style>
63 <slot id="label"></slot>
64 <slot name="slider"></slot>
65 <slot name="supporting"></slot>`
66 }
67
68 constructor() {
69 super()
70 const shadow = this.attachShadow({ mode: "open", delegatesFocus: true })
71 shadow.innerHTML = this.getContent()
72 this._configuraSlider = this._configuraSlider.bind(this)
73 this.analiza = this.analiza.bind(this)
74
75 /**
76 * @private
77 * @type {HTMLSlotElement}
78 */
79 this._slotSlider = querySelector(shadow, '[name="slider"]')
80 /**
81 * @private
82 * @type {HTMLInputElement|null}
83 */
84 this._input = null
85 this._slotSlider.addEventListener("slotchange", this._configuraSlider)
86 }
87
88 /** @private */
89 _configuraSlider() {
90 if (this._input !== null) {
91 this._input.removeEventListener("input", this.analiza)
92 this._input = null
93 }
94 for (const input of this._slotSlider.assignedElements()) {
95 if (input instanceof HTMLInputElement) {
96 this._input = input
97 input.addEventListener("input", this.analiza)
98 this.analiza()
99 }
100 }
101 }
102
103 analiza() {
104 const i = this._input
105 if (i !== null) {
106 const v = i.valueAsNumber
107 const min = parseFloat(i.min)
108 const max = parseFloat(i.max)
109 const value = (v - min) / (max - min) * 100
110 i.title = v.toString()
111 i.style.background =
112 `linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-primary) ${value
113 }%, var(--md-sys-color-surface-container-highest) ${value
114 }%, var(--md-sys-color-surface-container-highest) 100%)`
115 }
116 }
117
118}
119
120customElements.define("md-slider-field", MdSliderField)

G. lib / js / custom / md-top-app-bar.js

1import { ES_APPLE } from "../const/ES_APPLE.js"
2import { getAttribute } from "../getAttribute.js"
3import { querySelector } from "../querySelector.js"
4
5class MdTopAppBar extends HTMLElement {
6
7 getContent() {
8 return /* HTML */`
9 <style>
10
11 :host {
12 display: flex;
13 box-sizing: border-box;
14 align-items: center;
15 padding: 0 0.25rem;
16 background-color: var(--md-sys-color-surface);
17 position: sticky;
18 z-index: 1;
19 left: env(titlebar-area-x, 0);
20 top: env(titlebar-area-y, 0);
21 height: env(titlebar-area-height, 4rem);
22 width: env(titlebar-area-width, 100%);
23 }
24
25 :host(.apple) {
26 height: env(titlebar-area-height, 3rem);
27 }
28
29 :host(.scroll) {
30 background-color: var(--md-sys-color-surface-container-low);
31 }
32
33 #navigation {
34 flex: 0 0 auto;
35 overflow: hidden
36 }
37
38 #navigation ::slotted(*) {
39 color: var(--md-sys-color-on-surface);
40 }
41
42 #acciones {
43 margin-left: auto;
44 flex: 0 0 auto;
45 overflow: hidden
46 }
47
48 :host(.centrado) #acciones,
49 :host(.center-aligned) #acciones {
50 flex: 0 0 3rem;
51 overflow: hidden
52 }
53
54 #headline::slotted(*) {
55 -webkit-app-region: drag;
56 flex: 1 1 auto;
57 white-space: nowrap;
58 text-overflow: ellipsis;
59 overflow: hidden;
60 font-family: var(--md-sys-typescale-title-large-font);
61 font-weight: var(--md-sys-typescale-title-large-weight);
62 font-size: var(--md-sys-typescale-title-large-size);
63 font-style: var(--md-sys-typescale-title-large-font-style);
64 letter-spacing: var(--md-sys-typescale-title-large-tracking);
65 line-height: var(--md-sys-typescale-title-large-line-height);
66 text-transform: var(--md-sys-typescale-title-large-text-transform);
67 text-decoration: var(--md-sys-typescale-title-large-text-decoration);
68 color: var(--md-sys-color-on-surface);
69 }
70
71 :host(.center-aligned) #headline::slotted(*) {
72 flex: 1 1 auto;
73 text-align: center
74 }
75
76 </style>
77
78 <span id="navigation">
79 <slot name="navigation"></slot>
80 </span>
81 <slot id="headline"></slot>
82 <span id="acciones">
83 <slot name="action"></slot>
84 </span>`
85 }
86
87 constructor() {
88 super()
89 if (ES_APPLE) {
90 document.body.classList.add("apple")
91 document.body.classList.remove("material")
92 } else {
93 document.body.classList.add("material")
94 document.body.classList.remove("apple")
95 }
96
97 /**
98 * @private
99 * @readonly
100 */
101 const shadow = this.attachShadow({ mode: "open" })
102 shadow.innerHTML = this.getContent()
103 this._configuraAction = this._configuraAction.bind(this)
104 /**
105 * @private
106 * @type {number}
107 */
108 this._posY = 0
109 /**
110 * @private
111 * @type {boolean}
112 */
113 this._scrolling = false
114 /**
115 * @private
116 * @type { HTMLSlotElement }
117 */
118 this._navigation = querySelector(shadow, '[name="navigation"]')
119 /**
120 * @private
121 * @type { HTMLSlotElement }
122 */
123 this._action = querySelector(shadow, '[name="action"]')
124 /**
125 * @private
126 * @type { HTMLHeadingElement | null }
127 */
128 this._headline = null
129 /**
130 * @private
131 * @type { HTMLElement | null }
132 */
133 this._adicional = null
134 this._action.addEventListener("slotchange", this._configuraAction)
135 addEventListener("scroll", () => this._onScroll())
136 addEventListener("load", () => this.configurOtros())
137 }
138
139 connectedCallback() {
140 this.role = "toolbar"
141 this._configuraAction()
142 }
143
144 configurOtros() {
145 const idHeadline = getAttribute(this, "headline")
146 if (idHeadline !== "") {
147 const headline = document.getElementById(idHeadline)
148 if (headline instanceof HTMLHeadingElement) {
149 this._headline = headline
150 if (this.classList.contains("apple") || this.classList.contains("medium")) {
151 headline.classList.add("md-headline", "headline-small")
152 } else {
153 headline.classList.add("md-headline", "headline-medium")
154 }
155 }
156 }
157 const idAdicional = getAttribute(this, "adicional")
158 if (idAdicional !== "") {
159 this._adicional = document.getElementById(idAdicional)
160 if (this._adicional !== null) {
161 if (this.classList.contains("apple")) {
162 this._adicional.style.top = "env(titlebar-area-height, 3rem)"
163 } else {
164 this._adicional.style.top = "env(titlebar-area-height, 4rem)"
165 }
166 }
167 }
168 }
169
170 _configuraAction() {
171 const assignedElements = this._action.assignedElements()
172 if (this.isConnected) {
173 if (ES_APPLE) {
174 this.classList.add("apple")
175 this.classList.remove("material")
176 } else {
177 this.classList.add("material")
178 this.classList.remove("apple")
179 }
180 if (this.classList.contains("center-aligned")) {
181 this.classList.remove("centrado")
182 this.classList.remove("justificado")
183 } else {
184 if (ES_APPLE && assignedElements.length <= 1) {
185 this.classList.add("centrado")
186 this.classList.remove("justificado")
187 } else {
188 this.classList.add("justificado")
189 this.classList.remove("centrado")
190 }
191 }
192 }
193 }
194
195 /** @private */
196 _onScroll() {
197 this._posY = scrollY
198 if (!this._scrolling) {
199 requestAnimationFrame(() => this._avanza())
200 }
201 this._scrolling = true
202 }
203
204 /** @private */
205 _avanza() {
206 if (this._posY === 0) {
207 this.classList.remove("scroll")
208 if (this._headline !== null) {
209 if (this._adicional === null) {
210 this._headline.classList.remove("scroll")
211 } else {
212 this._headline.classList.remove("scroll-adicional")
213 }
214 }
215 if (this._adicional !== null) {
216 this._adicional.classList.remove("scroll")
217 }
218 } else {
219 this.classList.add("scroll")
220 if (this._headline !== null) {
221 if (this._adicional === null) {
222 this._headline.classList.add("scroll")
223 } else {
224 this._headline.classList.add("scroll-adicional")
225 }
226 }
227 if (this._adicional !== null) {
228 this._adicional.classList.add("scroll")
229 }
230 }
231 this._scrolling = false
232 }
233
234}
235
236customElements.define("md-top-app-bar", MdTopAppBar)

H. lib / js / custom / MdNavigationDrawer.js

1import { abreElementoHtml } from "../abreElementoHtml.js"
2import { cierraElementoHtmo } from "../cierraElementoHtmo.js"
3import { querySelector } from "../querySelector.js"
4
5export class MdNavigationDrawer extends HTMLElement {
6
7 /**
8 * @returns {string}
9 */
10 getHipervinculos() { throw new Error("abstract") }
11
12 getContent() {
13 return /* HTML */`
14
15 <link rel="stylesheet" href="/lib/css/material-symbols-outlined.css">
16 <link rel="stylesheet" href="/lib/css/md-ripple.css">
17 <link rel="stylesheet" href="/material-tokens/css/shape.css">
18 <link rel="stylesheet" href="/material-tokens/css/motion.css">
19
20 <style>
21
22 :host {
23 display: block;
24 }
25
26 :host([hidden]) {
27 display: none;
28 }
29
30 nav {
31 display: none;
32 flex-direction: column;
33 position: fixed;
34 z-index: 4;
35 box-sizing: border-box;
36 top: 0;
37 left: 0;
38 bottom: 0;
39 width: var(--anchoNav);
40 max-width: 80vw;
41 overflow: hidden;
42 overscroll-behavior: contain;
43 background-color: var(--md-sys-color-surface-container-low);
44 transform: translateX(-100%);
45 transition-property: display, transform;
46 transition-behavior: allow-discrete;
47 }
48
49 nav.open {
50 display: flex;
51 transform: translateX(0);
52 }
53
54 nav>div {
55 flex-grow: 1;
56 overflow: auto;
57 padding: 0.75rem 1rem;
58 }
59
60 h1 {
61 margin: 0;
62 height: 3.5rem;
63 line-height: 3.5rem;
64 padding: 0 0 0 0.75rem;
65 white-space: nowrap;
66 text-overflow: ellipsis;
67 overflow: hidden;
68 color: var(--md-sys-color-on-surface-variant);
69 font-family: var(--md-sys-typescale-title-small-font);
70 font-weight: var(--md-sys-typescale-title-small-weight);
71 font-size: var(--md-sys-typescale-title-small-size);
72 font-style: var(--md-sys-typescale-title-small-font-style);
73 letter-spacing: var(--md-sys-typescale-title-small-tracking);
74 text-transform: var(--md-sys-typescale-title-small-text-transform);
75 text-decoration: var(--md-sys-typescale-title-small-text-decoration);
76 }
77
78 a::after { /* container inactive */
79 content: "";
80 position: absolute;
81 z-index: -2;
82 top: 0;
83 right: 0;
84 left: 0;
85 bottom: 0;
86 }
87
88 a.active::after { /* container */
89 background-color: var(--md-sys-color-secondary-container);
90 }
91
92 a { /* label, shape inactive */
93 position: relative;
94 display: block;
95 box-sizing: border-box;
96 height: 3.5rem;
97 line-height: 3.5rem;
98 padding: 0 0.75rem;
99 border-radius: 1.75rem;
100 color: var(--md-sys-color-on-surface-variant);
101 font-family: var(--md-sys-typescale-label-large-font);
102 font-weight: var(--md-sys-typescale-label-large-weight);
103 font-size: var(--md-sys-typescale-label-large-size);
104 font-style: var(--md-sys-typescale-label-large-font-style);
105 letter-spacing: var(--md-sys-typescale-label-large-tracking);
106 text-transform: var(--md-sys-typescale-label-large-text-transform);
107 text-decoration: var(--md-sys-typescale-label-large-text-decoration);
108 overflow: hidden;
109 white-space: nowrap;
110 text-overflow: ellipsis;
111 }
112
113 a.active { /* label, shape */
114 font-weight: var(--md-sys-typescale-label-large-weight-prominent);
115 color: var(--md-sys-color-on-secondary-container);
116 }
117
118 a::before { /* state layer */
119 content: "";
120 position: absolute;
121 z-index: -1;
122 top: 0;
123 right: 0;
124 left: 0;
125 bottom: 0;
126 }
127
128 a span { /* inactive icon */
129 position: relative;
130 margin-right: 0.75rem;
131 vertical-align: middle;
132 color: var(--md-sys-color-on-surface-variant);
133 font-size: 1.5rem;
134 width: 1.5rem;
135 height: 1.5rem;
136 }
137
138 a.active span { /* icon */
139 color: var(--md-sys-color-on-secondary-container);
140 }
141
142 #scrim {
143 display: none;
144 position: fixed;
145 z-index: 3;
146 top: 0;
147 left: 0;
148 bottom: 0;
149 right: 0;
150 opacity: 0.4;
151 background-color: var(--md-ref-palette-neutral-variant20);
152 transform: translateX(-100%);
153 transition-property: display, transform;
154 transition-behavior: allow-discrete;
155 }
156
157 #scrim.open {
158 display: block;
159 transform: translateX(0);
160 }
161
162 @starting-style {
163 nav.open{
164 display: flex;
165 transform: translateX(-100%);
166 }
167 #scrim.open {
168 display: block;
169 transform: translateX(-100%);
170 }
171 }
172
173 a:hover { /* inactive label, shape */
174 color: var(--md-sys-color-on-surface);
175 }
176
177 a.active:hover { /* active label, shape */
178 color: var(--md-sys-color-on-secondary-container);
179 }
180
181 a:hover::before { /* inactive state layer */
182 background-color: var(--md-sys-color-on-surface);
183 opacity: var(--md-sys-state-hover-state-layer-opacity);
184 }
185
186 a.active:hover::before { /* state layer */
187 background-color: var(--md-sys-color-on-secondary-container);
188 }
189
190 a:hover span { /* inactive icon */
191 color: var(--md-sys-color-on-surface);
192 }
193
194 a.active:hover span { /* icon */
195 color: var(--md-sys-color-on-secondary-container);
196 }
197
198 a:focus { /* inactive label, shape */
199 outline: none;
200 color: var(--md-sys-color-on-surface);
201 }
202
203 a.active:focus { /* label, shape */
204 color: var(--md-sys-color-on-secondary-container);
205 }
206
207 a:focus::before { /* inactive state layer */
208 background-color: var(--md-sys-color-on-surface);
209 opacity: var(--md-sys-state-focus-state-layer-opacity);
210 }
211
212 a.active:focus::before { /* state layer */
213 background-color: var(--md-sys-color-on-secondary-container);
214 }
215
216 a:focus span { /* inactive icon */
217 color: var(--md-sys-color-on-surface);
218 }
219
220 a.active:focus span { /* icon */
221 color: var(--md-sys-color-on-secondary-container);
222 }
223
224 a:active { /* inactive pressed label, shape */
225 background-position: center;
226 background-image:
227 radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
228 background-size: 100%;
229 animation-name: md-ripple;
230 animation-duration: var(--md-sys-motion-duration-500);
231 color: var(--md-sys-color-on-surface);
232 }
233
234 a.active:active { /* active pressed label, shape */
235 color: var(--md-sys-color-on-secondary-container);
236 }
237
238 a:active::before { /* inactive pressed state layer */
239 background-color: var(--md-sys-color-on-surface);
240 opacity: var(--md-sys-state-pressed-state-layer-opacity);
241 }
242
243 a.active:active::before { /* active pressed state layer */
244 background-color: var(--md-sys-color-on-secondary-container);
245 }
246
247 a:active span { /* inactive pressed icon */
248 color: var(--md-sys-color-on-surface);
249 }
250
251 a.active:focus span { /* active pressed icon */
252 color: var(--md-sys-color-on-secondary-container);
253 }
254
255 </style>
256
257 <div id="scrim"class="duration-700 easing-standard"></div>
258 <nav class="large-end duration-700 easing-standard"><div></div></nav>`
259 }
260
261 constructor() {
262 super()
263 const shadow = this.attachShadow({ mode: "open", delegatesFocus: true })
264 shadow.innerHTML = this.getContent()
265 this.cierra = this.cierra.bind(this)
266
267 /** @type {HTMLElement} */
268 this._nav = querySelector(shadow, "nav")
269
270 /** @type {HTMLUListElement} */
271 this._div = querySelector(this._nav, "div")
272
273 /** @type {HTMLUListElement} */
274 this._scrim = querySelector(shadow, "#scrim")
275 this._scrim.addEventListener("click", this.cierra)
276 }
277
278 connectedCallback() {
279 this.classList.add("drawer")
280 this._div.innerHTML = this.getHipervinculos()
281 }
282
283 abre() {
284 abreElementoHtml(this._nav)
285 abreElementoHtml(this._scrim)
286 }
287
288 cierra() {
289 cierraElementoHtmo(this._nav)
290 cierraElementoHtmo(this._scrim)
291 }
292
293}