tcsenpai/obsidiangarden_netlify
1
0
Fork 0
mirror of https://github.com/tcsenpai/obsidiangarden_netlify.git synced 2025-06-06 04:35:20 +00:00
Code Issues 5 Packages Projects Releases Wiki Activity

Remember opened filetree folders across pageloads

Browse Source
This commit is contained in:
Ole Eskild Steensen 2022-11-29 16:18:39 +01:00
parent 93870e1647
commit 5403302373
3 changed files with 27 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/site/_includes/components/filetree.njk
View File

@ -1,17 +1,20 @@
{% macro menuItem(fileOrFolderName, fileOrFolder, step) %}
{% macro menuItem(fileOrFolderName, fileOrFolder, step, currentPath) %}
{%if fileOrFolder.isNote or fileOrFolder.isFolder%}
<div x-show="isOpen" style="display:none" class="{{'filelist' if step>0}}">
{%if fileOrFolder.isNote %}
<div @click.stop class="notelink">
<a style="text-decoration: none;" class="filename" href="{{fileOrFolder.permalink}}">{{fileOrFolder.name}}</a>
<div @click.stop class="notelink {{ 'active-note' if fileOrFolder.permalink === permalink}}">
<i class="fa fa-sticky-note" aria-hidden="true"></i>
<a style="text-decoration: none;" class="filename" href="{{fileOrFolder.permalink}}">{{fileOrFolder.name}} </a>
</div>
{% elif fileOrFolder.isFolder%}
<div class="folder inner-folder" x-data="{isOpen: false}" @click.stop="isOpen=!isOpen">
<div class="folder inner-folder" x-data="{isOpen: $persist(false).as('{{currentPath}}')}" @click.stop="isOpen=!isOpen">
<div class="foldername-wrapper">
<i x-show="isOpen" style="display: none;" class="fa fa-caret-down"></i>
<i x-show="!isOpen" class="fa fa-caret-right"></i>
<span class="foldername">{{fileOrFolderName}}</span>
</div>
{% for fileOrFolderName, child in fileOrFolder %}
{{menuItem(fileOrFolderName, child, step+1)}}
{{menuItem(fileOrFolderName, child, step+1, (currentPath+"/"+fileOrFolderName))}}
{% endfor %}
</div>
{% endif %}
@ -29,7 +32,7 @@
<div x-show="showFilesMobile && !isDesktop" @click="showFilesMobile = false" style="display:none;" class="fullpage-overlay"></div>
<nav class="filetree-sidebar" x-show.important="isDesktop || showFilesMobile">
<nav class="filetree-sidebar" x-show.important="isDesktop || showFilesMobile" style="display: block">
<a href="/" style="text-decoration: none;">
<h1 style="text-align:center;">{{meta.siteName}}</h1>
@ -41,7 +44,7 @@
{%endif%}
<div class="folder" x-data="{isOpen: true}">
{%- for fileOrFolderName, fileOrFolder in filetree -%}
{{menuItem(fileOrFolderName, fileOrFolder, 0)}}
{{menuItem(fileOrFolderName, fileOrFolder, 0, fileOrFolderName)}}
{%- endfor -%}
</div>
</nav>

9
src/site/_includes/components/pageheader.njk
View File

@ -1,5 +1,5 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/mermaid@9.2.2/dist/mermaid.min.js"></script>
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({
startOnLoad: true,
@ -9,9 +9,10 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-sv0slik/5O0JIPdLBCR2A3XDg/1U3WuDEheZfI/DI5n8Yqc3h5kjrnr46FGBNiUAJF7rE4LHKwQ/SoSLRKAxEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/force-graph@1.42.16/dist/force-graph.common.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.10.5/dist/module.cjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.10.5/dist/module.cjs.min.js" defer></script>
<script src="//unpkg.com/force-graph"></script>
<script defer src="https://unpkg.com/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>
<script src="//unpkg.com/alpinejs" defer></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-okaidia.min.css" integrity="sha512-mIs9kKbaw6JZFfSuo+MovjU+Ntggfoj8RwAmJbVXQ5mkAX5LlgETQEweFPI18humSPHymTb5iikEOKWF7I8ncQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

15
src/site/styles/digital-garden-base.scss
View File

@ -206,12 +206,12 @@ ul.task-list {
}
.notelink {
padding: 2px 0 2px 25px;
padding: 5px 0 5px 25px;
}
.foldername {
margin-left: 5px;
.foldername-wrapper {
cursor: pointer;
margin: 4px 0 4px 2px;
}
.inner-folder {
@ -222,6 +222,15 @@ ul.task-list {
border-left: 1px solid var(--text-mark);
}
.notelink.active-note{
a{
color: var(--text-accent);
}
color: var(--text-accent);
background-color: var(--background-primary);
transform: translateX(10px);
}
.fullpage-overlay{
background-color: rgba(0,0,0,0.5);
position: absolute;