This commit is contained in:
Mirco Wittrien 2021-01-09 19:17:16 +01:00
parent 98a44610f5
commit ad654af932
2 changed files with 27 additions and 84 deletions

View File

@ -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;

View File

@ -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);
}
}
}