Merge pull request #3 from matt-fidd/updates

Updates following initial testing
omniosorg · Jun 8, 2021 · 7278c9e · 7278c9e
2 parents 3e00c82 + 90a60ce
commit 7278c9e
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 66 deletions.
diff --git a/css/style.scss b/css/style.scss
@@ -15,8 +15,6 @@ html {
 	--disabled-colour: #ccc;
 	--border-colour: var(--omnios-colour);
 	--status-colour: #ff4500;
-	--channel-hover-bg-colour: #666;
-	--channel-hover-text-colour: white;
 	--topic-bg-colour: #eee;
 	--topic-text-colour: black;
 	--topic-border-colour: #ccc;
@@ -35,8 +33,6 @@ html:not(.style-scope)[dark] {
 	--text-colour: #c0c0c0;
 	--icon-colour: #c0c0c0;
 	--disabled-colour: #606060;
-	--channel-hover-bg-colour: #364554;
-	--channel-hover-text-colour: #c0c0c0;
 	--ts-link-colour: #c0c0c0;
 	--msg-hover-bg-colour: #364554;
 	--topic-bg-colour: #2e3944;
@@ -56,6 +52,11 @@ body {
 
 a {
 	color: var(--omnios-colour);
+	text-decoration: none;
+
+	&:hover {
+		text-decoration: underline;
+	}
 }
 
 .hidden {
@@ -230,20 +231,23 @@ a {
 		.channel_row {
 			padding: 4px 5px 4px 5px;
 
+			a {
+				color: var(--text-colour);
+			}
+
+			&.current a {
+				color: var(--omnios-colour);
+			}
+
 			&:hover {
-				background: var(--channel-hover-bg-colour);
-				color: var(--channel-hover-text-colour);
+				background: var(--msg-hover-bg-colour);
 				cursor: pointer;
 			}
 		}
-
-		.current {
-			color: var(--omnios-colour);
-		}
 	}
 
 	#log_container {
-		margin-left: 10em;
+		margin-left: 11em;
 		flex-basis: 0;
 		flex-grow: 999;
 		min-height: calc(100vh - 4.3em);
@@ -290,6 +294,7 @@ a {
 					min-width: 8em;
 					text-align: right;
 					font-weight: bold;
+					cursor: pointer;
 				}
 
 				&:hover {
@@ -310,10 +315,9 @@ a {
 					}
 				}
 
-				&.hl {
+				&.hl, &.hlu {
 					background: var(--omnios-colour-pale);
 				}
-
 			}
 		}
 	}

diff --git a/index.html b/index.html
@@ -117,16 +117,6 @@ <h3>Keyboard shortcuts</h3>
 					<span class='key'>m</span>
 					<span>Toggle join/part messages</span>
 				</div>
-				<div class='shortcut'>
-					<span class='key'>c</span>
-					<span class='key'>i</span>
-					<span>Go to #illumos</span>
-				</div>
-				<div class='shortcut'>
-					<span class='key'>c</span>
-					<span class='key'>o</span>
-					<span>Go to #omnios</span>
-				</div>
 				<div class='shortcut'>
 					<span class='key'>&lt;home&gt;</span>
 					<span>Scroll to top</span>
@@ -166,7 +156,7 @@ <h3>Settings</h3>
 			<div id='channels'> </div>
 
 			<div id='channel_line' class='hidden channel_row'>
-				<span class='channel'></span>
+				<a href='#' class='channel'></a>
 			</div>
 		</aside>
 

diff --git a/script.js b/script.js
@@ -8,20 +8,27 @@
  * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
  * more details.
  * You should have received a copy of the GNU General Public License along with
- * this program. If not, see L<http://www.gnu.org/licenses/>.
+ * this program. If not, see http://www.gnu.org/licenses/.
  *
  * Copyright 2021 Matt Fiddaman
  */
 
-const ops = ['andyf', 'hadfl', 'oetiker', 'fenix', 'mrscowley'];
 const defaultchan = 'omnios';
+const nick_col_override = {
+	andyf:		'ooce',
+	hadfl:		'ooce',
+	oetiker:	'ooce',
+	fenix:		'ooce',
+	mrscowley:	'ooce',
+};
 
 // Taken from https://urlregex.com
 const url_regex = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[-+\.\!\/\\\w]*))?)/g;
 
-let channel_regex = /(?<!<[^>]*)#[-\w]+/g;
+let channel_regex = /#[-\w]+/g;
 const escapere = /[.*+?^${}()|[\]\\]/g;
 const actionre = /^\x01ACTION\s+(.*)\x01$/;
+const linkre = /^(.*?)(<a\s.*<\/a>)(.*)$/;
 
 const online = {};
 const nick_classes = {};
@@ -104,11 +111,12 @@ function nickify(text) {
 }
 
 function nick_class(nick) {
-	if (ops.includes(nick)) return 'nick_col_ooce';
+	const _nick = nick.replaceAll(/^_+|_+$/g, '');
+
+	if (_nick in nick_col_override)
+		return `nick_col_${nick_col_override[_nick]}`;
 
-	const hash = nick.split('').reduce((t, c) => {
-		return c == '_' ? t : t + c.charCodeAt(0);
-	}, 0);
+	const hash = _nick.split('').reduce((t, c) => t + c.charCodeAt(0), 0);
 
 	return `nick_col_${hash % 8}`;
 }
