sthag
20b43b8d35
- Date format can now be changed dynamically - Date element is now created in task bar class - Class can accept options, currently only for date - Date format is changed according to position - Changed dom structure for clock - Refactor setPosition method to be more flexible - Changed flex style for task bar items to inherit the direction
74 lines
No EOL
2.2 KiB
Text
74 lines
No EOL
2.2 KiB
Text
---
|
|
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>
|
|
<div class="clock">
|
|
<span id="time">##:##</span>
|
|
<br>
|
|
</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>
|
|
{% endblock %}
|
|
|
|
{%- block script %}
|
|
<script src="{{ pageBase }}js/globals.js"></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);
|
|
|
|
document.getElementById('pauseButton').addEventListener('click', () => {
|
|
timeDisplay.pause();
|
|
console.info('Pause time');
|
|
});
|
|
document.getElementById('resumeButton').addEventListener('click', () => {
|
|
timeDisplay.resume();
|
|
console.info('Resume time');
|
|
});
|
|
</script>
|
|
{% endblock %} |