Open vagra opened 4 years ago
https://github.com/vagra/docsify/commit/6a1389af608ac86517608778793a2fcefff09752
this code like the Option A, but has some diffrents.
when loadSidebar: true, look https://kepan.org/click1/
when loadSidebar: false, look https://kepan.org/click0/
if you guys like it, I can submit a PR.
tell me you like Option A, or like Option B?
I add some changes, if some items collpsed in sidebar, keep it sync scroll.
click link to expand/collapse, and scroll the main content: total changes: https://github.com/vagra/docsify/pull/12/files loadSidebar=false: https://kepan.org/side0/ loadSidebar=true: https://kepan.org/side1/
click arrow icon to expand/collapse, don't scroll: total changes: https://github.com/vagra/docsify/pull/11/files loadSidebar=false: https://kepan.org/click0/ loadSidebar=true: https://kepan.org/click1/
I add function findParents(active), the usage is finding the parent nodes of active node, at parent
class for them, then return the top level collapsed parent node.
then set active
node to it, then scroll into view.
this fix the bug: if a node collapsed, when main content scroll to it's children, the sidebar jump to top.
function highlight(path) {
......
parents.forEach(node => node.classList.remove('parent'));
active = findParents(active);
// Scroll into view
......
}
function findParents(active) {
if (!active) {
return active;
}
let top = active;
let node = active.parentNode;
while (node) {
if (node.classList.contains('app-sub-sidebar')) {
node = node.parentNode;
continue;
} else if (node.classList.contains('has-children')) {
node.classList.add('parent');
if (node.classList.contains('collapse')) {
top = node;
}
node = node.parentNode;
continue;
} else {
return top;
}
}
}
this expand/collapse function is not like https://github.com/docsifyjs/docsify/pull/1145/ , it only:
I making this function as plugin, named sideplus
:
total changes: https://github.com/vagra/docsify/pull/13/files
loadSidebar=false: https://kepan.org/plug0/ loadSidebar=true: https://kepan.org/plug1/
however, it is not recommended to use plugin. The minimal change solution I recommend is Option A.
because there is a problem with the current docsify: when the parent item is collapsed, the page scrolls to the anchor of its child item, sidebar will lose focus, and will jump to the top.
this makes Option A the ideal solution with minimal changes.
has there been any progress on this feature?
- I found it in the plugins section.
OptionA
Feature request
Add manual expand/collapse function for app-sub-sidebar.
What problem does this feature solve?
Because docsify has been doing this before:
loadSidebar: true
, the sidebar hierarchy is:sidebar
as rootsidebar-nav
for _sidebar.mdapp-sub-sidebar
for main contentloadSidebar: false
, the sidebar hierarchy is:sidebar
as rootsidebar-nav
for main contentapp-sub-sidebar
so there is no way to use a unified method to control the expand/collapse for
sidebar-nav
andapp-sub-sidebar
, whenloadSidebar
set tofalse
, the items can't expand/collapse by click.What does the proposed API look like?
app-sub-sidebar
can expand/collapse by click.How should this be implemented in your opinion?
sidebar
as rootsidebar-nav
for _sidebar.mdapp-sub-sidebar
for main contentregardless of whether the
loadSidebar
set tofalse
ortrue
.this making the tree of main content can expand/collapse always.
Are you willing to work on this yourself?
I make some changes at: https://github.com/vagra/docsify/commit/56e643a45f18db31c2995acee5a8a8ca4b0459cd
when
loadSidebar: true
, look https://kepan.org/side1/when
loadSidebar: false
, look https://kepan.org/side0/if you guys like it, I can submit a PR.