flex quotes and karaoke highlights

master
km0 3 years ago
parent 91aaab6c42
commit 429e2c3f0f

@ -1,5 +1,39 @@
const updatesContainer = document.getElementById("updates-container");
let updates = [];
let quotes = [];
let callback = (entries) => {
entries.forEach((entry) => {
entry.target.innerHTML = highlight(
quotes[entry.target.getAttribute("data-quote")],
entry.intersectionRatio
);
});
};
// Threshold Callback
let threshold = [];
for (let i = 0; i <= 1.0; i += 0.01) {
threshold.push(i);
}
let observer = new IntersectionObserver(callback, {
rootMargin: "100% 0% -25% 0%",
threshold: threshold,
});
// Karaoke highlight
function highlight(text, offset) {
let scrollCursor = text.length * offset;
return (
'<span class="highlight">' +
text.slice(0, scrollCursor) +
"</span>" +
text.slice(scrollCursor)
);
}
// Fetc the updates from the array in updates.json
// Each element of the array is structured like this:
@ -8,7 +42,8 @@ let updates = [];
// "date": "October the 21st, 2021",
// "title": "2nd hand lifeboat script",
// "text": "Labore eiusmod labore pariatur elit nostrud ut magna cupidatat minim amet deserunt cillum id. Lorem consectetur incididunt anim sit do eu minim nisi id.",
// "media": {
// "quote": "Lorem elit magna esse reprehenderit fugiat labore est veniam ipsum labore est voluptate do."
// "media": {
// "type": "video",
// "src": "./assets/test-js.mp4",
// "alt": "An excerpt from 'When did software gone wrong?' highlighted progressively as in karaoke",
@ -16,7 +51,7 @@ let updates = [];
// }
// }
//
// Title, Text and Media are not mandatory.
// Title, Text, Quote and Media are not mandatory.
// If some are not present, the createUpdate function will skip them
//
// Note that the Date is required, but its format is up to the user
@ -40,18 +75,33 @@ function createUpdate(update) {
let card = document.createElement("div");
card.classList.add("update");
// QUOTE
if (update.quote) {
let quote = document.createElement("blockquote");
quote.innerHTML = update.quote;
quote.setAttribute("data-quote", quotes.length);
quotes.push(update.quote);
card.appendChild(quote);
observer.observe(quote);
}
// LOG
let log = document.createElement("div");
log.classList.add("log");
// DATE
let date = document.createElement("div");
date.classList.add("date");
date.innerHTML = update.date;
card.appendChild(date);
log.appendChild(date);
// TITLE, if present
if (update.title) {
let title = document.createElement("h3");
title.classList.add("title");
title.innerHTML = update.title;
card.appendChild(title);
log.appendChild(title);
}
// MEDIA CONTENTS, if present
@ -92,7 +142,7 @@ function createUpdate(update) {
media.appendChild(caption);
}
}
card.appendChild(media);
log.appendChild(media);
}
// TEXT, if present
@ -100,8 +150,9 @@ function createUpdate(update) {
let text = document.createElement("p");
text.classList.add("text");
text.innerHTML = update.text;
card.appendChild(text);
log.appendChild(text);
}
card.appendChild(log);
updatesContainer.appendChild(card);
}

