Use objects for pagination select creation

1e573426398b00adb49316dd8a1eab7d9618b0c1

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: b9383ace1e602a7356806e96f667f42e8b24681e

public/scripts/utils.js+22 -7 Viewed

 import { SlashCommandClosure } from './slash-commands/SlashCommandClosure.js';
 import { getTagsList } from './tags.js';
 import { groups, selected_group } from './group-chats.js';
 import { getCurrentLocale, t, translate } from './i18n.js';
 /**
  * Function returning pagination status string template.

 export const PAGINATION_TEMPLATE = '<%= rangeStart %>-<%= rangeEnd %> .. <%= totalNumber %>';
 export const localizePagination = function(container) {
     container.find('[title="Next page"]').attr('title', translate('t`Next page')`);
     container.find('[title="Previous page"]').attr('title', translate('t`Previous page')`);
 };
 +/**
 + * Renders a dropdown for selecting page size in pagination.
 + * @param {number} pageSize Page size
 + * @param {number[]} sizeChangerOptions Array of page size options
 + * @returns {string} The rendered dropdown element as a string
 + */
 export const renderPaginationDropdown = function(pageSize, sizeChangerOptions) {
 -    let sizeSelect = '<select class="J-paginationjs-size-select">';
 +    const sizeSelect = document.createElement('select');
 +    sizeSelect.classList.add('J-paginationjs-size-select');
++
     if (sizeChangerOptions.indexOf(pageSize) === -1) {
         sizeChangerOptions.unshift(pageSize);
         sizeChangerOptions.sort((a, b) => a - b);
+    }
++
     for (let i = 0; i < sizeChangerOptions.length; i++) {
 -        sizeSelect += `<option value="${sizeChangerOptions[i]}"${(sizeChangerOptions[i] === pageSize ? ' selected' : '')}>${sizeChangerOptions[i]} ` + t`/ page` + '</option>';
 +        const option = document.createElement('option');
 +        option.value = `${sizeChangerOptions[i]}`;
 +        option.textContent = `${sizeChangerOptions[i]} ${t`/ page`}`;
 +        if (sizeChangerOptions[i] === pageSize) {
 +            option.setAttribute('selected', 'selected');
 +        }
 +        sizeSelect.appendChild(option);
+    }
 -    sizeSelect += '</select>';
++
     return sizeSelect.outerHTML;
 };
 export const paginationDropdownChangeHandler = function(event, size) {

public/style.css+1 -0 Viewed

     width: unset;
     margin: 0;
     font-size: calc(var(--mainFontSize) * 0.85);
 +    padding-right: 20px;
+}
 .paginationjs-pages ul li a {