<?php if ( !defined( 'ABSPATH' ) ) exit;//PHPの宣言と直接アクセスの拒否

/********** 旧メニュー用の画像アップローダー（メニュー切り替え後に削除） **********/
/***** 画像アップロードフォームの生成と処理(URL) *****/
function haup_generate_upload_image_tag($name, $value){
?>
<div class="image-upload-form">
	<input name="<?php echo esc_html($name); ?>" type="text" size="80" value="<?php echo esc_html($value); ?>" />
	<div id="<?php echo esc_html($name); ?>_thumbnail" class="uploded-thumbnail">
		<?php if ($value): ?>
			<img src="<?php echo esc_html($value); ?>" alt="selected image">
		<?php endif ?>
		<br>
		<input type="button" name="<?php echo esc_html($name); ?>_slect" value="<?php esc_html_e('Select Image','hima-art-utility'); ?>" />
		<input type="button" name="<?php echo esc_html($name); ?>_clear" value="<?php esc_html_e('Clear Image','hima-art-utility'); ?>" />
	</div>
</div>
<style>
.uploded-thumbnail img {
	width: 300px;
	height: 200px;
	object-fit:scale-down;
	object-position:center center;
}
</style>
<script type="text/javascript">
(function ($) {
	var custom_uploader;
	$("input:button[name=<?php echo esc_html($name); ?>_slect]").click(function(e) {
		e.preventDefault();
	if (custom_uploader) {
		custom_uploader.open();
		return;
	}

	custom_uploader = wp.media({
		title: "<?php esc_html_e('Select Image','hima-art-utility'); ?>",
		/* ライブラリの一覧は画像のみにする */
		library: {
			type: "image"
		},
		button: {
			text: "<?php esc_html_e('Set Image','hima-art-utility'); ?>"
		},
		/* 選択できる画像は 1 つだけにする */
			multiple: false
	});

	custom_uploader.on("select", function() {
		var images = custom_uploader.state().get("selection");
		/* file の中に選択された画像の各種情報が入っている */
			images.each(function(file){
		/* テキストフォームと表示されたサムネイル画像があればクリア */
			$("input:text[name=<?php echo esc_html($name); ?>]").val("");
			$("#<?php echo esc_html($name); ?>_thumbnail").empty();
		/* テキストフォームに画像の URL を表示 */
			$("input:text[name=<?php echo esc_html($name); ?>]").val(file.attributes.sizes.full.url);
		/* プレビュー用に選択されたサムネイル画像を表示 */
			$("#<?php echo esc_html($name); ?>_thumbnail").append('<img src="'+file.attributes.sizes.full.url+'" />');
	});
});

	custom_uploader.open();
});

	/* クリアボタンを押した時の処理 */
		$("input:button[name=<?php echo esc_html($name); ?>_clear]").click(function() {
		$("input:text[name=<?php echo esc_html($name); ?>]").val("");
		$("#<?php echo esc_html($name); ?>_thumbnail").empty();
	});

})(jQuery);
</script>
<?php
}

/***** 画像アップロードフォームの生成と処理(ID) *****/
function haup_generate_upload_image_id($name, $value){
?>
<div class="image-upload-form">
	<input name="<?php echo esc_html($name); ?>" type="text" size="20" value="<?php echo esc_html($value); ?>" />
	<div id="<?php echo esc_html($name); ?>_thumbnail" class="uploded-thumbnail">
		<?php if ($value): ?>
			<?php $image_url = wp_get_attachment_url(get_option($name)); ?>
			<img src="<?php echo esc_html($image_url); ?>" alt="selected image">
	<?php endif ?>
	<br>
	<input type="button" name="<?php echo esc_html($name); ?>_slect" value="<?php esc_html_e('Select Image','hima-art-utility'); ?>" />
	<input type="button" name="<?php echo esc_html($name); ?>_clear" value="<?php esc_html_e('Clear Image','hima-art-utility'); ?>" />
	</div>
</div>
<style>
.uploded-thumbnail img {
	width: 300px;
	height: 200px;
	object-fit:scale-down;
	object-position:center center;
}
</style>
<script type="text/javascript">
(function ($) {
var custom_uploader;
$("input:button[name=<?php echo esc_html($name); ?>_slect]").click(function(e) {
	e.preventDefault();
	if (custom_uploader) {
		custom_uploader.open();
		return;
	}

	custom_uploader = wp.media({
		title: "<?php esc_html_e('Select Image','hima-art-utility'); ?>",
	/* ライブラリの一覧は画像のみにする */
		library: {
			type: "image"
		},
		button: {
			text: "<?php esc_html_e('Set Image','hima-art-utility'); ?>"
		},
	/* 選択できる画像は 1 つだけにする */
		multiple: false
	});

	custom_uploader.on("select", function() {
		var images = custom_uploader.state().get("selection");
	/* file の中に選択された画像の各種情報が入っている */
		images.each(function(file){
	/* テキストフォームと表示されたサムネイル画像があればクリア */
		$("input:text[name=<?php echo esc_html($name); ?>]").val("");
		$("#<?php echo esc_html($name); ?>_thumbnail").empty();
	/* テキストフォームに画像の URL を表示 */
		$("input:text[name=<?php echo esc_html($name); ?>]").val(file.id);
	/* プレビュー用に選択されたサムネイル画像を表示 */
		$("#<?php echo esc_html($name); ?>_thumbnail").append('<img src="'+file.attributes.sizes.thumbnail.url+'" />');
	});
});

	custom_uploader.open();
});

	/* クリアボタンを押した時の処理 */
		$("input:button[name=<?php echo esc_html($name); ?>_clear]").click(function() {
		$("input:text[name=<?php echo esc_html($name); ?>]").val("");
		$("#<?php echo esc_html($name); ?>_thumbnail").empty();
});
})(jQuery);
</script>
<?php
}

