Use JavaScript to collapse long comments
diff mbox

Message ID 20170420050930.6679-1-lfleischer@archlinux.org
State Accepted, archived
Headers show

Commit Message

Lukas Fleischer April 20, 2017, 5:09 a.m. UTC
Instead of using CSS to limit the height of package comments as
implemented in 7b13203 (Limit comment height to 15 lines, 2016-03-12),
use JavaScript to collapse long comments and add a link to expand them.
Clicking the same link twice results in the corresponding comment being
collapsed again.

If JavaScript is disabled, the full comments are shown (without any
possibility to collapse or expand).

Signed-off-by: Lukas Fleischer <lfleischer@archlinux.org>
---
 web/html/css/aurweb.css       |  5 -----
 web/html/packages.php         | 35 +++++++++++++++++++++++++++++++++++
 web/template/pkg_comments.php |  2 +-
 3 files changed, 36 insertions(+), 6 deletions(-)

Patch
diff mbox

diff --git a/web/html/css/aurweb.css b/web/html/css/aurweb.css
index f777ab8..f5e1037 100644
--- a/web/html/css/aurweb.css
+++ b/web/html/css/aurweb.css
@@ -148,8 +148,3 @@  label.confirmation,
 	color: red;
 	font-weight: bold;
 }
-
-#news div p {
-	max-height: 15em;
-	overflow: auto;
-}
diff --git a/web/html/packages.php b/web/html/packages.php
index 113a114..8d76c76 100644
--- a/web/html/packages.php
+++ b/web/html/packages.php
@@ -72,10 +72,45 @@  function collapseDependsList(list) {
 	});
 }
 
+function collapseComment(div) {
+	var linkid = div.attr('id') + 'link',
+		par = div.find('p'),
+		height = par.height(),
+		maxheight = 200;
+
+	if (height <= maxheight)
+		return;
+
+	par.css({ 'overflow': 'hidden', 'height': maxheight + 'px' });
+	par.addClass('collapsed');
+	par.after('<p><a id="' + linkid + '" href="#">Show More…</a></p>');
+
+	$('#' + linkid).click(function(event) {
+		var newheight;
+
+		if (par.hasClass('collapsed')) {
+			par.css({ 'height': 'auto' });
+			newheight = par.height();
+			par.css({ 'height': maxheight });
+			$(this).text('Collapse');
+		} else {
+			newheight = maxheight;
+			$(this).text('Show More…');
+		}
+
+		par.animate({ 'height': newheight });
+		par.toggleClass('collapsed');
+		event.preventDefault();
+	});
+}
+
 $(document).ready(function() {
 	collapseDependsList("#pkgdepslist");
 	collapseDependsList("#pkgreqslist");
 	collapseDependsList("#pkgsrcslist");
+	$(".article-content").each(function() {
+		collapseComment($(this));
+	});
 });
 </script>
 
diff --git a/web/template/pkg_comments.php b/web/template/pkg_comments.php
index fee1898..c23ec42 100644
--- a/web/template/pkg_comments.php
+++ b/web/template/pkg_comments.php
@@ -102,7 +102,7 @@  if (!isset($count)) {
 				</form>
 			<?php endif; ?>
 		</h4>
-		<div class="article-content<?php if ($is_deleted): ?> comment-deleted<?php endif; ?>">
+		<div id="<?= isset($pinned) ? "pinned-" : "comment-" ?><?= $row['ID'] ?>-content" class="article-content<?php if ($is_deleted): ?> comment-deleted<?php endif; ?>">
 			<p>
 				<?= parse_comment($row['Comments']) ?>
 			</p>