77 lines
2.1 KiB
Text
77 lines
2.1 KiB
Text
|
---
|
||
|
|
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> 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('#flex > 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 () {
|
||
|
|
// 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 %}
|