|
461 | 461 | <% end %> |
462 | 462 | </div> |
463 | 463 |
|
| 464 | + <!-- Randomize Toggle --> |
| 465 | + <div style="margin-bottom: 1rem;"> |
| 466 | + <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 1rem; font-weight: 500; color: #402b20;"> |
| 467 | + <input type="checkbox" id="randomize-toggle" checked style="width: 18px; height: 18px; cursor: pointer;"> |
| 468 | + <span>Randomize Order</span> |
| 469 | + </label> |
| 470 | + </div> |
| 471 | + |
464 | 472 | <!-- Users Count --> |
465 | 473 | <div style="margin-bottom: 1rem; font-size: 0.9rem; color: #6b5b4a;"> |
466 | 474 | Showing <%= @user_data.count %> user<%= @user_data.count == 1 ? '' : 's' %> |
|
622 | 630 | <% end %> |
623 | 631 | </div> |
624 | 632 | </div> |
| 633 | + |
| 634 | +<script> |
| 635 | +(function() { |
| 636 | + const usersGrid = document.querySelector('.users-grid'); |
| 637 | + const randomizeToggle = document.getElementById('randomize-toggle'); |
| 638 | + |
| 639 | + if (!usersGrid || !randomizeToggle) return; |
| 640 | + |
| 641 | + // Store original order |
| 642 | + let originalCards = Array.from(usersGrid.children); |
| 643 | + let currentlyRandomized = false; |
| 644 | + |
| 645 | + // Fisher-Yates shuffle algorithm |
| 646 | + function shuffleArray(array) { |
| 647 | + const shuffled = [...array]; |
| 648 | + for (let i = shuffled.length - 1; i > 0; i--) { |
| 649 | + const j = Math.floor(Math.random() * (i + 1)); |
| 650 | + [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; |
| 651 | + } |
| 652 | + return shuffled; |
| 653 | + } |
| 654 | + |
| 655 | + function randomizeUsers() { |
| 656 | + const cards = Array.from(usersGrid.children); |
| 657 | + const shuffled = shuffleArray(cards); |
| 658 | + |
| 659 | + // Clear and re-append in random order |
| 660 | + usersGrid.innerHTML = ''; |
| 661 | + shuffled.forEach(card => usersGrid.appendChild(card)); |
| 662 | + currentlyRandomized = true; |
| 663 | + } |
| 664 | + |
| 665 | + function restoreOriginalOrder() { |
| 666 | + usersGrid.innerHTML = ''; |
| 667 | + originalCards.forEach(card => usersGrid.appendChild(card)); |
| 668 | + currentlyRandomized = false; |
| 669 | + } |
| 670 | + |
| 671 | + // Randomize on page load (since toggle is checked by default) |
| 672 | + randomizeUsers(); |
| 673 | + |
| 674 | + // Toggle randomization when checkbox changes |
| 675 | + randomizeToggle.addEventListener('change', function() { |
| 676 | + if (this.checked) { |
| 677 | + randomizeUsers(); |
| 678 | + } else { |
| 679 | + restoreOriginalOrder(); |
| 680 | + } |
| 681 | + }); |
| 682 | +})(); |
| 683 | +</script> |
0 commit comments