Slide a shared highlight between Add Fields buttons on hover

Each button faded in its own background, so nothing carried the eye between them.
One element now travels to the hovered button, with travel time scaled to distance
so a fast sweep neither lags behind nor stays dimmed.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: tuguirazvan

css/frm_admin.css

@@ -5,6 +5,7 @@
  */
 const { validateField } = require( './settings/validateField' );
 const { getRangeSettingsDefaults, validateNumberRangeSetting, validateStepSetting, validateRangeSettings } = require( './settings/validateRangeSettings' );
+const { initFieldListHoverPill } = require( './fieldListHoverPill' );
 
 window.FrmFormsConnect = window.FrmFormsConnect || ( function( document, window, $ ) {
 	const el = {
@@ -10888,6 +10889,7 @@ window.frmAdminBuildJS = function() {
 			setupSortable( 'ul.frm_sorting' );
 
 			document.querySelectorAll( '.field_type_list > li:not(.frm_show_upgrade):not(.frm_show_update)' ).forEach( makeDraggable );
+			initFieldListHoverPill();
 
 			jQuery( 'ul.field_type_list, .field_type_list li, ul.frm_code_list, .frm_code_list li, .frm_code_list li a, #frm_adv_info #category-tabs li, #frm_adv_info #category-tabs li a' ).disableSelection();
 

js/formidable_admin.js

@@ -0,0 +1,143 @@
+/**
+ * Field list hover pill.
+ *
+ * One shared element slides to whichever field button is hovered. The per-button hover in
+ * _insert-fields.scss remains as the no-JS fallback.
+ *
+ * @since x.x
+ */
+
+const PILL_CLASS = 'frm-insert-fields-hover';
+const ACTIVE_CLASS = 'frm-has-hover-pill';
+const ANIMATING_CLASS = 'frm-animating';
+
+/**
+ * Travel time bounds, in milliseconds.
+ */
+const MIN_TRAVEL = 120;
+const MAX_TRAVEL = 300;
+const TRAVEL_PER_PX = 0.9;
+
+/**
+ * Travels at or above this dim while moving. Shorter hops keep full opacity.
+ *
+ * @type {number}
+ */
+const DIM_ABOVE_TRAVEL = 200;
+
+/**
+ * Grace period on the fallback un-dim timer, in milliseconds.
+ *
+ * @type {number}
+ */
+const ANIMATING_GRACE = 60;
+
+/**
+ * Adds the sliding hover pill to the Add Fields list.
+ *
+ * @since x.x
+ *
+ * @return {void}
+ */
+export function initFieldListHoverPill() {
+	const list = document.querySelector( '#frm-insert-fields .field_type_list' );
+
+	if ( ! list || list.classList.contains( ACTIVE_CLASS ) ) {
+		return;
+	}
+
+	const pill = document.createElement( 'div' );
+	pill.classList.add( PILL_CLASS, 'frm_hidden' );
+	list.append( pill );
+	list.classList.add( ACTIVE_CLASS );
+
+	let animatingTimeout;
+	let currentX = null;
+	let currentY = null;
+
+	/**
+	 * Ends the dim on transitionend rather than a fixed delay, so a fast sweep across several
+	 * cards cannot leave the pill stuck dimmed.
+	 *
+	 * @return {void}
+	 */
+	const settle = () => {
+		clearTimeout( animatingTimeout );
+		pill.classList.remove( ANIMATING_CLASS );
+	};
+
+	pill.addEventListener( 'transitionend', event => {
+		if ( 'transform' === event.propertyName ) {
+			settle();
+		}
+	} );
+
+	/**
+	 * Moves the pill over a field button, matching its size and position.
+	 *
+	 * @param {HTMLElement} button The hovered anchor.
+	 * @return {void}
+	 */
+	const moveTo = button => {
+		const listRect = list.getBoundingClientRect();
+		const buttonRect = button.getBoundingClientRect();
+		const x = buttonRect.left - listRect.left;
+		const y = buttonRect.top - listRect.top;
+		const isFirstShow = null === currentX;
+		const distance = isFirstShow ? 0 : Math.hypot( x - currentX, y - currentY );
+		const travel = Math.min( MAX_TRAVEL, Math.max( MIN_TRAVEL, Math.round( distance * TRAVEL_PER_PX ) ) );
+
+		currentX = x;
+		currentY = y;
+
+		pill.style.setProperty( '--frm-pill-travel', `${ travel }ms` );
+		pill.style.width = `${ buttonRect.width }px`;
+		pill.style.height = `${ buttonRect.height }px`;
+		pill.style.transform = `translate(${ x }px, ${ y }px)`;
+
+		pill.classList.remove( 'frm_hidden' );
+
+		if ( isFirstShow || travel < DIM_ABOVE_TRAVEL ) {
+			settle();
+			return;
+		}
+
+		pill.classList.add( ANIMATING_CLASS );
+
+		// Fallback for when transitionend does not fire, e.g. an interrupted or zero-length travel.
+		clearTimeout( animatingTimeout );
+		animatingTimeout = setTimeout( settle, travel + ANIMATING_GRACE );
+	};
+
+	/**
+	 * Hides the pill.
+	 *
+	 * @return {void}
+	 */
+	const hide = () => {
+		settle();
+		pill.classList.add( 'frm_hidden' );
+
+		// Hidden means display:none, so the next appearance jumps. Forgetting the position
+		// stops that jump being measured as a long travel.
+		currentX = null;
+		currentY = null;
+	};
+
+	// Delegated so field buttons added after load are covered too.
+	list.addEventListener( 'mouseover', event => {
+		const button = event.target.closest( 'li.frmbutton > a' );
+
+		if ( ! button || button.classList.contains( 'disabled' ) ) {
+			hide();
+			return;
+		}
+
+		moveTo( button );
+	} );
+
+	list.addEventListener( 'mouseleave', hide );
+
+	// Dragging a field lifts it away from the cursor, leaving the pill with nothing to sit under.
+	list.addEventListener( 'mousedown', hide );
+}

js/src/admin/admin.js

@@ -241,3 +241,59 @@ input[disabled] {
 .frmbutton.frm_at_limit {
 	opacity: 0.5;
 }
+
+/**
+ * Hover pill
+ *
+ * Created by initFieldListHoverPill(), which also adds .frm-has-hover-pill. Without it the
+ * per-button hover above still applies.
+ */
+.field_type_list {
+	position: relative;
+}
+
+.frm-insert-fields-hover {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 0;
+	border-radius: var(--small-radius);
+	background: #fff;
+	box-shadow: var(--box-shadow-md);
+	pointer-events: none;
+	will-change: transform;
+
+	/* Set per move by initFieldListHoverPill(), scaled to the distance. */
+	--frm-pill-travel: 300ms;
+
+	transition:
+		0.15s opacity ease,
+		var(--frm-pill-travel) transform cubic-bezier(0.165, 0.84, 0.44, 1),
+		var(--frm-pill-travel) width cubic-bezier(0.165, 0.84, 0.44, 1),
+		var(--frm-pill-travel) height cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.frm-insert-fields-hover.frm-animating {
+	opacity: 0.45;
+}
+
+.field_type_list.frm-has-hover-pill {
+
+	li.frmbutton a {
+		position: relative;
+		z-index: 1;
+	}
+
+	/* The pill paints the hover state now, so the button stops painting its own. */
+	li.frmbutton a:not(.disabled):hover {
+		background: transparent;
+		box-shadow: none;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+	.frm-insert-fields-hover {
+		transition: none;
+	}
+}