From ba592377eac9a93fc71f54300b4e72014e59c5aa Mon Sep 17 00:00:00 2001
From: lzzfnc <luzzanafrancesco@gmail.com>
Date: Wed, 27 Oct 2021 10:50:42 +0200
Subject: [PATCH] filters wip

---
 cms.js       | 48 ++++++++++++++++++++++++++++++++++++++++++++++--
 index.html   |  5 +++++
 style.css    | 34 ++++++++++++++++++++++++++++++++++
 updates.json | 11 +++++++++++
 4 files changed, 96 insertions(+), 2 deletions(-)

diff --git a/cms.js b/cms.js
index 7724a55..59c3102 100644
--- a/cms.js
+++ b/cms.js
@@ -1,6 +1,7 @@
-const updatesContainer = document.getElementById("updates-container");
-let updates = [];
+// QUOTES HIGHLIGHT
+
 let quotes = [];
+let cards = [];
 
 let callback = (entries) => {
 	entries.forEach((entry) => {
@@ -11,6 +12,41 @@ let callback = (entries) => {
 	});
 };
 
+const filtersContainer = document.getElementById("filters");
+let filters = new Set(["dev", "daily", "research"]);
+
+filtersContainer.addEventListener("click", (e) => {
+	if (e.target.tagName === "LI") {
+		let category = e.target.getAttribute("data-tag");
+
+		// if (filters.size == 1) {
+		// 	filters = new Set(["dev", "daily", "research"]);
+		// 	[...filtersContainer.getElementsByClassName('tag')].forEach(tag =>)
+		// } else
+		if (filters.has(category)) {
+			e.target.classList.remove("active");
+			filters.delete(category);
+		} else {
+			e.target.classList.add("active");
+			filters.add(category);
+		}
+	}
+	showSelectedUpdates();
+});
+
+function showSelectedUpdates() {
+	cards.forEach((card) => {
+		card.classList.remove("selected");
+		let categories = card
+			.getAttribute("data-tag")
+			.split(",")
+			.map((tag) => tag.trim());
+		categories.forEach((category) => {
+			if (filters.has(category)) card.classList.add("selected");
+		});
+	});
+}
+
 // Threshold Callback
 
 let threshold = [];
@@ -35,6 +71,8 @@ function highlight(text, offset) {
 	);
 }
 
+// UPDATES
+
 // Fetc the updates from the array in updates.json
 // Each element of the array is structured like this:
 //
