sthag
b67a8a893a
- Move return object to named export for 11ty config - screens is now view - 11ty data files moved to view/_data - templates is now view/_includes - Both are the default directories - data is now used as intended, for user data - Update index to reflect filenames and structure
78 lines
No EOL
2.2 KiB
Text
Executable file
78 lines
No EOL
2.2 KiB
Text
Executable file
---
|
|
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_nav">
|
|
<input id="setSize" value="5" min="1" max="10" step="1" type="range"/>
|
|
<label class="right" for="setSize">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('setSize');
|
|
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 %} |