Mood Icon Profile Field

Preview #1 - Preview #2

Use the version below for v1 boards; use this version for v2 and above.

Create a new custom profile field:

Admin CP → Users & Groups → Profile Fields → Add field

Handle: mood
Label: Mood
Show in mini profile: Enable

Admin CP → Themes → Board Templates → Below the board

<script>

const moodN = ['None', 'Aggressive', 'Amazed', 'Amused', 'Angelic', 'Angry', 'Artistic', 'Asleep', 'Bashful', 'Blah', 'Bored', 'Breezy', 'Brooding', 'Busy', 'Buzzed', 'Chatty', 'Cheeky', 'Cheerful', 'Cloud_9', 'Cold', 'Coldturkey', 'Confused', 'Cool', 'Crappy', 'Curious', 'Cynical', 'Daring', 'Dead', 'Depressed', 'Devilish', 'Doh', 'Doubtful', 'Drunk', 'Energetic', 'Fiendish', 'Fine', 'Flirty', 'Gloomy', 'Goofy', 'Grumpy', 'Hot', 'Hungover', 'In-Love', 'Innocent', 'Inpain', 'Inspired', 'Lonely', 'Lurking', 'Mellow', 'Mischievious', 'Nerdly', 'Nerdy', 'Notworthy', 'Paranoid', 'Pensive', 'Psychedelic', 'Question', 'Relaxed', 'Roflmao', 'Sad', 'Scared', 'Shocked', 'Sick', 'Sleepy', 'Sneaky', 'Snobbish', 'Spaced', 'Stressed', 'Sunshine', 'Sweettooth', 'Thinking', 'Tired', 'Twisted', 'Veggedout', 'Worried', 'Yeehaw'];

const moodI = ['https://files.jcink.net/uploads/cory//p478599.png', 'https://files.jcink.net/uploads/cory//p478511.gif', 'https://files.jcink.net/uploads/cory//p478512.gif', 'https://files.jcink.net/uploads/cory//p478513.gif', 'https://files.jcink.net/uploads/cory//p478514.gif', 'https://files.jcink.net/uploads/cory//p478515.gif', 'https://files.jcink.net/uploads/cory//p478516.gif', 'https://files.jcink.net/uploads/cory//p478517.gif', 'https://files.jcink.net/uploads/cory//p478518.gif', 'https://files.jcink.net/uploads/cory//p478520.gif', 'https://files.jcink.net/uploads/cory//p478521.gif', 'https://files.jcink.net/uploads/cory//p478522.gif', 'https://files.jcink.net/uploads/cory//p478523.gif', 'https://files.jcink.net/uploads/cory//p478524.gif', 'https://files.jcink.net/uploads/cory//p478525.gif', 'https://files.jcink.net/uploads/cory//p478526.gif', 'https://files.jcink.net/uploads/cory//p478527.gif', 'https://files.jcink.net/uploads/cory//p478528.gif', 'https://files.jcink.net/uploads/cory//p478529.gif', 'https://files.jcink.net/uploads/cory//p478530.gif', 'https://files.jcink.net/uploads/cory//p478531.gif', 'https://files.jcink.net/uploads/cory//p478532.gif', 'https://files.jcink.net/uploads/cory//p478533.gif', 'https://files.jcink.net/uploads/cory//p478534.gif', 'https://files.jcink.net/uploads/cory//p478535.gif', 'https://files.jcink.net/uploads/cory//p478536.gif', 'https://files.jcink.net/uploads/cory//p478537.gif', 'https://files.jcink.net/uploads/cory//p478538.gif', 'https://files.jcink.net/uploads/cory//p478539.gif', 'https://files.jcink.net/uploads/cory//p478540.gif', 'https://files.jcink.net/uploads/cory//p478541.gif', 'https://files.jcink.net/uploads/cory//p478542.gif', 'https://files.jcink.net/uploads/cory//p478543.gif', 'https://files.jcink.net/uploads/cory//p478544.gif', 'https://files.jcink.net/uploads/cory//p478545.gif', 'https://files.jcink.net/uploads/cory//p478546.gif', 'https://files.jcink.net/uploads/cory//p478547.gif', 'https://files.jcink.net/uploads/cory//p478548.gif', 'https://files.jcink.net/uploads/cory//p478549.gif', 'https://files.jcink.net/uploads/cory//p478550.gif', 'https://files.jcink.net/uploads/cory//p478553.gif', 'https://files.jcink.net/uploads/cory//p478554.gif', 'https://files.jcink.net/uploads/cory//p478555.gif', 'https://files.jcink.net/uploads/cory//p478556.gif', 'https://files.jcink.net/uploads/cory//p478557.gif', 'https://files.jcink.net/uploads/cory//p478558.gif', 'https://files.jcink.net/uploads/cory//p478559.gif', 'https://files.jcink.net/uploads/cory//p478560.gif', 'https://files.jcink.net/uploads/cory//p478561.gif', 'https://files.jcink.net/uploads/cory//p478562.gif', 'https://files.jcink.net/uploads/cory//p478564.gif', 'https://files.jcink.net/uploads/cory//p478565.gif', 'https://files.jcink.net/uploads/cory//p478566.gif', 'https://files.jcink.net/uploads/cory//p478567.gif', 'https://files.jcink.net/uploads/cory//p478568.gif', 'https://files.jcink.net/uploads/cory//p478569.gif', 'https://files.jcink.net/uploads/cory//p478570.gif', 'https://files.jcink.net/uploads/cory//p478571.gif', 'https://files.jcink.net/uploads/cory//p478572.gif', 'https://files.jcink.net/uploads/cory//p478573.gif', 'https://files.jcink.net/uploads/cory//p478574.gif', 'https://files.jcink.net/uploads/cory//p478575.gif', 'https://files.jcink.net/uploads/cory//p478576.gif', 'https://files.jcink.net/uploads/cory//p478577.gif', 'https://files.jcink.net/uploads/cory//p478578.gif', 'https://files.jcink.net/uploads/cory//p478579.gif', 'https://files.jcink.net/uploads/cory//p478580.gif', 'https://files.jcink.net/uploads/cory//p478581.gif', 'https://files.jcink.net/uploads/cory//p478582.gif', 'https://files.jcink.net/uploads/cory//p478583.gif', 'https://files.jcink.net/uploads/cory//p478584.gif', 'https://files.jcink.net/uploads/cory//p478585.gif', 'https://files.jcink.net/uploads/cory//p478586.gif', 'https://files.jcink.net/uploads/cory//p478587.gif', 'https://files.jcink.net/uploads/cory//p478588.gif', 'https://files.jcink.net/uploads/cory//p478589.gif'];

