Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/master' into replace-icons
Browse files Browse the repository at this point in the history
  • Loading branch information
Maija Y committed Nov 22, 2023
2 parents 8c87231 + a0f1386 commit 12d3a3f
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 76 deletions.
141 changes: 72 additions & 69 deletions services/course-material/src/components/HeadingsNavigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,82 +238,85 @@ const HeadingsNavigation: React.FC<React.PropsWithChildren<HeadingsNavigationPro
`}
aria-hidden={Boolean(realCollapsed)}
>
<h3
className={css`
font-size: 16px;
color: ${baseTheme.colors.gray[600]};
font-weight: 700;
display: inline;
position: relative;
left: -2px;
bottom: -3px;
`}
>
{t("in-this-page")}
</h3>

<StyledTopics role="navigation">
{!realCollapsed && (
<div>
{headings &&
headings.map(({ headingsNavigationIndex, title, element }) => {
return (
<button
className={css`
border: none;
background: unset;
text-align: left;
width: 100%;
padding: 0;
`}
tabIndex={realCollapsed ? -1 : 0}
key={headingsNavigationIndex}
onClick={(e) => {
e.preventDefault()
try {
// Atomic, since Javascript is single-threaded
numberOfCallbacksScrollingTheDocument.current += 1
setActiveHeading(headingsNavigationIndex)
<h3
className={css`
font-size: 16px;
color: ${baseTheme.colors.gray[600]};
font-weight: 700;
display: inline;
position: relative;
left: -2px;
bottom: -3px;
`}
>
{t("in-this-page")}
</h3>
<StyledTopics role="navigation">
<div>
{headings &&
headings.map(({ headingsNavigationIndex, title, element }) => {
return (
<button
className={css`
border: none;
background: unset;
text-align: left;
width: 100%;
padding: 0;
`}
tabIndex={realCollapsed ? -1 : 0}
key={headingsNavigationIndex}
onClick={(e) => {
e.preventDefault()
try {
// Atomic, since Javascript is single-threaded
numberOfCallbacksScrollingTheDocument.current += 1
setActiveHeading(headingsNavigationIndex)

// Better to use to use the parent provided by the block -- it makes scrolling to hero section to reveal the whole block
const blockElement =
element.closest(`.${courseMaterialBlockClass}`) || element
// Better to use to use the parent provided by the block -- it makes scrolling to hero section to reveal the whole block
const blockElement =
element.closest(`.${courseMaterialBlockClass}`) || element

// we have to calculate the position of the element because it might have moved.
const elementYCoordinateRelativeToViewport =
blockElement.getBoundingClientRect().top
const top = elementYCoordinateRelativeToViewport + window.scrollY
window.scrollTo({
top: top + HEADING_SCROLL_DESTINATION_START_OFFSET_PX,
behavior: "smooth",
})
} finally {
// We don't know when the scroll animation is done, so we'll guess
// The timeout has to be unfortunately long because the scroll animation may take quite some time
setTimeout(() => {
// Atomic, since Javascript is single-threaded
numberOfCallbacksScrollingTheDocument.current -= 1
// Since we have skipped updating the active heading indicator for some time, it's a good idea to update it now
onScrollCallback2()
}, 3000)
}
}}
>
<StTopic
className={css`
${activeHeading === headingsNavigationIndex &&
`background: #DAE6E5;
// we have to calculate the position of the element because it might have moved.
const elementYCoordinateRelativeToViewport =
blockElement.getBoundingClientRect().top
const top = elementYCoordinateRelativeToViewport + window.scrollY
window.scrollTo({
top: top + HEADING_SCROLL_DESTINATION_START_OFFSET_PX,
behavior: "smooth",
})
} finally {
// We don't know when the scroll animation is done, so we'll guess
// The timeout has to be unfortunately long because the scroll animation may take quite some time
setTimeout(() => {
// Atomic, since Javascript is single-threaded
numberOfCallbacksScrollingTheDocument.current -= 1
// Since we have skipped updating the active heading indicator for some time, it's a good idea to update it now
onScrollCallback2()
}, 3000)
}
}}
>
<StTopic
className={css`
${activeHeading === headingsNavigationIndex &&
`background: #DAE6E5;
&:before{
background: #1F6964 !important
}`}
`}
>
<div>{title}</div>
</StTopic>
</button>
)
})}
`}
>
<div>{title}</div>
</StTopic>
</button>
)
})}
</div>
</StyledTopics>
</div>
</StyledTopics>
)}
</div>

