chat-reader/csv_to_chat.js

// https://sebhastian.com/javascript-csv-to-array/
// file reader code from here

const myForm = document.getElementById("myForm");
const csvFile = document.getElementById("csvFile");
const categoriesContainer = document.getElementById("categories");
const activeAllButton = document.getElementById("active-all");
const chatContainer = document.getElementById("chat-container");
let baloonList;

// Filter Categories

let tags = [];
let selectedTopics = new Set();
let allActive;
let TagList;

// Activate all tags

function ShowAllTags() {
	TagList.forEach((tag) => {
		selectedTopics.add(tag.getAttribute("data-tag"));
		tag.classList.add("active");
		tag.setAttribute("aria-expanded", "true");
	});
	allActive = true;
	showSelectedBaloons();
}

function allActiveCheck() {
	if (TagList.length === selectedTopics.size) {
		allActive = true;
		TagList.forEach((tag) => tag.classList.add("all"));
		TopicFilter.firstElementChild.classList.add("active");
	} else {
		allActive = false;
		TagList.forEach((tag) => tag.classList.remove("all"));
		TopicFilter.firstElementChild.classList.remove("active");
	}
}

// Listen for

categoriesContainer.addEventListener("click", (e) => {
	if (e.target.tagName === "LI") {
		conditionalToggle(e.target);
		showSelectedBaloons();
	}
});

activeAllButton.addEventListener("click", (e) => {
	activeAllButton.classList.add("active");
	activeAllButton.setAttribute("aria-expanded", "true");
	ShowAllTags();
});

function conditionalToggle(element) {
	if (allActive) {
		TagList.forEach((tag) => {
			selectedTopics.delete(tag.getAttribute("data-tag"));
			tag.classList.remove("active");
			tag.setAttribute("aria-expanded", "false");
		});
		activeAllButton.classList.remove("active");
		allActive = false;
	}

	if (element.classList.contains("active")) {
		element.classList.remove("active");
		element.setAttribute("aria-expanded", "false");
		selectedTopics.delete(element.getAttribute("data-tag"));
	} else {
		element.classList.add("active");
		element.setAttribute("aria-expanded", "true");
		selectedTopics.add(element.getAttribute("data-tag"));
	}

	allActive = TagList.length == selectedTopics.size;

	if (allActive) {
		activeAllButton.classList.add("active");
		activeAllButton.setAttribute("aria-expanded", "true");
	}
}

function showSelectedBaloons() {
	baloonList.forEach((baloon) => baloon.classList.remove("active"));

	selectedTopics.forEach((topic) => {
		let selectedBaloons = baloonList.filter((el) => {
			topic = topic.replaceAll(" ", "-");
			return el.classList.contains(topic);
		});
		selectedBaloons.forEach((baloon) => {
			baloon.classList.add("active");
		});
	});

	allActiveCheck();
}

// Standard CSV

window.onload = function () {
	const data = csvToArray(defaultCSV);

	data.forEach((baloon) => {
		let baloonTag = [];
		if (baloon.tag) {
			let tag = baloon.tag.split(",").map((t) => t.trim());
			tags = [...tags, ...tag];
			baloonTag = [...tag];
		}

		chatContainer.appendChild(createBaloon(baloon.text, baloon.author, baloonTag));
	});

	baloonList = [...document.getElementsByClassName("baloon")];

	let unique = new Set(tags);
	unique.forEach((tag) => {
		categoriesContainer.appendChild(createTag(tag));
	});

	TagList = document.querySelectorAll("[data-tag]");
	ShowAllTags();
};

// Custom CSV loader

myForm.addEventListener("submit", function (e) {
	e.preventDefault();
	const input = csvFile.files[0];
	const reader = new FileReader();

	reader.onload = function (e) {
		const text = e.target.result;
		const data = csvToArray(text);

		data.forEach((baloon) => {
			let baloonTag = [];
			if (baloon.tag) {
				let tag = baloon.tag.split(",").map((t) => t.trim());
				tags = [...tags, ...tag];
				baloonTag = [...tag];
			}

			chatContainer.appendChild(createBaloon(baloon.text, baloon.author, baloonTag));
		});

		baloonList = [...document.getElementsByClassName("baloon")];
	};

	reader.readAsText(input);
});

// Create an array of object from a CSV file

function csvToArray(str, delimiter = ";") {
	// slice from start of text to the first \n index
	// use split to create an array from string by delimiter
	const headers = str.slice(0, str.indexOf("\n")).split(delimiter);

	// slice from \n index + 1 to the end of the text
	// use split to create an array of each csv value row
	const rows = str.slice(str.indexOf("\n") + 1).split("\n");

	// Map the rows
	// split values from each row into an array
	// use headers.reduce to create an object
	// object properties derived from headers:values
	// the object passed as an element of the array
	const arr = rows.map(function (row) {
		const values = row.split(delimiter);
		const el = headers.reduce(function (object, header, index) {
			object[header] = values[index];
			return object;
		}, {});
		return el;
	});

	// return the array
	return arr;
}

