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

/***** ポップアップコンテンツ *****/
/*** スクリプトの読み込み ***/
function haup_popup_shortcode_script_include() {
	wp_enqueue_script('haup-popup-shortcode-js');
}
add_action( 'wp_enqueue_scripts', 'haup_popup_shortcode_script_include' );

/*** 中に入れたブロックをポップアップ表示させるためのショートコード ***/
function haup_inline_popup_shortcode($atts , $content = null){
	// ショートコード属性を取得
	$atts = shortcode_atts(array(
		'title' => '',
		'width' => '',
    ), $atts);

	$title = wp_kses_post($atts['title']);

	//幅を変数化
	if(!empty($atts['width'])){
		$wide = $atts['width'].'px';
	}else{
		$wide = 'var(--wp--style--global--content-size)';
	}	

	// ページ内に複数のショートコードがあっても動作するようそれぞれ独立したIDを生成
	$popup_id = uniqid('inline-popup_'); 

	//出力する変数の初期化
	$output_before = '';
	$output_after = '';

	//出力する内容
	$output_before .= '<a href="#'.esc_attr($popup_id).'"  class="ha-inline-popup-trigger" data-popup-id="' . esc_attr($popup_id) . '">';
	$output_before .= wp_kses_post($title);
	$output_before .= '</a>';
	$output_before .= '<div id ="'.$popup_id.'" class="ha-inline-popup" style="display:none;width:'.$wide.'">';
	$output_before .= '<div class="ha-inline-popup-content">';

	//ポップアップショートコードの中にショートコードがあっても実行するようにする
	$content = do_shortcode( shortcode_unautop( $content ) ); 

	$output_after .= '<span class="ha-inline-popup-close">&times;</span>';
	$output_after .= '</div>';
	$output_after .= '</div>';

	//コンテンツを出力
	return $output_before.$content.$output_after;
}
add_shortcode('ha-inline-popup','haup_inline_popup_shortcode');