@ -20,70 +20,49 @@
</div>
</header>
<main>
<div class="lyrics">
<p>
<span class="karaoke">"To ascertain exactly what the miser whose </span>treasure
was stolen lost: thus we should learn much. Lauzun and the office of Captain of
Musketeers. He preferred to be a prisoner and Captain of Musketeers rather than
to go free and not be Captain. These are garments. They were ashamed of their
nakedness."
</p>
<p>
"To lose someone: we suffer because the departed, the absent, has become
<div class="description">
<h2 class="info">
An enchanting reading-in-choir featuring Simone Weil's diaries through the musical
intuitions of Franco Battiato
</h2>
<p>
Esse ex qui veniam irure excepteur consequat eu ad enim proident. Ut eiusmod
incididunt ex nostrud qui eu sunt laboris enim Lorem consectetur. Esse pariatur
irure enim dolore excepteur ullamco in excepteur in nisi eiusmod. Officia ullamco ut
eu aliqua anim. Dolor non id amet fugiat mollit sunt cupidatat consectetur et aliqua
sint sit.
</p>
</div>
<main class="updates" id="updates-container">
<!-- <div class="update">
<blockquote>
To lose someone: we suffer because the departed, the absent, has become
something imaginary and unreal. But our desire for him is not imaginary. We have
to go down into ourselves to the abode of the desire which is not imaginary.
Hunger: we imagine kinds of food, but the hunger itself is real: we have to
fasten on to the hunger. The presence of the dead person is imaginary, but his
absence is very real: henceforward it is his way of appearing."
</p>
<p>
"Man only escapes from the laws of this world in lightning flashes. Instants
when everything stands still, instants of contemplation, of pure intuition, of
mental void, of acceptance of the moral void. It is through such instants that
he is capable of the supernatural. Whoever endures a moment of the void either
receives the supernatural bread or falls. It is a terrible risk, but one that
must be run—even during the instant when hope fails. But we must not throw
ourselves into it."
</p>
</div>
<div class="documentation">
<div class="description">
<h2 class="info">
An enchanting reading-in-choir featuring Simone Weil's diaries through the
musical intuitions of Franco Battiato
</h2>
<p>
Esse ex qui veniam irure excepteur consequat eu ad enim proident. Ut eiusmod
incididunt ex nostrud qui eu sunt laboris enim Lorem consectetur. Esse
pariatur irure enim dolore excepteur ullamco in excepteur in nisi eiusmod.
Officia ullamco ut eu aliqua anim. Dolor non id amet fugiat mollit sunt
cupidatat consectetur et aliqua sint sit.
absence is very real: henceforward it is his way of appearing.
</blockquote>
<div class="log">
<div class="date">October the 22nd, 2021</div>
<h3 class="title">Not every update needs a title</h3>
<figure class="media">
<img
src="./assets/keta_laibach.jpg"
alt="Note that the alt is not just a copy of the caption."
/>
<figcaption>
Some updates have an image, some others a video, some others again
nothing at all. Please use super lightweight contents, the year is 2021.
</figcaption>
</figure>
<p class="text">
The text is not always relevant, but sometimes all we need is a bold
statement and a join tea party.
</p>
</div>
<div class="updates" id="updates-container">
<!-- <div class="update">
<div class="date">October the 22nd, 2021</div>
<h3 class="title">Not every update needs a title</h3>
<figure class="media">
<img
src="./assets/keta_laibach.jpg"
alt="Note that the alt is not just a copy of the caption."
/>
<figcaption>
Some updates have an image, some others a video, some others again
nothing at all. Please use super lightweight contents, the year is
2021.
</figcaption>
</figure>
<p class="text">
The text is not always relevant, but sometimes all we need is a bold
statement and a join tea party.
</p>
</div> -->
</div>
</div>
</div> -->
</main>
</body>
</html>

