umberto 7.0.2 → 8.0.0

package/themes/umberto/src/gloria/js/modules/header-bar.js

@@ -0,0 +1,154 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { BaseComponent } from '../components/base-component';
+import { localStorageHelper } from '../helpers/local-storage-helper';
+import { isUnsafeProperty } from '../helpers/is-unsafe-key';
+import { Weeks } from '../helpers/date-time';
+
+/**
+ * Remember about renaming inline script in the header bar template.
+ */
+const LOCAL_STORAGE_KEY = 'gloria-closed-header-bars';
+
+/**
+ * Component for managing a closeable header bar.
+ * Handles storing closed state in localStorage and toggling visibility.
+ */
+export class HeaderBar extends BaseComponent {
+	/**
+	 * Creates a header bar component.
+	 *
+	 * @param element - The header bar DOM element
+	 */
+	constructor( element ) {
+		super( {
+			isHidden: false
+		} );
+
+		this.elements = {
+			wrapper: element,
+			closeButton: element.querySelector( '.c-header-bar__close' )
+		};
+
+		this.stateKey = element.dataset.stateStorageKey;
+
+		// Skip initialization if no valid state key
+		if ( this.isCloseable && isUnsafeProperty( this.stateKey ) ) {
+			throw new Error( 'Header bar has no valid state key:', element );
+		}
+	}
+
+	/**
+	 * Creates header bar components for all matching elements on the page.
+	 */
+	static attach() {
+		const headerBarElements = document.querySelectorAll( '.js-header-bar' );
+
+		for ( const element of headerBarElements ) {
+			new HeaderBar( element ).init();
+		}
+	}
+
+	/**
+	 * Checks if the header bar is closeable.
+	 */
+	get isCloseable() {
+		return !!this.stateKey && this.elements.closeButton;
+	}
+
+	/**
+	 * Initializes the header bar component.
+	 * Loads the initial state from localStorage and binds events.
+	 */
+	init() {
+		if ( !this.isCloseable ) {
+			return;
+		}
+
+		const closedBars = localStorageHelper.get( LOCAL_STORAGE_KEY ) || {};
+		const isHidden = !!closedBars[ this.stateKey ];
+
+		this.setState( { isHidden } );
+		this.elements.closeButton.addEventListener( 'click', () => this.close() );
+	}
+
+	/**
+	 * Renders the component based on current state.
+	 * Updates the visibility of the header bar.
+	 *
+	 * @param prevState - Previous component state
+	 * @param state - Current component state
+	 */
+	render( prevState, state ) {
+		if ( prevState?.isHidden !== state.isHidden ) {
+			this.elements.wrapper.classList.toggle( 'is-hidden', state.isHidden );
+			this.saveClosedState();
+		}
+	}
+
+	/**
+	 * Load all closed header bars from localStorage.
+	 *
+	 * @returns Map of closed header bars
+	 */
+	loadClosedHeaderBars() {
+		return localStorageHelper.get( LOCAL_STORAGE_KEY ) || {};
+	}
+
+	/**
+	 * Save the current closed state to localStorage.
+	 */
+	saveClosedState() {
+		const closedBars = this.loadClosedHeaderBars();
+
+		if ( this.state.isHidden ) {
+			closedBars[ this.stateKey ] = true;
+		} else {
+			delete closedBars[ this.stateKey ];
+		}
+
+		localStorageHelper.set( LOCAL_STORAGE_KEY, closedBars, {
+			expire: Weeks.to.milliseconds( 2 )
+		} );
+	}
+
+	/**
+	 * Close this header bar and save its state.
+	 */
+	close() {
+		this.setState( { isHidden: true } );
+		this.dispatchHeaderChangeEvent();
+	}
+
+	/**
+	 * Dispatch a custom event to notify other components about the header bar change.
+	 */
+	dispatchHeaderChangeEvent() {
+		const headerChangeEvent = new CustomEvent( 'header-bar:update', {
+			bubbles: true,
+			detail: { text: () => 'Header bar was removed.' }
+		} );
+
+		document.dispatchEvent( headerChangeEvent );
+	}
+}
+
+/**
+ * Attaches a listener to the header bar update event.
+ */
+export function onHeaderBarStateChange( callback ) {
+	const handler = event => {
+		if ( event.detail.text() === 'Header bar was removed.' ) {
+			callback();
+		}
+	};
+
+	document.addEventListener( 'header-bar:update', handler );
+
+	return () => {
+		document.removeEventListener( 'header-bar:update', handler );
+	};
+}