@@ -60,11 +98,15 @@ function highlight(text, offset) {
 // This is for accessibility. It's a really good practice to provide quality alt text
 // and we must pay attention to this.
 
+const updatesContainer = document.getElementById("updates-container");
+let updates = [];
+
 fetch("./updates.json")
 	.then((response) => response.json())
 	.then((data) => {
 		updates = [...data.updates.reverse()];
 		populateContents();
+		showSelectedUpdates();
 	});
 
 function populateContents() {
@@ -74,6 +116,7 @@ function populateContents() {
 function createUpdate(update) {
 	let card = document.createElement("div");
 	card.classList.add("update");
+	card.setAttribute("data-tag", update.tag);
 
 	// QUOTE
 
@@ -155,4 +198,5 @@ function createUpdate(update) {
 
 	card.appendChild(log);
 	updatesContainer.appendChild(card);
+	cards.push(card);
 }
diff --git a/index.html b/index.html
index d02a8c0..86410dc 100644
--- a/index.html
+++ b/index.html
@@ -36,6 +36,11 @@
 
 		<main class="updates" id="updates-container">
 			<h3>updates</h3>
+			<ul class="filters" id="filters">
+				<li class="tag active" data-tag="research">Research</li>
+				<li class="tag active" data-tag="daily">Daily</li>
+				<li class="tag active" data-tag="dev">Dev</li>
+			</ul>
 			<!-- <div class="update">
 				<blockquote>
 					To lose someone: we suffer because the departed, the absent, has become
diff --git a/style.css b/style.css
index c95e6c8..7a1b791 100644
--- a/style.css
+++ b/style.css
@@ -80,6 +80,35 @@ header .issue {
 	flex-shrink: 0;
 }
 
+ul.filters {
+	padding: 0;
+	list-style: none;
+}
+
+.filters > li {
+	display: inline-block;
+	padding: 0 8px;
+
+	color: #c4c1eb;
+	background-color: #fff;
+
+	cursor: pointer;
+	user-select: none;
+
+	transform: translateY(0);
+	transition: transform 0.4s ease-in;
+}
+
+.filters > *:hover {
+	transform: translateY(-4px);
+	transition: transform 0.2s ease-out;
+}
+
+li.active {
+	color: #6b64c3;
+	background-color: #f0f0f6;
+}
+
 /* DESCRIPTION */
 
 .description {
@@ -113,6 +142,10 @@ header .issue {
 }
 
 .update {
+	display: none;
+}
+
+.update.selected {
 	display: flex;
 }
 
@@ -144,6 +177,7 @@ header .issue {
 .log .date {
 	margin: 0;
 	font-size: 1rem;
+	opacity: 0.6;
 }
 
 .log .title {
diff --git a/updates.json b/updates.json
index 2067f23..182aafc 100644
--- a/updates.json
+++ b/updates.json
@@ -1,6 +1,7 @@
 {
     "updates": [
         {
+            "tag": "dev, daily",
             "date": "October the 21st, 2021",
             "title": "",
             "text": "",
@@ -12,6 +13,7 @@
             }
         },
         {
+            "tag": "dev, research",
             "date": "October the 21st, 2021",
             "title": "2nd hand lifeboat script",
             "text": "",
@@ -23,6 +25,7 @@
             }
         },
         {
+            "tag": "daily, research",
             "date": "October the 22nd, 2021",
             "title": "This thing is fun and funny on many levels",
             "text": "",
@@ -34,6 +37,7 @@
             }
         },
         {
+            "tag": "dev",
             "date": "October the 22nd, 2021",
             "title": "He llo wo rld",
             "text": "",
@@ -46,11 +50,13 @@
             }
         },
         {
+            "tag": "daily, dev",
             "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)"
         },
         {
+            "tag": "dev, research",
             "date": "October the 23rd, 2021",
             "title": "Re → cord ~ Re → play",
             "text": "Yesterday we studied how to write these infos back in a MIDI files at the right time, so now we just need to merge the two things. 1 last aspect to understand it's the conversion between the ticks of midi (like the framerate or something like that) and the simple timespan we are using. \n\nOften listening to Battiato you can grasp like an faint intuition of something really far away. It is not an explicit message or a revelation, but more like a mmoment of tuning with the elsewhere. In some really intimate song though, this feeling is replaced by something that points toward a inner reality. If the eclectism of his music generally excedes its borders to break the leevee of musical genres, these other tracks seem more like mantras, and they guide you down and down and down.",
@@ -62,12 +68,14 @@
             }
         },
         {
+            "tag": "research",
             "date": "October the 23rd, 2021",
             "title": "Graceful like a camel in a gutter",
             "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."
         },
         {
+            "tag": "dev, daily",
             "date": "October the 24th, 2021",
             "title": "Slicing text in real time",
             "text": "A loaf of text please. Yesterday after pushing everything on git and updating the Soupboat (at 4:30 AM... wtf is wrong with clocks in the Netherlands) this idea landed to mind: what if we could use a phisical slider like the ones on MIDI controller to choose how to split the text to insert in the karaoke file? This is fun and funny because it offers a layer of performativity in the karaoke transcription. Otherwise it would have been only a boring act of compilation. During the first lesson for the SI16, Cristina and Steve showed us <a href='http://vimeo.com/1006810'>Entropic Text Editor,from Allison Parrish</a> and it was nice. I really like this kind of playful approach to composition and production.\n\nAnd so today after all the explorative wanderings through the lower layers of the Maslow scheme, we met at the library* to study how to do this art.",
@@ -79,6 +87,7 @@
             }
         },
         {
+            "tag": "dev",
             "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",
@@ -91,12 +100,14 @@
             }
         },
         {
+            "tag": "dev",
             "date": "October the 24th, 2021",
             "title": "",
             "quote": "It is necessary to touch impossibility in order to come out of the dream world. There is no impossibility in dreams—only impotence.",
             "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"
         },
         {
+            "tag": "dev",
             "date": "October the 24th, 2021",
             "title": "Look at these mystical quotes 👀",
             "quote": "Impossibility is the door of the supernatural. We can but knock at it. It is someone else who opens.",