MediaWiki:Gadget-SocialTtrigger.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

(() => {
    if (!mw || !mw.config) return;

    const userName = mw.config.get('wgUserName');
    if (userName) return;

    const namespaceNumber = mw.config.get('wgNamespaceNumber');
    if (namespaceNumber !== 0) return;

    const skin = mw.config.get('skin'); 
    const isMobile = skin === 'minerva'; 

    const addSocialMenu = () => {
        const socialContainer = document.createElement('div');
        socialContainer.classList.add('social-container');

        socialContainer.innerHTML = `
          <div class="social-trigger">
            <img src="https://commons.wikishia.net/w/images/a/aa/Social_media.svg" alt="Trigger Icon">
          </div>
          <div class="social-menu">
            <div class="social-item" data-url="https://t.me/wikishia_en">
              <img src="https://commons.wikishia.net/w/images/8/82/Telegram.svg" alt="Telegram Icon">
              <span>Telegram</span>
            </div>
            <div class="social-item" data-url="https://wa.me/channel/0029Vb1hK5tBlHpXtKLq2D29">
              <img src="https://commons.wikishia.net/w/images/d/d6/Whatsapp.svg" alt="WhatsApp Icon">
              <span>WhatsApp</span>
            </div>
          </div>
        `;

        document.body.appendChild(socialContainer);

        const socialItems = socialContainer.querySelectorAll('.social-item');
        socialItems.forEach(item => {
            item.addEventListener('click', () => {
                const url = item.getAttribute('data-url');
                if (url) {
                    window.open(url, '_blank');
                }
            });
        });

        const trigger = socialContainer.querySelector('.social-trigger');
        const socialMenu = socialContainer.querySelector('.social-menu');

        if (isMobile) {
            trigger.addEventListener('click', (event) => {
                event.stopPropagation();
                socialContainer.classList.toggle('active');
            });

            document.addEventListener('click', (event) => {
                if (!socialContainer.contains(event.target)) {
                    socialContainer.classList.remove('active');
                }
            });
        } else {
            let hideTimeout;

            socialContainer.addEventListener('mouseenter', () => {
                clearTimeout(hideTimeout);
                socialContainer.classList.add('active');
            });

            socialContainer.addEventListener('mouseleave', () => {
                hideTimeout = setTimeout(() => {
                    socialContainer.classList.remove('active');
                }, 5000);
            });
        }
    };

    setTimeout(() => addSocialMenu(), 500);
})();