umberto 7.0.2 → 8.0.1

package/themes/umberto/src/gloria/js/components/hash-link.js

@@ -0,0 +1,60 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { BaseComponent } from './base-component';
+import { scrollToHash } from '../helpers/scroll-to-hash';
+
+/**
+ * HashLink component.
+ * Handles navigation to hash links within the page with scrolling.
+ */
+export class HashLink extends BaseComponent {
+	/**
+	 * Attaches event listeners to handle hash link navigation.
+	 */
+	static attach() {
+		// Handle initial hash link navigation if present in the URL
+		this._handleInitialHash();
+
+		// Add click event listener to handle hash link clicks
+		document.addEventListener( 'click', event => {
+			const target = event.target.closest( 'a[href^="#"]' );
+
+			if ( !target ) {
+				return;
+			}
+
+			event.preventDefault();
+			scrollToHash( target );
+		} );
+	}
+
+	/**
+	 * Handles initial hash link navigation if present in the URL on page load.
+	 *
+	 * @private
+	 */
+	static _handleInitialHash() {
+		if ( !window.location.hash ) {
+			return;
+		}
+
+		let abortScroll = false;
+
+		window.addEventListener( 'mousewheel', () => {
+			abortScroll = true;
+		}, { once: true } );
+
+		window.addEventListener( 'load', () => {
+			if ( abortScroll ) {
+				return;
+			}
+
+			scrollToHash( window.location.hash.substring( 1 ), {
+				pushState: false
+			} );
+		}, { once: true } );
+	}
+}

package/themes/umberto/src/gloria/js/components/heading-link.js

@@ -0,0 +1,135 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { BaseComponent } from './base-component';
+import { copyToClipboard } from '../helpers/copy-to-clipboard';
+
+/**
+ * HeadingLink component.
+ * Handles copying heading links to clipboard when clicked.
+ */
+export class HeadingLink extends BaseComponent {
+	/**
+	 * Creates a heading link component.
+	 *
+	 * @param element - The heading link DOM element
+	 */
+	constructor( element ) {
+		super( {
+			isCopied: false
+		} );
+
+		this.elements = {
+			link: element,
+			heading: element.closest( '.b-heading' ),
+			tooltipText: null
+		};
+
+		this.timeoutId = null;
+		this.originalTooltipText = null;
+	}
+
+	/**
+	 * Attaches heading link functionality to all elements with js-heading-link class.
+	 */
+	static attach() {
+		const headingLinks = document.querySelectorAll( '.js-heading-link' );
+
+		for ( const link of headingLinks ) {
+			new HeadingLink( link ).init();
+		}
+	}
+
+	/**
+	 * Initializes the heading link component.
+	 */
+	init() {
+		this.elements.link.addEventListener( 'click', this.handleClick.bind( this ) );
+
+		const tooltipId = this.elements.link.getAttribute( 'aria-labelledby' );
+
+		if ( tooltipId ) {
+			const tooltip = document.getElementById( tooltipId );
+			const tooltipText = tooltip?.querySelector( '.c-tooltip-popover__text' );
+
+			if ( tooltipText ) {
+				this.elements.tooltipText = tooltipText;
+				this.originalTooltipText = tooltipText.textContent;
+			}
+		}
+
+		this.render();
+	}
+
+	/**
+	 * Handles click events on the heading link.
+	 *
+	 * @param event - The click event object
+	 */
+	handleClick( event ) {
+		event.preventDefault();
+
+		// If the heading is not in the bottom third of the viewport,
+		// prevent scrolling by stopping propagation
+		const headingRect = this.elements.heading.getBoundingClientRect();
+
+		if ( headingRect.top < window.innerHeight * 0.75 ) {
+			event.stopPropagation();
+		}
+
+		const href = this.elements.link.getAttribute( 'href' );
+		const absoluteUrl = new URL( window.location.href );
+
+		// Update only the hash part of the URL
+		absoluteUrl.hash = href;
+
+		// Update the browser's URL hash
+		window.history.replaceState( null, null, href );
+
+		copyToClipboard( absoluteUrl.toString() )
+			.then( () => {
+				this.setState( { isCopied: true } );
+
+				// Reset the copied state after a delay
+				clearTimeout( this.timeoutId );
+				this.timeoutId = setTimeout( () => {
+					this.setState( { isCopied: false } );
+				}, 2000 );
+			} )
+			.catch( error => {
+				console.error( 'Failed to copy URL to clipboard:', error );
+			} );
+	}
+
+	/**
+	 * Renders the heading link component based on current state.
+	 *
+	 * @param prevState - Previous component state
+	 * @param state - Current component state
+	 */
+	render( prevState, state = this.state ) {
+		const { link, tooltipText } = this.elements;
+
+		if ( prevState?.isCopied !== state.isCopied ) {
+			if ( state.isCopied ) {
+				link.setAttribute( 'aria-label', 'Link copied to clipboard!' );
+				link.classList.add( 'is-copied' );
+
+				// Update tooltip text if available
+				if ( tooltipText ) {
+					tooltipText.textContent = 'Copied!';
+				}
+			} else {
+				link.removeAttribute( 'aria-label' );
+				link.classList.remove( 'is-copied' );
+
+				// Restore original tooltip text if available
+				if ( tooltipText && this.originalTooltipText ) {
+					tooltipText.textContent = this.originalTooltipText;
+				}
+			}
+		}
+	}
+}