package/themes/umberto/src/gloria/js/modules/header.js

@@ -0,0 +1,242 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { BaseComponent } from '../components/base-component';
+import { onHeaderBarStateChange } from './header-bar';
+
+/**
+ * Component for managing a header.
+ */
+export class Header extends BaseComponent {
+	/**
+	 * Creates a header component.
+	 *
+	 * @param element - The header bar DOM element
+	 */
+	constructor( element ) {
+		super( {
+			isOnOverlay: false,
+			headerHeight: null
+		} );
+
+		this.elements = {
+			header: element
+		};
+	}
+
+	/**
+	 * Gets the singleton instance of the Header
+	 */
+	static get the() {
+		return this.instance;
+	}
+
+	/**
+	 * Creates header component.
+	 */
+	static attach() {
+		const headerElement = document.querySelector( '.js-header' );
+
+		if ( !headerElement ) {
+			return;
+		}
+
+		Header.instance = new Header( headerElement ).init();
+
+		return Header.instance;
+	}
+
+	/**
+	 * Returns the header element.
+	 */
+	get element() {
+		return this.elements.header;
+	}
+
+	/**
+	 * Initializes the header component.
+	 * Sets the header height variable on body element.
+	 */
+	init() {
+		this._trackHeight();
+
+		window.addEventListener( 'scroll', this._trackHeight.bind( this ) );
+		window.addEventListener( 'resize', this._trackHeight.bind( this ) );
+		onHeaderBarStateChange( this._trackHeight.bind( this ) );
+
+		this.render?.();
+
+		return this;
+	}
+
+	/**
+	 * Renders the component based on current state.
+	 * Called automatically when state changes.
+	 *
+	 * @param prevState - Previous component state
+	 * @param state - Current component state
+	 */
+	render( prevState, state = this.state ) {
+		if ( !!prevState?.isOnOverlay !== !!state.isOnOverlay ) {
+			this.element.classList.toggle( 'is-on-top-overlay', state.isOnOverlay );
+			this.dispatchHeaderResizeEvent();
+		} else if ( prevState?.height !== state.height && state.height !== null ) {
+			this.dispatchHeaderResizeEvent();
+		}
+	}
+
+	/**
+	 * Toggles the header on overlay.
+	 */
+	toggleOnOverlay() {
+		this.setState( {
+			isOnOverlay: !this.state.isOnOverlay
+		} );
+	}
+
+	/**
+	 * Dispatches a custom event to notify other components about the header resize.
+	 */
+	dispatchHeaderResizeEvent( height = this.getVisibleHeight() ) {
+		const headerResizeEvent = new CustomEvent( 'header:resize', {
+			bubbles: true,
+			detail: {
+				height,
+				text: () => 'Header size was changed.'
+			}
+		} );
+
+		document.dispatchEvent( headerResizeEvent );
+	}
+
+	/**
+	 * Calculates the visible height of the header.
+	 */
+	getVisibleHeight() {
+		const rect = this.element.getBoundingClientRect();
+
+		return Math.max( 0, Math.ceil( rect.bottom ) );
+	}
+
+	/**
+	 * Gets the height of the header element.
+	 */
+	getHeight() {
+		return this.element.offsetHeight;
+	}
+
+	/**
+	 * Sets the header height variable on the body element.
+	 */
+	_trackHeight() {
+		this.setState( {
+			height: this.getVisibleHeight()
+		} );
+	}
+}
+
+/**
+ * Creates a header spacer manager to handle showing/hiding the header
+ * in overlay contexts.
+ *
+ * @param options - Options object
+ * @param options.overlay - The overlay element
+ * @param [options.setSpacing] - Optional callback to set custom spacing on the overlay
+ * @returns An object with methods to show and hide the header spacer
+ */
+
+let _headerSpacerCount = 0;
+let _headerSpacer = null;
+
+export function createHeaderSpacerManager(
+	{
+		overlay,
+		setSpacing
+	}
+) {
+	const { element } = Header.the;
+	const headerHeight = `${ element.offsetHeight }px`;
+
+	// Default spacing function sets paddingTop
+	const defaultSetSpacing = ( overlay, headerHeight ) => {
+		overlay.style.paddingTop = headerHeight;
+	};
+
+	// Use provided spacing function or fall back to default
+	const applySpacing = setSpacing || defaultSetSpacing;
+
+	return {
+		/**
+		 * Shows the header spacer and positions the header on top of the overlay
+		 */
+		show: () => {
+			// Increment the global counter
+			_headerSpacerCount++;
+
+			// Create the spacer if this is the first overlay being shown
+			if ( _headerSpacerCount === 1 && !_headerSpacer ) {
+				_headerSpacer = document.createElement( 'div' );
+				_headerSpacer.style.width = '100%';
+				_headerSpacer.classList.add( 'js-header-spacer' );
+				_headerSpacer.style.height = headerHeight;
+
+				window.requestAnimationFrame( () => {
+					element.parentNode.insertBefore( _headerSpacer, element );
+					Header.the.toggleOnOverlay();
+				} );
+			} else if ( _headerSpacer ) {
+				// Update height if spacer already exists
+				_headerSpacer.style.height = headerHeight;
+			}
+
+			// Apply spacing to this specific overlay
+			applySpacing( overlay, headerHeight );
+		},
+
+		/**
+		 * Hides the header spacer and restores the original header position
+		 */
+		hide: () => {
+			// Decrement the counter (never below 0)
+			_headerSpacerCount = Math.max( 0, _headerSpacerCount - 1 );
+
+			// If counter reaches 0, remove the spacer
+			if ( _headerSpacerCount === 0 && _headerSpacer ) {
+				window.requestAnimationFrame( () => {
+					_headerSpacer.remove();
+					_headerSpacer = null;
+					Header.the.toggleOnOverlay();
+				} );
+			}
+
+			// Always remove spacing from this specific overlay
+			if ( !setSpacing ) {
+				overlay.style.paddingTop = '';
+			} else {
+				applySpacing( overlay, '' );
+			}
+		}
+	};
+}
+
+/**
+ * Attaches a listener to the header resize event.
+ *
+ * @param callback - Function to call when header size changes
+ * @returns Function to remove the event listener
+ */
+export function onHeaderResize( callback ) {
+	const handler = event => {
+		if ( event.detail.text() === 'Header size was changed.' ) {
+			callback( event.detail.height );
+		}
+	};
+
+	document.addEventListener( 'header:resize', handler );
+
+	return () => {
+		document.removeEventListener( 'header:resize', handler );
+	};
+}

