Mercurial > prosody-modules
diff mod_invites_page/html/invite.html @ 5718:8cd617c0b701
mod_invites_page: Replace jQuery with vanilla.js in the HTML
author | Emmanuel Gil Peyrot <linkmauve@linkmauve.fr> |
---|---|
date | Thu, 16 Nov 2023 16:15:26 +0100 |
parents | 09b8144051ea |
children | 18bae78282a6 |
line wrap: on
line diff
--- a/mod_invites_page/html/invite.html Thu Nov 16 16:14:24 2023 +0100 +++ b/mod_invites_page/html/invite.html Thu Nov 16 16:15:26 2023 +0100 @@ -106,20 +106,18 @@ <script src="{static}/qrcode.min.js"></script> <script src="{static}/platform.min.js"></script> <script> - $(function () { + (function () { // If QR lib loaded ok, show QR button on desktop devices if(window.QRCode) { - $('#qr-modal').one('show.bs.modal', function (e) { - new QRCode(document.getElementById("qr-invite-page"), document.location.href); - }); - $('#qr-button-container').addClass("d-md-block"); + new QRCode(document.getElementById("qr-invite-page"), document.location.href); + document.getElementById('qr-button-container').classList.remove("d-none"); } // Detect current platform and show/hide appropriate clients if(window.platform) { var platform_friendly = null; var platform_classname = null; - + switch(platform.os.family) { case "Ubuntu": case "Linux": @@ -144,30 +142,41 @@ } if(platform_friendly && platform_classname) { - if($('.client-card .client-platform-badge-'+platform_classname).length == 0) { + if(document.querySelectorAll('.client-card .client-platform-badge-'+platform_classname).length == 0) { // No clients recognised for this platform, do nothing return; } // Hide clients not for this platform - $('.client-card.app-platform-'+platform_classname).addClass("supported-platform"); - $('.client-card').not(".supported-platform, .app-platform-web").hide(); - $('.client-card .client-platform-badge') - .not(".client-platform-badge-"+platform_classname) - .addClass("badge-secondary") - .removeClass("badge-info"); - $('.client-card .client-platform-badge-'+platform_classname) - .addClass("badge-success") - .removeClass("badge-info"); - $('#show-all-clients-button-container .platform-name').text(platform_friendly); - $('#show-all-clients-button-container').removeClass("d-none"); - $('#show-all-clients-button').click(function () { - $('.client-card').show(); - $('#show-all-clients-button-container').hide(); + const client_cards = document.getElementsByClassName('client-card'); + for (let card of client_cards) { + if (card.classList.contains('app-platform-'+platform_classname)) + card.classList.add('supported-platform'); + else if (!card.classList.contains('app-platform-web')) + card.hidden = true; + const badges = card.querySelectorAll('.client-platform-badge'); + for (let badge of badges) { + if (badge.classList.contains('client-platform-badge-'+platform_classname)) { + badge.classList.add("badge-success"); + badge.classList.remove("badge-info"); + } else { + badge.classList.add("badge-secondary"); + badge.classList.remove("badge-info"); + } + } + } + const show_all_clients_button_container = document.getElementById('show-all-clients-button-container'); + show_all_clients_button_container.querySelector('.platform-name').innerHTML = platform_friendly; + show_all_clients_button_container.classList.remove("d-none"); + document.getElementById('show-all-clients-button').addEventListener('click', function (e) { + for (let card of client_cards) + card.hidden = false; + show_all_clients_button_container.hidden = true; + e.preventDefaults(); }); } } - }); - + })(); + </script> </body> </html>