diff --git a/Library/_res/BDFDB.raw.css b/Library/_res/BDFDB.raw.css index a4c5d96f5b..cb4ba684ed 100644 --- a/Library/_res/BDFDB.raw.css +++ b/Library/_res/BDFDB.raw.css @@ -210,16 +210,6 @@ img:not([src]), img[src=""], img[src="null"] { [REPLACE_CLASS_paginationlist] { height: 100%; } -[REPLACE_CLASS_paginationlistpagination] { - display: flex; - align-items: center; - justify-content: center; - font-size: 16px; - line-height: 20px; - margin-top: 10px; - margin-bottom: 10px; - color: var(--text-normal); -} [REPLACE_CLASS_paginationlistalphabet] { display: flex; align-items: center; diff --git a/Plugins/BetterSearchPage/BetterSearchPage.plugin.js b/Plugins/BetterSearchPage/BetterSearchPage.plugin.js index da8b421ccf..d7e63b5fd1 100644 --- a/Plugins/BetterSearchPage/BetterSearchPage.plugin.js +++ b/Plugins/BetterSearchPage/BetterSearchPage.plugin.js @@ -14,12 +14,12 @@ module.exports = (_ => { "info": { "name": "BetterSearchPage", "author": "DevilBro", - "version": "1.1.7", + "version": "1.1.9", "description": "Add some extra controls to the search results page" }, "changeLog": { "fixed": { - "New React Structure": "Fixed for new internal react structure" + "New Pagination": "Fixed for the new pagination style, 'First/Last' was removed because the native pagination now allows to jump to those pages" } } }; @@ -69,7 +69,6 @@ module.exports = (_ => { onLoad () { this.defaults = { settings: { - addFirstLast: {value: true, description: "Add a first and last page button"}, addJumpTo: {value: true, description: "Add a jump to input field (press enter to jump)"}, cloneToTheTop: {value: true, description: "Clone the controls to the top of the results page"} } @@ -80,7 +79,6 @@ module.exports = (_ => { SearchResultsInner: "default" } }; - } onStart () { @@ -124,83 +122,38 @@ module.exports = (_ => { if (index > -1) { let currentPage = parseInt(Math.floor(e.instance.props.search.offset / BDFDB.DiscordConstants.SEARCH_PAGE_SIZE)) + 1; let maxPage = e.instance.props.search.totalResults > 5000 ? parseInt(Math.ceil(5000 / BDFDB.DiscordConstants.SEARCH_PAGE_SIZE)) : parseInt(Math.ceil(e.instance.props.search.totalResults / BDFDB.DiscordConstants.SEARCH_PAGE_SIZE)); - let doJump = page => { - page = page < 1 ? 1 : (page > maxPage ? maxPage : page); - if (page < currentPage) BDFDB.LibraryModules.SearchPageUtils.searchPreviousPage(e.instance.props.searchId, (currentPage - page) * BDFDB.DiscordConstants.SEARCH_PAGE_SIZE); - else if (page > currentPage) BDFDB.LibraryModules.SearchPageUtils.searchNextPage(e.instance.props.searchId, (page - currentPage) * BDFDB.DiscordConstants.SEARCH_PAGE_SIZE); - }; + + children[index].props.totalResults = children[index].props.totalResults > 5000 ? 5000 : children[index].props.totalResults; + let pagination = children[index].type(children[index].props); if (!pagination) return; + pagination.props.className = BDFDB.DOMUtils.formatClassName(pagination.props.className, BDFDB.disCN.pagination, BDFDB.disCN._bettersearchpagepagination, settings.addJumpTo && BDFDB.disCN.paginationmini); - if (currentPage >= maxPage) { - pagination.props.children[2].props.className = BDFDB.DOMUtils.formatClassName(pagination.props.children[2].props.className, BDFDB.disCN.searchresultspaginationdisabled); - pagination.props.children[2].props.onClick = _ => {}; - } - pagination.props.children[0] = BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.TooltipContainer, { - text: "Previous", - children: pagination.props.children[0] - }); - pagination.props.children[2] = BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.TooltipContainer, { - text: currentPage >= maxPage ? "Max Page is 200" : "Next", - tooltipConfig: {color: currentPage >= maxPage && BDFDB.LibraryComponents.TooltipContainer.Colors.RED}, - children: pagination.props.children[2] - }); - if (settings.addFirstLast) { - pagination.props.children.unshift(BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.TooltipContainer, { - text: BDFDB.LanguageUtils.LibraryStrings.first, - "aria-label": BDFDB.LanguageUtils.LibraryStrings.first, - onClick: _ => {if (currentPage != 1) doJump(1);}, - children: BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.Clickable, { - className: BDFDB.DOMUtils.formatClassName(BDFDB.disCN.searchresultspaginationbutton, currentPage == 1 && BDFDB.disCN.searchresultspaginationdisabled), - children: BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SvgIcon, { - className: BDFDB.disCN.searchresultspaginationicon, - name: BDFDB.LibraryComponents.SvgIcon.Names.LEFT_DOUBLE_CARET - }) - }) - })); - pagination.props.children.push(BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.TooltipContainer, { - text: currentPage >= maxPage ? "Max Page is 200" : BDFDB.LanguageUtils.LibraryStrings.last, - tooltipConfig: {color: currentPage >= maxPage && BDFDB.LibraryComponents.TooltipContainer.Colors.RED}, - "aria-label": BDFDB.LanguageUtils.LibraryStrings.last, - onClick: _ => {if (currentPage != maxPage) doJump(maxPage);}, - children: BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.Clickable, { - className: BDFDB.DOMUtils.formatClassName(BDFDB.disCN.searchresultspaginationbutton, currentPage >= maxPage && BDFDB.disCN.searchresultspaginationdisabled), - children: BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SvgIcon, { - className: BDFDB.disCN.searchresultspaginationicon, - name: BDFDB.LibraryComponents.SvgIcon.Names.RIGHT_DOUBLE_CARET - }) - }) - })); - } if (settings.addJumpTo) { - pagination.props.children.push(BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.TextInput, { - key: "BSP-pagination-jumpinput", - type: "number", - size: BDFDB.LibraryComponents.TextInput.Sizes.MINI, - value: currentPage, - min: 1, - max: maxPage, - onKeyDown: (event, instance) => {if (event.which == 13) doJump(instance.props.value);} - })); - pagination.props.children.push(BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.TooltipContainer, { - text: BDFDB.LanguageUtils.LanguageStrings.JUMP, - "aria-label": BDFDB.LanguageUtils.LanguageStrings.JUMP, - onClick: (event, instance) => { - let jumpInput = BDFDB.ReactUtils.findOwner(BDFDB.ObjectUtils.get(instance, `${BDFDB.ReactUtils.instanceKey}.return`), {key: "BSP-pagination-jumpinput"}); - if (jumpInput) doJump(jumpInput.props.value); - }, - children: BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.Clickable, { - className: BDFDB.disCN.searchresultspaginationbutton, - children: BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.SvgIcon, { - className: BDFDB.disCN.searchresultspaginationicon, - style: {transform: "rotate(90deg"}, - name: BDFDB.LibraryComponents.SvgIcon.Names.RIGHT_CARET - }) + pagination.props.children = [ + pagination.props.children, + BDFDB.ReactUtils.createElement(BDFDB.LibraryComponents.TextInput, { + type: "number", + size: BDFDB.LibraryComponents.TextInput.Sizes.MINI, + value: currentPage, + min: 1, + max: maxPage, + onKeyDown: (event, instance) => { + if (event.which == 13) { + let page = instance.props.value < 1 ? 1 : (instance.props.value > maxPage ? maxPage : instance.props.value); + if (page < currentPage) BDFDB.LibraryModules.SearchPageUtils.searchPreviousPage(e.instance.props.searchId, (currentPage - page) * BDFDB.DiscordConstants.SEARCH_PAGE_SIZE); + else if (page > currentPage) BDFDB.LibraryModules.SearchPageUtils.searchNextPage(e.instance.props.searchId, (page - currentPage) * BDFDB.DiscordConstants.SEARCH_PAGE_SIZE); + } + } }) - })); + ].flat(10).filter(n => n); } children[index] = pagination; - if (settings.cloneToTheTop) children.unshift(pagination); + if (settings.cloneToTheTop) { + children.unshift(pagination); + children[children.length-1].props.className = BDFDB.DOMUtils.formatClassName(children[children.length-1].props.className, BDFDB.disCN.paginationtop); + } + pagination.props.className = BDFDB.DOMUtils.formatClassName(pagination.props.className, BDFDB.disCN.paginationbottom); } } }