Can we have an official NodeBB-Stylish/userscript topic now?
-
Presented without comment...
(function () { var real_Date = window.Date; window.Date = function Date() { var d = new (Function.prototype.bind.apply(real_Date, arguments)); if (d.getMonth() == 3 && d.getDate() == 1) d.setDate(2); return d; }; Object.getOwnPropertyNames(real_Date).forEach(p => { window.Date[p] = real_Date[p]; }); })();
edit: this has some... interesting side effects.
-
Or CSS.
.votes { transform: none !important; } .categories>li, .category>ul>li, .topic .posts>li { transform: none !important; } .necro-post { font-size: 1.5em !important; color: rgba(127, 127, 127, 0.5) !important; background: none !important; font-family: Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif !important; }
Indenting was more consistent before I pasted it in here.
I've actually added CSS for the Spongebob so it sticks around after today.
-
As first seen in the invisible thread I made a userscript that allows you to apply the invert filter to emojicons, to fix the problem where some of them are hard to see when using dark themes.
Before:
After:
"use strict"; // ==UserScript== // @name emoji tooltip // @namespace WTDWTF // @grant none // @match https://what.thedailywtf.com/* // @match http://what.thedailywtf.com/* // @description shows emojicon tooltip and lets you invert it // @author hungrier // @version 1.2 // ==/UserScript== (function() { var hoverms = 1000; var storageKey = 'wtdwtf-dark-emojicons'; var defaultEmojis = ["arrows_clockwise", "back", "copyright", "curly_loop", "currency_exchange", "dark_sunglasses", "eight_pointed_black_star", "end", "eyeglasses", "headdesk", "heavy_check_mark", "heavy_division_sign", "heavy_dollar_sign", "heavy_minus_sign", "heavy_multiplication_x", "heavy_plus_sign", "magnets_having_sex", "moving_goal_post", "mu", "musical_note", "notes", "on", "onion", "pen_fountain", "pendant", "registered", "soon", "tm", "top", "wavy_dash", "whoosh"]; var storage = localStorage || { setItem: function setItem() { return null; }, getItem: function getItem() { return null; } }; var loadInvisibles = function loadInvisibles() { var keyString = storage.getItem(storageKey); var keys = keyString ? keyString.split(':') : defaultEmojis; return keys.reduce(function(ob, k) { ob[k] = 1; return ob; }, {}); }; var invisibles = loadInvisibles(); var saveInvisibles = function saveInvisibles() { var keys = Object.keys(invisibles); console.log(keys); storage.setItem(storageKey, keys.join(':')); }; var createCssRule = function createCssRule() { var wrapKey = function wrapKey(which) { return ".emoji[data-emoji-id='" + which + "']"; }; var genFilter = function genFilter(prefix) { return prefix + 'filter: invert(1);'; }; var keys = Object.keys(invisibles); var prefixes = ['-webkit-', '-moz-', '-o-', '-ms-', '-khtml-', '']; var selector = keys.map(wrapKey).join(','); var rules = prefixes.map(genFilter).join(' '); var fullRule = selector + '{' + rules + '}'; return fullRule; }; var invertStyle = $('<style>').prop('type', 'text/css').html(createCssRule()).appendTo('head'); var thinger = $('<div/>').css({ border: '1px solid white', 'background-color': 'black', padding: '2px 6px', position: 'fixed', display: 'none', 'z-index': 100 }).appendTo('body'); var hideTimer = void 0; var startHide = function startHide() { hideTimer = setTimeout(function() { thinger.css('display', 'none'); }, hoverms); }; var stopHide = function stopHide() { clearTimeout(hideTimer); }; var showHoverer = function showHoverer(text, x, y) { stopHide(); thinger.attr('data-emoji-name', text); thinger.text(text); thinger.css({ left: x + 2, top: y + 2 }); thinger.css('display', 'block'); }; thinger.on('click', function() { var which = thinger.attr('data-emoji-name'); if (invisibles[which]) { delete invisibles[which]; } else { invisibles[which] = 1; } saveInvisibles(); invertStyle.html(createCssRule()); }); thinger.on('mouseover', stopHide); thinger.on('mouseout', startHide); $('body').on('mouseover', '.emoji-parsed', function(mouseEvent) { var emojiname = mouseEvent.target.title; var cx = mouseEvent.clientX; var cy = mouseEvent.clientY; showHoverer(emojiname, cx, cy); }); $('body').on('mouseout', '.emoji-parsed', startHide); })();
How to use: hover over an emojicon and click the thing that comes up to toggle the invert effect for that emojicon.
-
@hungrier While I'm here I may as well post my custom colour tweaks. This works best with the Slate theme, but who knows it might look good on other ones as well.
/* zebra stripes */ ul.topic-list li.row:nth-child(odd) { background-color: #222; } /* tags */ .category>ul>li .tag-list .tag { background-color: #567; } .category>ul>li:not(.unread) .tag-list .tag { color: #333; } /* @mentions */ .plugin-mentions-a:hover { color: #48a; } /* del/ins */ .composer .preview del, .topic .posts .content del, [component="chat/message/body"] del { background-color: #722; color: inherit; } .composer .preview del > ins, .topic .posts .content del > ins, [component="chat/message/body"] del > ins { background-color: #751; color: inherit; } .composer .preview ins, .topic .posts .content ins, [component="chat/message/body"] ins { background-color: #252; color: inherit; } .composer .preview ins > del, .topic .posts .content ins > del, [component="chat/message/body"] ins > del { background-color: #037; color: inherit; } /* unread notifications */ ul.notification-list li.unread, ul.chat-list li.unread, .header ul.notification-list li.unread, .header ul.chat-list li.unread { background-color: #567; } /* notification toggle */ #menu .notification-list li .mark-read, .header .notification-list li .mark-read, #menu .notification-list li .mark-read:hover, .header .notification-list li .mark-read:hover { color: #bbb; } /* composer */ .composer { background-color: #444; } .composer span.title { background-color: #333; margin-left: 0px!important; color: #ddd; padding-top: 4px!important; } .composer textarea.write { background-color: #333; color: #ddd; border: 1px inset #777; } .composer .formatting-bar i.fa { filter: invert(1); -webkit-filter: invert(1); } .composer .formatting-bar li:hover .fa { filter: none; -webkit-filter: none; } /* profile info */ .account .profile .profile-meta strong { color: #ddd; } /* thanks ben */ body.skin-slate .emoji[data-set-id=tdwtf][data-emoji-id^=fa_] { background: none; }
-
Finally, a script to end the annoying notifications from the Likes topic once and for all...
edit: hopefully the non-forum-breaking, non-everyone-notifying version...
(function () { // monkey-patch socket.onevent to process incoming events before they go to the default event handler(s) var real_onevent = socket.onevent.bind(socket); socket.onevent = function onevent(packet) { var eventName = packet.data[0], n = packet.data[1]; var preventDefault = false; if (eventName == 'event:new_notification') { // automatically mark upvote notifications from the "Likes" thread as read if (/^upvote/.test(n.nid) && n.topicTitle == "The Official Likes Topic") { console.log('Ignoring: ' + n.nid + ', ' + n.bodyShort); socket.emit('notifications.markRead', n.nid, function (e) { if (e) console.log(e); }); preventDefault = true; // prevents NodeBB's event handlers from even seeing this event } // automatically downvote any posts that mention trust_level_3 (BONUS! \o/) if (n.bodyShort.indexOf('[[notifications:user_mentioned_group_in,') == 0 && /:trust_level_3$/.test(n.nid)) { console.log('Downvoting @'+'trust_level_3 mention (post ' + n.pid + (n.user ? ' by @' + n.user.username : '') + ' in "' + n.bodyShort.slice(2, -2).split(', ').slice(3).join(', ') + '")'); socket.emit('posts.downvote', {pid: n.pid, room_id: 'topic_' + n.tid}); } } if (!preventDefault) real_onevent(packet); }; // monkey-patch socket.emit to process sent/received data before it goes to the default event handler(s) var real_emit = socket.emit; socket.emit = function emit(eventName) { var rest = [].slice.call(arguments, 1); var preventDefault = false; if (eventName == 'notifications.get') { // when getting the notification list, filter out upvotes from the Likes topic (and mark them read if they're not) var i = rest.length - 1, orig_fn = rest[i]; if (typeof orig_fn == 'function') { rest[i] = function (err, obj) { if (err == null) { function filter(n) { if (/^upvote/.test(n.nid) && n.topicTitle == "The Official Likes Topic") { if (!n.read) socket.emit('notifications.markRead', n.nid, e => e ? console.log(e) : 0); return false; } return true; } obj.unread = obj.unread.filter(filter); obj.read = obj.read.filter(filter); } orig_fn(err, obj); }; } } if (!preventDefault) real_emit.apply(socket, [eventName].concat(rest)); }; // finally, run through the whole notification list and mark them unread if they're upvotes in the Likes topic (function loadNotifications(start, arr, i) { socket.emit("notifications.loadMore", {after: start || 0}, function (err, obj) { if (obj.notifications.length) { loadNotifications(obj.nextStart, (arr || []).concat(obj.notifications)); } else if (i < 5) { loadNotifications(obj.nextStart, arr, i + 1 || 1); } else { arr.forEach(function (n) { if (!n.read && n.topicTitle == "The Official Likes Topic" && /^upvote/.test(n.nid)) { console.log('Clearing notification:', n.nid, '\n', n.bodyShort); socket.emit('notifications.markRead', n.nid, function (e) { if (e) console.log(e); }); } }); } }); })(); })();
-
Restyle those funny little triangles on
details
tags:details > summary::-webkit-details-marker { display: none } details > summary:before { background: #b57edc; content: "\FF0B"; color: #ffffff; display: inline-block; font-weight: bold; margin-right: 0.2em; text-align: center; width: 1.5em; } details[open] > summary:before { content: "\FF0D"; }
Edit: Fixed to include the WebKit rule for hiding the default triangle.
-
Testing what this looks like, assuming it's the same as the screenshot in the other topcinow with summary
sdfsdf
-
@hungrier Hmm... seems to only work when you include a
summary
tag
-
@RaceProUK @hungrier um... yeah...
Chrome Firefox edit: not updated for
@RaceProUK said in Can we have an official NodeBB-Stylish/userscript topic now?:
Edit: Fixed to include the WebKit rule for hiding the default triangle.
-
@anotherusername What's your browser? The styling is WebKit-specific (no-one else exposes the necessary Shadow DOM stuff)
-
@RaceProUK originally it was just Chrome. Updated now to add Firefox.
-
Using Chrome on Windows it looked ok to me, like the Firefox one in your post.
-
@anotherusername I developed the style snippet in Chrome
-
@RaceProUK I think the "proper" way to do it would be with a
list-style-type
.That would also work when there's noOkay, I can't seem to get anything to work when there's nosummary
.summary
.Unfortunately I think you'd have to use an image. Using a string ("+" or "-") would only be supported in Firefox, and even then I'm not sure how you'd style it.
-
@anotherusername said in Can we have an official NodeBB-Stylish/userscript topic now?:
I think the "proper" way to do it would be with a
list-style-type
But that's only supported on lists
-
-
@anotherusername Ah yeah... I forgot you can use CSS to make an element as if it's a completely unrelated element
-
@RaceProUK yeah, you can make any element have the
display: list-style
type, butsummary
elements have that style by default. The XHTML namespace says that they should.
-
function onPostsLoaded() { [].slice.apply(document.querySelectorAll('video:not([controls])')).forEach(function (video) { video.setAttribute('controls', ''); }); } $(window).on('action:topic.loaded', onPostsLoaded); $(window).on('action:posts.loaded', onPostsLoaded);
-
@anotherusername Is there a reason you're not using jQuery in the function, despite using jQuery for the events?
-
@RaceProUK Yes... for the events, I had to use jQuery, and in the function, I didn't.
(I could've used a
MutationObserver
to trigger whenever the page changed, but NodeBB provides the actual events, so I wanted to trap them properly.)
-
@anotherusername said in Can we have an official NodeBB-Stylish/userscript topic now?:
@RaceProUK Yes... for the events, I had to use jQuery, and in the function, I didn't.
VanillaJS FTW
-
@accalia said in Can we have an official NodeBB-Stylish/userscript topic now?:
@anotherusername said in Can we have an official NodeBB-Stylish/userscript topic now?:
@RaceProUK Yes... for the events, I had to use jQuery, and in the function, I didn't.
VanillaJS FTW
VanillaJS is extremely bloated. Why does it need cryptography and text to speech and 3D graphics support in the same library?
-
@ben_lubar If you can think of a way to add two positive integers without all that, I'd like to see how.
-
@ben_lubar said in Can we have an official NodeBB-Stylish/userscript topic now?:
VanillaJS is extremely bloated. Why does it need cryptography and text to speech and 3D graphics support in the same library?
And at the same time, there's no way to pad a string without using an external library.
-
@hungrier said in Can we have an official NodeBB-Stylish/userscript topic now?:
@ben_lubar If you can think of a way to add two positive integers without all that, I'd like to see how.
Number.prototype.sum = function(num) { return -~this + num - 1; }
-
Hmm... https://www.npmjs.com/package/sum-js
https://github.com/WebReflection/sum-js is a 404. I guess we'll never know.
-
@asdf said in Can we have an official NodeBB-Stylish/userscript topic now?:
@ben_lubar said in Can we have an official NodeBB-Stylish/userscript topic now?:
VanillaJS is extremely bloated. Why does it need cryptography and text to speech and 3D graphics support in the same library?
And at the same time, there's no way to pad a string without using an external library.
yeah, like this stupid String.prototype.padStart external library which is not supported anywhere
-
@cark If you need a premade utility function for that at all, you should return your programming license.
-
@asdf said in Can we have an official NodeBB-Stylish/userscript topic now?:
@ben_lubar said in Can we have an official NodeBB-Stylish/userscript topic now?:
VanillaJS is extremely bloated. Why does it need cryptography and text to speech and 3D graphics support in the same library?
And at the same time, there's no way to pad a string without using an external library.
Sure you can. If the external library can, then you can.
-
@anotherusername said in Can we have an official NodeBB-Stylish/userscript topic now?:
@asdf said in Can we have an official NodeBB-Stylish/userscript topic now?:
@ben_lubar said in Can we have an official NodeBB-Stylish/userscript topic now?:
VanillaJS is extremely bloated. Why does it need cryptography and text to speech and 3D graphics support in the same library?
And at the same time, there's no way to pad a string without using an external library.
Sure you can. If the external library can, then you can.
That was obviously said in jest. Of course you can do it without an external library
@asdf said in Can we have an official NodeBB-Stylish/userscript topic now?:
And at the same time, there's no way to pad a string without using an external library.
@asdf said in Can we have an official NodeBB-Stylish/userscript topic now?:
@cark If you need a premade utility function for that at all, you should return your programming license.
I don't get it. Do you think it is possible without an external library or not?
-
@cark of course it was a joke.
-
@anotherusername Based on your initial reaction, I'd say you both ed.
-
@asdf I knew it was a joke though. I just didn't feel like playing along.
-
@asdf said in Can we have an official NodeBB-Stylish/userscript topic now?:
@anotherusername Based on your initial reaction, I'd say you both ed.
Hey! Stop stealing work from honest, hard-working hedgehogs!
-
@RaceProUK said in Can we have an official NodeBB-Stylish/userscript topic now?:
hard-working
You spend at approximately half of your workday here, my dear. ;)
-
@asdf said in Can we have an official NodeBB-Stylish/userscript topic now?:
@RaceProUK said in Can we have an official NodeBB-Stylish/userscript topic now?:
hard-working
You spend at approximately half of your workday here, my dear. ;)
Exactly: if I wasn't hard-working, I'd spend more than that here!
-
@asdf said in Can we have an official NodeBB-Stylish/userscript topic now?:
@RaceProUK said in Can we have an official NodeBB-Stylish/userscript topic now?:
hard-working
You spend at approximately half of your workday here, my dear. ;)
Whoa! Another @area_deu using "dear!" I guess it is a German thing.
-
@boomzilla I got two notifications for that post.
-
@boomzilla Did you want him to say "deer"?
Filed Under: He is just being polite
-
@Kuro said in Can we have an official NodeBB-Stylish/userscript topic now?:
@boomzilla Did you want him to say "deer"?
Filed Under: He is just being polite
was summoned and so we appear?
-
@aliceif I actually appeared because this is my topic :)
Filed Under: And we are currently derailing it
-
@RaceProUK
These forums, they aren't sending us their best whooshers...
-
Until we get the replies buttons fixed, this should do the trick.
javascript: (function (e) { $(window).on('action:topic.loaded', e); $(window).on('action:posts.loaded', e); socket.on('event:new_post', function (p) { p.posts.forEach(function (o) { if (o.toPid) e(o.toPid) }) }); e() })(function (i) { require(['translator'], function (T) { T.translate('[[topic:replies_to_this_post,\40]]', function (t) { [].forEach.call(document.querySelectorAll(i == +i ? '[data-pid="' + i + '"]' : '[data-pid]'), function (p, r) { if (r = p.querySelector(i == +i ? '.threaded-replies.hidden' : '.threaded-replies')) { socket.emit('posts.getReplies', p.getAttribute('data-pid'), function (n, a) { if (!n && a.length) { r.classList.remove('hidden'); r.querySelector('.replies-count').innerText = t.trim() + ':\40' + a.length; r.querySelector('.replies-last').classList.add('hidden') } }) } }) }) }) })
Bookmarklet
javascript:(function(e){$(window).on('action:topic.loaded',e);$(window).on('action:posts.loaded',e);socket.on('event:new_post',function(p){p.posts.forEach(function(o){if(o.toPid)e(o.toPid)})});e()})(function(i){require(['translator'],function(T){T.translate('[[topic:replies_to_this_post,\40]]',function(t){[].forEach.call(document.querySelectorAll(i==+i?'[data-pid="'+i+'"]':'[data-pid]'),function(p,r){if(r=p.querySelector(i==+i?'.threaded-replies.hidden':'.threaded-replies')){socket.emit('posts.getReplies',p.getAttribute('data-pid'),function(n,a){if(!n&&a.length){r.classList.remove('hidden');r.querySelector('.replies-count').innerText=t.trim()+':\40'+a.length;r.querySelector('.replies-last').classList.add('hidden')}})}})})})})
-
@anotherusername said in Can we have an official NodeBB-Stylish/userscript topic now?:
// finally, run through the whole notification list and mark them unread if they're upvotes in the Likes topic (function loadNotifications(start, arr, i) { socket.emit("notifications.loadMore", {after: start || 0}, function (err, obj) { if (obj.notifications.length) { loadNotifications(obj.nextStart, (arr || []).concat(obj.notifications)); } else if (i < 5) { loadNotifications(obj.nextStart, arr, i + 1 || 1); } else { arr.forEach(function (n) { if (!n.read && n.topicTitle == "The Official Likes Topic" && /^upvote/.test(n.nid)) { console.log('Clearing notification:', n.nid, '\n', n.bodyShort); socket.emit('notifications.markRead', n.nid, function (e) { if (e) console.log(e); }); } }); } }); })();
Dammit. Looks like the update broke this.
I'd fix it, but I'm at work. Maybe I can handle it this evening. If not, I'm looking at you, @anotherusername!
-
var refreshButton = document.querySelector('#main-nav').appendChild(document.createElement('li')); refreshButton = refreshButton.appendChild(document.createElement('a')); refreshButton.appendChild(document.createElement('i')).className = 'fa fa-fw fa-refresh'; refreshButton.href = '#'; refreshButton.addEventListener('mouseover', function () { refreshButton.querySelector('i').classList.add('fa-spin'); }); refreshButton.addEventListener('mouseout', function () { refreshButton.querySelector('i').classList.remove('fa-spin'); }); refreshButton.addEventListener('click', function refresh(e) { ajaxify.refresh(); e.preventDefault(); });
-
@whargarbl !!! !!! !!! I HATE IT WHEN SITES REIMPLEMENT BROWSER FEATURES
-
@boomzilla but mine spins when you hover over it!!
And it's an ajaxy refresh, so it doesn't interrupt streaming-in posts and notifications by disconnecting your socket to reload the whole page...
-
@anotherusername said in Can we have an official NodeBB-Stylish/userscript topic now?:
disconnecting your socket to reload the whole page
Isn't the whole point of refreshing this forum to fix sockets that have broken? That's usually why I do it
-
@Jaloopa I don't tend to have that problem.