@ -15,8 +15,10 @@ body {
box-sizing: border-box;
/*green is #69781C
purple is #6B64C3*/
/*
green #69781C
purple #6B64C3
*/
}
a {
@ -45,7 +47,7 @@ header {
}
header h1 {
font-size: clamp(64px, 1rem + 8vw, 256px);
font-size: clamp(36px, 1rem + 8vw, 256px);
font-family: Bluu;
font-weight: bold;
margin: 0;
@ -72,17 +74,6 @@ header .issue {
margin: 8px 0;
}
main {
display: flex;
margin: 0;
line-height: 1.4;
}
main > * {
padding: 24px;
margin: 0;
}
.documentation {
flex-basis: 33vw;
flex-shrink: 0;
@ -92,6 +83,8 @@ main > * {
.description {
margin: 32px 0;
padding: 0 32px;
display: flex;
}
.description h2 {
@ -106,34 +99,58 @@ main > * {
.updates {
margin-top: 64px;
padding: 32px;
}
.updates > * + * {
margin-top: 48px;
margin-top: 64px;
}
.update {
/* background: linear-gradient(rgba(107, 100, 195, 0.1), rgba(107, 100, 195, 0)); */
padding-left: 16px;
display: flex;
}
.update > * {
flex: 1;
}
.update blockquote {
flex-grow: 1.2;
font-size: 48px;
line-height: 1.2;
font-family: Bluu;
color: #ada9e0;
text-indent: 6ch;
padding: 48px;
margin: 0;
}
.log {
padding-left: 24px;
border-left: 2px dashed #ada9e0;
align-self: center;
flex-grow: 0;
flex-basis: 45%;
margin-left: auto;
}
.update .date {
.log .date {
margin: 0;
font-size: 1rem;
}
.update .title {
.log .title {
margin: 8px 0;
}
.update .media {
.log .media {
width: 100%;
margin: 24px 0;
}
.update figcaption,
.update .caption {
.log figcaption,
.log .caption {
margin: 0;
margin-top: 8px;
font-size: 1rem;
@ -144,64 +161,20 @@ main > * {
.media video {
width: 100%;
height: 100%;
/* border: 2px solid #d4d3ee; */
}
.update .text {
.log .text {
margin: 0;
margin-top: 16px;
white-space: break-spaces;
}
/* LYRICS */
.lyrics {
flex-grow: 1.2;
font-size: 48px;
font-family: Bluu;
color: #ada9e0;
}
.lyrics p {
text-indent: 6ch;
}
/* HIGHLIGHT */
.karaoke {
.highlight {
color: #6b64c3;
}
/* .lyrics {
margin: 0;
flex-basis: 60%;
overflow-y: scroll;
overflow-x: hidden;
padding: 1em;
}
.documentation {
flex-basis: 40%;
overflow-y: scroll;
padding: 1em;
margin: 0;
overflow-y: scroll;
}
h3 {
font-family: Bluu;
font-weight: regular;
font-size: 2em;
}
p {
margin: 2em auto;
width: 90%;
font-size: 1.2em;
}
.documentation img {
width: 90%;
margin: 1em auto;
object-fit: contain;
} */
@media (max-width: 991.98px) {
header .issue {
position: relative;
@ -218,4 +191,32 @@ p {
.issue .current {
text-align: center;
}
.description {
display: block;
}
.updates {
padding: 16px;
}
.updates > * + * {
margin-top: 48px;
}
.update {
display: block;
}
.update blockquote {
padding: 0;
margin: 32px 0;
font-size: 32px;
line-height: 1.4;
text-indent: 32px;
}
.update .log {
padding-left: 16px;
}
}

@ -37,6 +37,7 @@
"date": "October the 22nd, 2021",
"title": "He llo wo rld",
"text": "",
"quote": "To lose someone: we suffer because the departed, the absent, has become something imaginary and unreal. But our desire for him is not imaginary. We have to go down into ourselves to the abode of the desire which is not imaginary. Hunger: we imagine kinds of food, but the hunger itself is real: we have to fasten on to the hunger. The presence of the dead person is imaginary, but his absence is very real: henceforward it is his way of appearing.",
"media": {
"type": "video",
"src": "./assets/helllo_world.mp4",
@ -47,8 +48,7 @@
{
"date": "October the 23rd, 2021",
"title": "K-Scroll",
"text": "We bought green curry from HJ 😶 and developed a scroll-to-highlight script starting from the idea behind these <a href='https://hub.xpub.nl/soupboat/~kamo/09-28-2021-lifeboats/'>text lifeboats</a>. We will use it as a small interactive feature for this diary-devlog, to stay in the karaoke mood. (the scroll-to-highlight, not the curry)",
"media": null
"text": "We bought green curry from HJ 😶 and developed a scroll-to-highlight script starting from the idea behind these <a href='https://hub.xpub.nl/soupboat/~kamo/09-28-2021-lifeboats/'>text lifeboats</a>. We will use it as a small interactive feature for this diary-devlog, to stay in the karaoke mood. (the scroll-to-highlight, not the curry)"
},
{
"date": "October the 23rd, 2021",
@ -64,8 +64,8 @@
{
"date": "October the 23rd, 2021",
"title": "Graceful like a camel in a gutter",
"text": "Both Battiato and Weil's writings are often like a spell of protection, a desire for preservation in the name of a higher, so to say, grace. The kind of state of consciousness that spans from the innermost esoteric knowledge of self-care, to the irrational acceptance of an utter disclosure of one's own intimacy.\nAs the Persian mathematician, philosopher and historian al-Bīrūnī used to compare his on language to \"a camel in a gutter\" to describe its inadequacy when it come to discuss scientific topics, so the entire realm of words has something awkwardly inappropriate when it comes to deal with such a state of grace. However, there's something like a confession in both Battiato and Weil's lyrics, and perhaps it is indeed this confession that somehow manages to carry the burden of this task through the means of the diary and of the song.",
"media": null
"quote": "To ascertain exactly what the miser whosetreasure was stolen lost: thus we should learn much. Lauzun and the office of Captain of Musketeers. He preferred to be a prisoner and Captain of Musketeers rather than to go free and not be Captain. These are garments. They were ashamed of their nakedness.",
"text": "Both Battiato and Weil's writings are often like a spell of protection, a desire for preservation in the name of a higher, so to say, grace. The kind of state of consciousness that spans from the innermost esoteric knowledge of self-care, to the irrational acceptance of an utter disclosure of one's own intimacy.\nAs the Persian mathematician, philosopher and historian al-Bīrūnī used to compare his on language to \"a camel in a gutter\" to describe its inadequacy when it come to discuss scientific topics, so the entire realm of words has something awkwardly inappropriate when it comes to deal with such a state of grace. However, there's something like a confession in both Battiato and Weil's lyrics, and perhaps it is indeed this confession that somehow manages to carry the burden of this task through the means of the diary and of the song."
},
{
"date": "October the 24th, 2021",
@ -82,6 +82,7 @@
"date": "October the 24th, 2021",
"title": "No Time No Space - live slice demo",
"text": "Tried with the pitchwheel instead of the slider and it seems to work better, because it returns automatically at its default position and it's super handy: the reset smooths out the flow. Otherwise with the fader we would end up with the length of the previous selection already in place for the next one, and that could be annoying, i.e. if you need to select a long slice and then maybe a short one\n\nPS This update reminds me that we need to put some sort of controls for videos. This one has audio and cannot start by itself, try to play it",
"quote": "Man only escapes from the laws of this world in lightning flashes. Instants when everything stands still, instants of contemplation, of pure intuition, of mental void, of acceptance of the moral void. It is through such instants that he is capable of the supernatural. Whoever endures a moment of the void either receives the supernatural bread or falls. It is a terrible risk, but one that must be run—even during the instant when hope fails. But we must not throw ourselves into it.",
"media": {
"type": "video",
"src": "./assets/k-live-slice.mp4",
@ -92,8 +93,7 @@
{
"date": "October the 24th, 2021",
"title": "",
"text": "Also, these updates cover a lot of different aspects of this project and so maybe we could add some tags to filter the update? Maybe not complex as in the soup-gen or the chat-reader, but just some macro areas like Contents, Dev, Event ecc",
"media": null
"text": "Also, these updates cover a lot of different aspects of this project and so maybe we could add some tags to filter the update? Maybe not complex as in the soup-gen or the chat-reader, but just some macro areas like Contents, Dev, Event ecc"
}
]
}
Loading…
Cancel
Save