package/themes/umberto/src/gloria/js/components/iframe.js

@@ -0,0 +1,158 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { BaseComponent } from './base-component';
+import { html } from '../helpers/html-builder';
+
+/**
+ * IFrame component.
+ */
+export class IFrame extends BaseComponent {
+	/**
+	 * Creates a iframe component.
+	 *
+	 * @param element - The iframe wrapper DOM element
+	 */
+	constructor( element ) {
+		super( {
+			loaded: false
+		} );
+
+		this.elements = {
+			wrapper: element
+		};
+
+		// Parse configuration from data attributes
+		this.config = {
+			autoResize: element.dataset.autoResize === 'true',
+			width: element.dataset.width || null,
+			height: element.dataset.height || null,
+			src: element.dataset.src || null,
+			content: element.dataset.content || null,
+			...parseIframeAttributes( element )
+		};
+	}
+
+	/**
+	 * Attaches heading iframe functionality to all elements with js-heading-link class.
+	 */
+	static attach() {
+		const iframes = document.querySelectorAll( '.c-iframe' );
+
+		for ( const frame of iframes ) {
+			frame.iframe = new IFrame( frame ).init();
+		}
+	}
+
+	/**
+	 * Initializes the iframe component.
+	 */
+	init() {
+		this._createIframe();
+		this._setupAutoResize();
+
+		this.render();
+
+		return this;
+	}
+
+	/**
+	 * Renders the iframe component based on current state.
+	 */
+	render() {
+		// Additional rendering logic if needed
+	}
+
+	/**
+	 * Loads HTML content into iframe.
+	 *
+	 * @param content - HTML content to load
+	 */
+	setContent( content ) {
+		const iframe = this.elements.iframe;
+		const iframeDocument = iframe.contentDocument || iframe.contentWindow?.document;
+
+		const wrappedHTML = `
+			<!DOCTYPE html>
+			${ content }
+			${ this.config.autoResize ? `
+			<script>
+				const broadcastResize = () => {
+					window.parent.postMessage( {
+						type: 'iframeResized',
+						height: Math.max( document.body.getBoundingClientRect().height, document.documentElement.offsetHeight ),
+						wrapperId: '${ this.elements.wrapper.id }'
+					}, '*' );
+				};
+
+				window.addEventListener( 'load', broadcastResize );
+			</script>
+			` : '' }
+		`;
+
+		if ( iframeDocument ) {
+			iframeDocument.open();
+			iframeDocument.write( wrappedHTML );
+			iframeDocument.close();
+		}
+	}
+
+	/**
+	 * Creates and injects iframe into the wrapper.
+	 */
+	_createIframe() {
+		const { wrapper } = this.elements;
+		const { width, height, src, autoResize, ...iframeAttrs } = this.config;
+
+		const iframe = html.iframe( {
+			class: 'c-iframe__frame b-iframe',
+			...( src && { src } ),
+			...( width && { style: `width: ${ width }` } ),
+			...( height && !autoResize && { style: `height: ${ height }` } ),
+			...iframeAttrs
+		} );
+
+		wrapper.appendChild( iframe );
+		this.elements.iframe = iframe;
+
+		// Load content if provided
+		if ( this.config.content ) {
+			this.setContent( this.config.content );
+		}
+	}
+
+	/**
+	 * Sets up auto-resize functionality.
+	 */
+	_setupAutoResize() {
+		if ( !this.config.autoResize ) {
+			return;
+		}
+
+		// Add message listener for this instance
+		window.addEventListener( 'message', event => {
+			if ( event.data && event.data.type === 'iframeResized' && event.source === this.elements.iframe?.contentWindow ) {
+				this.elements.iframe.style.height = ( event.data.height + 5 ) + 'px';
+			}
+		} );
+	}
+}
+
+/**
+ * Parses iframe attributes from data attributes.
+ *
+ * @param element - The wrapper element
+ * @returns Object with iframe attributes
+ */
+function parseIframeAttributes( element ) {
+	return Array
+		.from( element.attributes )
+		.filter( attr => attr.name.startsWith( 'data-iframe-' ) )
+		.reduce( ( attributes, attr ) => {
+			const attrName = attr.name.replace( 'data-iframe-', '' );
+			attributes[ attrName ] = attr.value;
+			return attributes;
+		}, Object.create( {} ) );
+}

