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';
+import { getCurrentLocale, t } 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('Next page'));
+    container.find('[title="Next page"]').attr('title', t`Next page`);
-    container.find('[title="Previous page"]').attr('title', translate('Previous page'));
+    container.find('[title="Previous page"]').attr('title', 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;
+    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 {