hippie/source/screens/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="pauseButton"><i class="bi bi-pause"></i></button>
		<button id="resumeButton"><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>
		<nav class="clock">
			<span><span id="time">##:##</span><br><span id="date">TT.MM.JJJJ</span></span>
		</nav>
		<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>
{% endblock %}

{%- block script %}
<script src="{{ pageBase }}js/app.js"></script>
<script src="{{ pageBase }}js/windows.js"></script>
<script>
	// 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');

	// const draggable = new Draggable(draggableElement);
	const dragMore = new DragAdv(draggableElement, placeholderElement);
	// const dragBest = new BestDrag(draggableElement, placeholderElement);

	// let clock = new Clock('time');
	const timeElement = document.getElementById('time');
	const timeFormat = {hour: '2-digit', minute: '2-digit'};
	const timeDisplay = new TimeDisplay(timeElement, timeFormat);
	const dateElement = document.getElementById('date');
	const dateFormat = {year: 'numeric', month: '2-digit', day: '2-digit'}
	const dateDisplay = new DateDisplay(dateElement, dateFormat);


	document.getElementById('pauseButton').addEventListener('click', () => {
		timeDisplay.pause();
		console.info('Pause time');
	});
	document.getElementById('resumeButton').addEventListener('click', () => {
		timeDisplay.resume();
		console.info('Resume time');
	});
</script>
{% endblock %}