marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit button (scoll view stopped working)

Browse Source
This commit is contained in:
yashsinghcodes
2024-05-10 10:47:57 +00:00
parent 42f4729969
commit 199058652d
1 changed files with 88 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/Docs.jsx
+88 -13
View File
@@ -95,12 +95,12 @@ const useIntersectionObserver = (setActiveId) => {
}) })
if (visibleHeadings.length > 0) { if (visibleHeadings.length > 0) {
console.log(visibleHeadings)
setActiveId(visibleHeadings[0].target.id) setActiveId(visibleHeadings[0].target.id)
} }
} }
const observer = new IntersectionObserver(callback, { const observer = new IntersectionObserver(callback, {
rootMargin: "10%",
}); });
const headingElements = Array.from(document.querySelectorAll("h2")) const headingElements = Array.from(document.querySelectorAll("h2"))
@@ -277,6 +277,7 @@ const Docs = (defaultprops) => {
}, []) }, [])
useIntersectionObserver(setActiveId); useIntersectionObserver(setActiveId);
console.log(activeId)
function handleClick(event) { function handleClick(event) {
setAnchorEl(event.currentTarget); setAnchorEl(event.currentTarget);
@@ -307,7 +308,7 @@ const Docs = (defaultprops) => {
if (hash) { if (hash) {
const element = document.getElementById(hash) const element = document.getElementById(hash)
if (element) { if (element) {
element.scrollIntoView({ behavior: 'smooth' }) element.scrollIntoView({ behavior: "instant" })
} }
} }
@@ -366,18 +367,98 @@ const Docs = (defaultprops) => {
const element = React.createElement( const element = React.createElement(
`h${props.level}`, `h${props.level}`,
{ style: { marginTop: props.level === 1 ? 20 : 50, scrollPaddingTop: "50px" }, id: `${id}` }, { style: { marginTop: props.level === 1 ? 20 : 50 }, id: `${id}` },
props.children props.children
); );
const [hover, setHover] = useState(false);
var extraInfo = ""; var extraInfo = "";
if (props.level === 1) {
extraInfo = (
<div
style={{
backgroundColor: theme.palette.inputColor,
padding: 15,
borderRadius: theme.palette.borderRadius,
marginBottom: 30,
display: "flex",
}}
>
<div style={{ flex: 3, display: "flex", vAlign: "center", position: "sticky", top: 50, }}>
{mobile ? null : (
<Typography style={{ display: "inline", marginTop: 6 }}>
<a
rel="noopener noreferrer"
target="_blank"
href={selectedMeta.link}
style={{ textDecoration: "none", color: "#f85a3e" }}
>
<Button style={{ color: "white", }} variant="outlined" color="secondary">
<EditIcon /> &nbsp;&nbsp;Edit
</Button>
</a>
</Typography>
)}
{mobile ? null : (
<div
style={{
height: "100%",
width: 1,
backgroundColor: "white",
marginLeft: 50,
marginRight: 50,
}}
/>
)}
<Typography style={{ display: "inline", marginTop: 11 }}>
{selectedMeta.read_time} minute
{selectedMeta.read_time === 1 ? "" : "s"} to read
</Typography>
</div>
<div style={{ flex: 2 }}>
{mobile ||
selectedMeta.contributors === undefined ||
selectedMeta.contributors === null ? (
""
) : (
<div style={{ margin: 10, height: "100%", display: "inline" }}>
{selectedMeta.contributors.slice(0, 7).map((data, index) => {
return (
<a
key={index}
rel="noopener noreferrer"
target="_blank"
href={data.url}
style={{ textDecoration: "none", color: "#f85a3e" }}
>
<Tooltip title={data.url} placement="bottom">
<img
alt={data.url}
src={data.image}
style={{
marginTop: 5,
marginRight: 10,
height: 40,
borderRadius: 40,
}}
/>
</Tooltip>
</a>
);
})}
</div>
)}
</div>
</div>
);
}
if (extraInfo !== "" && props.level === 1 && props.children !== undefined && props.children !== null && props.children.length > 0) { if (extraInfo !== "" && props.level === 1 && props.children !== undefined && props.children !== null && props.children.length > 0) {
if (props.children[0].toLowerCase().includes("privacy") || props.children[0].toLowerCase().includes("terms")) { if (props.children[0].toLowerCase().includes("privacy") || props.children[0].toLowerCase().includes("terms")) {
extraInfo = "" extraInfo = ""
} }
} }
return ( return (
<Typography <Typography
onMouseOver={() => { onMouseOver={() => {
@@ -443,8 +524,6 @@ const Docs = (defaultprops) => {
}; };
const fetchDocs = (docId) => { const fetchDocs = (docId) => {
setActiveId("")
setTocLines([])
fetch(`${globalUrl}/api/v1/docs/${docId}`, { fetch(`${globalUrl}/api/v1/docs/${docId}`, {
method: "GET", method: "GET",
headers: { headers: {
@@ -632,9 +711,6 @@ const Docs = (defaultprops) => {
fontSize: isMobile ? "1.3rem" : "1.1rem", fontSize: isMobile ? "1.3rem" : "1.1rem",
}; };
const CustomButton = (props) => { const CustomButton = (props) => {
const { title, icon, link } = props const { title, icon, link } = props
@@ -783,7 +859,6 @@ const Docs = (defaultprops) => {
if (item === undefined) { if (item === undefined) {
return null; return null;
} }
const path = "/docs/" + item; const path = "/docs/" + item;
const newname = const newname =
item.charAt(0).toUpperCase() + item.charAt(0).toUpperCase() +
@@ -843,6 +918,7 @@ const Docs = (defaultprops) => {
<div className="toc"> <div className="toc">
<ListItemButton <ListItemButton
key={data.text} key={data.text}
href={`#${data.id}`}
style={{ style={{
color: activeId === data.id ? "#f86a3e" : "inherit", color: activeId === data.id ? "#f86a3e" : "inherit",
textDecoration: "none", textDecoration: "none",
@@ -853,10 +929,9 @@ const Docs = (defaultprops) => {
paddingRight: "8px", paddingRight: "8px",
lineHeight: "20px", lineHeight: "20px",
}} }}
onClick={() => ( onClick={(e) => {
handleCollapse(index) handleCollapse(index)
)} }}
href={`#${data.id}`}
> >
{data.title} {data.title}
{data.items.length > 0 ? ( {data.items.length > 0 ? (