Vivaldi Forum mod
-
Sorry to hear about your illness. If you have any questions about the setup or what's possible, I'm happy to assist.
-
Awesome, I fear it may be a little bit alien to me but if I can contribute in any way I will.
-
I saw this suggestion by @Pesala and thought that, even though I prefer standardised emoji in unicode, some members might like the nostalgia of emotes...
So I made an emote picker.
Unfortunately, it relies on the correct URLs being in place, so if that thread I linked above ever changes, it renders the image URLs invalid. But as a proof of concept it works quite well, I think.
edit: I forgot to include my code
here it is:
/* Run against https://forum.vivaldi.net/topic/11983/feature-requests-for-vivaldi-s-new-forum/229 to get EMOTES Select the .post .content to get $0 in console x = $0.querySelectorAll("img") y = "" for(var z = 0; z < x.length; z++){ src=x[z].src.split("/"); name=src[6].split("-")[1].split(".")[0]; y+=name+":\""+src[6]+"\",\n"; } */ const EMOTES = { alien:"1539692482285-alien.gif", angel:"1539692493644-angel.gif", awww:"1539692536730-awww.gif", banana:"1539692630638-banana.gif", beer:"1539692709259-beer.gif", bigeyes:"1539692683566-bigeyes.gif", bigsmile:"1539687021352-bigsmile.gif", blush:"1539687052167-blush.gif", bomb:"1539692948902-bomb.gif", bug:"1539685604359-bug.gif", bye:"1539692998605-bye.gif", cat:"1539693028753-cat.gif", chef:"1539692893638-chef.gif", cheers:"1539698180973-cheers.gif", coffee:"1539685551254-coffee.gif", confused:"1539685266409-confused.gif", cool:"1539693137735-cool.gif", detective:"1539693179226-detective.gif", devil:"1539693232474-devil.gif", doh:"1539685506587-doh.gif", drunk:"1539693282716-drunk.gif", eek:"1539693323529-eek.gif", faint:"1539693390072-faint.gif", flirt:"1539685662035-flirt.gif", frown:"1539685209586-frown.gif", furious:"1539685719517-furious.gif", haha:"1539685426101-haha.gif", headbang:"1539686921747-headbang.gif", idea:"1539686816525-idea.gif", irked:"1539698254681-irked.gif", jester:"1539685753306-jester.gif", left:"1539698335612-left.gif", mad:"1539698407597-mad.gif", no:"1539686722752-no.gif", party:"1539698651945-party.gif", pingu:"1539685811063-pingu.gif", right:"1539698359299-right.gif", rip:"1539693574973-rip.gif", rolleyes:"1539693612367-rolleyes.gif", smile:"1539685039446-smile.gif", spock:"1539685852804-spock.gif", thumbsdown:"1539693743513-thumbsdown.gif", thumbsup:"1539693760607-thumbsup.gif", troll:"1539685894751-troll.gif", waiting:"1539685920932-waiting.gif", weeping:"1539685954572-weeping.gif", whistle:"1539698509979-whistle.gif", wink:"1539698493281-wink.gif", wizard:"1539685980783-wizard.gif", worried:"1539698551154-worried.gif", yes:"1539686029165-yes.gif", zipped:"1539685367819-zipped.gif", zzz:"1539685301665-zzz.gif", } function emotePicked(event){ const textarea = document.querySelector(".composer .write"); const newtext = ` `; const start = textarea.selectionStart; const end = textarea.selectionEnd; const replacement = textarea.value.substring(0, start) + newtext + textarea.value.substring(end); textarea.value = replacement; const picker = document.querySelector("#my-opera-emote-picker"); if(picker){ picker.style.display = "none"; } } function makeEmoteButton(emoteName, emoteUrl){ const emoteButton = document.createElement("img"); emoteButton.alt = emoteName; emoteButton.title = emoteName; emoteButton.src = "/assets/uploads/files/" + emoteUrl; emoteButton.addEventListener("click", emotePicked); emoteButton.style.cursor = "pointer"; emoteButton.style.padding = "5px"; return emoteButton; } function showEmotePicker(event){ const picker = document.querySelector("#my-opera-emote-picker"); if(picker){ if(picker.style.display === "block"){ picker.style.display = "none"; } else { picker.style.display = "block"; picker.style.top = event.clientY + "px"; picker.style.left = event.clientX + "px"; } } else { const box = document.createElement("div"); box.style.position = "fixed"; box.style.zIndex = "9999999999"; box.style.top = event.clientY + "px"; box.style.left = event.clientX + "px"; box.style.width = "200px"; box.style.height = "200px"; box.style.padding = "5px"; box.style.background = "#f5f5f5"; box.style.overflow = "scroll"; box.id = "my-opera-emote-picker"; box.style.display = "block"; const inner = document.createElement("div"); inner.style.display = "grid"; inner.style.gridTemplateColumns = "20fr 20fr 20fr"; inner.style.padding = "5px"; inner.style.background = "#ffffff"; for (const emoteName in EMOTES) { const emoteUrl = EMOTES[emoteName]; inner.appendChild(makeEmoteButton(emoteName, emoteUrl)); } box.appendChild(inner); document.body.appendChild(box); } } function addEmotePicker(){ const composerFormatters = document.querySelector(".composer .formatting-group"); const bold = composerFormatters.querySelector("li:nth-of-type(1)"); const emotePickerButton = document.createElement("li"); emotePickerButton.setAttribute("tabindex", "-1"); emotePickerButton.setAttribute("data-format", "myoperamotes"); emotePickerButton.title = "My Opera Emote Picker"; emotePickerButton.innerHTML = `<span>โบ</span>`; emotePickerButton.addEventListener("click", showEmotePicker); composerFormatters.insertBefore(emotePickerButton, bold); } function pageMutated(mutationList){ mutationList.forEach(mutation => { mutation.addedNodes.forEach(element => { if(element.classList.contains("composer")){ addEmotePicker(); } }); }); } const composerObserver = new MutationObserver(pageMutated); composerObserver.observe(document.body, {childList: true});
-
@lonm Great! How to get it?
Edit : thanks! Just see you did edit your post! -
@ornorm Right now the easiest way would be to add it as a "page action". Once I figure out a better way (that won't break if the image urls change), I'll see if I can turn it into a "mod" file that could potentially be included in the V forum mod.
-
Amazing work. I hope that they include this mod in the forum code.
@lonm said in Vivaldi Forum mod:
I prefer standardised emoji in unicode, some members might like the nostalgia of emotes...
I already have some emoji as notes, but most are not as distinctive as the graphics. The old forum here had way too many, and finding the right one was a nightmare. I doubt if this is even close to being a comprehensive list of Segoe UI Emoji.
๐ข๐ฃ
๐๐
๐
๐๐
-
@pesala @LonM If included in the forum code, why not having the possibility to make a search as it is the case in emojipedia where we can easily find what we're looking for?
-
@ornorm The palette of smilies or emoji needs to be small enough to not require searching. My Opera forums list is about 50, which could probably do with paring down a bit.
Any more than 64 and it becomes a hassle finding a suitable emoticon to use.
-
-
-
@lonm We can include this, just make a pull request. But this will probably have to be optional (a selectable mod).
-
@lonm I dont know why, but it does not work for me. I see it in the list Like Emoticons, because my js file name is emoticon.js, but here I dont see the icon to be able to put the smileys.
Any idea, where the problem may be?
-
I have this pages in my webpanel
http://copychar.cc/
https://www.messletters.com/es/emoticons/ -
version 1.57
Emote Picker by @LonM
Make sure you are on version 1.57, open the VF mod settings and select the emote picker to test/use this new modification. Don't forget to hit "save" and to reload your current Vivaldi tabs!You can thank @LonM for the swift implementation, he did all the work.
original post -
@luetage
Forums gone retro.
-
Would be nice also having a button in the composer for code blocks [ ``` ]. But actually, I don't know if easily do-able. ^^,
-
@hadden89 The emote mod already has the code in place to modify the formatting area and insert text. As a result, it could be changed to also add additional buttons that perform arbitrary actions, like adding a ``` block.
For me though, I find it faster to just type ``` , the buttons are more useful for remembering long codes that I can't remember.
-
@lonm I'll give a look, then.
Yeah, typing is similar, but a lot of people (well, also me) have/had issues on finding the`
as they never used Markdown or NodeBB and would expect to see it in the composer. -
@hadden89 I suppose it makes sense from a perspective of helping new users.
Unfortunately, I imagine that those truly new users (who it would help the most) are liable to not also have the extension installed.
-
@lonm Also true.
Well, I hope the team will empower the composer (I guess I've already made a request for it, time ago).