<button
Expand Down
29 changes: 23 additions & 6 deletions shared-module/src/components/Pagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@ const Pagination: React.FC<React.PropsWithChildren<React.PropsWithChildren<Pagin
<LeftButton
tabIndex={0}
role="button"
key={t("go-to-previous-page")}
aria-label={t("go-to-previous-page")}
onClick={handleChangeEvent(Math.max(1, page - 1))}
>
Expand All @@ -135,14 +136,15 @@ const Pagination: React.FC<React.PropsWithChildren<React.PropsWithChildren<Pagin
// In case there is nothing
if (totalPages === 0) {
components.push(
<SelectedCircle aria-label={t("current-page-x", { number: 1 })}>
<SelectedCircle key={t("current-page-x")} aria-label={t("current-page-x", { number: 1 })}>
<CircleText>1</CircleText>
</SelectedCircle>,
)
components.push(
<RightButton
tabIndex={0}
role="button"
key={t("go-to-next-page")}
aria-label={t("go-to-next-page")}
onClick={handleChangeEvent(Math.min(page + 1, totalPages))}
>
Expand All @@ -160,7 +162,7 @@ const Pagination: React.FC<React.PropsWithChildren<React.PropsWithChildren<Pagin
for (let idx = 1; idx <= totalPages; idx++) {
if (idx == page) {
components.push(
<SelectedCircle aria-label={t("current-page-x", { number: idx })}>
<SelectedCircle key={idx} aria-label={t("current-page-x", { number: idx })}>
<CircleText>{idx}</CircleText>
</SelectedCircle>,
)
Expand All @@ -169,6 +171,7 @@ const Pagination: React.FC<React.PropsWithChildren<React.PropsWithChildren<Pagin
<Circle
tabIndex={0}
role="button"
key={t("go-to-page-x")}
aria-label={t("go-to-page-x", { number: idx })}
onClick={handleChangeEvent(idx)}
>
Expand All @@ -182,6 +185,7 @@ const Pagination: React.FC<React.PropsWithChildren<React.PropsWithChildren<Pagin
<RightButton
tabIndex={0}
role="button"
key={t("go-to-next-page")}
aria-label={t("go-to-next-page")}
onClick={handleChangeEvent(Math.min(page + 1, totalPages))}
>
Expand All @@ -199,14 +203,15 @@ const Pagination: React.FC<React.PropsWithChildren<React.PropsWithChildren<Pagin
for (let idx = 1; idx <= CAPACITY; idx++) {
if (idx == page) {
components.push(
<SelectedCircle aria-label={t("current-page-x", { number: idx })}>
<SelectedCircle key={idx} aria-label={t("current-page-x", { number: idx })}>
<CircleText>{idx}</CircleText>
</SelectedCircle>,
)
} else {
components.push(
<Circle
role="button"
key={t("go-to-page-x")}
aria-label={t("go-to-page-x", { number: idx })}
onClick={handleChangeEvent(idx)}
>
Expand All @@ -222,7 +227,11 @@ const Pagination: React.FC<React.PropsWithChildren<React.PropsWithChildren<Pagin
</HorizontalDots>,
)
}
components.push(<Circle onClick={handleChangeEvent(totalPages)}> {totalPages}</Circle>)
components.push(
<Circle key={totalPages} onClick={handleChangeEvent(totalPages)}>
{totalPages}
</Circle>,
)
} else if (CAPACITY <= page && page <= totalPages - CAPACITY + 1) {
components.push(<Circle onClick={handleChangeEvent(1)}> 1 </Circle>)
components.push(
Expand All @@ -234,21 +243,26 @@ const Pagination: React.FC<React.PropsWithChildren<React.PropsWithChildren<Pagin
<Circle
tabIndex={0}
role="button"
key={t("go-to-page-x")}
aria-label={t("go-to-page-x", { number: page - 1 })}
onClick={handleChangeEvent(page - 1)}
>
<CircleText>{page - 1}</CircleText>
</Circle>,
)
components.push(
<SelectedCircle aria-label={t("current-page-x", { number: page })}>
<SelectedCircle
key={t("current-page-x")}
aria-label={t("current-page-x", { number: page })}
>
<CircleText>{page}</CircleText>
</SelectedCircle>,
)
components.push(
<Circle
tabIndex={0}
role="button"
key={t("go-to-page-x")}
aria-label={t("go-to-page-x", { number: page + 1 })}
onClick={handleChangeEvent(page + 1)}
>
Expand All @@ -264,6 +278,7 @@ const Pagination: React.FC<React.PropsWithChildren<React.PropsWithChildren<Pagin
<Circle
tabIndex={0}
role="button"
key={t("go-to-page-x")}
aria-label={t("go-to-page-x", { number: totalPages })}
onClick={handleChangeEvent(totalPages)}
>
Expand All @@ -275,6 +290,7 @@ const Pagination: React.FC<React.PropsWithChildren<React.PropsWithChildren<Pagin
<Circle
tabIndex={0}
role="button"
key={t("go-to-page-x")}
aria-label={t("go-to-page-x", { number: 1 })}
onClick={handleChangeEvent(1)}
>
Expand All @@ -289,7 +305,7 @@ const Pagination: React.FC<React.PropsWithChildren<React.PropsWithChildren<Pagin
for (let idx = totalPages - CAPACITY + 1; idx <= totalPages; idx++) {
if (idx == page) {
components.push(
<SelectedCircle aria-label={t("current-page-x", { number: idx })}>
<SelectedCircle key={idx} aria-label={t("current-page-x", { number: idx })}>
<CircleText>{idx}</CircleText>
</SelectedCircle>,
)
Expand All @@ -298,6 +314,7 @@ const Pagination: React.FC<React.PropsWithChildren<React.PropsWithChildren<Pagin
<Circle
tabIndex={0}
role="button"
key={t("go-to-page-x")}
aria-label={t("go-to-page-x", { number: idx })}
onClick={handleChangeEvent(idx)}
>
Expand Down
2 changes: 1 addition & 1 deletion shared-module/src/components/PaginationItemsPerPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const PaginationItemsPerPage: React.FC<PaginationItemsPerPageProps> = ({ paginat
label={t("label-items-per-page")}
id={"set-pagination-limit"}
value={paginationInfo.limit.toString()}
onChange={(o) => {
onChangeByValue={(o) => {
paginationInfo.setLimit(Number(o))
}}
options={options}
Expand Down

0 comments on commit 12d3a3f

Please sign in to comment.