hippie/source/screens/demo/examples/ui/gallery.liquid

---
title: Gallery
tags:
- ui
---
{% assign bodyClass = "body_frame" -%}
{% layout "hippie/app.liquid" %}

{% block body %}
{% render 'hippie/partials/frame-header.liquid' %}
<main class="io">
	<section>
		<header class="io">
			<nav>
				<div class="group">
					<input id="slider-size" value="5" min="1" max="10" step="1" type="range"/>
					<label class="right" for="slider-size">Größe</label>
				</div>
				<button title="details">
					<i class="bi bi-layout-sidebar-reverse"></i>&nbsp;Details
				</button>
			</nav>
			<nav></nav>
		</header>
		<div class="gallery">
			<div>A</div>
			<div>B</div>
			<div>C</div>
		</div>
		{% render 'hippie/partials/frame-status.liquid' %}
	</section>
</main>
{% render 'hippie/partials/frame-mode.liquid' %}
{% endblock %}

{%- block script %}
{{ block.super -}}
<script>
	const sizeSlider = document.getElementById('slider-size');
	const galleryItems = document.querySelectorAll('.gallery > div');

	// Set the default size
	const defaultSize = 128; // In pixels
	const minSize = 16; // Minimum width in pixels
	const steps = 10;
	// Define specific sizes for each step (from 1 to 10)
	const sizes = [16, 32, 64, 96, 128, 256, 512, 1024, 2048]; // Sizes in pixels


	// Calculate width based on slider value
	function calculateWidth(value) {
		// Map 1-10 to a pixel width
		return Math.floor(minSize + (value - 1) * (defaultSize - minSize) / (steps - 1));
	}

	// Set initial size
	galleryItems.forEach(item => {
		item.style.width = `${defaultSize}px`;
		item.style.width = `${sizes[5]}px`; // Initial width based on the default step (8 corresponds to index 7)
	});

	sizeSlider.addEventListener('input', function () {
		console.debug('Change size');
		// const newSize = calculateWidth(Number(sizeSlider.value));
		// galleryItems.forEach(item => {
		// 	item.style.width = `${newSize}px`;
		// });
		const selectedStep = Number(sizeSlider.value) - 1; // Adjust for zero-indexing
		const newSize = sizes[selectedStep]; // Get size from the array using slider value
		galleryItems.forEach(item => {
			item.style.width = `${newSize}px`;
		});
	});

	// Initialize slider to default
	sizeSlider.value = 6; // Sets default to 128px width
</script>
{% endblock %}