/***** WordPress標準のメディアアップローダの javascript API呼び出し *****/
function haup_add_enqueue_media_scripts() {
//メディアアップローダの javascript API
	wp_enqueue_media();
}
add_action( 'admin_print_scripts', 'haup_add_enqueue_media_scripts' );

/********** 旧メニュー用の画像アップローダーここまで **********/


/********** 新しいメニュー用の画像アップロードスクリプト **********/
/***** 画像アップローダー（URL） *****/
function haumenu_enqueue_image_uploader_script_url($set_name, $option_name, $custom_uploader_text, $new_image_message) {
// メディアライブラリスクリプトの読み込み
	wp_enqueue_media();
?>
<script>
jQuery(document).ready(function($){
	//変数は関数末尾で指定
	function initImageUploader(buttonSelector, inputSelector, customUploaderText, imagePreview, NewimageMessage) {
		var customUploader;

		$(buttonSelector).click(function(e) {
			e.preventDefault();

			// 既に画像アップロード画面が表示されていれば処理を中止（無視）する
			if (customUploader) {
				customUploader.open();
				return;
			}

			// wp.mediaを開くためのボタンの処理
			customUploader = wp.media.frames.file_frame = wp.media({
				title: customUploaderText,
				button: {
					text: customUploaderText
				},
				multiple: false
			});

			// 画像選択後にURLをテキスト欄へ、プレビューのHTMLを出力する
			customUploader.on('select', function() {
				var attachment = customUploader.state().get('selection').first().toJSON();
				$(inputSelector).val(attachment.url);
				$(imagePreview).html('<p>' + NewimageMessage + '</p><img src="' + attachment.url + '" style="max-width:300px;">');
       
				
				
			});

			// 画像アップロード画面を表示
			customUploader.open();
		});
	}

	//スクリプトのコードを見やすくするため、受け取った変数をスクリプト内の変数として格納
	initImageUploader(
		'<?php echo esc_html('#upload_image_button_' .$set_name . $option_name); ?>',
		'<?php echo esc_html('#upload_' .$set_name . $option_name); ?>',
		'<?php echo esc_html($custom_uploader_text); ?>',
		'<?php echo esc_html('#image_preview_' .$set_name. $option_name); ?>',
		'<?php echo esc_html($new_image_message); ?>'
	);
});
</script>
<?php
}

/***** 画像アップローダー（ID） *****/
function haumenu_enqueue_image_uploader_script_id($set_name, $option_name, $custom_uploader_text, $new_image_message) {
// メディアライブラリスクリプトの読み込み
	wp_enqueue_media();
?>
<script>
jQuery(document).ready(function($){
	//変数は関数末尾で指定
	function initImageUploader(buttonSelector, inputSelector, customUploaderText, imagePreview, NewimageMessage) {
		var customUploader;

		$(buttonSelector).click(function(e) {
			e.preventDefault();

			// 既に画像アップロード画面が表示されていれば処理を中止（無視）する
			if (customUploader) {
				customUploader.open();
				return;
			}

			// wp.mediaを開くためのボタンの処理
			customUploader = wp.media.frames.file_frame = wp.media({
				title: customUploaderText,
				button: {
					text: customUploaderText
				},
				multiple: false
			});

			// 画像選択後にIDをテキスト欄へ、プレビューのHTMLを出力する
			customUploader.on('select', function() {
				var attachment = customUploader.state().get('selection').first().toJSON();
				$(inputSelector).val(attachment.id);
				$(imagePreview).html('<p>' + NewimageMessage + '</p><img src="' + attachment.url + '" style="max-width:300px;">');
			});

			// 画像アップロード画面を表示
			customUploader.open();
		});
	}

	//スクリプトのコードを見やすくするため、受け取った変数をスクリプト内の変数として格納
	initImageUploader(
		'<?php echo esc_html('#upload_image_button_' .$set_name.$option_name); ?>',
		'<?php echo esc_html('#upload_' .$set_name.$option_name); ?>',
		'<?php echo esc_html($custom_uploader_text); ?>',
		'<?php echo esc_html('#image_preview_' .$set_name.$option_name); ?>',
		'<?php echo esc_html($new_image_message); ?>'
	);
});
</script>
<?php
}