mirror of
https://github.com/ivabus/www
synced 2024-11-10 12:45:14 +03:00
implement js functions for sorting packages
This commit is contained in:
parent
cc91e49be2
commit
024cbea4ff
|
@ -33,7 +33,7 @@
|
|||
"maintainer": "pascal",
|
||||
"thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
|
||||
"dl_count": 3,
|
||||
"last_modified": "2022-09-27:39:15.000Z"
|
||||
"last_modified": "2022-09-27T15:39:15.000Z"
|
||||
},
|
||||
{
|
||||
"name": "h2c",
|
||||
|
@ -45,7 +45,7 @@
|
|||
"maintainer": "h2o",
|
||||
"thumb_image_url": "/Images/package-thumb-nolabel.jpg",
|
||||
"dl_count": 4,
|
||||
"last_modified": "2022-09-25:39:15.000Z"
|
||||
"last_modified": "2022-09-25T15:39:15.000Z"
|
||||
},
|
||||
{
|
||||
"name": "libmagic",
|
||||
|
@ -57,7 +57,7 @@
|
|||
"maintainer": "",
|
||||
"thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
|
||||
"dl_count": 5,
|
||||
"last_modified": "2022-09-24:39:15.000Z"
|
||||
"last_modified": "2022-09-24T15:39:15.000Z"
|
||||
},
|
||||
{
|
||||
"name": "deno",
|
||||
|
@ -69,7 +69,7 @@
|
|||
"maintainer": "Ryan Dahl",
|
||||
"thumb_image_url": "/Images/package-thumb-nolabel2.jpg",
|
||||
"dl_count": 6,
|
||||
"last_modified": "2022-09-23:39:15.000Z"
|
||||
"last_modified": "2022-09-23T15:39:15.000Z"
|
||||
},
|
||||
{
|
||||
"name": "fontconfig",
|
||||
|
@ -81,7 +81,7 @@
|
|||
"maintainer": "Max Miedinger",
|
||||
"thumb_image_url": "/Images/package-thumb-nolabel.jpg",
|
||||
"dl_count": 7,
|
||||
"last_modified": "2022-09-22:39:15.000Z"
|
||||
"last_modified": "2022-09-22T15:39:15.000Z"
|
||||
},
|
||||
{
|
||||
"name": "pkg-config",
|
||||
|
@ -93,7 +93,7 @@
|
|||
"maintainer": "pascal",
|
||||
"thumb_image_url": "/Images/package-thumb-nolabel4.jpg",
|
||||
"dl_count": 8,
|
||||
"last_modified": "2022-09-21:39:15.000Z"
|
||||
"last_modified": "2022-09-21T15:39:15.000Z"
|
||||
},
|
||||
{
|
||||
"name": "shared-mime-info",
|
||||
|
@ -105,7 +105,7 @@
|
|||
"maintainer": "Mr.Mime",
|
||||
"thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
|
||||
"dl_count": 9,
|
||||
"last_modified": "2022-09-21:39:15.000Z"
|
||||
"last_modified": "2022-09-21T15:39:15.000Z"
|
||||
},
|
||||
{
|
||||
"name": "ttfautohint",
|
||||
|
@ -117,7 +117,7 @@
|
|||
"maintainer": "pascal",
|
||||
"thumb_image_url": "/Images/package-thumb-nolabel.jpg",
|
||||
"dl_count": 10,
|
||||
"last_modified": "2022-09-20:39:15.000Z"
|
||||
"last_modified": "2022-09-20T15:39:15.000Z"
|
||||
},
|
||||
{
|
||||
"name": "numactl",
|
||||
|
@ -129,7 +129,7 @@
|
|||
"maintainer": "FSS",
|
||||
"thumb_image_url": "/Images/package-thumb-nolabel2.jpg",
|
||||
"dl_count": 11,
|
||||
"last_modified": "2022-09-19:39:15.000Z"
|
||||
"last_modified": "2022-09-19T15:39:15.000Z"
|
||||
},
|
||||
{
|
||||
"name": "flex",
|
||||
|
@ -141,6 +141,6 @@
|
|||
"maintainer": "",
|
||||
"thumb_image_url": "/Images/package-thumb-nolabel4.jpg",
|
||||
"dl_count": 12,
|
||||
"last_modified": "2022-09-18:39:15.000Z"
|
||||
"last_modified": "2022-09-18T15:39:15.000Z"
|
||||
}
|
||||
]
|
|
@ -14,7 +14,7 @@
|
|||
<!-- Start Package Grid -->
|
||||
|
||||
<div class="row package-row black-bg g-0">
|
||||
<div class="package-grid">
|
||||
<div id="packageGrid" class="package-grid">
|
||||
{{ range $.Site.Data.packages }}
|
||||
{{- partial "package-thumbnail.html" .}}
|
||||
{{ end }}
|
||||
|
@ -90,17 +90,46 @@
|
|||
</style>
|
||||
|
||||
<script language="javascript" type="text/javascript">
|
||||
let sortBy = 'popularity'; // last_modified
|
||||
let sortDirection = 'desc'; // asc
|
||||
let limit = 16;
|
||||
const packages = document.querySelectorAll('.card-thumbnail');
|
||||
const packagesCount = packages.length;
|
||||
|
||||
function refreshDisplayedPackages() {
|
||||
for(let i = 0; i < packagesCount; i++) {
|
||||
if (i >= limit) {
|
||||
packages[i].classList.add('hidden');
|
||||
} else {
|
||||
packages[i].classList.remove('hidden');
|
||||
function sortPackages() {
|
||||
const packages = document.querySelectorAll('.card-thumbnail');
|
||||
const packagesArray = Array.from(packages);
|
||||
const sortedPackages = packagesArray.sort((a, b) => {
|
||||
if (sortBy === 'popularity') {
|
||||
const aPop = +a.dataset.popularity;
|
||||
const bPop = +b.dataset.popularity;
|
||||
return sortDirection === 'asc' ? aPop-bPop : bPop - aPop;
|
||||
} else { // last_modified
|
||||
const aDate = new Date(a.dataset.last_modified);
|
||||
const bDate = new Date(b.dataset.last_modified);
|
||||
return sortDirection === 'asc' ? aDate-bDate : bDate - aDate;
|
||||
}
|
||||
});
|
||||
const grid = document.getElementById('packageGrid');
|
||||
for(const op of packages) {
|
||||
op.remove();
|
||||
}
|
||||
for(const sp of sortedPackages) {
|
||||
grid.appendChild(sp);
|
||||
}
|
||||
refreshDisplayedPackages();
|
||||
}
|
||||
|
||||
function refreshDisplayedPackages() {
|
||||
const packages = document.querySelectorAll('.card-thumbnail');
|
||||
let i = 0;
|
||||
for(const sp of packages) {
|
||||
if (i >= limit) {
|
||||
sp.classList.add('hidden');
|
||||
} else {
|
||||
sp.classList.remove('hidden');
|
||||
}
|
||||
i++;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -113,6 +142,5 @@
|
|||
loadMoreSection.classList.add('hidden');
|
||||
}
|
||||
},false);
|
||||
|
||||
refreshDisplayedPackages();
|
||||
sortPackages();
|
||||
</script>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<div class="card card-thumbnail" style="width: 100%" popularity="{{- .dl_count -}}" last_modified="{{- .last_modified -}}">
|
||||
<div class="card card-thumbnail" style="width: 100%" 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">
|
||||
|
|
Loading…
Reference in a new issue