Custom_Image_Header::js_2()publicWP 2.6.0

Displays JavaScript based on Step 2.

Method of the class: Custom_Image_Header{}

No Hooks.

Return

null. Nothing (null).

Usage

$Custom_Image_Header = new Custom_Image_Header();
$Custom_Image_Header->js_2();

Changelog

Since 2.6.0 Introduced.

Custom_Image_Header::js_2() code WP 6.5.2

<?php
public function js_2() {

	?>
<script type="text/javascript">
function onEndCrop( coords ) {
	jQuery( '#x1' ).val(coords.x);
	jQuery( '#y1' ).val(coords.y);
	jQuery( '#width' ).val(coords.w);
	jQuery( '#height' ).val(coords.h);
}

jQuery( function() {
	var xinit = <?php echo absint( get_theme_support( 'custom-header', 'width' ) ); ?>;
	var yinit = <?php echo absint( get_theme_support( 'custom-header', 'height' ) ); ?>;
	var ratio = xinit / yinit;
	var ximg = jQuery('img#upload').width();
	var yimg = jQuery('img#upload').height();

	if ( yimg < yinit || ximg < xinit ) {
		if ( ximg / yimg > ratio ) {
			yinit = yimg;
			xinit = yinit * ratio;
		} else {
			xinit = ximg;
			yinit = xinit / ratio;
		}
	}

	jQuery('img#upload').imgAreaSelect({
		handles: true,
		keys: true,
		show: true,
		x1: 0,
		y1: 0,
		x2: xinit,
		y2: yinit,
		<?php
		if ( ! current_theme_supports( 'custom-header', 'flex-height' )
			&& ! current_theme_supports( 'custom-header', 'flex-width' )
		) {
			?>
		aspectRatio: xinit + ':' + yinit,
			<?php
		}
		if ( ! current_theme_supports( 'custom-header', 'flex-height' ) ) {
			?>
		maxHeight: <?php echo get_theme_support( 'custom-header', 'height' ); ?>,
			<?php
		}
		if ( ! current_theme_supports( 'custom-header', 'flex-width' ) ) {
			?>
		maxWidth: <?php echo get_theme_support( 'custom-header', 'width' ); ?>,
			<?php
		}
		?>
		onInit: function () {
			jQuery('#width').val(xinit);
			jQuery('#height').val(yinit);
		},
		onSelectChange: function(img, c) {
			jQuery('#x1').val(c.x1);
			jQuery('#y1').val(c.y1);
			jQuery('#width').val(c.width);
			jQuery('#height').val(c.height);
		}
	});
} );
</script>
	<?php
}