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

feat: add page tabbing #946

Closed
wants to merge 6 commits into from
Closed

feat: add page tabbing #946

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ea200b0
Adding tab paging feature in siteConfig.js
sbansal3096 Sep 5, 2018
920e73e
Making changes in correct siteConfig.js file
sbansal3096 Sep 5, 2018
5b7511b
Adding script in docs.js to avoid copying it everywhere
sbansal3096 Sep 7, 2018
fe606f5
Link tabbing with right side toc
sbansal3096 Sep 22, 2018
b23ce24
resolving merge conflicts
sbansal3096 Sep 22, 2018
c163909
Giving suitable names and putting some conditions to avoid accesing u…
sbansal3096 Sep 24, 2018
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
18 changes: 18 additions & 0 deletions docs/api-site-config.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,24 @@ title: siteConfig.js

A large part of site configuration is done by editing the `siteConfig.js` file.

<div class="tab">
<button class="tablinks" id="userShowcaseLink" onclick="openConfig(0)">User Showcase</button>
<button class="tablinks" id="fieldsLink" onclick="openConfig(1)">siteConfig Fields</button>
<button class="tablinks" id="examplesLink" onclick="openConfig(2)">Examples</button>
</div>

<div id="userShowcase" class="tabcontent">

## User Showcase

The `users` array is used to store objects for each project/user that you want to show on your site. Currently this field is used by example the `pages/en/index.js` and `pages/en/users.js` files provided. Each user object should have `caption`, `image`, `infoLink`, and `pinned` fields. The `caption` is the text showed when someone hovers over the `image` of that user, and the `infoLink` is where clicking the image will bring someone. The `pinned` field determines whether or not it shows up on the `index` page.

Currently this `users` array is used only by the `index.js` and `users.js` example files. If you do not wish to have a users page or show users on the `index` page, you may remove this section.

</div>

<div id="fields" class="tabcontent">

## siteConfig Fields

The `siteConfig` object contains the bulk of the configuration settings for your website.
Expand Down Expand Up @@ -187,6 +199,10 @@ h1 {

Users can also add their own custom fields if they wish to provide some data across different files.

</div>

<div id="examples" class="tabcontent">

## Example siteConfig.js with many available fields

```js
Expand Down Expand Up @@ -283,3 +299,5 @@ const siteConfig = {

module.exports = siteConfig;
```

</div>
28 changes: 28 additions & 0 deletions v1/lib/core/DocsLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,34 @@ class DocsLayout extends React.Component {
language={metadata.language}
version={metadata.version}
metadata={metadata}>
{
<script
dangerouslySetInnerHTML={{
__html: `
function openConfig(num) {
Copy link
Contributor

@endiliey endiliey Sep 23, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In addition, I think it should not be named openConfig since its not related to config, its more related to tabbing. Use intention revealing names

The num could be better refactored/changed to the actual id we want to change the class on as well.

I find the name not meaningful enough and using number to refer might not be a good idea.

I recommend something like

function showTabContent(tabContentID) {
  // ....
  var tabContent = document.getElementById(tabContentID):
 //... blablabla
  
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The naming part can be changed, but the num part is a bit tougher. The tab content could have an id which can be passed while calling this function. But the id of right side toc cannot be known beforehand unless user explicitly gives each heading in right side toc.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok lets do what we can first.

var i, tabContent, tabLinks;
tabContent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabContent.length; i++) {
tabContent[i].style.display = "none";
}
tabLinks = document.getElementsByClassName("tablinks");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's specificly check if tabLinks exist. There is a chance that tabLinks[num] is undefined and tabLinks[num].className is accessing property of undefined which yields an error. Similar to any below codes

for (i = 0; i < tabLinks.length; i++) {
tabLinks[i].className = tabLinks[i].className.replace(" active", "");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's be more specific and use $ regex

replace(/ active$/, "")

This is to avoid replacing a very special edge case nav activeItem active to navItem active in which it should be nav activeItem

}
tabContent[num].style.display = "block";
tabLinks[num].className += " active";

rightSideToc=document.getElementsByClassName('toc-headings');
headings=rightSideToc[0].children;
for(i = 0; i < headings.length; i++){
headings[i].style.display="none";
}
headings[num].style.display="block";
}
`,
}}
/>
}
<div className="docMainWrapper wrapper">
<DocsSidebar metadata={metadata} />
<Container className="mainContainer docMainContainer">
Expand Down
2 changes: 1 addition & 1 deletion v1/lib/core/nav/OnPageNav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const Headings = ({headings}) => {
return (
<ul className="toc-headings">
{headings.map(heading => (
<li key={heading.hashLink}>
<li id={heading.hashLink} key={heading.hashLink}>
<Link hashLink={heading.hashLink} content={heading.content} />
<Headings headings={heading.children} />
</li>
Expand Down
36 changes: 36 additions & 0 deletions v1/lib/static/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2322,3 +2322,39 @@ input::placeholder {
padding: 5px 0;
}
/* End of Footer */

/* Start of Tab Bar */
.tab {
overflow: hidden;
border-bottom-color: #398555;
border-bottom-style: solid;
border-bottom-width: 2px;
}
.tabcontent {
display: solid;
border-top: none;
}
.tab button {
background-color: inherit;
float: left;
border-style: solid;
color: $primaryColor;
border-color: $primaryColor;
border-bottom-color: transparent;
border-width: 1px;
margin-right: 5px;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
border-radius: 3px 3px 0px 0px;
}
.tab button:hover {
background-color: $primaryColor;
color: #fff;
}
.tab button.active {
background-color: $primaryColor;
color: #fff;
}
/* End of Tab Bar */