<div id="thememakers_shortcode_template" class="thememakers_shortcode_template clearfix">

    <div class="one-half">
        <h4 class="label"><?php _e('Letter', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
        <input type="text" value="" class="js_shortcode_template_changer data-input data-upload" data-shortcode-field="content" />
    </div><!--/ .one-half-->


    <div class="one-half">
        <h4 class="label"><?php _e('Type', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
        <select class="js_shortcode_template_changer data-select" data-shortcode-field="style">
            <option value="dropcap-color"><?php _e('Square Color', THEMEMAKERS_THEME_FOLDER_NAME); ?></option>
            <option value="dropcap-grey"><?php _e('Square Grey', THEMEMAKERS_THEME_FOLDER_NAME); ?></option>
        </select>
    </div><!--/ .one-half-->


    <div class="one-half">
        <h4 class="label"><?php _e('Letter color', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
        <input type="text" value="#ff0000" class="js_shortcode_template_changer data-input data-upload" data-shortcode-field="color" />
    </div><!--/ .one-half-->


    <div class="one-half">
        <h4 class="label"><?php _e('Font size (px)', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
        <input type="text" value="" class="js_shortcode_template_changer data-input data-upload" data-shortcode-field="font_size" />
    </div><!--/ .one-half-->


    <div class="clear"></div>

</div><!--/ .thememakers_shortcode_template-->


<!-- --------------------------  PROCESSOR  --------------------------- -->

<?php $frame_uri = Thememakers_Application_Shortcodes::get_application_uri() . "/preview.php"; ?>

<div class="shortcode_app_frame_block">
    <div class="thememakers_shortcode_info_popup" style="display: none"></div>
    <iframe src="<?php echo $frame_uri ?>" class="shortcode_app_frame" frameborder="1" id="thememakers_shortcode_template_preview"></iframe>
</div>

<script type="text/javascript">

    var thememakers_app_shortcodes_preview_url = "<?php echo $frame_uri ?>";

    jQuery(function() {
        var shortcode_name = "dropcap";
        thememakers_app_shortcodes.changer(shortcode_name);
        jQuery("#thememakers_shortcode_template .js_shortcode_template_changer").on('keyup, change', function() {
            thememakers_app_shortcodes.changer(shortcode_name);
        });

    });
</script>