@@ -131,9 +139,15 @@ function jp_span(jp, nick) {
 function style_msg() {
 	msg = $(this).html();
 
-	if (msg.includes('://')) msg = linkify(msg);
-	msg = nickify(msg);
-	if (msg.includes('#')) msg = channelify(msg);
+	if (msg.includes('://')) {
+		msg = linkify(msg);
+		let m;
+		if ((m = msg.match(linkre)))
+			msg = nickify(m[1]) + m[2] + nickify(m[3]);
+	} else {
+		msg = nickify(msg);
+		if (msg.includes('#')) msg = channelify(msg);
+	}
 
 	$(this).html(msg);
 }
@@ -152,7 +166,7 @@ function nologs() {
 
 function scroll_hash(hash) {
 	$('div.hl').removeClass('hl');
-	$(hash).addClass('hl');
+	$(hash).addClass('hl').show();
 
 	$('html, body').animate({
 	    scrollTop: $(hash).offset().top - 60
@@ -240,10 +254,12 @@ $(() => {
 			const channel = k;
 
 			const row = $template.clone()
-			    .attr('id', `channel_${channel}`)
+			    .attr('id', `channel_${channel}`);
+
+			row.find('.channel')
+			    .text(`#${channel}`)
 			    .attr('data-channel', channel);
 
-			row.find('.channel').text(`#${channel}`);
 			row.removeClass('hidden');
 
 			$channels.append(row);
@@ -257,11 +273,11 @@ $(() => {
 	const today = format_date(new Date());
 
 	let result;
-	if ((result = path.match(/^\/([a-z]+)\/(\d{4}-\d{2}-\d{2})$/i)) &&
+	if ((result = path.match(/^\/([-a-z]+)\/(\d{4}-\d{2}-\d{2})$/i)) &&
 	    result[1] in channels) {
 		curchan = result[1];
 		curdate = result[2];
-	} else if ((result = path.match(/^\/([a-z]+)/i)) &&
+	} else if ((result = path.match(/^\/([-a-z]+)/i)) &&
 	    result[1] in channels) {
 		window.location.href = `/${result[1]}/${today}`;
 		return;
@@ -275,6 +291,15 @@ $(() => {
 	document.title = `#${curchan} on ${curdate}`;
 	$('#title').find('span').text(`#${curchan}`);
 
+	$('#channels a.channel').each(function () {
+		$(this).attr('href',
+		    `/${$(this).attr('data-channel')}/${curdate}`);
+
+		if ($(this).attr('data-channel') === curchan)
+			$(this).parent('div').addClass('current');
+	});
+
+
 	try {
 		const $topic = $('#topic');
 		$topic.text(channels[curchan].topic);
@@ -284,7 +309,7 @@ $(() => {
 	}
 
 	channel_regex = new RegExp(
-	    `(?<!<[^>]*)#(?:${Object.keys(channels).join('|')})\\b`, 'g');
+	    `#(?:${Object.keys(channels).join('|')})\\b`, 'g');
 
 	pik = new Pikaday({
 		field: $('#datepicker')[0],
@@ -333,7 +358,7 @@ $(() => {
 				const safe_nick = nick.replace(
 				    escapere, '\\$&');
 				nick_regexps[nick] = new
-				    RegExp(`(?<!<[^>]*)\\b${safe_nick}\\b`,
+				    RegExp(`\\b${safe_nick}\\b`,
 				    'g')
 			} catch (err) {
 				fail_msg('Invalid characters found in nickname');
@@ -354,6 +379,8 @@ $(() => {
 			row.find('.ts_link').attr('href', `#${id}`);
 			row.attr('data-cmd', v.command);
 
+			row.find('.nick').attr('data-nick', v.nick);
+
 			if (v.command in handlers) {
 				handlers[v.command](v, row);
 			} else {
@@ -366,6 +393,15 @@ $(() => {
 			$logs.append(row);
 		});
 
+		$('#logs .log_row .nick').on('click', function () {
+			const nick = $(this).attr('data-nick');
+
+			$(`#logs .log_row .nick[data-nick='${nick}']`)
+			    .parent('div.log_row')
+			    .removeClass('hl')
+			    .toggleClass('hlu');
+		});
+
 		$logs.append($('<span/>').attr('id', 'end'));
 
 		$('#logs .log_row .nick')
@@ -378,6 +414,14 @@ $(() => {
 
 		$('a.ts_link').on('click', function(e) {
 			e.preventDefault();
+
+			if ($(this).parent('.log_row').hasClass('hl')) {
+				$(this).parent('.log_row').removeClass('hl');
+				document.location.hash = '+';
+
+				return;
+			}
+
 			scroll_hash($(this).attr('href'));
 		});
 
@@ -388,16 +432,8 @@ $(() => {
 			scroll_hash(document.location.hash);
 
 	}).fail((err) => {
-		fail_msg(`Error fetching log for #${curchan}/${curdate}`);
 		loader.hide();
-	});
-
-	$(`div.channel_row[data-channel="${curchan}"]`).addClass('current');
-
-	$('div.channel_row').on('click', function() {
-		document.location.href = '/' +
-		    $(this).attr('data-channel') + '/' + curdate;
-		return;
+		nologs();
 	});
 
 	$('#date_today').on('click', () => {
@@ -476,22 +512,6 @@ $(() => {
 			case 'm':
 				$('#toggle_sys').trigger('click');
 				break;
-			case 'i':
-			case 'o':
-				if (last_key === undefined) break;
-
-				if (last_key === 'c') {
-					let channel;
-
-					if (e.key === 'i')
-						channel = 'illumos'
-					else if (e.key === 'o')
-						channel = 'omnios'
-
-					window.location.href =
-					    `/${channel}/${curdate}`;
-				}
-				break;
 			case 's':
 				$('#toggle_settings').trigger('click');
 				break;