@muibook/components 16.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.
- package/dist/esm/components/mui-slide-frame/index.js +90 -95
- package/dist/esm/components/mui-slide-section/index.js +23 -0
- package/dist/esm/css/mui-brand.css +1 -1
- package/dist/esm/custom-elements.json +666 -724
- package/dist/esm/index.js +5 -4
- package/dist/types/components/mui-slide-frame/index.d.ts +1 -0
- package/dist/types/components/mui-slide-section/index.d.ts +1 -0
- package/dist/types/index.d.ts +1 -0
- package/package.json +5 -1
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import "../mui-heading/index.js";
|
|
2
2
|
import "../mui-body/index.js";
|
|
3
|
+
import "../mui-slide-section/index.js";
|
|
3
4
|
import "../mui-stack/vstack/index.js";
|
|
4
5
|
import "../mui-stack/hstack/index.js";
|
|
5
6
|
import "../mui-button/index.js";
|
|
6
7
|
import "../mui-icons/warning/index.js";
|
|
7
8
|
import "../mui-select/index.js";
|
|
8
|
-
class
|
|
9
|
+
class E extends HTMLElement {
|
|
9
10
|
constructor() {
|
|
10
|
-
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.
|
|
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) => {
|
|
11
12
|
const t = document.fullscreenElement === this;
|
|
12
13
|
if (e.key === "Escape" && this.hasAttribute("present") && !t) {
|
|
13
14
|
e.preventDefault(), this.resetPresentationState();
|
|
@@ -24,26 +25,23 @@ class C extends HTMLElement {
|
|
|
24
25
|
"padding",
|
|
25
26
|
"notes-open",
|
|
26
27
|
"variant",
|
|
27
|
-
"radius",
|
|
28
28
|
"title",
|
|
29
29
|
"footer-text",
|
|
30
30
|
"hide-header",
|
|
31
31
|
"hide-footer",
|
|
32
|
-
"hide-counter",
|
|
33
|
-
"allow-add-section",
|
|
34
32
|
"scroll",
|
|
35
33
|
"fullscreen"
|
|
36
34
|
];
|
|
37
35
|
}
|
|
38
36
|
connectedCallback() {
|
|
39
|
-
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);
|
|
40
38
|
}
|
|
41
39
|
disconnectedCallback() {
|
|
42
|
-
var e, t,
|
|
43
|
-
(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);
|
|
44
42
|
}
|
|
45
|
-
attributeChangedCallback(e, t,
|
|
46
|
-
t !==
|
|
43
|
+
attributeChangedCallback(e, t, s) {
|
|
44
|
+
t !== s && (this.render(), this.syncSections(), this.syncChromeState());
|
|
47
45
|
}
|
|
48
46
|
async enterFullscreen() {
|
|
49
47
|
if (document.fullscreenElement === this) return !0;
|
|
@@ -71,8 +69,9 @@ class C extends HTMLElement {
|
|
|
71
69
|
this.nativeFullscreenActive = !1, this.removeAttribute("present"), this.removeAttribute("fullscreen"), this.syncChromeState();
|
|
72
70
|
}
|
|
73
71
|
getSections() {
|
|
74
|
-
var
|
|
75
|
-
|
|
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;
|
|
76
75
|
}
|
|
77
76
|
getActiveSectionIndex() {
|
|
78
77
|
const e = this.getSections(), t = parseInt(this.getAttribute("active-section") || "0", 10);
|
|
@@ -105,22 +104,6 @@ class C extends HTMLElement {
|
|
|
105
104
|
})
|
|
106
105
|
);
|
|
107
106
|
}
|
|
108
|
-
addSection(e) {
|
|
109
|
-
const t = document.createElement("mui-v-stack");
|
|
110
|
-
if (t.setAttribute("space", "var(--space-400)"), t.setAttribute("alignx", "center"), t.setAttribute("aligny", "center"), t.setAttribute("data-slide-section", ""), typeof e == "string") {
|
|
111
|
-
const n = document.createElement("mui-body");
|
|
112
|
-
n.setAttribute("size", "large"), n.textContent = e, t.appendChild(n);
|
|
113
|
-
} else e instanceof HTMLElement && t.appendChild(e);
|
|
114
|
-
this.appendChild(t);
|
|
115
|
-
const i = this.getSections(), s = Math.max(0, i.length - 1);
|
|
116
|
-
this.setActiveSectionIndex(s), this.syncSections(), this.dispatchEvent(
|
|
117
|
-
new CustomEvent("section-add", {
|
|
118
|
-
detail: { index: s, total: i.length },
|
|
119
|
-
bubbles: !0,
|
|
120
|
-
composed: !0
|
|
121
|
-
})
|
|
122
|
-
);
|
|
123
|
-
}
|
|
124
107
|
toggleNotes(e) {
|
|
125
108
|
const t = typeof e == "boolean" ? e : !this.hasAttribute("notes-open");
|
|
126
109
|
this.toggleAttribute("notes-open", t), this.dispatchEvent(
|
|
@@ -134,16 +117,16 @@ class C extends HTMLElement {
|
|
|
134
117
|
resolveRatio() {
|
|
135
118
|
const t = (this.getAttribute("ratio") || "16:9").trim().split(":");
|
|
136
119
|
if (t.length === 2) {
|
|
137
|
-
const
|
|
138
|
-
if (
|
|
120
|
+
const s = parseFloat(t[0]), i = parseFloat(t[1]);
|
|
121
|
+
if (s > 0 && i > 0) return `${s} / ${i}`;
|
|
139
122
|
}
|
|
140
123
|
return "16 / 9";
|
|
141
124
|
}
|
|
142
125
|
resolveRatioParts() {
|
|
143
126
|
const t = (this.getAttribute("ratio") || "16:9").trim().split(":");
|
|
144
127
|
if (t.length === 2) {
|
|
145
|
-
const
|
|
146
|
-
if (
|
|
128
|
+
const s = parseFloat(t[0]), i = parseFloat(t[1]);
|
|
129
|
+
if (s > 0 && i > 0) return { width: s, height: i };
|
|
147
130
|
}
|
|
148
131
|
return { width: 16, height: 9 };
|
|
149
132
|
}
|
|
@@ -152,9 +135,9 @@ class C extends HTMLElement {
|
|
|
152
135
|
const e = this.getSections();
|
|
153
136
|
let t = this.getActiveSectionIndex();
|
|
154
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));
|
|
155
|
-
const
|
|
156
|
-
e.forEach((
|
|
157
|
-
|
|
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"));
|
|
158
141
|
}), this.activeSectionEl = e[t] ?? null, this.style.setProperty("--slide-frame-ratio", this.resolveRatio()), this.updateFullscreenSurfaceFit();
|
|
159
142
|
}
|
|
160
143
|
handleArrowNavigation(e) {
|
|
@@ -177,13 +160,13 @@ class C extends HTMLElement {
|
|
|
177
160
|
shouldHandleGlobalKeys(e) {
|
|
178
161
|
const t = e.target instanceof Node ? e.target : null;
|
|
179
162
|
if (t && this.contains(t) || this.matches(":hover")) return !0;
|
|
180
|
-
const
|
|
181
|
-
return !!(
|
|
163
|
+
const s = document.activeElement;
|
|
164
|
+
return !!(s && this.contains(s));
|
|
182
165
|
}
|
|
183
166
|
render() {
|
|
184
|
-
var
|
|
167
|
+
var o, n, d, h, y, f, p, g, c, v, b, S, u, m, a;
|
|
185
168
|
if (!this.shadowRoot) return;
|
|
186
|
-
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);
|
|
187
170
|
this.shadowRoot.innerHTML = /*html*/
|
|
188
171
|
`
|
|
189
172
|
<style>
|
|
@@ -191,6 +174,14 @@ class C extends HTMLElement {
|
|
|
191
174
|
display: block;
|
|
192
175
|
width: 100%;
|
|
193
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;
|
|
194
185
|
--slide-frame-leading-offset: var(--space-025);
|
|
195
186
|
--slide-frame-surface-padding-active: var(--slide-frame-padding-medium);
|
|
196
187
|
--slide-frame-header-padding-inline: var(--slide-frame-surface-padding-active);
|
|
@@ -232,11 +223,6 @@ class C extends HTMLElement {
|
|
|
232
223
|
background: var(--slide-frame-background-ghost);
|
|
233
224
|
box-shadow: none;
|
|
234
225
|
}
|
|
235
|
-
:host([radius="none"]) .stage { border-radius: 0; }
|
|
236
|
-
:host([radius="small"]) .stage { border-radius: var(--slide-frame-radius-small); }
|
|
237
|
-
:host([radius="medium"]) .stage { border-radius: var(--slide-frame-radius-medium); }
|
|
238
|
-
:host([radius="large"]) .stage { border-radius: var(--slide-frame-radius-large); }
|
|
239
|
-
|
|
240
226
|
.frame {
|
|
241
227
|
display: grid;
|
|
242
228
|
width: 100%;
|
|
@@ -254,13 +240,14 @@ class C extends HTMLElement {
|
|
|
254
240
|
overflow-x: hidden;
|
|
255
241
|
padding: 0;
|
|
256
242
|
}
|
|
257
|
-
:host(:fullscreen) .frame {
|
|
258
|
-
padding: 0;
|
|
259
|
-
}
|
|
260
243
|
:host([has-chrome]) .frame {
|
|
261
244
|
gap: var(--slide-frame-gap, var(--space-300));
|
|
262
245
|
}
|
|
263
|
-
|
|
246
|
+
:host([has-chrome]:fullscreen) .frame {
|
|
247
|
+
padding: 0;
|
|
248
|
+
gap: var(--stroke-size-100);
|
|
249
|
+
}
|
|
250
|
+
|
|
264
251
|
.stage {
|
|
265
252
|
position: relative;
|
|
266
253
|
width: 100%;
|
|
@@ -276,6 +263,15 @@ class C extends HTMLElement {
|
|
|
276
263
|
display: grid;
|
|
277
264
|
grid-template-rows: auto minmax(0, 1fr) auto;
|
|
278
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
|
+
}
|
|
279
275
|
:host([fullscreen]) .stage,
|
|
280
276
|
:host([present]) .stage {
|
|
281
277
|
justify-self: center;
|
|
@@ -312,6 +308,10 @@ class C extends HTMLElement {
|
|
|
312
308
|
width: 100%;
|
|
313
309
|
box-sizing: border-box;
|
|
314
310
|
}
|
|
311
|
+
.header[hidden],
|
|
312
|
+
.footer[hidden] {
|
|
313
|
+
display: none !important;
|
|
314
|
+
}
|
|
315
315
|
.header {
|
|
316
316
|
padding:
|
|
317
317
|
var(--slide-frame-header-padding-top)
|
|
@@ -378,10 +378,20 @@ class C extends HTMLElement {
|
|
|
378
378
|
:host([notes-open]) .notes {
|
|
379
379
|
display: block;
|
|
380
380
|
padding: var(--space-400);
|
|
381
|
-
|
|
382
|
-
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
|
+
}
|
|
383
388
|
|
|
389
|
+
:host([fullscreen]) .notes,
|
|
390
|
+
:host(:fullscreen) .notes {
|
|
391
|
+
border: none;
|
|
392
|
+
border-radius: 0;
|
|
384
393
|
}
|
|
394
|
+
|
|
385
395
|
:host([present]) .stage {
|
|
386
396
|
background: var(--slide-frame-background-present, var(--slide-frame-background));
|
|
387
397
|
}
|
|
@@ -403,7 +413,6 @@ class C extends HTMLElement {
|
|
|
403
413
|
<div class="frame">
|
|
404
414
|
<mui-grid col="1fr auto" class="present-controls" aligny="center">
|
|
405
415
|
<mui-h-stack space="var(--space-050)" aligny="center">
|
|
406
|
-
<mui-button id="slideFrameAddSectionBtn" variant="tertiary" size="x-small">Add Section</mui-button>
|
|
407
416
|
<mui-button id="slideFrameToggleFullscreenBtn" variant="tertiary" size="x-small">Full Screen</mui-button>
|
|
408
417
|
<mui-button id="slideFrameToggleNotesBtn" variant="tertiary" size="x-small">Notes</mui-button>
|
|
409
418
|
</mui-h-stack>
|
|
@@ -417,7 +426,7 @@ class C extends HTMLElement {
|
|
|
417
426
|
<mui-v-stack class="leading leading_top" space="var(--space-100)" alignx="stretch" aligny="center">
|
|
418
427
|
<mui-h-stack class="header-main" alignx="space-between" aligny="center" space="var(--space-300)">
|
|
419
428
|
<div class="header-leading">
|
|
420
|
-
<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>
|
|
421
430
|
<slot name="header"></slot>
|
|
422
431
|
</div>
|
|
423
432
|
<mui-h-stack class="header-after" alignx="end" aligny="center" space="var(--space-200)">
|
|
@@ -437,7 +446,7 @@ class C extends HTMLElement {
|
|
|
437
446
|
<mui-v-stack class="leading leading_bottom" space="var(--space-400)">
|
|
438
447
|
<mui-h-stack class="footer-main" alignx="space-between" aligny="center" space="var(--space-300)">
|
|
439
448
|
<div class="footer-leading">
|
|
440
|
-
<mui-body class="footer-copy" size="small" id="footerText"${
|
|
449
|
+
<mui-body class="footer-copy" size="small" id="footerText"${i ? "" : " hidden"}>${i}</mui-body>
|
|
441
450
|
<slot name="footer"></slot>
|
|
442
451
|
</div>
|
|
443
452
|
<mui-h-stack class="footer-after" alignx="end" aligny="center" space="var(--space-200)">
|
|
@@ -459,59 +468,45 @@ class C extends HTMLElement {
|
|
|
459
468
|
</div>
|
|
460
469
|
<div class="notes"><mui-body variant="optional" size="x-small">Notes...</mui-body><slot name="notes"></slot></div>
|
|
461
470
|
</div>
|
|
462
|
-
`, 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", () => {
|
|
463
472
|
this.toggleNotes();
|
|
464
|
-
}), (
|
|
465
|
-
this.addSection(`Section ${(this.getSections().length + 1).toString()}`);
|
|
466
|
-
}), (u = this.shadowRoot.querySelector("#slideFramePrevSectionBtn")) == null || u.addEventListener("click", () => {
|
|
473
|
+
}), (v = this.shadowRoot.querySelector("#slideFramePrevSectionBtn")) == null || v.addEventListener("click", () => {
|
|
467
474
|
this.prevSection();
|
|
468
|
-
}), (
|
|
475
|
+
}), (b = this.shadowRoot.querySelector("#slideFrameNextSectionBtn")) == null || b.addEventListener("click", () => {
|
|
469
476
|
this.nextSection();
|
|
470
|
-
}), (
|
|
477
|
+
}), (S = this.shadowRoot.querySelector("#slideFrameToggleFullscreenBtn")) == null || S.addEventListener("click", () => {
|
|
471
478
|
if (this.hasAttribute("fullscreen") || document.fullscreenElement === this) {
|
|
472
479
|
this.resetPresentationState(), this.exitFullscreen();
|
|
473
480
|
return;
|
|
474
481
|
}
|
|
475
|
-
this.setAttribute("present", ""), this.setAttribute("fullscreen", ""), this.syncChromeState(), this.enterFullscreen().then((
|
|
476
|
-
|
|
482
|
+
this.setAttribute("present", ""), this.setAttribute("fullscreen", ""), this.syncChromeState(), this.enterFullscreen().then((r) => {
|
|
483
|
+
r && this.syncChromeState();
|
|
477
484
|
});
|
|
478
|
-
}), (
|
|
485
|
+
}), (u = this.shadowRoot.querySelector("#slideFrameExitPresentBtn")) == null || u.addEventListener("click", () => {
|
|
479
486
|
this.resetPresentationState(), this.exitFullscreen();
|
|
480
|
-
}), (
|
|
487
|
+
}), (m = this.shadowRoot.querySelector("#slideFrameToggleNotesBtn")) == null || m.addEventListener("click", () => {
|
|
481
488
|
this.toggleNotes();
|
|
482
|
-
}), (
|
|
483
|
-
var
|
|
484
|
-
const
|
|
485
|
-
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);
|
|
486
493
|
}), requestAnimationFrame(() => this.updateFullscreenSurfaceFit());
|
|
487
494
|
}
|
|
488
495
|
syncChromeState() {
|
|
489
496
|
if (!this.shadowRoot) return;
|
|
490
|
-
const e = (
|
|
491
|
-
(
|
|
492
|
-
), t = !!(this.getAttribute("title") || "").trim(),
|
|
493
|
-
if (
|
|
494
|
-
const
|
|
495
|
-
|
|
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;
|
|
496
503
|
}
|
|
497
|
-
if (
|
|
498
|
-
|
|
499
|
-
|
|
504
|
+
if (c) {
|
|
505
|
+
c.hidden = !n;
|
|
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>`;
|
|
500
508
|
}
|
|
501
|
-
|
|
502
|
-
h.hidden = !o;
|
|
503
|
-
const r = Math.min(m, p), E = String(p).length;
|
|
504
|
-
h.style.setProperty("--slide-frame-counter-digits", String(E)), h.setAttribute("aria-label", `Section ${r} of ${p}`), h.innerHTML = `Section <span class="counter-value">${r}</span>/<span class="counter-value">${p}</span>`;
|
|
505
|
-
}
|
|
506
|
-
S && (S.hidden = !this.hasAttribute("fullscreen")), y && (y.textContent = this.hasAttribute("fullscreen") ? "Exit Fullscreen" : "Full Screen"), b && (b.hidden = !l), v && (v.hidden = !d), this.toggleAttribute("has-header", l), this.toggleAttribute("has-footer", d), this.toggleAttribute("has-notes", f), this.toggleAttribute("notes-visible", c), this.toggleAttribute("has-chrome", l || d || c), this.updateFullscreenSurfaceFit();
|
|
507
|
-
}
|
|
508
|
-
handlePointerDown(e) {
|
|
509
|
-
this.pointerStartX = e.clientX, this.pointerStartY = e.clientY;
|
|
510
|
-
}
|
|
511
|
-
handlePointerUp(e) {
|
|
512
|
-
if (this.pointerStartX == null || this.pointerStartY == null || this.getSections().length < 2) return;
|
|
513
|
-
const t = e.clientX - this.pointerStartX, i = e.clientY - this.pointerStartY;
|
|
514
|
-
this.pointerStartX = null, this.pointerStartY = null, !(Math.abs(t) < 40 || Math.abs(t) <= Math.abs(i)) && (t < 0 ? this.nextSection() : this.prevSection());
|
|
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();
|
|
515
510
|
}
|
|
516
511
|
handleFullscreenChange() {
|
|
517
512
|
const e = document.fullscreenElement === this, t = this.hasAttribute("fullscreen");
|
|
@@ -542,14 +537,14 @@ class C extends HTMLElement {
|
|
|
542
537
|
this.stageEl.style.width = "", this.stageEl.style.height = "";
|
|
543
538
|
return;
|
|
544
539
|
}
|
|
545
|
-
const t = this.shadowRoot.querySelector(".frame"),
|
|
540
|
+
const t = this.shadowRoot.querySelector(".frame"), s = this.shadowRoot.querySelector(".present-controls"), i = this.shadowRoot.querySelector(".notes");
|
|
546
541
|
if (!t) return;
|
|
547
|
-
const
|
|
548
|
-
let
|
|
549
|
-
|
|
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`;
|
|
550
545
|
}
|
|
551
546
|
escapeHtml(e) {
|
|
552
547
|
return e.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
553
548
|
}
|
|
554
549
|
}
|
|
555
|
-
customElements.get("mui-slide-frame") || customElements.define("mui-slide-frame",
|
|
550
|
+
customElements.get("mui-slide-frame") || customElements.define("mui-slide-frame", E);
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
class e extends HTMLElement {
|
|
2
|
+
constructor() {
|
|
3
|
+
super(), this.attachShadow({ mode: "open" });
|
|
4
|
+
}
|
|
5
|
+
connectedCallback() {
|
|
6
|
+
this.render();
|
|
7
|
+
}
|
|
8
|
+
render() {
|
|
9
|
+
this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
|
|
10
|
+
`
|
|
11
|
+
<style>
|
|
12
|
+
:host {
|
|
13
|
+
display: block;
|
|
14
|
+
width: 100%;
|
|
15
|
+
min-width: 0;
|
|
16
|
+
box-sizing: border-box;
|
|
17
|
+
}
|
|
18
|
+
</style>
|
|
19
|
+
<slot></slot>
|
|
20
|
+
`);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
customElements.get("mui-slide-section") || customElements.define("mui-slide-section", 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
|
/* ================================================================================================== */
|