Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

previous and next buttons added on learn pages #8136

Merged
merged 10 commits into from
Nov 6, 2023
Merged

previous and next buttons added on learn pages #8136

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d0057a2
previous and next buttons added
s-vamshi Oct 31, 2023
1a4c69d
button style updated
s-vamshi Nov 1, 2023
ee3e9c4
underline removed grey color added
s-vamshi Nov 1, 2023
1a72469
refactoring prevnext
s-vamshi Nov 1, 2023
d2b872a
refactoring code
s-vamshi Nov 1, 2023
ebb2737
prev using new logic
s-vamshi Nov 3, 2023
7aa2afd
next using new logic with logs
s-vamshi Nov 3, 2023
f2919fb
prev and next using new logic without logs
s-vamshi Nov 3, 2023
982d7fa
Unused code in PrevNext.js removed
s-vamshi Nov 3, 2023
c7efe3d
specific urls open in new tab
s-vamshi Nov 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
158 changes: 92 additions & 66 deletions components/common/prev-next/PrevNext.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,89 +20,115 @@ import * as React from 'react';
import { Col } from 'react-bootstrap';


import LearnToc from '../../../files1.json';
import { prefix } from '../../../utils/prefix';
import { useState } from 'react';
s-vamshi marked this conversation as resolved.
Show resolved Hide resolved
// import styles from './LeftNav.module.css';
s-vamshi marked this conversation as resolved.
Show resolved Hide resolved

