feat: Integrate date in task bar
- 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
This commit is contained in:
parent
abf393191c
commit
20b43b8d35
4 changed files with 117 additions and 53 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue