https://pupwife.com/projects/chatroom/scripts/iconButtons.js

1/**
2 * Font Awesome icons for chatroom UI — Discord-style icon buttons (no borders).
3 */
4(function () {
5    'use strict';
6
7    var ICONS = {
8        gear: 'fa-gear',
9        plus: 'fa-plus',
10        smile: 'fa-face-smile',
11        paperclip: 'fa-paperclip',
12        microphone: 'fa-microphone',
13        microphoneSlash: 'fa-microphone-slash',
14        headphones: 'fa-headphones',
15        /* FA7 free set — no fa-headphones-slash; ear-deaf reads as “deafened” */
16        headphonesSlash: 'fa-ear-deaf',
17        display: 'fa-display',
18        phone: 'fa-phone',
19        phoneSlash: 'fa-phone-slash',
20        volumeHigh: 'fa-volume-high',
21        volumeXmark: 'fa-volume-xmark',
22        xmark: 'fa-xmark',
23        mapPin: 'fa-map-pin',
24        trash: 'fa-trash',
25        palette: 'fa-palette',
26        message: 'fa-message',
27        bell: 'fa-bell',
28        crown: 'fa-crown',
29        wand: 'fa-wand-magic-sparkles',
30        image: 'fa-image',
31        paw: 'fa-paw',
32        waveSquare: 'fa-wave-square',
33        phoneHangup: 'fa-phone-slash',
34        copy: 'fa-copy',
35        key: 'fa-key',
36        thumbtack: 'fa-thumbtack',
37        pen: 'fa-pen',
38        user: 'fa-user',
39        envelope: 'fa-envelope',
40        reply: 'fa-reply',
41        ellipsis: 'fa-ellipsis'
42    };
43
44    function html(iconClass, extraClass) {
45        var cls = 'fa-solid ' + iconClass + ' fa-width-auto';
46        if (extraClass) cls += ' ' + extraClass;
47        return '<i class="' + cls + '" aria-hidden="true"></i>';
48    }
49
50    function icon(name) {
51        return html(ICONS[name] || ICONS.gear);
52    }
53
54    function set(el, name) {
55        if (el) el.innerHTML = icon(name);
56    }
57
58    function ensureFontAwesome() {
59        if (document.querySelector('link[data-chatroom-fontawesome="7"]')) return;
60        var link = document.createElement('link');
61        link.rel = 'stylesheet';
62        link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css';
63        link.crossOrigin = 'anonymous';
64        link.referrerPolicy = 'no-referrer';
65        link.setAttribute('data-chatroom-fontawesome', '7');
66        document.head.appendChild(link);
67    }
68
69    function initStaticButtons() {
70        var map = [
71            ['#new-dm-btn', 'plus'],
72            ['#add-channel-btn', 'plus'],
73            ['#voice-mute-btn', 'microphone'],
74            ['#voice-deafen-btn', 'headphones'],
75            ['#spa-vc-chrome-mute', 'microphone'],
76            ['#spa-vc-chrome-deafen', 'headphones'],
77            ['#voice-screenshare-btn', 'display'],
78            ['#voice-disconnect-btn', 'phoneHangup'],
79            ['#voice-noise-gate-btn', 'waveSquare'],
80            ['#settings-btn', 'gear'],
81            ['#settings-btn-chatroom', 'gear'],
82            ['#input-attach-btn', 'plus'],
83            ['.input-attach-btn', 'plus'],
84            ['#input-emoji-btn', 'smile'],
85            ['.input-emoji-btn', 'smile'],
86            ['#dm-modal-close', 'xmark'],
87            ['#channel-modal-close', 'xmark']
88        ];
89        map.forEach(function (pair) {
90            document.querySelectorAll(pair[0]).forEach(function (el) {
91                if (el && !el.dataset.crIconInit) {
92                    set(el, pair[1]);
93                    el.dataset.crIconInit = '1';
94                }
95            });
96        });
97        var attach = document.querySelector('.input-attach-btn');
98        if (attach && !attach.dataset.crIconInit) {
99            set(attach, 'plus');
100            attach.dataset.crIconInit = '1';
101        }
102    }
103
104    window.ChatroomIcons = {
105        icon: icon,
106        set: set,
107        html: icon,
108        ensure: ensureFontAwesome,
109        initStaticButtons: initStaticButtons,
110        setVoiceMute: function (btn, muted) {
111            set(btn, muted ? 'microphoneSlash' : 'microphone');
112        },
113        setVoiceDeafen: function (btn, deafened) {
114            set(btn, deafened ? 'headphonesSlash' : 'headphones');
115        },
116        setStreamMute: function (btn, muted) {
117            set(btn, muted ? 'volumeXmark' : 'volumeHigh');
118        },
119        setNoiseGate: function (btn, enabled) {
120            if (!btn) return;
121            set(btn, 'waveSquare');
122            btn.classList.toggle('active', !!enabled);
123            btn.setAttribute('aria-pressed', enabled ? 'true' : 'false');
124            btn.title = enabled ? 'Noise suppression on' : 'Noise suppression off';
125        }
126    };
127
128    ensureFontAwesome();
129    if (document.readyState === 'loading') {
130        document.addEventListener('DOMContentLoaded', initStaticButtons);
131    } else {
132        initStaticButtons();
133    }
134})();