Skip to content

Commit

Permalink
Merge pull request #319 from pratikb64/fix-sidebar-bugs
Browse files Browse the repository at this point in the history 
Fix sidebar bugs
  • Loading branch information
@pratikb64
pratikb64 authored Jan 17, 2025
2 parents 4a806bd + ab8a084 commit fc2cadf
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 129 deletions.
55 changes: 34 additions & 21 deletions wiki/public/js/render_wiki.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,30 +45,14 @@ function set_search_params(key = "", value = "") {
window.history.pushState({}, "", url);
}

function toggleEditor() {
$(".wiki-content").toggleClass("hide");
$(".wiki-page-meta").toggleClass("hide");
$(".wiki-footer").toggleClass("hide");
$(".page-toc").toggleClass("hide");
$(".remove-sidebar-item").toggleClass("hide");
function toggleSidebarEditor() {
$(".sidebar-item, .sidebar-group").toggleClass("draggable");
$(".drop-icon").toggleClass("hide");
$(".add-sidebar-page").toggleClass("hide");
$(".sidebar-edit-mode-btn").toggleClass("hide");
$(".add-sidebar-group, .sidebar-view-mode-btn").toggleClass("hide");
$(".remove-sidebar-item").toggleClass("hide");

// avoid hiding editor when params ?editWiki or ?newWiki
if ($(".from-markdown").is(":visible")) {
$(".wiki-editor").toggleClass("hide");
$(".wiki-options, .sidebar-edit-mode-btn").toggleClass("hide");
} else {
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get("editWiki") || urlParams.get("newWiki"))
$(".wiki-options, .sidebar-edit-mode-btn").toggleClass("hide");

$(".from-markdown").toggleClass("hide");
}

// sidebar item pointer switching
if ($(".sidebar-edit-mode-btn").hasClass("hide")) {
$(".sidebar-group div, .sidebar-item, .sidebar-item a")
.not(".remove-sidebar-item")
Expand All @@ -83,6 +67,22 @@ function toggleEditor() {
.attr("href", `/${$(this).data("route")}`);
});
}
}

function toggleEditor() {
$(".wiki-content").toggleClass("hide");
$(".wiki-page-meta").toggleClass("hide");
$(".wiki-footer").toggleClass("hide");
$(".page-toc").toggleClass("hide");

// avoid hiding editor when params ?editWiki or ?newWiki
if ($(".from-markdown").is(":visible")) {
$(".wiki-editor").toggleClass("hide");
} else {
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get("editWiki") || urlParams.get("newWiki"))
$(".from-markdown").toggleClass("hide");
}

$(".wiki-title").toggleClass("hide");
}
Expand Down Expand Up @@ -255,7 +255,20 @@ window.RenderWiki = class RenderWiki extends Wiki {
},
});

