Vivaldi Forum mod

[luetage]

Sorry to hear about your illness. If you have any questions about the setup or what's possible, I'm happy to assist.

[wiiija]

Awesome, I fear it may be a little bit alien to me but if I can contribute in any way I will.

[LonM]

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 = `![${event.target.alt}](${event.target.src}) `;
    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});

[Ornorm]

@lonm Great! How to get it?
Edit : thanks! Just see you did edit your post!

[LonM]

@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.

[Pesala]

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.

🌢🌣
🎔🎕🎘🎜🎝

[Ornorm]

@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?

[Pesala]

@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.

[Ornorm]

@pesala For sure, I understand. I thought of a feature like the one in Gmail where the emojis are hidden but you can make a search based on keywords. Anyway, just a proposition if the team finds it interesting to implement based on the code provided by @LonM

[Pesala]

@ornorm Still too much faff IMO.

The High-Logic phpBB forum has a sensible number by the message reply box. A dropdown on the Toolbar would save space. I think My Opera was similar.

The solution by @LonM looks fine, except it could be more columns so that we can do away with scrolling.

[luetage]

@lonm We can include this, just make a pull request. But this will probably have to be optional (a selectable mod).

[burbuja]

@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?

[Catweazle]

I have this pages in my webpanel
http://copychar.cc/
https://www.messletters.com/es/emoticons/

[luetage]

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

[LonM]

@luetage Forums gone retro.

[Hadden89]

Would be nice also having a button in the composer for code blocks [ ``` ]. But actually, I don't know if easily do-able. ^^,

[LonM]

@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.

[Hadden89]

@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.

[LonM]

@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.

[Hadden89]

@lonm Also true.
Well, I hope the team will empower the composer (I guess I've already made a request for it, time ago).