@shower/core 3.4.1 → 3.5.0

package/dist/index.js

@@ -1,6 +1,6 @@
 /**
  * Core for Shower HTML presentation engine
- * @shower/core v3.4.0, https://github.com/shower/shower/tree/main/packages/core
+ * @shower/core v3.4.1, https://github.com/shower/shower/tree/main/packages/core
  * @copyright 2010–2026 Vadim Makeev, https://pepelsbey.dev
  * @license MIT
  */
@@ -541,19 +541,30 @@
 			container.classList.add(listModeClass);
 		}
 
-		const updateScale = () => {
-			const firstSlide = shower.slides[0];
-			if (!firstSlide) return;
+		const needsJSScale = !CSS.supports('transform', 'scale(calc(1px / 1px))');
 
-			const { innerWidth, innerHeight } = window;
-			const { offsetWidth, offsetHeight } = firstSlide.element;
+		if (needsJSScale) {
+			const slideProbe = document.createElement('div');
+			slideProbe.style.cssText = 'position:absolute;visibility:hidden;width:var(--slide-width-px);height:var(--slide-height-px)';
+			container.appendChild(slideProbe);
 
-			const listScale = 1 / (offsetWidth / innerWidth);
-			const fullScale = 1 / Math.max(offsetWidth / innerWidth, offsetHeight / innerHeight);
+			const updateScale = () => {
+				const slideWidth = slideProbe.offsetWidth;
+				const slideHeight = slideProbe.offsetHeight;
+				if (!slideWidth || !slideHeight) return;
 
-			container.style.setProperty('--shower-list-scale', listScale);
-			container.style.setProperty('--shower-full-scale', fullScale);
-		};
+				const { innerWidth, innerHeight } = window;
+
+				const listScale = innerWidth / slideWidth;
+				const fullScale = Math.min(innerWidth / slideWidth, innerHeight / slideHeight);
+
+				container.style.setProperty('--shower-list-scale', listScale);
+				container.style.setProperty('--shower-full-scale', fullScale);
+			};
+
+			updateScale();
+			window.addEventListener('resize', updateScale);
+		}
 
 		const updateModeView = () => {
 			if (shower.isFullMode) {
@@ -565,8 +576,6 @@
 			}
 
 			requestAnimationFrame(() => {
-				updateScale();
-
 				if (shower.isFullMode) return;
 
 				const slide = shower.activeSlide;
@@ -584,8 +593,6 @@
 			const slide = shower.activeSlide;
 			slide.element.scrollIntoView({ block: 'nearest' });
 		});
-
-		window.addEventListener('resize', updateScale);
 	};
 
 	var touch = (shower) => {

package/lib/modules/view.js

@@ -8,20 +8,6 @@ export default (shower) => {
 		container.classList.add(listModeClass);
 	}
 
-	const updateScale = () => {
-		const firstSlide = shower.slides[0];
-		if (!firstSlide) return;
-
-		const { innerWidth, innerHeight } = window;
-		const { offsetWidth, offsetHeight } = firstSlide.element;
-
-		const listScale = 1 / (offsetWidth / innerWidth);
-		const fullScale = 1 / Math.max(offsetWidth / innerWidth, offsetHeight / innerHeight);
-
-		container.style.setProperty('--shower-list-scale', listScale);
-		container.style.setProperty('--shower-full-scale', fullScale);
-	};
-
 	const updateModeView = () => {
 		if (shower.isFullMode) {
 			container.classList.remove(listModeClass);
@@ -31,11 +17,9 @@ export default (shower) => {
 			container.classList.add(listModeClass);
 		}
 
-		requestAnimationFrame(() => {
-			updateScale();
-
-			if (shower.isFullMode) return;
+		if (shower.isFullMode) return;
 
+		requestAnimationFrame(() => {
 			const slide = shower.activeSlide;
 			if (slide) {
 				slide.element.scrollIntoView({ block: 'center' });
@@ -51,6 +35,4 @@ export default (shower) => {
 		const slide = shower.activeSlide;
 		slide.element.scrollIntoView({ block: 'nearest' });
 	});
-
-	window.addEventListener('resize', updateScale);
 };

package/package.json

@@ -2,7 +2,7 @@
 	"type": "module",
 	"name": "@shower/core",
 	"description": "Core for Shower HTML presentation engine",
-	"version": "3.4.1",
+	"version": "3.5.0",
 	"publishConfig": {
 		"access": "public"
 	},