external/aurweb
0
0
Fork 0
mirror of https://gitlab.archlinux.org/archlinux/aurweb.git synced 2025-02-03 10:43:03 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Port package details page to pure JavaScript

Browse source 
Use a CSS animation for jQuery.Animate and replace the rest with pure
vanilla JavaScript.

Signed-off-by: Eli Schwartz <eschwartz@archlinux.org>
This commit is contained in:
Jelle van der Waa 2021-05-10 23:55:36 +02:00 • committed by Eli Schwartz
parent 8b6f92f9e9
commit d7603fa4d3
No known key found for this signature in database
GPG key ID: CEB167EFB5722BD6
2 changed files with 65 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

5
web/html/css/aurweb.css
View file

@ -199,3 +199,8 @@ label.confirmation,
.error { .error {
color: red; color: red;
} }
.article-content > div {
overflow: hidden;
transition: height 1s;
}

96
web/html/packages.php
View file

@ -46,70 +46,94 @@ if (isset($pkgname)) {
html_header($title, $details); html_header($title, $details);
?> ?>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@1.9.1/jquery.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
function collapseDependsList(list) { function collapseDependsList(list) {
list = $(list); list = document.getElementById(list);
// Hide everything past a given limit. Don't do anything if we don't have // Hide everything past a given limit. Don't do anything if we don't have
// enough items, or the link already exists. // enough items, or the link already exists.
var limit = 20, const limit = 20;
linkid = list.attr('id') + 'link', const linkid = list.getAttribute('id') + 'link';
items = list.find('li').slice(limit); const items = Array.from(list.querySelectorAll('li')).slice(limit);
if (items.length <= 1 || $('#' + linkid).length > 0) { if (items.length <= 1 || document.getElementById(linkid)) {
return; return;
} }
items.hide();
list.after('<p><a id="' + linkid + '" href="#">Show More…</a></p>'); items.forEach(function(item) {
item.style.display = 'none';
});
const link = document.createElement('a');
link.id = linkid;
link.href = '#';
link.textContent = 'Show More…';
const showMore = document.createElement('p');
showMore.appendChild(link);
list.insertAdjacentElement('afterend', showMore);
// add link and wire it up to show the hidden items // add link and wire it up to show the hidden items
$('#' + linkid).click(function(event) { link.addEventListener('click', function(event) {
event.preventDefault(); event.preventDefault();
list.find('li').show();
items.forEach(function(item) {
item.style.display = '';
});
// remove the full <p/> node from the DOM // remove the full <p/> node from the DOM
$(this).parent().remove(); event.target.parentNode.removeChild(event.target);
}); });
} }
function collapseComment(div) { function collapseComment(div) {
var linkid = div.attr('id') + 'link', const linkid = div.getAttribute('id') + 'link';
inner = div.find('div'), const inner = div.querySelector('div');
height = inner.height(), // max height of a collapsed comment.
maxheight = 200; const maxheight = 200;
const height = inner.offsetHeight;
if (height <= maxheight) if (height <= maxheight)
return; return;
inner.css({ 'overflow': 'hidden', 'height': maxheight + 'px' }); inner.style.height = maxheight + 'px';
inner.addClass('collapsed'); inner.classList.add('collapsed');
inner.after('<p><a id="' + linkid + '" href="#">Show More…</a></p>');
$('#' + linkid).click(function(event) { const link = document.createElement('a');
var inner = $(this).parent().parent().find('div'); link.id = linkid;
link.href = '#';
link.textContent = 'Show More…';
const showMore = document.createElement('p');
showMore.appendChild(link);
inner.insertAdjacentElement('afterend', showMore);
link.addEventListener('click', function(event) {
const showMoreLink = event.target;
const inner = showMoreLink.parentNode.parentNode.querySelector('div');
var newheight; var newheight;
if (inner.hasClass('collapsed')) { if (inner.classList.contains('collapsed')) {
inner.css({ 'height': 'auto' }); inner.style.height = height + 'px';
newheight = inner.height(); showMoreLink.textContent = 'Collapse';
inner.css({ 'height': maxheight });
$(this).text('Collapse');
} else { } else {
newheight = maxheight; newheight = maxheight + 'px';
$(this).text('Show More…'); inner.style.height = newheight;
showMoreLink.textContent = 'Show More…';
} }
inner.animate({ 'height': newheight }); inner.classList.toggle('collapsed');
inner.toggleClass('collapsed');
event.preventDefault(); event.preventDefault();
}); });
} }
$(document).ready(function() { document.addEventListener('DOMContentLoaded', function() {
collapseDependsList("#pkgdepslist"); collapseDependsList("pkgdepslist");
collapseDependsList("#pkgreqslist"); collapseDependsList("pkgreqslist");
collapseDependsList("#pkgsrcslist"); collapseDependsList("pkgsrcslist");
$(".article-content").each(function() {
collapseComment($(this)); Array.from(document.querySelectorAll('.article-content')).forEach(collapseComment);
});
}); });
</script> </script>