$(".edit-wiki-btn, .sidebar-edit-mode-btn").on("click", function () {
$(".sidebar-edit-mode-btn, .sidebar-view-mode-btn").on(
"click",
function () {
if (frappe.session.user === "Guest") {
window.location.assign(
`/login?redirect-to=${window.location.pathname}`
);
} else {
toggleSidebarEditor();
}
}
);

$(".edit-wiki-btn").on("click", function () {
if (frappe.session.user === "Guest")
window.location.assign(
`/login?redirect-to=${window.location.pathname}`
Expand All @@ -270,7 +283,7 @@ window.RenderWiki = class RenderWiki extends Wiki {
}
});

$(".discard-edit-btn , .sidebar-view-mode-btn").on("click", () => {
$(".discard-edit-btn").on("click", () => {
// switch to view mode
toggleEditor();
$("html").css({ overflow: "auto" });
Expand Down
25 changes: 12 additions & 13 deletions wiki/public/js/wiki.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,16 @@ window.Wiki = class Wiki {
if ($(this).data("route") == page_href) {
$(this).addClass(active_class);
$(this).find("a").addClass(active_class);

const element = $(this);
setTimeout(function () {
const topOffset = element.position().top;
$(".doc-sidebar .web-sidebar")
.get(0)
.scrollTo(0, topOffset - 200);
}, 50);
}
});
// scroll the active sidebar item into view
let active_sidebar_item = $(".doc-sidebar .sidebar-item.active");
if (active_sidebar_item.length > 0) {
setTimeout(function () {
let position =
active_sidebar_item.offset().top - $(".doc-sidebar").offset().top;
$(".doc-sidebar .web-sidebar").get(0).scrollTo(0, position);
}, 50);
}
}

toggle_sidebar(event) {
Expand All @@ -32,7 +31,7 @@ window.Wiki = class Wiki {
$(".doc-sidebar,.web-sidebar").on(
"click",
".collapsible",
this.toggle_sidebar,
this.toggle_sidebar
);

$(".sidebar-item.active")
Expand All @@ -46,7 +45,7 @@ window.Wiki = class Wiki {

set_last_updated_date() {
const lastUpdatedDate = frappe.datetime.prettyDate(
$(".user-contributions").data("date"),
$(".user-contributions").data("date")
);
$(".user-contributions").append(`last updated ${lastUpdatedDate}`);
}
Expand All @@ -57,7 +56,7 @@ window.Wiki = class Wiki {
const src = $(".navbar-brand img").attr("src");
if (
!["{{ light_mode_logo }}", "{{ dark_mode_logo }}", "None", ""].includes(
altSrc,
altSrc
)
) {
$(".navbar-brand img").attr("src", altSrc);
Expand Down Expand Up @@ -117,7 +116,7 @@ window.Wiki = class Wiki {
$("pre code")
.parent("pre")
.prepend(
`<button title="Copy Code" class="btn copy-btn" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg></button>`,
`<button title="Copy Code" class="btn copy-btn" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg></button>`
);

$(".copy-btn").on("click", function () {
Expand Down
118 changes: 23 additions & 95 deletions wiki/wiki/doctype/wiki_page/templates/web_sidebar.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
{% macro render_sidebar_item(item) %}
<li
class="sidebar-item sidebar-group-item {% if item.route == current_route %}sidebar-item-active{% endif %}"
data-type="{{item.type}}"
data-name="{{item.name}}"
data-title="{{item.title or item.name}}"
data-group-name="{{item.group_name or 'sidebar-item'}}"
data-route="{{ item.route }}"
>
<li class="sidebar-item sidebar-group-item {% if item.route == current_route %}sidebar-item-active{% endif %}"
data-type="{{item.type}}" data-name="{{item.name}}" data-title="{{item.title or item.name}}"
data-group-name="{{item.group_name or 'sidebar-item'}}" data-route="{{ item.route }}">
<div>
<a class="text-sm sidebar-group-item-title" href="/{{ item.route }}">
{{ item.title or item.name }}
Expand All @@ -17,119 +12,54 @@
sidebar_items | len > 0 -%}
<ul class="list-unstyled sidebar-group-list" style="min-height: 20px">
{% for sidebar_group in sidebar_items -%}
<li
class="sidebar-group"
data-type="Wiki Sidebar"
data-title="{{sidebar_group}}"
>
<li class="sidebar-group" data-type="Wiki Sidebar" data-title="{{sidebar_group}}">
<div class="sidebar-group-container collapsible">
<span class="sidebar-group-title">{{ sidebar_group }}</span>
<span
class="add-sidebar-page hide"
data-group-name="{{ sidebar_group }}"
data-toggle="tooltip"
data-placement="top"
title="New Wiki Page in the group {{ sidebar_group }}"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-plus"
>
<span class="add-sidebar-page hide" data-group-name="{{ sidebar_group }}" data-toggle="tooltip"
data-placement="top" title="New Wiki Page in the group {{ sidebar_group }}">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</span>
<span
class="drop-icon {% if collapse_sidebar_groups and sidebar_group != active_sidebar_group %}rotate{% endif %}"
>
<svg
viewBox="0 0 24 24"
width="16"
height="16"
stroke="currentColor"
stroke-width="2"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
class="css-i6dzq1"
>
class="drop-icon {% if collapse_sidebar_groups and sidebar_group != active_sidebar_group %}rotate{% endif %}">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none"
stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</span>
</div>
<ul
class="list-unstyled sidebar-group-item-list {% if collapse_sidebar_groups and sidebar_group != active_sidebar_group %}hidden{% endif %}"
style="min-height: 20px"
>
<ul class="list-unstyled sidebar-group-item-list hidden" style="min-height: 20px">
{% for item in sidebar_items[sidebar_group] -%} {{
render_sidebar_item(item) }} {%- endfor %}
</ul>
</li>
{%- endfor %}
</ul>
<div class="d-none d-lg-block sidebar-options">
<div
class="sidebar-edit-mode-btn text-muted"
data-toggle="tooltip"
data-placement="top"
title="Changes to sidebar will be automatically saved"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-edit-3"
>
<div class="sidebar-edit-mode-btn text-muted" data-toggle="tooltip" data-placement="top"
title="Changes to sidebar will be automatically saved">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-3">
<path d="M12 20h9"></path>
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
</svg>
<span class="small">Edit Sidebar</span>
</div>
<div class="add-sidebar-group text-muted hide">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-plus"
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
<span class="small">Add Group</span>
</div>
<div class="sidebar-view-mode-btn text-muted hide">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-sidebar"
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sidebar">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<line x1="9" y1="3" x2="9" y2="21"></line>
</svg>
Expand All @@ -139,13 +69,11 @@
{%- endif -%} {% endmacro %} {% macro my_account() %}
<ul class="list-unstyled management">
<li class="sidebar-item">
<a class="new-wiki-page text-muted" href="placeholder_link"
>{{ _("Add a new page") }}</a
>
<a class="new-wiki-page text-muted" href="placeholder_link">{{ _("Add a new page") }}</a>
</li>
</ul>
{% endmacro %}

<div class="web-sidebar" data-name="{{wiki_search_scope}}">
<div class="sidebar-items">{{ render_sidebar_items(sidebar_items) }}</div>
</div>
</div>

0 comments on commit fc2cadf

Please sign in to comment.