@muibook/components 17.0.0 → 18.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6,7 +6,7 @@ import "../mui-stack/hstack/index.js";
|
|
|
6
6
|
import "../mui-button/index.js";
|
|
7
7
|
import "../mui-icons/warning/index.js";
|
|
8
8
|
import "../mui-select/index.js";
|
|
9
|
-
class
|
|
9
|
+
class E extends HTMLElement {
|
|
10
10
|
constructor() {
|
|
11
11
|
super(), this.defaultSlot = null, this.headerSlot = null, this.headerAfterSlot = null, this.headerDescriptionSlot = null, this.footerSlot = null, this.footerAfterSlot = null, this.footerDescriptionSlot = null, this.notesSlot = null, this.stageEl = null, this.activeSectionEl = null, this.nativeFullscreenActive = !1, this.onSlotChange = () => this.syncSections(), this.onChromeSlotChange = () => this.syncChromeState(), this.onKeyDown = (e) => this.handleArrowNavigation(e), this.onFullscreenChange = () => this.handleFullscreenChange(), this.onFullscreenError = () => this.handleFullscreenError(), this.onWindowResize = () => this.updateFullscreenSurfaceFit(), this.onDocumentKeyDown = (e) => {
|
|
12
12
|
const t = document.fullscreenElement === this;
|
|
@@ -25,26 +25,23 @@ class x extends HTMLElement {
|
|
|
25
25
|
"padding",
|
|
26
26
|
"notes-open",
|
|
27
27
|
"variant",
|
|
28
|
-
"radius",
|
|
29
28
|
"title",
|
|
30
29
|
"footer-text",
|
|
31
30
|
"hide-header",
|
|
32
31
|
"hide-footer",
|
|
33
|
-
"hide-counter",
|
|
34
|
-
"allow-add-section",
|
|
35
32
|
"scroll",
|
|
36
33
|
"fullscreen"
|
|
37
34
|
];
|
|
38
35
|
}
|
|
39
36
|
connectedCallback() {
|
|
40
|
-
this.hasAttribute("ratio") || this.setAttribute("ratio", "16:9"), this.hasAttribute("padding") || this.setAttribute("padding", "medium"), this.hasAttribute("active-section") || this.setAttribute("active-section", "0"), this.hasAttribute("variant") || this.setAttribute("variant", "default"), this.
|
|
37
|
+
this.hasAttribute("ratio") || this.setAttribute("ratio", "16:9"), this.hasAttribute("padding") || this.setAttribute("padding", "medium"), this.hasAttribute("active-section") || this.setAttribute("active-section", "0"), this.hasAttribute("variant") || this.setAttribute("variant", "default"), this.render(), this.syncSections(), this.syncChromeState(), this.addEventListener("keydown", this.onKeyDown), document.addEventListener("keydown", this.onDocumentKeyDown), document.addEventListener("fullscreenchange", this.onFullscreenChange), document.addEventListener("fullscreenerror", this.onFullscreenError), window.addEventListener("resize", this.onWindowResize);
|
|
41
38
|
}
|
|
42
39
|
disconnectedCallback() {
|
|
43
|
-
var e, t,
|
|
44
|
-
(e = this.defaultSlot) == null || e.removeEventListener("slotchange", this.onSlotChange), (t = this.headerSlot) == null || t.removeEventListener("slotchange", this.onChromeSlotChange), (
|
|
40
|
+
var e, t, s, i, o, n, d, h;
|
|
41
|
+
(e = this.defaultSlot) == null || e.removeEventListener("slotchange", this.onSlotChange), (t = this.headerSlot) == null || t.removeEventListener("slotchange", this.onChromeSlotChange), (s = this.headerAfterSlot) == null || s.removeEventListener("slotchange", this.onChromeSlotChange), (i = this.headerDescriptionSlot) == null || i.removeEventListener("slotchange", this.onChromeSlotChange), (o = this.footerSlot) == null || o.removeEventListener("slotchange", this.onChromeSlotChange), (n = this.footerAfterSlot) == null || n.removeEventListener("slotchange", this.onChromeSlotChange), (d = this.footerDescriptionSlot) == null || d.removeEventListener("slotchange", this.onChromeSlotChange), (h = this.notesSlot) == null || h.removeEventListener("slotchange", this.onChromeSlotChange), this.removeEventListener("keydown", this.onKeyDown), document.removeEventListener("keydown", this.onDocumentKeyDown), document.removeEventListener("fullscreenchange", this.onFullscreenChange), document.removeEventListener("fullscreenerror", this.onFullscreenError), window.removeEventListener("resize", this.onWindowResize);
|
|
45
42
|
}
|
|
46
|
-
attributeChangedCallback(e, t,
|
|
47
|
-
t !==
|
|
43
|
+
attributeChangedCallback(e, t, s) {
|
|
44
|
+
t !== s && (this.render(), this.syncSections(), this.syncChromeState());
|
|
48
45
|
}
|
|
49
46
|
async enterFullscreen() {
|
|
50
47
|
if (document.fullscreenElement === this) return !0;
|
|
@@ -72,9 +69,9 @@ class x extends HTMLElement {
|
|
|
72
69
|
this.nativeFullscreenActive = !1, this.removeAttribute("present"), this.removeAttribute("fullscreen"), this.syncChromeState();
|
|
73
70
|
}
|
|
74
71
|
getSections() {
|
|
75
|
-
var
|
|
76
|
-
const t = (((
|
|
77
|
-
return
|
|
72
|
+
var i;
|
|
73
|
+
const t = (((i = this.defaultSlot) == null ? void 0 : i.assignedElements({ flatten: !0 })) || []).filter((o) => !["header", "footer"].includes(o.getAttribute("slot") || "")), s = t.filter((o) => o.tagName.toLowerCase() === "mui-slide-section");
|
|
74
|
+
return s.length > 0 ? s : t;
|
|
78
75
|
}
|
|
79
76
|
getActiveSectionIndex() {
|
|
80
77
|
const e = this.getSections(), t = parseInt(this.getAttribute("active-section") || "0", 10);
|
|
@@ -107,37 +104,6 @@ class x extends HTMLElement {
|
|
|
107
104
|
})
|
|
108
105
|
);
|
|
109
106
|
}
|
|
110
|
-
createDefaultSection(e) {
|
|
111
|
-
const t = document.createElement("mui-slide-section"), i = document.createElement("mui-v-stack");
|
|
112
|
-
i.setAttribute("space", "var(--space-400)"), i.setAttribute("alignx", "center"), i.setAttribute("aligny", "center");
|
|
113
|
-
const s = document.createElement("mui-body");
|
|
114
|
-
return s.setAttribute("size", "large"), s.textContent = e, i.appendChild(s), t.appendChild(i), t;
|
|
115
|
-
}
|
|
116
|
-
addSection(e) {
|
|
117
|
-
const t = `Section ${(this.getSections().length + 1).toString()}`;
|
|
118
|
-
let i;
|
|
119
|
-
typeof e == "string" ? i = this.createDefaultSection(e) : e instanceof HTMLElement ? e.tagName.toLowerCase() === "mui-slide-section" ? i = e : (i = document.createElement("mui-slide-section"), i.appendChild(e)) : i = this.createDefaultSection(t), this.appendChild(i);
|
|
120
|
-
const s = this.getSections(), r = Math.max(0, s.length - 1);
|
|
121
|
-
this.setActiveSectionIndex(r), this.syncSections(), this.dispatchEvent(
|
|
122
|
-
new CustomEvent("section-add", {
|
|
123
|
-
detail: { index: r, total: s.length },
|
|
124
|
-
bubbles: !0,
|
|
125
|
-
composed: !0
|
|
126
|
-
})
|
|
127
|
-
);
|
|
128
|
-
}
|
|
129
|
-
requestAddSection() {
|
|
130
|
-
const e = this.getSections().length, t = new CustomEvent("section-add-request", {
|
|
131
|
-
detail: {
|
|
132
|
-
index: e,
|
|
133
|
-
total: e + 1
|
|
134
|
-
},
|
|
135
|
-
bubbles: !0,
|
|
136
|
-
composed: !0,
|
|
137
|
-
cancelable: !0
|
|
138
|
-
});
|
|
139
|
-
this.dispatchEvent(t) && this.addSection(`Section ${(e + 1).toString()}`);
|
|
140
|
-
}
|
|
141
107
|
toggleNotes(e) {
|
|
142
108
|
const t = typeof e == "boolean" ? e : !this.hasAttribute("notes-open");
|
|
143
109
|
this.toggleAttribute("notes-open", t), this.dispatchEvent(
|
|
@@ -151,16 +117,16 @@ class x extends HTMLElement {
|
|
|
151
117
|
resolveRatio() {
|
|
152
118
|
const t = (this.getAttribute("ratio") || "16:9").trim().split(":");
|
|
153
119
|
if (t.length === 2) {
|
|
154
|
-
const
|
|
155
|
-
if (
|
|
120
|
+
const s = parseFloat(t[0]), i = parseFloat(t[1]);
|
|
121
|
+
if (s > 0 && i > 0) return `${s} / ${i}`;
|
|
156
122
|
}
|
|
157
123
|
return "16 / 9";
|
|
158
124
|
}
|
|
159
125
|
resolveRatioParts() {
|
|
160
126
|
const t = (this.getAttribute("ratio") || "16:9").trim().split(":");
|
|
161
127
|
if (t.length === 2) {
|
|
162
|
-
const
|
|
163
|
-
if (
|
|
128
|
+
const s = parseFloat(t[0]), i = parseFloat(t[1]);
|
|
129
|
+
if (s > 0 && i > 0) return { width: s, height: i };
|
|
164
130
|
}
|
|
165
131
|
return { width: 16, height: 9 };
|
|
166
132
|
}
|
|
@@ -169,9 +135,9 @@ class x extends HTMLElement {
|
|
|
169
135
|
const e = this.getSections();
|
|
170
136
|
let t = this.getActiveSectionIndex();
|
|
171
137
|
this.activeSectionEl && e.includes(this.activeSectionEl) && (t = e.indexOf(this.activeSectionEl)), t = Math.max(0, Math.min(t, Math.max(0, e.length - 1))), (this.getAttribute("active-section") || "0") !== String(t) && this.setAttribute("active-section", String(t));
|
|
172
|
-
const
|
|
173
|
-
e.forEach((
|
|
174
|
-
|
|
138
|
+
const s = this.hasAttribute("present") || e.length > 1;
|
|
139
|
+
e.forEach((i, o) => {
|
|
140
|
+
i.setAttribute("data-slide-section", ""), o === t ? (i.removeAttribute("slide-hidden"), i.setAttribute("slide-active", "")) : (i.removeAttribute("slide-active"), s ? i.setAttribute("slide-hidden", "") : i.removeAttribute("slide-hidden"));
|
|
175
141
|
}), this.activeSectionEl = e[t] ?? null, this.style.setProperty("--slide-frame-ratio", this.resolveRatio()), this.updateFullscreenSurfaceFit();
|
|
176
142
|
}
|
|
177
143
|
handleArrowNavigation(e) {
|
|
@@ -194,13 +160,13 @@ class x extends HTMLElement {
|
|
|
194
160
|
shouldHandleGlobalKeys(e) {
|
|
195
161
|
const t = e.target instanceof Node ? e.target : null;
|
|
196
162
|
if (t && this.contains(t) || this.matches(":hover")) return !0;
|
|
197
|
-
const
|
|
198
|
-
return !!(
|
|
163
|
+
const s = document.activeElement;
|
|
164
|
+
return !!(s && this.contains(s));
|
|
199
165
|
}
|
|
200
166
|
render() {
|
|
201
|
-
var
|
|
167
|
+
var o, n, d, h, y, f, p, g, c, v, b, S, u, m, a;
|
|
202
168
|
if (!this.shadowRoot) return;
|
|
203
|
-
const e = (this.getAttribute("title") || "").trim(), t = (this.getAttribute("footer-text") || "").trim(),
|
|
169
|
+
const e = (this.getAttribute("title") || "").trim(), t = (this.getAttribute("footer-text") || "").trim(), s = this.escapeHtml(e), i = this.escapeHtml(t);
|
|
204
170
|
this.shadowRoot.innerHTML = /*html*/
|
|
205
171
|
`
|
|
206
172
|
<style>
|
|
@@ -208,6 +174,14 @@ class x extends HTMLElement {
|
|
|
208
174
|
display: block;
|
|
209
175
|
width: 100%;
|
|
210
176
|
--slide-frame-ratio: 16 / 9;
|
|
177
|
+
--slide-frame-padding-small: var(--space-300);
|
|
178
|
+
--slide-frame-padding-medium: var(--space-400);
|
|
179
|
+
--slide-frame-padding-large: var(--space-500);
|
|
180
|
+
--slide-frame-radius: var(--radius-300);
|
|
181
|
+
--slide-frame-border-color: var(--border-color);
|
|
182
|
+
--slide-frame-background: var(--surface-elevated-100);
|
|
183
|
+
--slide-frame-background-ghost: transparent;
|
|
184
|
+
--slide-frame-shadow: none;
|
|
211
185
|
--slide-frame-leading-offset: var(--space-025);
|
|
212
186
|
--slide-frame-surface-padding-active: var(--slide-frame-padding-medium);
|
|
213
187
|
--slide-frame-header-padding-inline: var(--slide-frame-surface-padding-active);
|
|
@@ -249,11 +223,6 @@ class x extends HTMLElement {
|
|
|
249
223
|
background: var(--slide-frame-background-ghost);
|
|
250
224
|
box-shadow: none;
|
|
251
225
|
}
|
|
252
|
-
:host([radius="none"]) .stage { border-radius: 0; }
|
|
253
|
-
:host([radius="small"]) .stage { border-radius: var(--slide-frame-radius-small); }
|
|
254
|
-
:host([radius="medium"]) .stage { border-radius: var(--slide-frame-radius-medium); }
|
|
255
|
-
:host([radius="large"]) .stage { border-radius: var(--slide-frame-radius-large); }
|
|
256
|
-
|
|
257
226
|
.frame {
|
|
258
227
|
display: grid;
|
|
259
228
|
width: 100%;
|
|
@@ -271,13 +240,14 @@ class x extends HTMLElement {
|
|
|
271
240
|
overflow-x: hidden;
|
|
272
241
|
padding: 0;
|
|
273
242
|
}
|
|
274
|
-
:host(:fullscreen) .frame {
|
|
275
|
-
padding: 0;
|
|
276
|
-
}
|
|
277
243
|
:host([has-chrome]) .frame {
|
|
278
244
|
gap: var(--slide-frame-gap, var(--space-300));
|
|
279
245
|
}
|
|
280
|
-
|
|
246
|
+
:host([has-chrome]:fullscreen) .frame {
|
|
247
|
+
padding: 0;
|
|
248
|
+
gap: var(--stroke-size-100);
|
|
249
|
+
}
|
|
250
|
+
|
|
281
251
|
.stage {
|
|
282
252
|
position: relative;
|
|
283
253
|
width: 100%;
|
|
@@ -293,6 +263,15 @@ class x extends HTMLElement {
|
|
|
293
263
|
display: grid;
|
|
294
264
|
grid-template-rows: auto minmax(0, 1fr) auto;
|
|
295
265
|
}
|
|
266
|
+
:host(:not([has-header])) .stage {
|
|
267
|
+
grid-template-rows: minmax(0, 1fr) auto;
|
|
268
|
+
}
|
|
269
|
+
:host(:not([has-footer])) .stage {
|
|
270
|
+
grid-template-rows: auto minmax(0, 1fr);
|
|
271
|
+
}
|
|
272
|
+
:host(:not([has-header]):not([has-footer])) .stage {
|
|
273
|
+
grid-template-rows: minmax(0, 1fr);
|
|
274
|
+
}
|
|
296
275
|
:host([fullscreen]) .stage,
|
|
297
276
|
:host([present]) .stage {
|
|
298
277
|
justify-self: center;
|
|
@@ -329,6 +308,10 @@ class x extends HTMLElement {
|
|
|
329
308
|
width: 100%;
|
|
330
309
|
box-sizing: border-box;
|
|
331
310
|
}
|
|
311
|
+
.header[hidden],
|
|
312
|
+
.footer[hidden] {
|
|
313
|
+
display: none !important;
|
|
314
|
+
}
|
|
332
315
|
.header {
|
|
333
316
|
padding:
|
|
334
317
|
var(--slide-frame-header-padding-top)
|
|
@@ -395,10 +378,20 @@ class x extends HTMLElement {
|
|
|
395
378
|
:host([notes-open]) .notes {
|
|
396
379
|
display: block;
|
|
397
380
|
padding: var(--space-400);
|
|
398
|
-
|
|
399
|
-
border-
|
|
381
|
+
border: var(--border-thin);
|
|
382
|
+
border-color: var(--slide-frame-border-color);
|
|
383
|
+
border-radius: var(--slide-frame-radius);
|
|
384
|
+
background: var(--slide-frame-background);
|
|
385
|
+
box-shadow: var(--slide-frame-shadow);
|
|
386
|
+
box-sizing: border-box;
|
|
387
|
+
}
|
|
400
388
|
|
|
389
|
+
:host([fullscreen]) .notes,
|
|
390
|
+
:host(:fullscreen) .notes {
|
|
391
|
+
border: none;
|
|
392
|
+
border-radius: 0;
|
|
401
393
|
}
|
|
394
|
+
|
|
402
395
|
:host([present]) .stage {
|
|
403
396
|
background: var(--slide-frame-background-present, var(--slide-frame-background));
|
|
404
397
|
}
|
|
@@ -420,7 +413,6 @@ class x extends HTMLElement {
|
|
|
420
413
|
<div class="frame">
|
|
421
414
|
<mui-grid col="1fr auto" class="present-controls" aligny="center">
|
|
422
415
|
<mui-h-stack space="var(--space-050)" aligny="center">
|
|
423
|
-
<mui-button id="slideFrameAddSectionBtn" variant="tertiary" size="x-small">Add Section</mui-button>
|
|
424
416
|
<mui-button id="slideFrameToggleFullscreenBtn" variant="tertiary" size="x-small">Full Screen</mui-button>
|
|
425
417
|
<mui-button id="slideFrameToggleNotesBtn" variant="tertiary" size="x-small">Notes</mui-button>
|
|
426
418
|
</mui-h-stack>
|
|
@@ -434,7 +426,7 @@ class x extends HTMLElement {
|
|
|
434
426
|
<mui-v-stack class="leading leading_top" space="var(--space-100)" alignx="stretch" aligny="center">
|
|
435
427
|
<mui-h-stack class="header-main" alignx="space-between" aligny="center" space="var(--space-300)">
|
|
436
428
|
<div class="header-leading">
|
|
437
|
-
<mui-heading class="header-title" size="4" level="4" id="headerTitle"${
|
|
429
|
+
<mui-heading class="header-title" size="4" level="4" id="headerTitle"${s ? "" : " hidden"}>${s}</mui-heading>
|
|
438
430
|
<slot name="header"></slot>
|
|
439
431
|
</div>
|
|
440
432
|
<mui-h-stack class="header-after" alignx="end" aligny="center" space="var(--space-200)">
|
|
@@ -454,7 +446,7 @@ class x extends HTMLElement {
|
|
|
454
446
|
<mui-v-stack class="leading leading_bottom" space="var(--space-400)">
|
|
455
447
|
<mui-h-stack class="footer-main" alignx="space-between" aligny="center" space="var(--space-300)">
|
|
456
448
|
<div class="footer-leading">
|
|
457
|
-
<mui-body class="footer-copy" size="small" id="footerText"${
|
|
449
|
+
<mui-body class="footer-copy" size="small" id="footerText"${i ? "" : " hidden"}>${i}</mui-body>
|
|
458
450
|
<slot name="footer"></slot>
|
|
459
451
|
</div>
|
|
460
452
|
<mui-h-stack class="footer-after" alignx="end" aligny="center" space="var(--space-200)">
|
|
@@ -476,51 +468,45 @@ class x extends HTMLElement {
|
|
|
476
468
|
</div>
|
|
477
469
|
<div class="notes"><mui-body variant="optional" size="x-small">Notes...</mui-body><slot name="notes"></slot></div>
|
|
478
470
|
</div>
|
|
479
|
-
`, this.defaultSlot = this.shadowRoot.querySelector("slot:not([name])"), (
|
|
471
|
+
`, this.defaultSlot = this.shadowRoot.querySelector("slot:not([name])"), (o = this.defaultSlot) == null || o.addEventListener("slotchange", this.onSlotChange), this.headerSlot = this.shadowRoot.querySelector('slot[name="header"]'), this.headerAfterSlot = this.shadowRoot.querySelector('slot[name="header-after"]'), this.headerDescriptionSlot = this.shadowRoot.querySelector('slot[name="header-description"]'), this.footerSlot = this.shadowRoot.querySelector('slot[name="footer"]'), this.footerAfterSlot = this.shadowRoot.querySelector('slot[name="footer-after"]'), this.notesSlot = this.shadowRoot.querySelector('slot[name="notes"]'), this.stageEl = this.shadowRoot.querySelector(".stage"), (n = this.headerSlot) == null || n.addEventListener("slotchange", this.onChromeSlotChange), (d = this.headerAfterSlot) == null || d.addEventListener("slotchange", this.onChromeSlotChange), (h = this.headerDescriptionSlot) == null || h.addEventListener("slotchange", this.onChromeSlotChange), (y = this.footerSlot) == null || y.addEventListener("slotchange", this.onChromeSlotChange), (f = this.footerAfterSlot) == null || f.addEventListener("slotchange", this.onChromeSlotChange), (p = this.footerDescriptionSlot) == null || p.addEventListener("slotchange", this.onChromeSlotChange), (g = this.notesSlot) == null || g.addEventListener("slotchange", this.onChromeSlotChange), this.style.setProperty("--slide-frame-ratio", this.resolveRatio()), (c = this.shadowRoot.querySelector("#notesActionBtn")) == null || c.addEventListener("click", () => {
|
|
480
472
|
this.toggleNotes();
|
|
481
|
-
}), (
|
|
482
|
-
this.requestAddSection();
|
|
483
|
-
}), (S = this.shadowRoot.querySelector("#slideFramePrevSectionBtn")) == null || S.addEventListener("click", () => {
|
|
473
|
+
}), (v = this.shadowRoot.querySelector("#slideFramePrevSectionBtn")) == null || v.addEventListener("click", () => {
|
|
484
474
|
this.prevSection();
|
|
485
|
-
}), (
|
|
475
|
+
}), (b = this.shadowRoot.querySelector("#slideFrameNextSectionBtn")) == null || b.addEventListener("click", () => {
|
|
486
476
|
this.nextSection();
|
|
487
|
-
}), (
|
|
477
|
+
}), (S = this.shadowRoot.querySelector("#slideFrameToggleFullscreenBtn")) == null || S.addEventListener("click", () => {
|
|
488
478
|
if (this.hasAttribute("fullscreen") || document.fullscreenElement === this) {
|
|
489
479
|
this.resetPresentationState(), this.exitFullscreen();
|
|
490
480
|
return;
|
|
491
481
|
}
|
|
492
|
-
this.setAttribute("present", ""), this.setAttribute("fullscreen", ""), this.syncChromeState(), this.enterFullscreen().then((
|
|
493
|
-
|
|
482
|
+
this.setAttribute("present", ""), this.setAttribute("fullscreen", ""), this.syncChromeState(), this.enterFullscreen().then((r) => {
|
|
483
|
+
r && this.syncChromeState();
|
|
494
484
|
});
|
|
495
|
-
}), (
|
|
485
|
+
}), (u = this.shadowRoot.querySelector("#slideFrameExitPresentBtn")) == null || u.addEventListener("click", () => {
|
|
496
486
|
this.resetPresentationState(), this.exitFullscreen();
|
|
497
|
-
}), (
|
|
487
|
+
}), (m = this.shadowRoot.querySelector("#slideFrameToggleNotesBtn")) == null || m.addEventListener("click", () => {
|
|
498
488
|
this.toggleNotes();
|
|
499
|
-
}), (
|
|
500
|
-
var
|
|
501
|
-
const
|
|
502
|
-
this.setAttribute("ratio",
|
|
489
|
+
}), (a = this.shadowRoot.querySelector("#slideFrameRatioSelect")) == null || a.addEventListener("change", (l) => {
|
|
490
|
+
var w;
|
|
491
|
+
const r = l.currentTarget, x = (r == null ? void 0 : r.value) || ((w = r == null ? void 0 : r.getAttribute) == null ? void 0 : w.call(r, "value")) || "16:9";
|
|
492
|
+
this.setAttribute("ratio", x);
|
|
503
493
|
}), requestAnimationFrame(() => this.updateFullscreenSurfaceFit());
|
|
504
494
|
}
|
|
505
495
|
syncChromeState() {
|
|
506
496
|
if (!this.shadowRoot) return;
|
|
507
|
-
const e = (
|
|
508
|
-
(
|
|
509
|
-
), t = !!(this.getAttribute("title") || "").trim(),
|
|
510
|
-
if (
|
|
511
|
-
const
|
|
512
|
-
|
|
513
|
-
}
|
|
514
|
-
if (u) {
|
|
515
|
-
const o = this.hasAttribute("allow-add-section");
|
|
516
|
-
u.hidden = !o, u.style.display = o ? "" : "none", l && (l.hidden = !o), l && (l.style.display = o ? "" : "none");
|
|
497
|
+
const e = (a) => ((a == null ? void 0 : a.assignedNodes({ flatten: !0 })) || []).some(
|
|
498
|
+
(l) => l.nodeType === Node.ELEMENT_NODE || (l.textContent || "").trim().length > 0
|
|
499
|
+
), t = !!(this.getAttribute("title") || "").trim(), s = !!(this.getAttribute("footer-text") || "").trim(), i = this.hasAttribute("hide-header"), o = this.hasAttribute("hide-footer"), n = !o && this.getSections().length > 0, d = !i && (t || e(this.headerSlot) || e(this.headerAfterSlot) || e(this.headerDescriptionSlot)), h = !o && (s || e(this.footerSlot) || e(this.footerAfterSlot) || e(this.footerDescriptionSlot) || n || this.hasAttribute("present") || this.hasAttribute("fullscreen")), y = e(this.notesSlot), f = this.hasAttribute("notes-open"), p = this.shadowRoot.querySelector("#headerRegion"), g = this.shadowRoot.querySelector("#footerRegion"), c = this.shadowRoot.querySelector("#footerCounter"), v = this.shadowRoot.querySelector("#slideFrameExitPresentBtn"), b = this.shadowRoot.querySelector("#slideFrameToggleFullscreenBtn"), S = this.shadowRoot.querySelector(".present-controls"), u = Math.max(this.getSections().length, 1), m = this.getActiveSectionIndex() + 1;
|
|
500
|
+
if (S) {
|
|
501
|
+
const a = this.hasAttribute("fullscreen") || document.fullscreenElement === this;
|
|
502
|
+
S.hidden = a;
|
|
517
503
|
}
|
|
518
504
|
if (c) {
|
|
519
505
|
c.hidden = !n;
|
|
520
|
-
const
|
|
521
|
-
c.style.setProperty("--slide-frame-counter-digits", String(
|
|
506
|
+
const a = Math.min(m, u), l = String(u).length;
|
|
507
|
+
c.style.setProperty("--slide-frame-counter-digits", String(l)), c.setAttribute("aria-label", `Section ${a} of ${u}`), c.innerHTML = `Section <span class="counter-value">${a}</span>/<span class="counter-value">${u}</span>`;
|
|
522
508
|
}
|
|
523
|
-
|
|
509
|
+
v && (v.hidden = !this.hasAttribute("fullscreen")), b && (b.textContent = this.hasAttribute("fullscreen") ? "Exit Fullscreen" : "Full Screen"), p && (p.hidden = !d), g && (g.hidden = !h), this.toggleAttribute("has-header", d), this.toggleAttribute("has-footer", h), this.toggleAttribute("has-notes", y), this.toggleAttribute("notes-visible", f), this.toggleAttribute("has-chrome", d || h || f), this.updateFullscreenSurfaceFit();
|
|
524
510
|
}
|
|
525
511
|
handleFullscreenChange() {
|
|
526
512
|
const e = document.fullscreenElement === this, t = this.hasAttribute("fullscreen");
|
|
@@ -551,14 +537,14 @@ class x extends HTMLElement {
|
|
|
551
537
|
this.stageEl.style.width = "", this.stageEl.style.height = "";
|
|
552
538
|
return;
|
|
553
539
|
}
|
|
554
|
-
const t = this.shadowRoot.querySelector(".frame"),
|
|
540
|
+
const t = this.shadowRoot.querySelector(".frame"), s = this.shadowRoot.querySelector(".present-controls"), i = this.shadowRoot.querySelector(".notes");
|
|
555
541
|
if (!t) return;
|
|
556
|
-
const
|
|
557
|
-
let
|
|
558
|
-
|
|
542
|
+
const o = t.getBoundingClientRect(), n = getComputedStyle(t), d = parseFloat(n.paddingTop || "0") || 0, h = parseFloat(n.paddingBottom || "0") || 0, y = parseFloat(n.paddingLeft || "0") || 0, f = parseFloat(n.paddingRight || "0") || 0, p = parseFloat(n.rowGap || n.gap || "0") || 0, g = s && getComputedStyle(s).display !== "none" ? s.getBoundingClientRect().height : 0, c = i && getComputedStyle(i).display !== "none" ? i.getBoundingClientRect().height : 0, v = [g > 0, !0, c > 0].filter(Boolean).length, b = Math.max(0, v - 1), S = Math.max(0, o.width - y - f), u = Math.max(0, o.height - d - h - g - c - p * b), m = this.resolveRatioParts(), a = this.hasAttribute("fullscreen") || document.fullscreenElement === this;
|
|
543
|
+
let l, r;
|
|
544
|
+
a ? (r = u, l = r * (m.width / m.height)) : (l = S, r = l * (m.height / m.width), r > u && (r = u, l = r * (m.width / m.height))), this.stageEl.style.width = `${Math.max(0, Math.floor(l))}px`, this.stageEl.style.height = `${Math.max(0, Math.floor(r))}px`;
|
|
559
545
|
}
|
|
560
546
|
escapeHtml(e) {
|
|
561
547
|
return e.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
562
548
|
}
|
|
563
549
|
}
|
|
564
|
-
customElements.get("mui-slide-frame") || customElements.define("mui-slide-frame",
|
|
550
|
+
customElements.get("mui-slide-frame") || customElements.define("mui-slide-frame", E);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/* ================================================================================================== */
|
|
3
|
-
/* Don't edit directly • Generated on Sat, 28 Feb 2026
|
|
3
|
+
/* Don't edit directly • Generated on Sat, 28 Feb 2026 08:25:27 GMT • muibook.com */
|
|
4
4
|
/* ================================================================================================== */
|
|
5
5
|
|
|
6
6
|
/* ================================================================================================== */
|