add sort dropdown button beside packages header. FIX: duplicate package thumbnail elements

This commit is contained in:
neil 2022-10-24 16:59:38 +08:00
parent 73f79245d8
commit 9bc69989c1
4 changed files with 123 additions and 13 deletions

View file

@ -5,7 +5,10 @@
<!-- Package Grid Header -->
<hr>
<div class="container package-grid-header">
<h3>packages</h3>
<section class="flex">
<h3>packages</h3>
{{- partial "sort-dropdown.html" -}}
</section>
<p>There are already plenty of packages available through tea. As the communitea builds the library, contributions will live here.</p>
</div>
<hr>
@ -90,17 +93,26 @@
</style>
<script language="javascript" type="text/javascript">
const sortOptions = {
popularity: 'popularity',
last_modified: 'last_modified',
}
let sortBy = 'popularity'; // last_modified
let sortDirection = 'desc'; // asc
let limit = 16;
const packages = document.querySelectorAll('.card-thumbnail');
const packagesCount = packages.length;
function getPackageThumbs() {
const grid = document.getElementById('packageGrid');
return Array.from(grid.childNodes).filter((e) => e.dataset && e.dataset.name);
}
const packagesCount = getPackageThumbs().length;
function sortPackages() {
const packages = document.querySelectorAll('.card-thumbnail');
const packagesArray = Array.from(packages);
const sortedPackages = packagesArray.sort((a, b) => {
if (sortBy === 'popularity') {
const packages = getPackageThumbs();
const sortedPackages = packages.sort((a, b) => {
if (sortBy === sortOptions.popularity) {
const aPop = +a.dataset.popularity;
const bPop = +b.dataset.popularity;
return sortDirection === 'asc' ? aPop-bPop : bPop - aPop;
@ -110,10 +122,10 @@
return sortDirection === 'asc' ? aDate-bDate : bDate - aDate;
}
});
const grid = document.getElementById('packageGrid');
for(const op of packages) {
op.remove();
}
grid.textContent = '';
for(const sp of sortedPackages) {
grid.appendChild(sp);
}
@ -121,7 +133,7 @@
}
function refreshDisplayedPackages() {
const packages = document.querySelectorAll('.card-thumbnail');
const packages = getPackageThumbs();
let i = 0;
for(const sp of packages) {
if (i >= limit) {
@ -141,6 +153,23 @@
const loadMoreSection = document.getElementById('loadMoreSection');
loadMoreSection.classList.add('hidden');
}
},false);
}, false);
const dropdownPopularityBtn = document.getElementById('dropdownPopularityBtn');
dropdownPopularityBtn.addEventListener('click',() => {
if (sortBy != sortOptions.popularity) {
sortBy = sortOptions.popularity;
sortPackages();
}
}, false);
const dropdownRecentBtn = document.getElementById('dropdownRecentBtn');
dropdownRecentBtn.addEventListener('click',() => {
if (sortBy != sortOptions.last_modified) {
sortBy = sortOptions.last_modified;
sortPackages();
}
}, false);
sortPackages();
</script>

View file

@ -1,4 +1,4 @@
<div class="card card-thumbnail" style="width: 100%" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}">
<div class="card card-thumbnail" style="width: 100%" data-name="{{- .name -}}" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}">
<figure class="card-img-top" >
<img class="package-image" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
<article class="card-thumb-label">

View file

@ -0,0 +1,71 @@
<style>
.sorting-container{
display:inline-block;
font-family: "pp-neue-machina", sans-serif;
background-color: #1a1a1a;
border: .5px solid #ffffff;
color: #fff;
padding-top: 0.279vw;
text-decoration: none;
text-transform: uppercase;
max-width: 240px;
width: 100%;
height: 60px;
min-height: 34px;
transition: 0.1s linear;
}
.dropdown {
width: 100%;
height: auto;
position: relative;
display: inline-block;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #1a1a1a;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
color: white;
list-style: none;
padding: 0px;
}
.dropdown-content li {
padding: 0px 10px;
height: 40px;
line-height: 40px;;
}
.dropdown-content li:hover {
background: #00ffd0;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-title {
height: 60px;
line-height: 60px;
padding-left: 10px;
}
</style>
<section class="sorting-container">
<div class="dropdown">
<div class="dropdown-title">SORT ORDER</div>
<ul class="dropdown-content flex column">
<li id="dropdownPopularityBtn">POPULARITY</li>
<li id="dropdownRecentBtn">MOST RECENT</li>
</ul>
</div>
</section>

View file

@ -474,3 +474,13 @@ mark{
display:none;
}
}
.flex {
display: flex;
justify-content: space-between;
align-items: center;
}
.flex.column {
flex-direction: column;
}