// Create Baloon

function createBaloon(text, username, tags) {
	let baloon = document.createElement("div");
	baloon.classList.add("baloon");

	let contents;
	let author;

	if (text) {
		contents = document.createElement("p");
		contents.classList.add("contents");
		contents.innerHTML = text;
		baloon.appendChild(contents);
	}

	if (username) {
		author = document.createElement("span");
		author.classList.add("author");
		author.innerHTML = username;
		baloon.appendChild(author);
	}

	if (tags) {
		tags.forEach((tag) => {
			let category = document.createElement("span");
			category.innerHTML = tag;
			category.classList.add("category");
			if (text) contents.appendChild(category);

			tag = tag.replaceAll(" ", "-");
			baloon.classList.add(tag);
		});
	}

	return baloon;
}

// Create Tag

function createTag(tag) {
	let chip = document.createElement("li");
	chip.classList.add("tag");
	chip.setAttribute("data-tag", tag);
	chip.setAttribute("tabindex", 0);
	chip.innerHTML = tag;
	return chip;
}

// wops sorry......... this is for the default chat contents

const defaultCSV =
	'text;author;image;tag\nsince we are exposed to several topics relates to orientation / disorientation / editing / so we could help(?) the readers to navigate different texts ;yellow;;navigation, orientation\n(accessibility);gray;;accessibility\nbridges between different registers;lime;;addressing\n(also consider how you have been doing this already).;sky;;\ndisruption\u00A0 ( make you aware of the materiality of the text) / it isn\'t just a voice in your head / / people being able to interact from different directions;acqua;;disruption, materiality, orientation\nbreak down the hierarchy of text and language;acqua;;hierarchy, addressing\n(also through forms of reading/reading templates/formats);violet;;materiality, forms\nthe reader can navigate through the reader we are creating;acqua;image;navigation\nwhat are we trying to communicate?;acqua;;purpose\nreader = navigation of readers, layers on layers, different voices inside the text, easy/different types of experiences, to access in different ways to the content/texts/language;acqua;;addressing, accessibility, plurality\nUse really well known texts;acqua;;source\n(like a pop song);yellow;image;popular\n, we could disrupt these texts and find a way to record and accumulate everyone\'s experience;acqua;;disruption, aggregation\nif you make a footprint, someone can follow the footprint and it can become a road;acqua;;navigation\n" >>> ""Navigation is, above all, a synthetic operation. First, it\u2019s the ongoing mediation of intentionality with the contingency of unknown or accidental events. Navigation is not destination, but it is not entirely divorced from destination either. It\u2019s a movement of inclination requiring markers of orientation."" (Orientation in a Big World...)";green;;navigation, orientation\nsome disruption can be overlapped some of them can be a unique experience;acqua;;disruption, experience\ninteresting to see different roads;acqua;;exploration\noverlapping different paths __DRAW__(Chae will add some drawings;yellow;;plurality\nAlex would love to join);light gray;;participation\n<3;green;;positivity\nthere are different modes of reading;acqua;;plurality\n (and different modes of address);gray;;plurality\nDivers/inclusive topics go in hand with formats;violet;;accessibility, inclusivity\nThe reader should have an introduction / editorial;gray;;accessibility, inclusivity\nIdeas:;none;;title\nwe want the text to be performative;acqua;;performative\nwe create the terms of readership;red;;fruition\n** choose not intellectual texts to also have something popular, trying to make it !!!accessible!!! to everyone\u00A0;acqua;;popular, academic, addressing\nreading and writing each other\'s experiences;violet;;performative, experience\n(poetry <3);light gray;;positivity, poetry\nMake sth accessible that is normally not accessible to everyone;red;;accessibility, addressing\n(we can use intellectual text and make it accessible and more personal);yellow;;addressing, accessibility\nsomething relatable as a starting point;green;;addressing\n"connecting the ""easy"" texts to the ""serious"" ones, to see where they match,";acqua;;popular, addressing\n(comparing that way different ways of addressing);gray;;exploration\nmapping a train of thoughts that are present / / part of us, our culture, our lives, but that haven\'t been traced yet, things we all know but never really connected;acqua;;addressing, poetry, relation\nSUBJECT:;red;;purpose\nhow we are reading as a group?;acqua;;performance, plurality\ncollective act of reading;orange;;plurality, performance\nexquisite corpse;green;;plurality, performance\n<3;violet;;positivity\n-disruption of text - realising the materiality of text;light gray;;disruption, materiality\n-connection between inputs - how the reader navigates;light gray;;relation, navigation\n-generate new content - lighter, fun, exercising, poetic, popular (be more inclusive), balance, everyone could relate, accessibility\u00A0\u00A0;light gray;;addressing, popular, inclusivity, accessibility\n-not only texts;light gray;;source\nYES;yellow;;positivi