export default function PrevNext(props) {
// const launcher = props.launcher;
// let id = props.id;
const Elements = LearnToc;
// console.log(Elements);
const launcher = props.launcher;
let id = props.id;
let mainDir = props.mainDir;
let sub = props.sub;
let third = props.third;
const Elements = props.Toc.subDirectories;
const [prevDetails,setPrevDetails]=useState({})
const [nextDetails,setNextDetails]=useState({})

// function comparePositions(a, b) {
// return a.position - b.position;
// }
function comparePositions(a, b) {
return a.position - b.position;
}

// const SortedDir = Elements.sort(comparePositions);
const SortedDir = Elements.sort(comparePositions);

// function MainDir(props) {
// let category = props.category;

// return <Accordion.Item eventKey={category.id}>
// <Accordion.Header>{category.dirName}</Accordion.Header>
// <Accordion.Body className={styles.accordionBody}>
// <ul className={styles.firstTier}>
// {
// (category.subDirectories) ?
// <SubDir directories={category.subDirectories}/>
// : <li key={category.dirName}>{category.dirName}</li>
// }
// </ul>
// </Accordion.Body>
// </Accordion.Item>;
// }
function goto(url) {
window.location.href=`${prefix}` + url;
}

function findIndexOfDir(dir) {
for (let i = 0; i < dir.length; i++) {
if (Array.isArray(dir[i].subDirectories)) {
const innerIndex = findIndexOfDir(dir[i].subDirectories);
if (innerIndex !== -1) {
return [i, innerIndex];
}
} else if (dir[i].id === id) {
return i;
}
}
return -1;
}
let [outDirIndex , innerDirIndex ] = findIndexOfDir(SortedDir);
const handlePrev = ()=>{
if(Array.isArray(innerDirIndex)){
let [middleDirIndex,thirdDirIndex] = innerDirIndex
if(thirdDirIndex===0){
middleDirIndex--;
thirdDirIndex=SortedDir[middleDirIndex].subDirectories.length-1;
if(middleDirIndex===0){
setPrevDetails(SortedDir[outDirIndex].subDirectories[middleDirIndex-1].subDirectories[SortedDir[middleDirIndex-1].subDirectories.length-1])
goto(SortedDir[outDirIndex].subDirectories[middleDirIndex-1].subDirectories[SortedDir[middleDirIndex-1].subDirectories.length-1].url)
}
}
setPrevDetails(SortedDir[outDirIndex].subDirectories[middleDirIndex].subDirectories[thirdDirIndex-1])
goto(SortedDir[outDirIndex].subDirectories[middleDirIndex].subDirectories[thirdDirIndex-1].url)
}else{
if(innerDirIndex===0){
outDirIndex--;
innerDirIndex=SortedDir[outDirIndex].subDirectories.length-1;
setPrevDetails(SortedDir[outDirIndex].subDirectories[innerDirIndex])
goto(SortedDir[outDirIndex].subDirectories[innerDirIndex].url)
}
else{
setPrevDetails(SortedDir[outDirIndex].subDirectories[innerDirIndex-1])
goto(SortedDir[outDirIndex].subDirectories[innerDirIndex-1].url)
}
}
}
const handleNext = ()=>{
if(Array.isArray(innerDirIndex)){
let [middleDirIndex,thirdDirIndex] = innerDirIndex
if(thirdDirIndex===SortedDir[outDirIndex].subDirectories[middleDirIndex].subDirectories.length-1){
middleDirIndex++;
thirdDirIndex=0;
goto(SortedDir[outDirIndex].subDirectories[middleDirIndex].subDirectories[thirdDirIndex].url)
}
else{
setNextDetails(SortedDir[outDirIndex].subDirectories[middleDirIndex].subDirectories[thirdDirIndex+1])
goto(SortedDir[outDirIndex].subDirectories[middleDirIndex].subDirectories[thirdDirIndex+1].url)
}
}else{
if(innerDirIndex===SortedDir[outDirIndex].subDirectories.length-1){
outDirIndex++;
innerDirIndex=0;
setNextDetails(SortedDir[outDirIndex].subDirectories[innerDirIndex])
goto(SortedDir[outDirIndex].subDirectories[innerDirIndex].url)
}
else{
setNextDetails(SortedDir[outDirIndex].subDirectories[innerDirIndex+1])
goto(SortedDir[outDirIndex].subDirectories[innerDirIndex+1].url)
}
}
}

// function SubDir(props) {
// let directories = props.directories.sort(comparePositions);
// return directories.map((directory) => (
// <>
// {
// (directory.isDir && directory.position > 0) ?
// <>
// <Accordion>
// <Accordion.Item eventKey={directory.id}>
// <Accordion.Header>{directory.dirName}</Accordion.Header>
// <Accordion.Body>
// <ul className={styles.secondTier}>
// <SubDir directories={directory.subDirectories}/>
// </ul>
// </Accordion.Body>
// </Accordion.Item>
// </Accordion>
// </>
// :
// (directory.position > 0) ?
// <li key={directory.dirName}>
// <a id={directory.id} className={(id === directory.id)? "active":null}
// href={(`${prefix}`)? `${prefix}` + directory.url : directory.url}>
// {directory.dirName}
// </a>
// </li>
// : null
// }
// </>

// ));
// }

return (
<>

<Col xs={6} className='prevLink'>
<div onClick={handlePrev}>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="#20b6b0" className="bi bi-chevron-left" viewBox="0 0 16 16">
<path fillRule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
</svg> &nbsp;
<a href='#'>Install Ballerina</a>
<a>Previous {prevDetails.dirName}</a>
</div>
</Col>
<Col xs={6} className='nextLink'>
<a href='#'>Language basics</a> &nbsp;
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="#20b6b0" className="bi bi-chevron-right" viewBox="0 0 16 16">
<path fillRule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>
</Col>


<div onClick={handleNext}>
<a>Next {nextDetails.dirName}</a> &nbsp;
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="#20b6b0" className="bi bi-chevron-right" viewBox="0 0 16 16">
<path fillRule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>
</div>
</Col>
</>
);
}
10 changes: 9 additions & 1 deletion pages/learn/development-tutorials/[...slug].js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import { prefix } from "../../../utils/prefix";
import LearnToc from "../../../utils/learn-lm.json";
import Toc from "../../../components/common/pg-toc/Toc";
import { highlight } from "../../../utils/highlighter";
import PrevNext from "../../../components/common/prev-next/PrevNext";

