diginaut/digimarks
1
0
Fork 0
mirror of https://github.com/aquatix/digimarks.git synced 2025-12-06 22:05:09 +01:00
Code Issues Releases Wiki Activity

Toggle between showing the bookmarks and a list of the tags

Browse Source
This commit is contained in:
Michiel Scholten
2025-05-06 16:21:56 +02:00
parent d073bc079a
commit 5d71250408
3 changed files with 51 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/digimarks/static/css/digimarks.css
View File

@@ -8,6 +8,10 @@
background-color: #fb8c00;
}
button:hover {
background-color: #d57803;
}
button:focus {
border-color: #d57803;
}

17
src/digimarks/static/js/digimarks.js
View File

@@ -9,6 +9,9 @@ document.addEventListener('alpine:init', () => {
bookmarks: [],
tags: [],
show_bookmarks: Alpine.$persist(true).as('show_bookmarks'),
show_tags: Alpine.$persist(false).as('show_tags'),
/* Loading indicator */
loading: false,
@@ -113,6 +116,20 @@ document.addEventListener('alpine:init', () => {
this.sort_created_asc = true;
this.bookmarks.sort((a, b) => a.created_date.localeCompare(b.created_date));
}
},
async toggleTagPage() {
console.log('Toggle tag page');
this.show_bookmarks = !this.show_bookmarks;
this.show_tags = !this.show_bookmarks;
/*
if (this.show_bookmarks) {
this.show_tags = true;
this.show_bookmarks = false;
} else {
this.show_bookmarks = true;
this.show_tags = false;
}
*/
}
})
});

55
src/digimarks/templates/user_index.html
View File

@@ -3,38 +3,42 @@
{% block pageheader %}Bookmarks{% endblock %}
{% block pagecontent %}
<div id="container"
x-init="$store.digimarks.userKey = '{{ user_key }}'; $store.digimarks.loadCache(); $store.digimarks.getBookmarks()"
x-data="">
<header>
<header>
<nav class="menu">
<ul>
<li>digimarks</li>
<li>
<button x-data @click="$store.digimarks.toggleTagPage()"
:class="$store.digimarks.show_tags && 'active'">tags
</button>
</li>
<li>
<button x-data>add bookmark</button>
</li>
</ul>
<input x-model="$store.digimarks.search" placeholder="Search...">
</nav>
</header>
<main x-init="$store.digimarks.userKey = '{{ user_key }}'; $store.digimarks.loadCache(); $store.digimarks.getBookmarks()"
x-data="">
<nav class="menu">
<ul>
<li>digimarks</li>
<li>tags</li>
<li>add bookmark</li>
</ul>
<input x-model="$store.digimarks.search" placeholder="Search...">
</nav>
</header>
<main>
<p>Welcome user <span x-text="$store.digimarks.userKey"></span>!</p>
<div x-show="$store.digimarks.loading">Loading...</div>
<p>Welcome user <span x-text="$store.digimarks.userKey"></span>!</p>
<div x-show="$store.digimarks.loading">Loading...</div>
<section x-cloak x-show="$store.digimarks.show_bookmarks" x-transition>
<p>
<button @click="$store.digimarks.sortAlphabetically()"
:class="$store.digimarks.sort_title_asc === true && 'active'">a-z &darr;
:class="$store.digimarks.sort_title_asc && 'active'">a-z &darr;
</button>
<button @click="$store.digimarks.sortAlphabetically('desc')"
:class="$store.digimarks.sort_title_desc === true && 'active'">z-a &uarr;
:class="$store.digimarks.sort_title_desc && 'active'">z-a &uarr;
</button>
<button @click="$store.digimarks.sortCreated()"
:class="$store.digimarks.sort_created_asc === true && 'active'">date &darr;
:class="$store.digimarks.sort_created_asc && 'active'">date &darr;
</button>
<button @click="$store.digimarks.sortCreated('desc')"
:class="$store.digimarks.sort_created_desc === true && 'active'">date &uarr;
:class="$store.digimarks.sort_created_desc && 'active'">date &uarr;
</button>
</p>
@@ -43,13 +47,14 @@
<li><a x-text="bookmark.title" x-bind:href="bookmark.url" target="_blank"></a></li>
</template>
</ul>
</section>
<h2>tags</h2>
<ul x-cloak>
<section x-cloak x-show="$store.digimarks.show_tags" x-transition>
<ul>
<template x-for="tag in $store.digimarks.filteredTags" :key="tag">
<li x-text="tag"></li>
</template>
</ul>
</main>
</div>
</section>
</main>
{% endblock %}