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 +170 -87
2 changed files with 170 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 6cfe5b21e1 - Show all commits

191
source/code/ui.js → source/code/_intro.js
View file

@ -1,43 +1,116 @@
let introDelay = 6;
let hintDelay = 1;
let isAgree = false;
const steps = {
agreement: {
element: document.getElementById('agreement'),
msgIn: 'Agreement shown.',
msgOut: 'Agreement accepted.',
msgNo: 'No agreement today.'
class Intro {
constructor(name) {
this.name = name;
}
};
const intro = document.getElementById('intro');
const agreement = steps.agreement.element;
const hint = {
element: document.getElementById('hint'),
delay: hintDelay * 1000,
show() {
if (typeof this.timeoutId === 'number') {
this.cancel();
init() {
return new Promise((resolve) => {
console.log('%s Init', this.name);
resolve();
});
}
}
class UI {
constructor() {
this.introDelay = 6;
this.hintDelay = 1;
this.isAgree = false;
this.steps = {
agreement: {
element: document.getElementById('agreement'),
msgIn: 'Agreement shown.',
msgOut: 'Agreement accepted.',
msgNo: 'No agreement today.'
}
};
this.intro = document.getElementById('intro');
this.agreement = this.steps.agreement.element;
this.hint = {
element: document.getElementById('hint'),
delay: this.hintDelay * 1000
};
this.loader = document.getElementById('loader');
}
showIntro() {
const el = this.intro;
const dy = this.introDelay * 1000;
document.addEventListener('click', hintHandler, false);
document.addEventListener('keydown', hintHandler, false);
return new Promise((resolve, reject) => {
if (el) {
console.info("Intro begin.");
el.classList.replace('op_hide', 'op_show');
setTimeout(
() => {
el.classList.replace('op_show', 'op_hide');
el.addEventListener('transitionend', () => {
console.info("Intro fin.");
el.classList.add('di_none');
resolve("Intro fin.");
});
},
dy
);
} else {
reject('No intro available.');
}
})
}
showHint() {
if (typeof this.hint.timeoutId === 'number') {
this.cancelHint();
}
this.element.classList.remove('di_none');
this.hint.element.classList.remove('di_none');
this.timeoutId = setTimeout(
this.hint.timeoutId = setTimeout(
() => {
this.dismiss();
this.dismissHint();
},
this.delay
this.hint.delay
);
},
dismiss() {
this.element.classList.add('di_none');
this.timeoutId = undefined;
},
cancel() {
clearTimeout(this.timeoutId);
}
};
const loader = document.getElementById('loader');
dismissHint() {
this.hint.element.classList.add('di_none');
this.hint.timeoutId = undefined;
}
cancelHint() {
clearTimeout(this.hint.timeoutId);
}
showIdle() {
const el = document.getElementById('idle');
return new Promise((resolve, reject) => {
if (el) {
console.info('Idle.');
el.classList.replace('op_hide', 'op_show');
resolve('Idle.');
} else {
reject();
}
})
}
init() {
return new Promise((resolve) => {
console.log('Init');
resolve();
});
}
}
function init() {
return new Promise((resolve) => {
@ -173,60 +246,6 @@ function loadCore() {
});
}
init()
.then(loadCore)
.then(showIntro)
.catch(er => console.error(er))
.then(showAgreement)
.then(showIdle)
.catch(er => console.error(er))
.finally(() => {
console.debug('Init end.', isAgree);
// location = 'demo/examples/ui/new.html';
});
// document.addEventListener('DOMContentLoaded', () => {
// const barEl = document.getElementById('bar');
// const bar = document.getElementById('progress');
// const status = document.getElementById('status');
// const spinnerEl = document.getElementById('spinner');
// const spinner = document.getElementById('spinner').querySelector('span');
// let progress = 0;
// function updateProgressBar() {
// let increment = randomIntFrom(1, 9);
// progress += increment;
// if (progress >= 100) progress = 100;
// console.log(progress);
// bar.style.width = progress + '%';
// status.textContent = progress + '%';
// if (progress < 100) {
// setTimeout(updateProgressBar, 100);
// } else {
// bar.style.width = '100%';
// spinner.style.animationPlayState = 'paused';
// spinnerEl.style.color = 'white';
// spinnerEl.style.backgroundColor = 'black';
// }
// }
// updateProgressBar();
// window.addEventListener('load', () => {
// // progressEl.style.width = '100%';
// // setTimeout(() => {
// // progressBar.style.opacity = 0;
// // setTimeout(() => {
// // progressBar.style.display = 'none';
// // }, 500);
// // }, 2000);
// });
// });
/**
* Gibt eine Zahl zwischen <min> und <max> aus.
* Die Werte <min> und <max> sind dabei mit eingeschlossen.

66
source/screens/demo/examples/ui/index.njk
View file

@ -56,5 +56,69 @@ tags:
{%- block script %}
{{ super() }}
<script src="{{ pageBase }}js/ui.js"></script>
<script src="{{ pageBase }}js/_intro.js"></script>
<script>
{# let intro = new Intro('Intro');
intro.init(); #}
{# const ui = new UI();
ui.init()
.then(() => ui.showIntro())
.then(() => ui.showHint())
.then(() => ui.showIdle())
.catch((error) => console.error(error)); #}
let introDelay = 6;
let hintDelay = 1;
let isAgree = false;
const steps = {
agreement: {
element: document.getElementById('agreement'),
msgIn: 'Agreement shown.',
msgOut: 'Agreement accepted.',
msgNo: 'No agreement today.'
}
};
const intro = document.getElementById('intro');
const agreement = steps.agreement.element;
const hint = {
element: document.getElementById('hint'),
delay: hintDelay * 1000,
show() {
if (typeof this.timeoutId === 'number') {
this.cancel();
}
this.element.classList.remove('di_none');
this.timeoutId = setTimeout(
() => {
this.dismiss();
},
this.delay
);
},
dismiss() {
this.element.classList.add('di_none');
this.timeoutId = undefined;
},
cancel() {
clearTimeout(this.timeoutId);
}
};
const loader = document.getElementById('loader');
init()
.then(loadCore)
.then(showIntro)
.catch(er => console.error(er))
.then(showAgreement)
.then(showIdle)
.catch(er => console.error(er))
.finally(() => {
console.debug('Init end.', isAgree);
// location = 'demo/examples/ui/new.html';
});
</script>
{% endblock %}