const label = document.querySelectorAll('label.input-label');

let value;



label.forEach(element => {

    if (element && element.innerText.includes('Mood')) {

        element.parentElement.nextElementSibling.querySelector('input').style.display = 'none';

        const div = document.createElement('div');

        div.style.display = 'flex';

        div.style.flexWrap = 'wrap';

        div.style.gap = '10px';



for (let i = 0; i < moodN.length; i++) {

    const img = document.createElement('img');

    img.src = moodI[i];

    img.alt = moodN[i];

    img.title = moodN[i];

    img.className = 'mood-img';

    img.width = '93';

    img.height = '30';

    img.style.cursor = 'pointer';

    img.style.opacity = '0.5';

    element.parentElement.nextElementSibling.appendChild(div);

    div.appendChild(img);

}



value = element.parentElement.nextElementSibling.querySelector('input').value;

}

});



const flag = document.querySelectorAll('img.mood-img');



flag.forEach(element => {

    if (element.title === value) {

        element.style.opacity = '1';

    }



element.addEventListener('click', function() {

    flag.forEach(allElements => {

        allElements.style.opacity = '0.5';

    });



const title = element.title;

element.parentElement.parentElement.querySelector('input').value = title;

element.style.opacity = '1';

});

});



const about = document.querySelectorAll('div.profile-about__item');



about.forEach(element => {

    if (element.querySelector('dt').innerText === 'Mood') {

        const myMood = element.querySelector('dd').innerText;



for (let i = 0; i < moodN.length; i++) {

    if (myMood === moodN[i]) {

        element.querySelector('dd').innerHTML = `<img src="${moodI[i]}" title="${moodN[i]}" alt="${moodN[i]}">`;

    }

}

}

});



const mini = document.querySelectorAll('div.mini-profile--custom dt');



mini.forEach(element => {

    if (element.innerText === 'Mood') {

        const myMood = element.nextElementSibling.innerText;



for (let i = 0; i < moodN.length; i++) {

    if (myMood === '-') {

       element.nextElementSibling.innerHTML = `<img src="${moodI[0]}" title="${moodN[0]}" alt="${moodN[0]}">`; 

    } else if (myMood === moodN[i]) {

        element.nextElementSibling.innerHTML = `<img src="${moodI[i]}" title="${moodN[i]}" alt="${moodN[i]}">`;

    }

}

}

});

</script>