diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/autocollapse_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/autocollapse_controller.js new file mode 100644 index 00000000..f7a0bbbb --- /dev/null +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/autocollapse_controller.js @@ -0,0 +1,44 @@ +import { Controller } from '@hotwired/stimulus' + +export default class extends Controller { + + static targets = [ 'sizer', 'container', 'button' ] + + static values = { + offset: { + type: Number, + default: 0, + }, + expanded: { + type: Boolean, + default: true, + } + } + + connect() { + // Determine height of element controlling max height + this.maxHeight = this.sizerTarget.offsetHeight + // Determine rendered height of element holding content + + this.contentHeight = this.containerTarget.offsetHeight + + // Determine height of collapsed content element considering + // potential offset for button + this.collapsedHeight = this.maxHeight - this.offsetValue + + // Set initial expanded/collapsed status and button visibility + this.expandedValue = this.contentHeight < this.maxHeight + this.buttonTarget.classList.toggle('hidden', this.expandedValue) + } + + toggle() { + this.expandedValue = !this.expandedValue + } + + expandedValueChanged(expanded) { + this.containerTarget.style.height = expanded ? 'auto' : `${this.collapsedHeight}px` + this.containerTarget.style.overflowY = expanded ? 'none' : 'hidden' + this.buttonTarget.classList.toggle('toggle-more', false === expanded) + this.buttonTarget.classList.toggle('toggle-less', expanded) + } +} diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Travelinfo/Index.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Travelinfo/Index.html index 994afc45..83d29d01 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Travelinfo/Index.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Travelinfo/Index.html @@ -97,8 +97,10 @@