String.prototype.hashCode = function () {
var hash = 0,
Expand Down Expand Up @@ -224,7 +225,14 @@ export default function PostPage({
content={content}
handleToc={handleToc}
codes={codes} />

<PrevNext
launcher="learn"
id={id}
mainDir="development-tutorials"
sub={sub}
third={third}
Toc={LearnToc}
/>
</Container>
</Col>
<Col sm={2} className="pageToc d-none d-sm-block">
Expand Down
10 changes: 9 additions & 1 deletion pages/learn/integration-tools/[...slug].js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import { prefix } from "../../../utils/prefix";
import LearnToc from "../../../utils/learn-lm.json";
import Toc from "../../../components/common/pg-toc/Toc";
import { highlight } from "../../../utils/highlighter";
import PrevNext from "../../../components/common/prev-next/PrevNext";

String.prototype.hashCode = function () {
var hash = 0,
Expand Down Expand Up @@ -223,7 +224,14 @@ export default function PostPage({
content={content}
handleToc={handleToc}
codes={codes} />

<PrevNext
launcher="learn"
id={id}
mainDir="integration-tools"
sub={sub}
third={third}
Toc={LearnToc}
/>
</Container>
</Col>
<Col sm={2} xxl={3} className="pageToc d-none d-sm-block">
Expand Down
10 changes: 9 additions & 1 deletion pages/learn/integration/[...slug].js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import { prefix } from "../../../utils/prefix";
import LearnToc from "../../../utils/learn-lm.json";
import Toc from "../../../components/common/pg-toc/Toc";
import { highlight } from "../../../utils/highlighter";
import PrevNext from "../../../components/common/prev-next/PrevNext";

String.prototype.hashCode = function () {
var hash = 0,
Expand Down Expand Up @@ -223,7 +224,14 @@ export default function PostPage({
content={content}
handleToc={handleToc}
codes={codes} />

<PrevNext
launcher="learn"
id={id}
mainDir="integration"
sub={sub}
third={third}
Toc={LearnToc}
/>
</Container>
</Col>
<Col sm={2} xxl={3} className="pageToc d-none d-sm-block">
Expand Down
9 changes: 8 additions & 1 deletion pages/learn/references/ballerina-specifications.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import MainContent from "../../../components/common/main-content/MainContent";
import { prefix } from "../../../utils/prefix";
import LearnToc from "../../../utils/learn-lm.json";
import Toc from "../../../components/common/pg-toc/Toc";
import PrevNext from "../../../components/common/prev-next/PrevNext";

export async function getStaticProps() {
const fileName = fs.readFileSync(`spec/spec.md`, "utf-8");
Expand Down Expand Up @@ -159,7 +160,13 @@ export default function PostPage({ frontmatter, content, id }) {
<MainContent
content={content}
handleToc={handleToc} />

<PrevNext
launcher="learn"
id={id}
mainDir="references"
Toc={LearnToc}
sub={id}
/>
</Container>
</Col>
<Col sm={2} xxl={3} className="pageToc d-none d-sm-block">
Expand Down
10 changes: 9 additions & 1 deletion pages/learn/resources/[...slug].js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import { prefix } from "../../../utils/prefix";
import LearnToc from "../../../utils/learn-lm.json";
import Toc from "../../../components/common/pg-toc/Toc";
import { highlight } from "../../../utils/highlighter";
import PrevNext from "../../../components/common/prev-next/PrevNext";

String.prototype.hashCode = function () {
var hash = 0,
Expand Down Expand Up @@ -224,7 +225,14 @@ export default function PostPage({
content={content}
handleToc={handleToc}
codes={codes} />

<PrevNext
launcher="learn"
id={id}
mainDir="resources"
sub={sub}
third={third}
Toc={LearnToc}
/>
</Container>
</Col>
<Col sm={2} xxl={3} className="pageToc d-none d-sm-block">
Expand Down
8 changes: 7 additions & 1 deletion pages/why-ballerina/[...slug].js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import { prefix } from "../../utils/prefix";
import LearnToc from "../../utils/learn-lm.json";
import Toc from "../../components/common/pg-toc/Toc";
import { highlight } from "../../utils/highlighter";
import PrevNext from "../../components/common/prev-next/PrevNext";

String.prototype.hashCode = function () {
var hash = 0,
Expand Down Expand Up @@ -199,7 +200,12 @@ export default function PostPage({ frontmatter, content, id, slug, codes }) {
content={content}
handleToc={handleToc}
codes={codes} />

<PrevNext
launcher="learn"
id={id}
mainDir="why-ballerina"
Toc={LearnToc}
/>
</Container>
</Col>
<Col sm={2} className="pageToc d-none d-sm-block">
Expand Down