JetFormBuilder Star Field

jet-form-builder-star-field.html

<style>

	:is(.star-field, .jet-form-builder__fields-group:has(.star-field-check)) {
		display: flex !important;
		flex-direction: row !important;
	}
	
	:is(.star-field, .jet-form-builder__fields-group:has(.star-field-check)) > .radio-wrap {
		display: inline-block !important;
	}
	
	:is(.star-field, .jet-form-builder__fields-group:has(.star-field-check)) .star {
		font-family: "Font Awesome 5 Free";
		position: absolute;
		padding: 0;
		margin: 0;
		font-weight: 200;
	}
	
	:is(.star-field, .jet-form-builder__fields-group:has(.star-field-check)) .star-on .star {
		font-weight: 900;
	}
	
	:is(.star-field, .jet-form-builder__fields-group:has(.star-field-check)) .for-radio .star:before {
		display: inline-block !important;
		background: none !important;
		border: none !important;
		content: "\f005" !important;
	}
	
	:is(.star-field, .jet-form-builder__fields-group:has(.star-field-check)) .for-radio span:not(.star) {
		opacity: 0 !important;
		font-size: 0 !important;
	}
	
	:is(.star-field, .jet-form-builder__fields-group:has(.star-field-check)) .star-on .star:before {
		border: none !important;
		background: none !important;
	}
</style>

<script>

	document.addEventListener(
		'DOMContentLoaded',
		initStarFields
	);
	
	function initStarFields() {
		const {
			addAction,
		} = window.JetPlugins.hooks;
		
		addAction(
			'jet.fb.input.makeReactive',
			'star-fields',
			makeStarField
		);
		
		function makeStarField( input ) {
			if ( ! input?.nodes?.length ) {
				return;
			}
		
			if ( ! input.nodes[0].classList.contains( 'star-field-check' ) ) {
				return;
			}
			
			const allowUnselect = input.nodes[0].classList.contains( 'allow-unselect' );
			
			input.wrapper.classList.add( 'star-field' );
			input.wrapper.starFieldInput = input;
			
			jQuery( input.wrapper ).mouseleave( applyFill );   
			
			for ( const node of input.nodes ) {
				let star = document.createElement("span");
				star.classList.add( 'star' );
				node.after( star );
				
				jQuery( star ).hover( applyFill, applyFill );
				
				if ( allowUnselect ) {
					node.addEventListener(
					'click',
					function() {
						if ( input.value.current === this.value ) {
							input.value.current = '';
						}
					}
					);
				}
			}
			
			input.value.watch( function() {
				applyFill( input );
			} );
		}
		
		function applyFill( e ) {
			let input;
			
			if ( e.wrapper ) {
				input = e;
			} else {
				const wrapper = e.currentTarget.closest( '.star-field' );
				input = wrapper.starFieldInput;
			}
			
			let checkOccured = false;
			let checkedNode = false;
			
			if ( e.currentTarget?.classList?.contains( 'star' ) ) {
				checkedNode = e.currentTarget.previousElementSibling;
			} else {
				for ( const node of input.nodes ) {
					if ( node.checked ) {
						checkedNode = node;
					}
				}
			}
			
			for ( const node of input.nodes ) {
				const parent = node.closest( '.radio-wrap' );
				
				if ( ! checkOccured && checkedNode ) {
					parent.classList.add( 'star-on' );
					
					if ( node === checkedNode ) {
						checkOccured = true;
					}
				} else {
					parent.classList.remove( 'star-on' );
				}
			}
		}
	}
	
</script>