hippie/source/view/demo/examples/ui/windows.liquid

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

{% block body %}
<div id="task-bar">
	<nav>
		<button data-action="start"><i class="bi bi-microsoft"></i></button>
	</nav>
	<nav>
		<button><i class="bi bi-search"></i></button>
		<button><i class="bi bi-layers-half"></i></button>
	</nav>
	<nav class="big">
		<button><i class="bi bi-folder"></i></button>
		<button><i class="bi bi-terminal"></i></button>
		<button id="setPause"><i class="bi bi-pause"></i></button>
		<button id="setPlay"><i class="bi bi-play"></i></button>
	</nav>
	<div>
		<nav class="small">
			<button><i class="bi bi-chevron-up"></i></button>
			<button><i class="bi bi-steam"></i></button>
			<button><i class="bi bi-router"></i></button>
			<button><i class="bi bi-mic"></i></button>
			<button><i class="bi bi-volume-down"></i></button>
		</nav>
		<div class="clock"></div>
		<nav>
			<button data-action="notification"><i class="bi bi-bell-fill"></i></button>
		</nav>
	</div>
</div>
<div id="screen-space"></div>
<div id="placeholder">
	<div class="box"></div>
	<div class="box_brd"></div>
	<div>
		<span>task bar</span>
		<div class="box_brd"></div>
	</div>
</div>
{% endblock %}

{% block assets %}
{{ block.super -}}
<script src="/js/windows.js"></script>
{% endblock %}

{%- block script %}
{{ block.super -}}
<script>
	console.log(HIPPIE.brand);
	// Get the space element
	const space = document.getElementById('screen-space');
	const start = document.querySelector('[data-action=start]');
	const draggableElement = document.getElementById('task-bar');
	const placeholderElement = document.getElementById('placeholder');

	initializeApp();

	async function initializeApp() {
		try {
			const config = await loadJson('/json/windows.json');
			// TODO: Elemente in der Klasse selbst erzeugen
			const taskBar = new HippieTaskBar(draggableElement, placeholderElement, config.taskbar);

			// TODO: In HippieTaskbar aufnehmen
			document.getElementById('setPause').addEventListener('click', () => {
				taskBar.time.pause();
				console.info('Pause time');
			});
			document.getElementById('setPlay').addEventListener('click', () => {
				taskBar.time.resume();
				console.info('Resume time');
			});
		} catch (error) {
			console.error('Failed to initialize app:', error);
		}
	}
</script>
{% endblock %}