Verified Commit d7603fa4 authored by Jelle van der Waa's avatar Jelle van der Waa 🚧 Committed by Eli Schwartz
Browse files

Port package details page to pure JavaScript



Use a CSS animation for jQuery.Animate and replace the rest with pure
vanilla JavaScript.
Signed-off-by: Eli Schwartz's avatarEli Schwartz <eschwartz@archlinux.org>
parent 8b6f92f9
...@@ -199,3 +199,8 @@ label.confirmation, ...@@ -199,3 +199,8 @@ label.confirmation,
.error { .error {
color: red; color: red;
} }
.article-content > div {
overflow: hidden;
transition: height 1s;
}
...@@ -46,70 +46,94 @@ if (isset($pkgname)) { ...@@ -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>');
const link = document.createElement('a');
link.id = linkid;
link.href = '#';
link.textContent = 'Show More…';
const showMore = document.createElement('p');
showMore.appendChild(link);
$('#' + linkid).click(function(event) { inner.insertAdjacentElement('afterend', showMore);
var inner = $(this).parent().parent().find('div');
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>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment