Software /
code /
prosody-modules
Comparison
mod_invites_page/html/invite.html @ 5741: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 |
parent | 4881:09b8144051ea |
child | 5742:18bae78282a6 |
comparison
equal
deleted
inserted
replaced
5740:e06af1403a60 | 5741:8cd617c0b701 |
---|---|
104 <script src="/share/jquery/jquery.min.js"></script> | 104 <script src="/share/jquery/jquery.min.js"></script> |
105 <script src="/share/bootstrap4/js/bootstrap.min.js"></script> | 105 <script src="/share/bootstrap4/js/bootstrap.min.js"></script> |
106 <script src="{static}/qrcode.min.js"></script> | 106 <script src="{static}/qrcode.min.js"></script> |
107 <script src="{static}/platform.min.js"></script> | 107 <script src="{static}/platform.min.js"></script> |
108 <script> | 108 <script> |
109 $(function () { | 109 (function () { |
110 // If QR lib loaded ok, show QR button on desktop devices | 110 // If QR lib loaded ok, show QR button on desktop devices |
111 if(window.QRCode) { | 111 if(window.QRCode) { |
112 $('#qr-modal').one('show.bs.modal', function (e) { | 112 new QRCode(document.getElementById("qr-invite-page"), document.location.href); |
113 new QRCode(document.getElementById("qr-invite-page"), document.location.href); | 113 document.getElementById('qr-button-container').classList.remove("d-none"); |
114 }); | |
115 $('#qr-button-container').addClass("d-md-block"); | |
116 } | 114 } |
117 | 115 |
118 // Detect current platform and show/hide appropriate clients | 116 // Detect current platform and show/hide appropriate clients |
119 if(window.platform) { | 117 if(window.platform) { |
120 var platform_friendly = null; | 118 var platform_friendly = null; |
121 var platform_classname = null; | 119 var platform_classname = null; |
122 | 120 |
123 switch(platform.os.family) { | 121 switch(platform.os.family) { |
124 case "Ubuntu": | 122 case "Ubuntu": |
125 case "Linux": | 123 case "Linux": |
126 case "Fedora": | 124 case "Fedora": |
127 case "Red Hat": | 125 case "Red Hat": |
142 platform_classname = platform_friendly.toLowerCase(); | 140 platform_classname = platform_friendly.toLowerCase(); |
143 } | 141 } |
144 } | 142 } |
145 | 143 |
146 if(platform_friendly && platform_classname) { | 144 if(platform_friendly && platform_classname) { |
147 if($('.client-card .client-platform-badge-'+platform_classname).length == 0) { | 145 if(document.querySelectorAll('.client-card .client-platform-badge-'+platform_classname).length == 0) { |
148 // No clients recognised for this platform, do nothing | 146 // No clients recognised for this platform, do nothing |
149 return; | 147 return; |
150 } | 148 } |
151 // Hide clients not for this platform | 149 // Hide clients not for this platform |
152 $('.client-card.app-platform-'+platform_classname).addClass("supported-platform"); | 150 const client_cards = document.getElementsByClassName('client-card'); |
153 $('.client-card').not(".supported-platform, .app-platform-web").hide(); | 151 for (let card of client_cards) { |
154 $('.client-card .client-platform-badge') | 152 if (card.classList.contains('app-platform-'+platform_classname)) |
155 .not(".client-platform-badge-"+platform_classname) | 153 card.classList.add('supported-platform'); |
156 .addClass("badge-secondary") | 154 else if (!card.classList.contains('app-platform-web')) |
157 .removeClass("badge-info"); | 155 card.hidden = true; |
158 $('.client-card .client-platform-badge-'+platform_classname) | 156 const badges = card.querySelectorAll('.client-platform-badge'); |
159 .addClass("badge-success") | 157 for (let badge of badges) { |
160 .removeClass("badge-info"); | 158 if (badge.classList.contains('client-platform-badge-'+platform_classname)) { |
161 $('#show-all-clients-button-container .platform-name').text(platform_friendly); | 159 badge.classList.add("badge-success"); |
162 $('#show-all-clients-button-container').removeClass("d-none"); | 160 badge.classList.remove("badge-info"); |
163 $('#show-all-clients-button').click(function () { | 161 } else { |
164 $('.client-card').show(); | 162 badge.classList.add("badge-secondary"); |
165 $('#show-all-clients-button-container').hide(); | 163 badge.classList.remove("badge-info"); |
164 } | |
165 } | |
166 } | |
167 const show_all_clients_button_container = document.getElementById('show-all-clients-button-container'); | |
168 show_all_clients_button_container.querySelector('.platform-name').innerHTML = platform_friendly; | |
169 show_all_clients_button_container.classList.remove("d-none"); | |
170 document.getElementById('show-all-clients-button').addEventListener('click', function (e) { | |
171 for (let card of client_cards) | |
172 card.hidden = false; | |
173 show_all_clients_button_container.hidden = true; | |
174 e.preventDefaults(); | |
166 }); | 175 }); |
167 } | 176 } |
168 } | 177 } |
169 }); | 178 })(); |
170 | 179 |
171 </script> | 180 </script> |
172 </body> | 181 </body> |
173 </html> | 182 </html> |