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 all commits
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
330 changes: 254 additions & 76 deletions components/common/prev-next/PrevNext.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,92 +17,270 @@
*/

import * as React from 'react';
import { Col } from 'react-bootstrap';
import { useState } from 'react';
import { Row,Col } from 'react-bootstrap';
import Link from "next/link";


import LearnToc from '../../../files1.json';
import { prefix } from '../../../utils/prefix';
// import styles from './LeftNav.module.css';

export default function PrevNext(props) {
// const launcher = props.launcher;
// let id = props.id;
const Elements = LearnToc;
// console.log(Elements);

// function comparePositions(a, b) {
// return a.position - b.position;
// }
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 [isPrev,setIsPrev] = useState(false)
const [nextDetails,setNextDetails]=useState({})
const [btnHover, updateBtnHover] = useState([false, false]);

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

// 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 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
// }
// </>
const SortedDir = Elements.sort(comparePositions);

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


const handlePrev = (outDirIndex, innerDirIndex) => {
let newOutDirIndex = outDirIndex;
let newInnerDirIndex = innerDirIndex;

if(Array.isArray(innerDirIndex)){
if(Array.isArray(innerDirIndex[1])){
if(innerDirIndex[1][1] > 0){
newInnerDirIndex[1][1]--;

setPrevDetails(SortedDir[outDirIndex].subDirectories[newInnerDirIndex[0]].subDirectories[newInnerDirIndex[1][0]].subDirectories[newInnerDirIndex[1][1]]);
}
else{

if(innerDirIndex[1][0] > 0){
newInnerDirIndex[1][0]--;

setPrevDetails(SortedDir[outDirIndex].subDirectories[newInnerDirIndex[0]].subDirectories[newInnerDirIndex[1][0]]);
}
else if(innerDirIndex[0] > 0){
newInnerDirIndex[0]--;

setPrevDetails(SortedDir[outDirIndex].subDirectories[newInnerDirIndex[0]].subDirectories[SortedDir[newOutDirIndex].subDirectories[newInnerDirIndex[0]].subDirectories.length-1].subDirectories[SortedDir[newOutDirIndex].subDirectories[newInnerDirIndex[0]].subDirectories[SortedDir[newOutDirIndex].subDirectories[newInnerDirIndex[0]].subDirectories.length-1].subDirectories.length-1]);
}
}
}
else{
if(innerDirIndex[1] > 0){
newInnerDirIndex[1]--;

setPrevDetails(SortedDir[outDirIndex].subDirectories[newInnerDirIndex[0]].subDirectories[newInnerDirIndex[1]]);
}
else{
if(innerDirIndex[0] > 0){
newInnerDirIndex[0]--;

setPrevDetails(SortedDir[outDirIndex].subDirectories[newInnerDirIndex[0]].subDirectories[SortedDir[newOutDirIndex].subDirectories[newInnerDirIndex[0]].subDirectories.length-1]);
}
else if(outDirIndex > 0){
newOutDirIndex--;

setPrevDetails(SortedDir[newOutDirIndex].subDirectories[SortedDir[newOutDirIndex].subDirectories.length-1]);
}
}
}

}
else{
if(innerDirIndex > 0){
newInnerDirIndex--;

setPrevDetails(SortedDir[outDirIndex].subDirectories[newInnerDirIndex]);
}
else{
if(outDirIndex > 0){
newOutDirIndex--;

setPrevDetails(SortedDir[newOutDirIndex].subDirectories[SortedDir[newOutDirIndex].subDirectories.length-1]);
}
}
}

};

const handleNext = () => {
let [outDirIndex , innerDirIndex ] = findIndexOfDir(SortedDir);
let newOutDirIndex = outDirIndex;
let newInnerDirIndex = innerDirIndex;

if(Array.isArray(innerDirIndex)){

// ));
// }
if(Array.isArray(innerDirIndex[1])){
if(innerDirIndex[1][1] < SortedDir[outDirIndex].subDirectories[innerDirIndex[0]].subDirectories[innerDirIndex[1][0]].subDirectories.length-1){
newInnerDirIndex[1][1]++;

setNextDetails(SortedDir[outDirIndex].subDirectories[newInnerDirIndex[0]].subDirectories[newInnerDirIndex[1][0]].subDirectories[newInnerDirIndex[1][1]]);
}
else{

if(innerDirIndex[1][0] < SortedDir[outDirIndex].subDirectories[innerDirIndex[0]].subDirectories.length-1){
newInnerDirIndex[1][0]++;


if(SortedDir[outDirIndex].subDirectories[newInnerDirIndex[0]].subDirectories[newInnerDirIndex[1][0]].subDirectories!==undefined)
setNextDetails(SortedDir[outDirIndex].subDirectories[newInnerDirIndex[0]].subDirectories[newInnerDirIndex[1][0]].subDirectories[newInnerDirIndex[1][0]]);
else{
setNextDetails(SortedDir[outDirIndex].subDirectories[newInnerDirIndex[0]].subDirectories[newInnerDirIndex[1][0]]);

}
}
else if(innerDirIndex[0] < SortedDir[outDirIndex].subDirectories.length-1){
newInnerDirIndex[0]++;

setNextDetails(SortedDir[outDirIndex].subDirectories[newInnerDirIndex[0]].subDirectories[0].subDirectories[0]);
}
}
}
else{
if(innerDirIndex[1] < SortedDir[outDirIndex].subDirectories[innerDirIndex[0]].subDirectories.length-1){
newInnerDirIndex[1]++;

if(SortedDir[outDirIndex].subDirectories[newInnerDirIndex[0]].subDirectories[newInnerDirIndex[1]].subDirectories!==undefined){
setNextDetails(SortedDir[outDirIndex].subDirectories[newInnerDirIndex[0]].subDirectories[newInnerDirIndex[1]].subDirectories[0]);
}
else{

setNextDetails(SortedDir[outDirIndex].subDirectories[newInnerDirIndex[0]].subDirectories[newInnerDirIndex[1]]);
}
}
else{
if(innerDirIndex[0] < SortedDir[outDirIndex].subDirectories.length-1){
newInnerDirIndex[0]++;

setNextDetails(SortedDir[outDirIndex].subDirectories[newInnerDirIndex[0]].subDirectories[0]);
}
else if(outDirIndex < SortedDir.length-1){
newOutDirIndex++;

setNextDetails(SortedDir[newOutDirIndex].subDirectories[0].subDirectories[0]);
}
}
}

}
else{
if(innerDirIndex < SortedDir[outDirIndex].subDirectories.length-1){
newInnerDirIndex++;

setNextDetails(SortedDir[outDirIndex].subDirectories[newInnerDirIndex]);
}
else{
if(outDirIndex < SortedDir.length-1){
newOutDirIndex++;

setNextDetails(SortedDir[newOutDirIndex].subDirectories[0]);
}
}
}
};

React.useEffect(()=>{
let [outDirIndex , innerDirIndex ] = findIndexOfDir(SortedDir);
handlePrev(outDirIndex , innerDirIndex )
handleNext()
},[])

function goto(url,dir) {
if((dir === 'API Docs' || dir === "Ballerina by Example" ||
dir === "Visual Studio Code extension" || dir === "Ballerina API Docs" ||
dir === "Enterprise Integration Patterns (EIP)" || dir === "Pre-built integrations") ||
dir === "Integration tutorials"){
window.open(`${prefix}` + url,"_blank")
}
else{
window.location.href=`${prefix}` + url;
}
}

return (
<>

<Col xs={6} className='prevLink'>
<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>
</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>
<Row className="mt-5 mb-5">
<Col sm={6}>
{prevDetails.url!=="" ? <div className="btnContainer d-flex align-items-center me-auto" onClick={()=>goto(prevDetails.url,prevDetails.dirName)}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="#3ad1ca"
className={`${
btnHover[0] ? "prevNextBtnArrowHover" : "btnArrow"
} bi bi-arrow-right`}
viewBox="0 0 16 16"
onMouseEnter={() => updateBtnHover([true, false])}
onMouseOut={() => updateBtnHover([false, false])}
>
<path
fillRule="evenodd"
d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"
/>
</svg>
<div className="d-flex flex-column ms-4">
<span className="btnPrev">Previous</span>
<span
className={btnHover[0] ? "prevNextBtnHover" : "btnTitle"}
onMouseEnter={() => updateBtnHover([true, false])}
onMouseOut={() => updateBtnHover([false, false])}
>
{prevDetails.dirName}
</span>
</div>
</div>:''}

</Col>
<Col sm={6}>
{Object.keys(nextDetails).length!==0 ? <div className="btnContainer d-flex align-items-center ms-auto" onClick={()=>goto(nextDetails.url,nextDetails.dirName)}>
<div className="d-flex flex-column me-4">
<span className="btnNext">Next</span>
<span
className={btnHover[1] ? "prevNextBtnHover" : "btnTitle"}
onMouseEnter={() => updateBtnHover([false, true])}
onMouseOut={() => updateBtnHover([false, false])}
>
{nextDetails.dirName}
</span>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="#3ad1ca"
className={`${
btnHover[1] ? "prevNextBtnArrowHover" : "btnArrow"
} bi bi-arrow-right`}
viewBox="0 0 16 16"
onMouseEnter={() => updateBtnHover([false, true])}
onMouseOut={() => updateBtnHover([false, false])}
>
<path
fill-rule="evenodd"
d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"
/>
</svg>
</div>:''}
</Col>
</Row>


</>
);
}
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
Loading