diff --git a/core/modules/layout_builder/js/layout-builder.js b/core/modules/layout_builder/js/layout-builder.js index dc85b1d1654658774e5e5e2a5aa866f18d68dbd3..bac3153848defe4590a5ec7b6537c60ea031a3a6 100644 --- a/core/modules/layout_builder/js/layout-builder.js +++ b/core/modules/layout_builder/js/layout-builder.js @@ -260,6 +260,94 @@ $('#layout-builder').addClass(layoutBuilderWrapperValue); } } + + // ---- CKEditor 'View more' hint ---- + const $dialog = $(e.target)[0]; + + const observer = new MutationObserver((mutations, obs) => { + const groupedDropdowns = $dialog.querySelectorAll( + '.ck.ck-dropdown.ck-toolbar__grouped-dropdown.ck-toolbar-dropdown', + ); + + if (groupedDropdowns.length > 0) { + groupedDropdowns.forEach((dropdown) => { + const button = dropdown.querySelector('.ck-dropdown__button'); + if (button && !dropdown.querySelector('.ck-view-more-hint')) { + // Hint balloon + const hintSpan = document.createElement('div'); + hintSpan.textContent = 'View more'; + hintSpan.className = 'ck-view-more-hint'; + hintSpan.style.position = 'absolute'; + hintSpan.style.bottom = '100%'; + hintSpan.style.left = '50%'; + hintSpan.style.transform = 'translateX(-50%) translateY(-8px)'; + hintSpan.style.padding = '4px 8px'; + hintSpan.style.background = '#333'; + hintSpan.style.color = '#fff'; + hintSpan.style.borderRadius = '4px'; + hintSpan.style.fontSize = '12px'; + hintSpan.style.whiteSpace = 'nowrap'; + hintSpan.style.boxShadow = '0 2px 6px rgba(0,0,0,0.2)'; + hintSpan.style.opacity = '1'; + hintSpan.style.transition = 'opacity 0.5s ease'; + hintSpan.style.pointerEvents = 'none'; + + const arrow = document.createElement('div'); + arrow.style.position = 'absolute'; + arrow.style.top = '100%'; + arrow.style.left = '50%'; + arrow.style.transform = 'translateX(-50%)'; + arrow.style.width = '0'; + arrow.style.height = '0'; + arrow.style.borderLeft = '6px solid transparent'; + arrow.style.borderRight = '6px solid transparent'; + arrow.style.borderTop = '6px solid #333'; + hintSpan.appendChild(arrow); + + button.style.position = 'relative'; + dropdown.appendChild(hintSpan); + + // Auto fade after 4 sec + setTimeout(() => { + hintSpan.style.opacity = '0'; + setTimeout(() => { + hintSpan.remove(); + }, 500); + }, 4000); + + // When user clicks — adjust dropdown panel + button.addEventListener('click', () => { + setTimeout(() => { + const tooltip = button.getAttribute('data-cke-tooltip-text'); + const panel = dropdown.querySelector('.ck-dropdown__panel'); + const items = panel?.querySelector('.ck-toolbar__items'); + + if (tooltip === 'Show more items' && panel && items) { + // Stack buttons vertically + items.style.display = 'flex'; + items.style.flexDirection = 'column'; + items.style.alignItems = 'stretch'; + + // Hide separators inside show more + const separators = panel.querySelectorAll( + '.ck-toolbar__separator', + ); + separators.forEach((separator) => { + separator.style.display = 'none'; + }); + } else if (items) { + items.style.display = ''; + items.style.flexDirection = ''; + items.style.alignItems = ''; + } + }, 100); + }); + } + }); + obs.disconnect(); + } + }); + observer.observe($dialog, { childList: true, subtree: true }); }); /*