package/themes/umberto/src/gloria/js/{_imageModal.js → components/image-zoom.js}

@@ -5,7 +5,7 @@
 
 import mediumZoom from 'medium-zoom';
 
-export default function imageModal() {
+export function imageZoom() {
 	const lightboxImages = document.querySelectorAll( '[data-lightbox]' );
 
 	if ( !lightboxImages ) {

package/themes/umberto/src/gloria/js/components/mobile-overlay.js

@@ -0,0 +1,315 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { BaseComponent } from './base-component';
+import { animateElement } from '../helpers/animate-element';
+import { bodyScroll } from '../helpers/body-scroll';
+import { onEscapeKeyPress } from '../helpers/escape-handler';
+import { createHeaderSpacerManager } from '../modules/header';
+
+/**
+ * Events used to broadcast information to the children components of the overlay.
+ * It might be used to re-initialize navigation and reset other stuff within the overlay.
+ */
+const EVENTS = {
+	OPENED: 'mobile-overlay:opened',
+	CLOSED: 'mobile-overlay:closed',
+	STATE_CHANGED: 'mobile-overlay:state-changed',
+	OPENING: 'mobile-overlay:opening'
+};
+
+/**
+ * A mobile overlay component that manages fullscreen overlays triggered by buttons.
+ * Handles opening, closing, and provides animations for transitions.
+ */
+export class MobileOverlay extends BaseComponent {
+	/**
+	 * Creates a mobile overlay component.
+	 *
+	 * @param overlay - The overlay element.
+	 */
+	constructor( overlay ) {
+		super( {
+			isOpen: false,
+			isAnimating: false,
+			scrollPosition: 0
+		} );
+
+		const { id } = overlay;
+		const triggers = [ ...document.querySelectorAll( `.js-toggle-mobile-overlay[aria-controls="${ id }"]` ) ];
+
+		this.elements = {
+			overlay,
+			triggers
+		};
+	}
+
+	/**
+	 * Initializes all mobile overlay components on the page.
+	 */
+	static attach() {
+		const overlays = document.querySelectorAll( '.js-mobile-overlay' );
+
+		for ( const overlay of overlays ) {
+			new MobileOverlay( overlay ).init();
+		}
+	}
+
+	/**
+	 * Determines if the overlay should be rendered in headless mode (without header).
+	 *
+	 * @returns True if the overlay should be rendered without header.
+	 */
+	get isHeadless() {
+		return this.elements.overlay.getAttribute( 'data-headless' ) === 'true';
+	}
+
+	/**
+	 * Determines if this overlay is the most recently opened one (last in the set).
+	 *
+	 * @returns True if this is the last opened overlay.
+	 */
+	get isLastOpened() {
+		if ( MobileOverlay.openOverlays.size === 0 ) {
+			return false;
+		}
+
+		return Array.from( MobileOverlay.openOverlays ).pop() === this;
+	}
+
+	/**
+	 * Initializes the mobile overlay component with event listeners.
+	 */
+	init() {
+		for ( const trigger of this.elements.triggers ) {
+			trigger.addEventListener( 'click', this.onToggle.bind( this ) );
+		}
+	}
+
+	/**
+	 * Dispatches a custom event for the overlay state change.
+	 *
+	 * @param eventName - The name of the event to dispatch
+	 * @private
+	 */
+	_dispatchStateEvent( eventName ) {
+		const { overlay } = this.elements;
+		const { isOpen } = this.state;
+
+		// Create the event detail object
+		const detail = {
+			overlay,
+			isOpen,
+			id: overlay.id,
+			triggers: this.elements.triggers
+		};
+
+		// Dispatch the specific event (opened/closed)
+		overlay.dispatchEvent( new CustomEvent( eventName, {
+			bubbles: true,
+			detail
+		} ) );
+
+		// Always dispatch the general state-changed event
+		overlay.dispatchEvent( new CustomEvent( EVENTS.STATE_CHANGED, {
+			bubbles: true,
+			detail
+		} ) );
+	}
+
+	/**
+	 * Renders the mobile overlay based on current state.
+	 *
+	 * @param prevState - Previous component state.
+	 * @param state - Current component state.
+	 */
+	render( prevState = undefined, state = this.state ) {
+		const { triggers, overlay } = this.elements;
+		const { isOpen } = state;
+
+		overlay.setAttribute( 'aria-hidden', !isOpen );
+
+		for ( const trigger of triggers ) {
+			trigger.setAttribute( 'aria-expanded', isOpen );
+		}
+
+		// Only animate if state changed
+		if ( prevState && prevState.isOpen !== isOpen ) {
+			// Set proper global listeners
+			this.escapeKeyCleanup?.();
+			this.escapeKeyCleanup = null;
+
+			// Set up listeners if overlay is open
+			if ( isOpen ) {
+				this.escapeKeyCleanup = onEscapeKeyPress( () => this.onToggle() );
+
+				// Move the overlay to the end of document body when opened.
+				document.body.appendChild( overlay );
+
+				// Add to the set of open overlays
+				MobileOverlay.openOverlays.add( this );
+			} else {
+				// Remove from the set of open overlays when closed
+				MobileOverlay.openOverlays.delete( this );
+			}
+
+			// Set aria attributes for all other overlays
+			// to ensure only one is open at a time.
+			for ( const overlay of MobileOverlay.openOverlays ) {
+				const isHidden = overlay !== this;
+
+				overlay.elements.overlay.setAttribute( 'aria-hidden', isHidden );
+			}
+		}
+	}
+
+	/**
+	 * Handles the toggle event for the overlay.
+	 */
+	async onToggle() {
+		if ( this.state.isAnimating ) {
+			return;
+		}
+
+		const isOpen = !this.state.isOpen;
+
+		this.setState( {
+			isOpen,
+			isAnimating: true
+		} );
+
+		// Dispatch opening event before the animation begins
+		if ( isOpen ) {
+			this._dispatchStateEvent( EVENTS.OPENING );
+		}
+
+		const { overlay } = this.elements;
+		const { isHeadless } = this;
+
+		if ( !this.headerSpacerManager ) {
+			this.headerSpacerManager = createHeaderSpacerManager( {
+				overlay
+			} );
+		}
+
+		await animateElement( overlay, isOpen, {
+			displayValue: 'flex',
+			duration: 150,
+			onEntering: () => {
+				bodyScroll( { shouldBeStopped: true } );
+
+				if ( !isHeadless ) {
+					this.headerSpacerManager.show();
+				}
+			},
+			onEntered: () => {
+				overlay.focus();
+
+				// Dispatch opened event when animation is complete
+				this._dispatchStateEvent( EVENTS.OPENED );
+			},
+			onExiting: () => {
+				bodyScroll( { shouldBeStopped: false } );
+			},
+			onExited: () => {
+				if ( !isHeadless ) {
+					this.headerSpacerManager.hide();
+				}
+
+				// Dispatch closed event when animation is complete
+				this._dispatchStateEvent( EVENTS.CLOSED );
+			}
+		} );
+
+		// Animation completed
+		this.setState( {
+			isAnimating: false
+		} );
+	}
+}
+
+/**
+ * Static variables are not supported in current configuration
+ */
+MobileOverlay.openOverlays = new Set();
+
+/**
+ * Attaches a listener for mobile overlay state changes.
+ *
+ * @param options - Configuration options
+ * @param options.eventName - The event name to listen for ('opened', 'closed', or 'state-changed')
+ * @param options.callback - The callback to execute when the event occurs
+ * @param [options.overlay] - Specific overlay element to listen for events from
+ * @param [options.target] - Custom event listener target (defaults to document or overlay)
+ * @returns Cleanup function to remove the listener
+ * @example
+ * // Listen for any overlay being opened
+ * const cleanup1 = onMobileOverlayStateChange({
+ *   eventName: 'opened',
+ *   callback: (detail) => {
+ *     console.log('Overlay opened:', detail.id);
+ *   }
+ * });
+ *
+ * // Listen for a specific overlay being closed
+ * const specificOverlay = document.querySelector('#my-overlay');
+ * const cleanup2 = onMobileOverlayStateChange({
+ *   eventName: 'closed',
+ *   callback: (detail) => {
+ *     console.log('Specific overlay closed');
+ *   },
+ *   overlay: specificOverlay
+ * });
+ *
+ * // Listen for overlay state changes within a specific dropdown menu
+ * const dropdown = document.querySelector('.dropdown-menu');
+ * const cleanup3 = onMobileOverlayStateChange({
+ *   eventName: 'state-changed',
+ *   callback: (detail) => {
+ *     console.log(`Overlay ${detail.id} is now ${detail.isOpen ? 'open' : 'closed'}`);
+ *   },
+ *   target: dropdown
+ * });
+ *
+ * // Clean up listeners when no longer needed
+ * cleanup1();
+ * cleanup2();
+ * cleanup3();
+ */
+export function onMobileOverlayStateChange( { eventName, callback, overlay, target } ) {
+	// Map shorthand event names to full event types
+	const eventMap = {
+		'opened': EVENTS.OPENED,
+		'closed': EVENTS.CLOSED,
+		'state-changed': EVENTS.STATE_CHANGED,
+		'opening': EVENTS.OPENING
+	};
+
+	// Get the full event name or use the provided one if not in the map
+	const fullEventName = eventMap[ eventName ] || eventName;
+
+	// Determine the target element:
+	// 1. Use explicitly provided target if set
+	// 2. Otherwise use overlay if specified
+	// 3. Fall back to document as default
+	const listenerTarget = target || overlay || document;
+
+	// Create the event handler function
+	const handler = event => {
+		// If a specific overlay was requested, check if this event is from that overlay
+		if ( overlay && event.detail?.overlay !== overlay ) {
+			return;
+		}
+		callback( event.detail, event );
+	};
+
+	// Attach the event listener
+	listenerTarget.addEventListener( fullEventName, handler );
+
+	// Return the cleanup function
+	return () => {
+		listenerTarget.removeEventListener( fullEventName, handler );
+	};
+}