Forum customization
-
@luetage said in Forum customization:
The AJAX navigation is giving me big headaches by the way, I wanted to do some other mods but it's sometimes simply too painful working around it. I tried to listen for a hashchange initially, but I didn't get it to work reliably.
Hmm, one possibility is you could define your own onpushstate function and set some delayed code to hopefully execute after the AJAX, something like
(function(history){ var pushState = history.pushState; history.pushState = function(state) { if (typeof history.onpushstate == "function") { history.onpushstate({state: state}); } return pushState.apply(history, arguments); } })(window.history); window.onpopstate = history.onpushstate = function(e) { alert('test (this alert box will pause the thread, just to showing that AJAX stuff is not loaded yet'); setTimeout(function(){ /* stuff to do after a delay for the AJAX stuff to be loaded */ }, 1000); };
(modified from https://stackoverflow.com/a/4585031/8067821 )
See also here and here for variations on registrering the pushState.
-
I see what this is trying to do, but I can't get it to work after all it seems. The problem is the code only triggers on going back or forth in history, it doesn't do anything when just the AJAX navigation is being used. Maybe I'm using it wrong though.
-
I made another javascript mod for the forum extension. Recently someone found out that every member can set a signature by visiting the hidden node.bb settings (https://forum.vivaldi.net/user/username/edit). User signatures can be informative and helpful, but they do also waste a lot of vertical space, and, if the member is a regular poster, you might unwillingly read the sig multiple times a day, and I wanted to do something about it.
window.onload = sig; document.addEventListener('click', sig); function sig() { setTimeout(sig, 500); var signatures = document.querySelectorAll(".post-signature"); var siblings = document.querySelectorAll(".post-signature + .pull-right"); var prevent = document.querySelector(".post-signature + .pull-right button"); for (var i=0; i < signatures.length; i++) { if (prevent == null) { signatures[i].style = "display: none"; var button = document.createElement('button'); button.innerHTML = 'Signature'; siblings[i].insertBefore(button, siblings[i].firstChild); } } var showsig = document.querySelectorAll(".post-signature + .pull-right button"); for (i=0; i < showsig.length; i++) { showsig[i].addEventListener('click', function(i) { signatures[i].style = "display: block"; showsig[i].style = "color: #fd3563; text-decoration: none; cursor: default"; }.bind(this, i)); } };
/* additional css for the button */ .post-signature + .pull-right button { background-color: transparent; color: #006bda; text-decoration: underline; border: none; outline: none; margin-right: 5px; } .post-signature + .pull-right button:hover { text-decoration: none; }
The mod finds and hides all existing signatures on a forum page, and replaces each with a button. When clicked, the button will display the signature of the according post. This way no vertical space is being wasted, you still get to know who runs a signature, and if curious, you can display it.
picture
-
A little tweak to show the user id when hovering a username in forums, just for fun (it's also informative sometimes ^^ )
.clearfix.post-header small.pull-left strong a:hover::after { content: " [UID:"attr(data-UID)"]"; font-size: smaller; }
-
@luetage said in Forum customization:
I see what this is trying to do, but I can't get it to work after all it seems. The problem is the code only triggers on going back or forth in history, it doesn't do anything when just the AJAX navigation is being used. Maybe I'm using it wrong though.
Ah, I have "Paginate topics and posts instead of using infinite scroll" turned on in my settings, so I didn't think of the replaceState situation. If the infinite scroll XHR is what you're referring to, that could similarly be treated with:
(function(history){ var replaceState = history.replaceState; history.replaceState = function(state) { if (typeof history.onreplacestate == "function") { history.onreplacestate({state: state}); } return replaceState.apply(history, arguments); } })(window.history); history.onreplacestate = function(e) { /* do stuff without delay */ setTimeout(function(){ /* stuff to do after a delay, if needed */ }, 500); };
-
@Isildur If you look at my mod above I already have it solved. Even history back and forth works with the code I'm using. I couldn't tell you why but it does
-
I'm thinking about making a general extension for Vivaldi forums. Completely modular, with different themes and all mods from this thread optional from a settings page. Anyone wanna help with this? Does this idea even make sense?
-
-
@sjudenim Looks really cool, just the dropdown menu seems to need a little help, the icons are barely visible.
Also I reported a profile alignment problem yesterday, the avatar isn't centered and the profile cover is partially hidden when visiting other user's profiles. You can fix it with this:
/* Profile alignment fix */ .account .cover .avatar-wrapper { margin-left: -68px !important; } .account .cover { margin-top: 50px; }
-
It's been updated
-
@luetage That's not a bad idea.
What sort of help did you mean? My extension-creating knowledge so far is just limited to the simple kind that applies JS and CSS in hard-coded files as described in the thread's first post. I don't yet have any experience with making extension option pages, but the documentation looks like it's fairly reasonable stuff -- you make a page with checkboxes or whatever and have some calls to load/save it using chrome.storage.sync.get and chrome.storage.sync.set. (see also https://developer.chrome.com/extensions/storage )
-
@Isildur I haven't started yet, so I don't know. But the general plan is to create an options page accessible from the existing menu, or the profile page, and then just make checkboxes for the setup and provide detailed explanations what each item does.
I imagine the hard part will be to make it all compatible, so you don't have combinations of a theme and mods which don't fit (style), have features which cancel each other out, or are repetitive.
-
If you make an extension options page, I guess you could (in addition to presumably making it accessible either via clicking the extension's button or a dropdown from the button), make it accessible via a link from the forum's #user-control-list UL, by injecting a
<li> <a id="launch-extension-options" href="#">Extension settings</a></li>
, and then have an onclick listener in the content script call "chrome.runtime.openOptionsPage()". I think it would need to be a bit indirect, though;chrome.runtime.openOptionsPage()
isn't mentioned in this this limited list of things that are allowed from that script context, so I think you might have to send a message through chrome.runtime.sendMessage() and have an event listener in the extension's background page callchrome.runtime.openOptionsPage()
.As for conflicts, I figure people could try out which ones work well together, and uncheck some of the checkboxes if they don't.
-
I'm pretty much finished with the Forum extension. If anyone wants to test it, please send me a message.
What the extension is lacking is more themes, especially a dark one. The more people get involved the better, I would like this to be a community effort.