summaryrefslogtreecommitdiff
path: root/js/script.js
blob: 023607248ebfa0c3c660775745fb338757658bb4 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
async function digestMessage(username) {
	const msgUint8 = new TextEncoder().encode(username);
	const hashBuffer = await crypto.subtle.digest('SHA-1', msgUint8);
	const hashArray = Array.from(new Uint8Array(hashBuffer));
	return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
}

function addStyleForUser(username) {
	const username_clean = username.replace(/[^A-Za-z0-9]/g, '_');

	// Mark all the lines of the newly selected user
	return digestMessage(username).then((str) => {
		const color = str.substring(0, 6);
		const styleSheet = document.styleSheets[0];
		styleSheet.insertRule('span.user_' + username_clean + ' { color: #' + color + '; }', 0);
		// Now add the username to the colorlist
		const listelement = document.createElement('li');
		listelement.setAttribute('id', 'user_' + username_clean);
		const spanelement = document.createElement('span');
		spanelement.setAttribute('class', 'checkbox user_' + username_clean);
		listelement.appendChild(spanelement);
		spanelement.innerHTML = '<a href="javascript:toggleUser(\'' + username + '\');">' + username + '</a>';
		document.getElementById('usernames').appendChild(listelement);
	});
}

async function toggleUser(username) {

	// The user was already in the list
	if (document.mainform.highlight_names.value.indexOf(username) >= 0) {

		// Remove the username from the list
		let myvalue = document.mainform.highlight_names.value;
		myvalue = myvalue.replace(username, "");
		myvalue = myvalue.replace(/;;/g,";");
		myvalue = myvalue.replace(/^;/, "");
		myvalue = myvalue.replace(/;$/, "");
		document.mainform.highlight_names.value = myvalue;

		const username_clean = username.replace(/[^A-Za-z0-9]/g, '_');

		// Unmark the lines of the user
		for (let k = 0; k < document.styleSheets.length; k++) {
			const rules = document.styleSheets[k].cssRules || document.styleSheets[k].rules;
			for (let x = 0; x < rules.length; x++) {
				if (rules[x].selectorText == ('span.user_' + username_clean)) {
					rules[x].style.color = '';
				}
			}
		}

		console.log('user_' + username_clean);
		// Now drop the username from the colorlist
		document.getElementById('usernames').removeChild(document.getElementById('user_' + username_clean));

	} else {

		// Add the username to the list
		if (document.mainform.highlight_names.value !== '') {
			document.mainform.highlight_names.value += ';';
		}
		document.mainform.highlight_names.value += username;

		await addStyleForUser(username);

	}

	const semicolons = (document.mainform.highlight_names.value.match(/;/g) || []).length;
	document.getElementById('users_label').innerHTML = 'Users ' + (document.mainform.highlight_names.value.length ? ' (' + (semicolons + 1) + ')' : '');

	document.cookie = 'stored_users=' + escape(document.mainform.highlight_names.value) + '; path=/';
}

async function addStyleForUsers() {
	for (const username of document.mainform.highlight_names.value.split(';')) {
		if (username) {
			await addStyleForUser(username);
		}
	}
}