package/themes/umberto/src/gloria/js/modules/links-prefetch.js

@@ -0,0 +1,196 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { throttle } from '../helpers/throttle';
+
+/**
+ * Maximum number of preloaded elements to keep in the DOM
+ */
+const MAX_PRELOADED_ELEMENTS = 20;
+
+/**
+ * Link prefetching singleton class.
+ * Preloads links when users hover over them for better navigation experience.
+ */
+export class LinksPrefetch {
+	/**
+	 * Gets the singleton instance of LinkPrefetch
+	 */
+	static get the() {
+		this.instance = this.instance || new LinksPrefetch();
+
+		return this.instance;
+	}
+
+	constructor() {
+		if ( this.instance ) {
+			return this.instance;
+		}
+
+		this.preloadedMap = new Map();
+		this.handleMouseover = null;
+	}
+
+	/**
+	 * Initialize link prefetching on the document
+	 * @returns The current instance for chaining
+	 */
+	init() {
+		this.handleMouseover = throttle( event => {
+			const link = event.target.closest( 'a' );
+
+			if ( link ) {
+				this.preload( link.href );
+			}
+		}, 50 );
+
+		document.addEventListener( 'mouseover', this.handleMouseover );
+		this._preloadMarkedLinks();
+
+		return this;
+	}
+
+	/**
+	 * Preload a URL if it is valid and not already preloaded
+	 *
+	 * @param url - The URL to preload
+	 */
+	preload( url ) {
+		if ( !isPreloadable( url ) || this.preloadedMap.has( url ) ) {
+			return;
+		}
+
+		const element = preloadWithSpeculationRules( url ) || preloadWithLinkPrefetch( url );
+
+		if ( element ) {
+			this.preloadedMap.set( url, element );
+			this._removeOldestPreloadedElement();
+		}
+	}
+
+	/**
+	 * Cleanup and remove event listeners
+	 */
+	destroy() {
+		document.removeEventListener( 'mouseover', this.handleMouseover );
+
+		this.preloadedMap.forEach( element => {
+			if ( element && element.parentNode ) {
+				element.parentNode.removeChild( element );
+			}
+		} );
+
+		this.preloadedMap.clear();
+	}
+
+	/**
+	 * Preload all links with js-link-preload class
+	 */
+	_preloadMarkedLinks() {
+		const preloadLinks = document.querySelectorAll( 'a.js-link-preload' );
+
+		preloadLinks.forEach( link => {
+			if ( link.href ) {
+				this.preload( link.href );
+			}
+		} );
+	}
+
+	/**
+	 * Removes the oldest preloaded element when we exceed the maximum limit
+	 */
+	_removeOldestPreloadedElement() {
+		if ( this.preloadedMap.size <= MAX_PRELOADED_ELEMENTS ) {
+			return;
+		}
+
+		const oldestUrl = this.preloadedMap.keys().next().value;
+		const element = this.preloadedMap.get( oldestUrl );
+
+		if ( element && element.parentNode ) {
+			element.parentNode.removeChild( element );
+		}
+
+		this.preloadedMap.delete( oldestUrl );
+	}
+}
+
+/**
+ * Checks if a URL should be preloaded.
+ *
+ * @param url - The URL to check
+ * @returns Whether the URL should be preloaded
+ */
+function isPreloadable( url ) {
+	try {
+		const urlObj = new URL( url );
+		const currentDomain = window.location.hostname;
+
+		// Must be from the same domain
+		if ( urlObj.hostname !== currentDomain ) {
+			return false;
+		}
+
+		// Must not have UTM parameters
+		if ( urlObj.searchParams.toString().toLowerCase().includes( 'utm_' ) ) {
+			return false;
+		}
+
+		return true;
+	} catch ( error ) {
+		console.error( 'Invalid URL for preloading:', url, error );
+		return false;
+	}
+}
+
+/**
+ * Preload using modern speculationrules API.
+ *
+ * @param url - The URL to preload
+ * @returns The created script element if successful, null otherwise
+ */
+function preloadWithSpeculationRules( url ) {
+	if ( !( 'supports' in document.createElement( 'script' ).style ) ||
+			!CSS.supports( 'speculationrules', '*' ) ) {
+		return null;
+	}
+
+	try {
+		const specScript = document.createElement( 'script' );
+		specScript.type = 'speculationrules';
+		specScript.text = JSON.stringify( {
+			prerender: [ {
+				source: 'list',
+				urls: [ url ]
+			} ]
+		} );
+
+		document.head.appendChild( specScript );
+		return specScript;
+	} catch ( error ) {
+		console.error( 'Failed to preload with speculationrules:', error );
+		return null;
+	}
+}
+
+/**
+ * Fallback preload using link prefetch.
+ *
+ * @param url - The URL to preload
+ * @returns The created link element if successful, null otherwise
+ */
+function preloadWithLinkPrefetch( url ) {
+	try {
+		const linkElement = document.createElement( 'link' );
+		linkElement.rel = 'prefetch';
+		linkElement.href = url;
+
+		document.head.appendChild( linkElement );
+		return linkElement;
+	} catch ( error ) {
+		console.error( 'Failed to preload with link prefetch:', error );
+		return null;
+	}
+}