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; background-color: #fb8c00;
} }
button:hover {
background-color: #d57803;
}
button:focus { button:focus {
border-color: #d57803; border-color: #d57803;
} }

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

@@ -9,6 +9,9 @@ document.addEventListener('alpine:init', () => {
bookmarks: [], bookmarks: [],
tags: [], tags: [],
show_bookmarks: Alpine.$persist(true).as('show_bookmarks'),
show_tags: Alpine.$persist(false).as('show_tags'),
/* Loading indicator */ /* Loading indicator */
loading: false, loading: false,
@@ -113,6 +116,20 @@ document.addEventListener('alpine:init', () => {
this.sort_created_asc = true; this.sort_created_asc = true;
this.bookmarks.sort((a, b) => a.created_date.localeCompare(b.created_date)); 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 pageheader %}Bookmarks{% endblock %}
{% block pagecontent %} {% block pagecontent %}
<div id="container" <header>
x-init="$store.digimarks.userKey = '{{ user_key }}'; $store.digimarks.loadCache(); $store.digimarks.getBookmarks()"
x-data="">
<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"> <p>Welcome user <span x-text="$store.digimarks.userKey"></span>!</p>
<ul> <div x-show="$store.digimarks.loading">Loading...</div>
<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>
<section x-cloak x-show="$store.digimarks.show_bookmarks" x-transition>
<p> <p>
<button @click="$store.digimarks.sortAlphabetically()" <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>
<button @click="$store.digimarks.sortAlphabetically('desc')" <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>
<button @click="$store.digimarks.sortCreated()" <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>
<button @click="$store.digimarks.sortCreated('desc')" <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> </button>
</p> </p>
@@ -43,13 +47,14 @@
<li><a x-text="bookmark.title" x-bind:href="bookmark.url" target="_blank"></a></li> <li><a x-text="bookmark.title" x-bind:href="bookmark.url" target="_blank"></a></li>
</template> </template>
</ul> </ul>
</section>
<h2>tags</h2> <section x-cloak x-show="$store.digimarks.show_tags" x-transition>
<ul x-cloak> <ul>
<template x-for="tag in $store.digimarks.filteredTags" :key="tag"> <template x-for="tag in $store.digimarks.filteredTags" :key="tag">
<li x-text="tag"></li> <li x-text="tag"></li>
</template> </template>
</ul> </ul>
</main> </section>
</div> </main>
{% endblock %} {% endblock %}