velora-player/assets/js/admin-settings.js

( function( $, window ) {
	'use strict';

	var config = window.mapAdminSettings || {};
	var optionKey = config.optionKey || 'map_settings';
	var presetTokens = config.presets || {};

	function getFieldSelector( key ) {
		return '[name="' + optionKey + '[' + key + ']"]';
	}

	function getFieldValue( key ) {
		var $field = $( getFieldSelector( key ) );

		if ( ! $field.length ) {
			return null;
		}

		if ( 'checkbox' === $field.attr( 'type' ) ) {
			return $field.is( ':checked' ) ? 1 : 0;
		}

		return $field.val();
	}

	function setFieldValue( key, value ) {
		var $field = $( getFieldSelector( key ) );

		if ( ! $field.length ) {
			return;
		}

		if ( 'checkbox' === $field.attr( 'type' ) ) {
			$field.prop( 'checked', !! Number( value ) ).trigger( 'change' );
			return;
		}

		if ( $field.hasClass( 'map-color-field' ) ) {
			$field.wpColorPicker( 'color', value );
			return;
		}

		$field.val( value ).trigger( 'input' ).trigger( 'change' );
	}

	function updateRangeLabels() {
		$( '[data-map-range-value]' ).each( function() {
			var key = $( this ).data( 'mapRangeValue' );
			var $input = $( getFieldSelector( key ) );
			var unit = $input.data( 'unit' ) || '';
			$( this ).text( $input.val() + unit );
		} );
	}

	function buildPreviewStyles() {
		return {
			'--velora-bg': getFieldValue( 'player_background_color' ),
			'--velora-surface': getFieldValue( 'player_surface_color' ),
			'--velora-text': getFieldValue( 'player_text_color' ),
			'--velora-muted': getFieldValue( 'player_muted_text_color' ),
			'--velora-accent': getFieldValue( 'player_accent_color' ),
			'--velora-button-bg': getFieldValue( 'player_button_background_color' ),
			'--velora-button-text': getFieldValue( 'player_button_text_color' ),
			'--velora-progress-bg': getFieldValue( 'player_progress_background_color' ),
			'--velora-progress-fill': getFieldValue( 'player_progress_fill_color' ),
			'--velora-border': getFieldValue( 'player_border_color' ),
			'--velora-shadow': getFieldValue( 'player_shadow_color' ),
			'--velora-radius': getFieldValue( 'player_border_radius' ) + 'px',
			'--velora-padding': getFieldValue( 'player_padding' ) + 'px',
			'--velora-font-size': getFieldValue( 'player_font_size' ) + 'px',
			'--map-progress-percent': '38%'
		};
	}

	function updatePreview() {
		var preset = $( '[data-map-preset-select]' ).val();
		var $preview = $( '[data-map-admin-preview]' );
		var styles = buildPreviewStyles();
		var hasCover = Number( getFieldValue( 'player_show_cover_image' ) );

		$preview.css( styles );
		$preview
			.removeClass( 'map-theme-modern-dark map-theme-glassmorphism map-theme-podcast-style map-player--no-cover' )
			.addClass( 'map-theme-' + preset );

		$( '[data-map-preview-theme]' ).text(
			$( '[data-map-preset-select] option:selected' ).text()
		);

		if ( hasCover ) {
			$preview.find( '.map-player__cover-wrap' ).show();
			$preview.attr( 'data-map-has-cover', 'true' );
		} else {
			$preview.find( '.map-player__cover-wrap' ).hide();
			$preview
				.addClass( 'map-player--no-cover' )
				.attr( 'data-map-has-cover', 'false' );
		}

		if ( Number( getFieldValue( 'player_show_theme_label' ) ) ) {
			$preview.find( '.map-player__eyebrow' ).show();
		} else {
			$preview.find( '.map-player__eyebrow' ).hide();
		}

		updateRangeLabels();
	}

	function applyPreset( preset ) {
		if ( ! presetTokens[ preset ] ) {
			return;
		}

		Object.keys( presetTokens[ preset ] ).forEach( function( key ) {
			setFieldValue( key, presetTokens[ preset ][ key ] );
		} );

		updatePreview();
	}

	function initColorPickers() {
		$( '.map-color-field' ).wpColorPicker( {
			change: function() {
				window.setTimeout( updatePreview, 0 );
			},
			clear: function() {
				window.setTimeout( updatePreview, 0 );
			}
		} );
	}

	function setActivePanel( panelKey ) {
		$( '.map-design-form .nav-tab' ).removeClass( 'nav-tab-active' );
		$( '.map-design-form .nav-tab[data-map-tab="' + panelKey + '"]' ).addClass( 'nav-tab-active' );

		$( '.map-settings-panel' ).removeClass( 'is-active' );
		$( '.map-settings-panel[data-map-panel="' + panelKey + '"]' ).addClass( 'is-active' );

		$( '.map-settings-panels' ).scrollTop( 0 );
	}

	function initTabs() {
		$( '.map-design-form .nav-tab' ).on( 'click', function( event ) {
			event.preventDefault();
			setActivePanel( $( this ).data( 'mapTab' ) );
		} );
	}

	function initResetConfirmation() {
		$( '.map-reset-button' ).on( 'click', function( event ) {
			if ( ! window.confirm( config.i18n.resetConfirm ) ) {
				event.preventDefault();
			}
		} );
	}

	$( function() {
		initColorPickers();
		initTabs();
		initResetConfirmation();

		$( document ).on( 'input change', '[data-map-field], [data-map-preset-select]', updatePreview );
		$( '[data-map-preset-select]' ).on( 'change', function() {
			applyPreset( $( this ).val() );
		} );

		setActivePanel( 'presets' );
		updatePreview();
	} );
}( jQuery, window ) );