diff --git a/css/style.scss b/css/style.scss index 724a124..5337f71 100644 --- 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 index 398be0c..0b52f30 100644 --- a/index.html +++ b/index.html @@ -117,16 +117,6 @@

Keyboard shortcuts

m Toggle join/part messages -
- c - i - Go to #illumos -
-
- c - o - Go to #omnios -
<home> Scroll to top @@ -166,7 +156,7 @@

Settings

diff --git a/script.js b/script.js index fbd0321..ecebfbe 100644 --- 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. + * 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 = /^(.*?)()(.*)$/; 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($('').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;