interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

10 years later #1

Merged
sthag merged 374 commits from development into main 2026-03-07 00:18:59 +01:00
Conversation 0 Commits 374 Files changed 135 +117 -53
4 changed files with 117 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 20b43b8d35 - Show all commits

6
source/code/hippie/app.js
View file

@ -296,6 +296,12 @@ class DateDisplay {
this.element.textContent = this.formatDate(now);
}
changeFormat(format) {
this.options = format;
this.updateDate();
}
getTimeUntilNextMidnight() {
const now = new Date();
const nextMidnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);

110
source/code/windows.js
View file

@ -128,13 +128,16 @@ class Draggable {
}
class DragAdv {
constructor(element, placeholder) {
constructor(element, placeholder, options) {
this.element = element;
this.placeholder = placeholder;
this.date = null;
this.offsetX = 0;
this.offsetY = 0;
this.isDragging = false;
this.barSize = '';
this.barSize = '64px';
// TODO: Erweitern auf allgemeine Möglichkeiten und dann aus JSON-Datei laden
this.options = options || {year: 'numeric', month: '2-digit', day: '2-digit'};
this.init();
}
@ -144,7 +147,14 @@ class DragAdv {
this.element.addEventListener('mousedown', this.onMouseDown.bind(this));
document.addEventListener('mousemove', this.onMouseMove.bind(this));
document.addEventListener('mouseup', this.onMouseUp.bind(this));
this.setPosition('bottom', this.barSize);
const dateElement = document.createElement('span');
dateElement.id = 'date';
this.element.querySelector('.clock').appendChild(dateElement);
this.date = new DateDisplay(dateElement, this.options);
this.setPosition('bottom');
}
onMouseDown(event) {
@ -218,49 +228,69 @@ class DragAdv {
};
const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
this.setPosition(closestEdge, this.barSize);
this.setPosition(closestEdge);
this.date.changeFormat(this.options);
}
setPosition(side, barSize) {
switch (side) {
case 'left':
// this.element.style.top = `${rect.top}px`; // Optional: keep vertical position
this.element.style.top = '0px';
this.element.style.right = '';
this.element.style.bottom = '0px';
this.element.style.left = '0px';
this.element.style.width = barSize;
this.element.style.height = '';
break;
setPosition(position) {
const attributes = {
top: {
className: 'top',
styles: {
top: '0', right: '0', bottom: '', left: '0',
width: '', height: this.barSize,
flexDirection: 'row'
}
},
right: {
className: 'right',
styles: {
top: '0', right: '0', bottom: '0', left: '',
width: this.barSize, height: '',
flexDirection: 'column'
}
},
bottom: {
className: 'bottom',
styles: {
top: '', right: '0', bottom: '0', left: '0',
width: '', height: this.barSize,
flexDirection: 'row'
}
},
left: {
className: 'left',
styles: {
top: '0',
right: '',
bottom: '0',
left: '0',
width: this.barSize,
height: '',
flexDirection: 'column'
}
}
};
this.element.classList.remove(...Object.values(attributes).map(pos => pos.className));
Object.keys(attributes[position].styles).forEach(key => {
this.element.style[key] = '';
});
this.element.classList.add(attributes[position].className);
Object.entries(attributes[position].styles).forEach(([key, value]) => {
this.element.style[key] = value;
});
switch (position) {
case 'right':
// this.element.style.left = `${windowWidth - rect.width}px`;
// this.element.style.top = `${rect.top}px`; // Optional: keep vertical position
this.element.style.top = '0px';
this.element.style.right = '0px';
this.element.style.bottom = '0px';
this.element.style.left = '';
this.element.style.width = barSize;
this.element.style.height = '';
case 'left':
this.options = {year: '2-digit', month: '2-digit', day: '2-digit'};
break;
case 'top':
// this.element.style.top = '0px';
// this.element.style.left = `${rect.left}px`; // Optional: keep horizontal position
this.element.style.top = '0px';
this.element.style.right = '0px';
this.element.style.bottom = '';
this.element.style.left = '0px';
this.element.style.width = '';
this.element.style.height = barSize;
break;
case 'bottom':
// this.element.style.top = `${windowHeight - rect.height}px`;
// this.element.style.left = `${rect.left}px`; // Optional: keep horizontal position
this.element.style.top = '';
this.element.style.right = '0px';
this.element.style.bottom = '0px';
this.element.style.left = '0px';
this.element.style.width = '';
this.element.style.height = barSize;
default:
this.options = {year: 'numeric', month: '2-digit', day: '2-digit'};
break;
}
}

12
source/screens/demo/examples/ui/windows.liquid
View file

@ -29,9 +29,10 @@ tags:
<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>
<div class="clock">
<span id="time">##:##</span>
<br>
</div>
<nav>
<button data-action="notification"><i class="bi bi-bell-fill"></i></button>
</nav>
@ -42,6 +43,7 @@ tags:
{% 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>
@ -59,10 +61,6 @@ tags:
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();

42
source/style/modules/ui/_windows_module.scss
View file

@ -25,13 +25,45 @@ $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
padding: hippie.$space_basic;
background-color: rgba(0, 0, 0, .1);
&.top,
&.bottom {
nav,
& > div {
&:last-child {
margin-top: unset;
margin-left: auto;
}
}
.clock {
text-align: end;
}
}
&.right,
&.left {
nav,
& > div {
&:last-child {
margin-top: auto;
margin-left: unset;
}
}
.clock {
text-align: center;
& > span {
display: inline-block;
word-wrap: anywhere;
}
}
}
nav,
& > div {
@extend %flex-bar;
&:last-child {
margin-left: auto;
}
flex-direction: inherit;
}
button {
@ -70,8 +102,6 @@ $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
}
.clock {
text-align: end;
&,
& > * {
line-height: 1;