added a transition. see #705

This commit is contained in:
Mic 2026-03-25 00:05:00 +01:00
parent 33fecf3afe
commit 7cde1f9b62

View file

@ -941,6 +941,16 @@ switch (message.command) {
const truncated = fullText.substring(0, cutPos) + '\u2026';
summaryText.textContent = truncated;
// Set up animated expand/collapse via max-height transition
summaryText.style.overflow = 'hidden';
summaryText.style.transition = 'max-height 0.2s ease';
// Measure truncated height after layout
requestAnimationFrame(() => {
const collapsedHeight = summaryText.scrollHeight;
summaryText.style.maxHeight = collapsedHeight + 'px';
});
const toggleLink = document.createElement('a');
toggleLink.textContent = browser.i18n.getMessage("summarize_see_more") || "See more";
toggleLink.href = '#';
@ -950,11 +960,31 @@ switch (message.command) {
let expanded = false;
toggleLink.addEventListener('click', (e) => {
e.preventDefault();
if (!expanded) {
// Expand: set full text, measure, animate to full height
summaryText.textContent = fullText;
const fullHeight = summaryText.scrollHeight;
summaryText.style.maxHeight = fullHeight + 'px';
toggleLink.textContent = browser.i18n.getMessage("summarize_see_less") || "See less";
} else {
// Collapse: measure current truncated height, then animate down
summaryText.textContent = truncated;
// Force layout to get the target height before animating
const collapsedHeight = summaryText.scrollHeight;
summaryText.textContent = fullText;
// Set explicit current height so transition has a starting point
summaryText.style.maxHeight = summaryText.scrollHeight + 'px';
requestAnimationFrame(() => {
summaryText.style.maxHeight = collapsedHeight + 'px';
});
// Swap text after transition ends
summaryText.addEventListener('transitionend', function handler() {
summaryText.removeEventListener('transitionend', handler);
summaryText.textContent = truncated;
});
toggleLink.textContent = browser.i18n.getMessage("summarize_see_more") || "See more";
}
expanded = !expanded;
summaryText.textContent = expanded ? fullText : truncated;
toggleLink.textContent = expanded
? (browser.i18n.getMessage("summarize_see_less") || "See less")
: (browser.i18n.getMessage("summarize_see_more") || "See more");
});
summaryTextWrapper.appendChild(toggleLink);