371 lines
6.8 KiB
Vue
371 lines
6.8 KiB
Vue
<template>
|
|
<div class="page">
|
|
<ul
|
|
ref="categories"
|
|
class="categories nolist nobar"
|
|
>
|
|
<li>
|
|
<div
|
|
class="search noselect"
|
|
@click="focusSearch"
|
|
>
|
|
<Icon
|
|
icon="search"
|
|
/>
|
|
</div>
|
|
</li>
|
|
|
|
<li
|
|
v-for="(tags, category) in showcase"
|
|
:key="`category-${category}`"
|
|
>
|
|
<a
|
|
:href="`#${category}`"
|
|
class="category nolink"
|
|
:class="{ active: activeCategory === category }"
|
|
>{{ categoryTitles[category] || category }}</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div
|
|
ref="content"
|
|
class="content"
|
|
>
|
|
<form
|
|
class="search-container"
|
|
@submit.prevent="search"
|
|
>
|
|
<input
|
|
ref="searchInput"
|
|
v-model="query"
|
|
type="search"
|
|
placeholder="Search tags"
|
|
class="search input"
|
|
@search="search"
|
|
>
|
|
|
|
<Icon
|
|
icon="search"
|
|
@click="search"
|
|
/>
|
|
</form>
|
|
|
|
<div
|
|
v-for="(tags, category) in showcase"
|
|
:key="`tags-${category}`"
|
|
>
|
|
<h3
|
|
:id="category"
|
|
class="category-heading"
|
|
>{{ categoryTitles[category] || category }}</h3>
|
|
|
|
<ul
|
|
class="tags nolist"
|
|
:data-category="category"
|
|
>
|
|
<li
|
|
v-for="tag in tags"
|
|
:key="`tag-${tag.slug}`"
|
|
class="tag"
|
|
>
|
|
<div class="thumb-container">
|
|
<a
|
|
:href="`/tag/${tag.slug}`"
|
|
class="thumb-link nolink"
|
|
>
|
|
<img
|
|
v-if="tag.poster"
|
|
:src="`/${tag.poster.thumbnail}`"
|
|
:style="{ 'background-image': `url(/${tag.poster.lazy})` }"
|
|
:title="tag.poster.comment"
|
|
class="thumb"
|
|
loading="lazy"
|
|
>
|
|
|
|
<img
|
|
v-else
|
|
src="/img/icons/price-tag2.svg"
|
|
class="nophoto"
|
|
>
|
|
</a>
|
|
|
|
<a
|
|
v-if="tag.poster?.entity"
|
|
:href="`/${tag.poster.entity.type}/${tag.poster.entity.slug}`"
|
|
class="favicon-link"
|
|
>
|
|
<img
|
|
:src="!tag.poster.entity.parent || tag.poster.entity.isIndependent ? `/logos/${tag.poster.entity.slug}/favicon.png` : `/logos/${tag.poster.entity.parent.slug}/favicon.png`"
|
|
:alt="tag.poster.entity.name"
|
|
:title="tag.poster.entity.name"
|
|
class="favicon"
|
|
>
|
|
</a>
|
|
</div>
|
|
|
|
<a
|
|
:href="`/tag/${tag.slug}`"
|
|
class="name nolink"
|
|
>{{ tag.name }}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, inject } from 'vue';
|
|
|
|
import navigate from '#/src/navigate.js';
|
|
import events from '#/src/events.js';
|
|
|
|
const pageContext = inject('pageContext');
|
|
const showcase = pageContext.pageProps.tagShowcase;
|
|
|
|
const categories = ref(null);
|
|
const content = ref(null);
|
|
const searchInput = ref(null);
|
|
const query = ref(pageContext.urlParsed.search.q);
|
|
|
|
const categoryTitles = {
|
|
lgbt: 'LGBT',
|
|
};
|
|
|
|
const activeCategory = ref(null);
|
|
|
|
function calculateActiveCategory() {
|
|
const newCategory = Array.from(document.querySelectorAll('.tags')).reduce((closest, element) => {
|
|
const { top } = element.getBoundingClientRect();
|
|
|
|
if (!closest || Math.abs(top - 200) < Math.abs(closest.top)) { // slight offset to include bottom category
|
|
return { category: element.dataset.category, top };
|
|
}
|
|
|
|
return closest;
|
|
}, null).category;
|
|
|
|
if (newCategory === activeCategory.value) {
|
|
return;
|
|
}
|
|
|
|
activeCategory.value = newCategory;
|
|
|
|
const activeLink = document.querySelector(`a[href="#${activeCategory.value}"]`);
|
|
|
|
activeLink.scrollIntoView({
|
|
inline: 'center',
|
|
});
|
|
|
|
navigate(`#${activeCategory.value}`, null, { replace: true });
|
|
}
|
|
|
|
async function search() {
|
|
navigate('/tags', { q: query.value || undefined }, { redirect: true });
|
|
}
|
|
|
|
function focusSearch() {
|
|
events.emit('scrollUp'); // scrollIntoView on search input does not reveal it fully
|
|
searchInput.value?.focus();
|
|
}
|
|
|
|
onMounted(() => {
|
|
categories.value.addEventListener('wheel', (event) => {
|
|
categories.value.scrollLeft += event.deltaY;
|
|
});
|
|
|
|
document.querySelector('#content').addEventListener('scroll', () => calculateActiveCategory());
|
|
|
|
window.addEventListener('popstate', () => {
|
|
if (window.location.hash) {
|
|
const categoryTitle = document.querySelector(window.location.hash);
|
|
|
|
activeCategory.value = window.location.hash.slice(1);
|
|
categoryTitle?.scrollIntoView();
|
|
}
|
|
});
|
|
|
|
// div doesn't scroll automatically on page load, reset hash to scroll
|
|
if (window.location.hash) {
|
|
const hash = window.location.hash;
|
|
|
|
window.location.hash = undefined;
|
|
window.location.hash = hash;
|
|
|
|
calculateActiveCategory();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow:1 ;
|
|
}
|
|
|
|
.content {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.categories {
|
|
display: flex;
|
|
gap: .25rem;
|
|
flex-shrink: 0;
|
|
padding: .5rem 1rem .5rem 0;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
background: var(--grey-dark-40);
|
|
overflow-x: auto;
|
|
|
|
.search {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.icon {
|
|
fill: var(--highlight-strong-20);
|
|
padding: 0 .5rem 0 1rem;
|
|
}
|
|
|
|
&:hover .icon {
|
|
fill: var(--text-light);
|
|
}
|
|
}
|
|
}
|
|
|
|
.category {
|
|
padding: .25rem .5rem;
|
|
border-radius: .25rem;
|
|
background: var(--grey-dark-30);
|
|
color: var(--highlight-strong-30);
|
|
font-weight: bold;
|
|
font-size: .9rem;
|
|
|
|
&:hover,
|
|
&.active {
|
|
color: var(--text-light);
|
|
background: var(--primary);
|
|
}
|
|
}
|
|
|
|
.search-container {
|
|
display: flex;
|
|
align-items: stretch;
|
|
padding: 1rem 1rem 0 1rem;
|
|
|
|
.icon {
|
|
padding: 0 1rem;
|
|
height: auto;
|
|
fill: var(--glass);
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
fill: var(--primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
.search {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.tags {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
|
gap: 1rem .5rem;
|
|
padding: .75rem 1rem;
|
|
}
|
|
|
|
.category-heading {
|
|
padding: 1rem 1rem 0 1.5rem;
|
|
margin: 0;
|
|
text-transform: capitalize;
|
|
color: var(--glass);
|
|
}
|
|
|
|
.tag {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
&:hover {
|
|
.name {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.thumb {
|
|
box-shadow: 0 0 3px var(--shadow-weak-10);
|
|
}
|
|
}
|
|
}
|
|
|
|
.name {
|
|
padding: .4rem .5rem 0 .5rem;
|
|
text-transform: capitalize;
|
|
font-size: .9rem;
|
|
font-weight: bold;
|
|
color: var(--glass-strong-10);
|
|
}
|
|
|
|
.thumb-container {
|
|
position: relative;
|
|
aspect-ratio: 5/3;
|
|
background: var(--background-base-20);
|
|
box-shadow: 0 0 3px var(--shadow-weak-20);
|
|
}
|
|
|
|
.thumb-link {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.thumb {
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: .25rem;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.nophoto {
|
|
width: 10%;
|
|
opacity: .1;
|
|
}
|
|
|
|
.favicon-link {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
font-size: 0;
|
|
|
|
&:hover .favicon {
|
|
filter: drop-shadow(0 0 2px var(--shadow-weak-20))
|
|
}
|
|
}
|
|
|
|
.favicon {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
padding: .5rem;
|
|
object-fit: contain;
|
|
}
|
|
|
|
@media(--compact) {
|
|
.tags {
|
|
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
|
|
}
|
|
}
|
|
|
|
@media(--small-30) {
|
|
.tags {
|
|
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
|
|
}
|
|
}
|
|
</style>
|