| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
function initReadMore(wrap) { |
| 5 |
var content = wrap.querySelector('.bkrm-content'); |
| 6 |
var btn = wrap.querySelector('.bkrm-btn'); |
| 7 |
var label = wrap.querySelector('.bkrm-label'); |
| 8 |
|
| 9 |
if (!content || !btn) return; |
| 10 |
|
| 11 |
var readMoreText = label ? label.textContent : (btn.dataset.readMore || 'Read more'); |
| 12 |
var showLessText = btn.dataset.showLess || 'Show less'; |
| 13 |
|
| 14 |
// Read data-attributes set by block (fallback to CSS var) |
| 15 |
if (btn.dataset) { |
| 16 |
// labels may be stored in data attributes or scanned from DOM at build time |
| 17 |
} |
| 18 |
|
| 19 |
btn.addEventListener('click', function () { |
| 20 |
var isExpanded = content.classList.contains('bkrm-expanded'); |
| 21 |
|
| 22 |
if (isExpanded) { |
| 23 |
// Collapse: set fixed height first, then remove class |
| 24 |
content.style.maxHeight = content.scrollHeight + 'px'; |
| 25 |
requestAnimationFrame(function () { |
| 26 |
requestAnimationFrame(function () { |
| 27 |
content.classList.remove('bkrm-expanded'); |
| 28 |
content.classList.add('bkrm-collapsed'); |
| 29 |
btn.setAttribute('aria-expanded', 'false'); |
| 30 |
if (label) label.textContent = readMoreText; |
| 31 |
}); |
| 32 |
}); |
| 33 |
} else { |
| 34 |
// Expand: set max-height to scrollHeight for transition |
| 35 |
content.classList.remove('bkrm-collapsed'); |
| 36 |
content.classList.add('bkrm-expanded'); |
| 37 |
content.style.maxHeight = content.scrollHeight + 'px'; |
| 38 |
btn.setAttribute('aria-expanded', 'true'); |
| 39 |
if (label) label.textContent = showLessText; |
| 40 |
|
| 41 |
// After transition remove inline style so it stays open |
| 42 |
var transEnd = function () { |
| 43 |
content.style.maxHeight = ''; |
| 44 |
content.removeEventListener('transitionend', transEnd); |
| 45 |
}; |
| 46 |
content.addEventListener('transitionend', transEnd); |
| 47 |
} |
| 48 |
}); |
| 49 |
|
| 50 |
// Check if content is actually taller than collapsed height — hide btn if not |
| 51 |
var collapsedPx = parseFloat(getComputedStyle(content).getPropertyValue('--bkrm-collapsed') || '180'); |
| 52 |
var text = content.querySelector('.bkrm-text'); |
| 53 |
if (text && text.scrollHeight <= collapsedPx + 10) { |
| 54 |
// Content fits — remove collapse, hide button |
| 55 |
content.classList.remove('bkrm-collapsed'); |
| 56 |
content.classList.add('bkrm-expanded'); |
| 57 |
var btnWrap = wrap.querySelector('.bkrm-btn-wrap'); |
| 58 |
if (btnWrap) btnWrap.style.display = 'none'; |
| 59 |
} |
| 60 |
} |
| 61 |
|
| 62 |
function init() { |
| 63 |
document.querySelectorAll('.bkrm-wrap').forEach(initReadMore); |
| 64 |
} |
| 65 |
|
| 66 |
if (document.readyState === 'loading') { |
| 67 |
document.addEventListener('DOMContentLoaded', init); |
| 68 |
} else { |
| 69 |
init(); |
| 70 |
} |
| 71 |
|
| 72 |
}()); |
| 73 |
|
