<?php
// No direct access, please
if ( ! defined( 'ABSPATH' ) ) exit;
/**
* Prints the templates used in the sections metabox
*
* @global bool $is_IE
*/
function generate_sections_print_templates() {
global $is_IE;
$class = 'media-modal wp-core-ui';
if ( $is_IE && strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7') !== false ){
$class .= ' ie7';
}
/**
* Backbone Templates
* This file contains all of the HTML used in our application
*
* Each template is wrapped in a script block ( note the type is set to "text/html" ) and given an ID prefixed with
* 'tmpl'. The wp.template method retrieves the contents of the script block and converts these blocks into compiled
* templates to be used and reused in your application.
*/
/**
* The Singular List View
*/
?>
<script type="text/template" id="tmpl-generate-sections-section">
<h3 class="section-title">
<span class="text generate-section-text" title="<?php _e( 'Click to edit', 'gp-premium' );?>">{{{ data.title }}}</span>
<div class="section-controls">
<a class="edit-section edit-content dashicons dashicons-edit" href="#" title="<?php _e( 'Click to edit content', 'gp-premium' );?>"></a>
<a class="edit-section edit-settings dashicons dashicons-admin-generic" href="#" title="<?php _e( 'Click to edit settings', 'gp-premium' );?>"></a>
<a class="move-section dashicons dashicons-move" href="#" title="<?php _e( 'Click and drag to sort', 'gp-premium' );?>"></a>
<a class="delete-section dashicons dashicons-no" href="#" title="<?php esc_attr_e( 'Click to remove', 'gp-premium' );?>"></a>
</div>
</h3>
<textarea name="_generate_sections[sections][{{{ data.index }}}]" readonly="readonly"></textarea>
</script>
<?php
/**
* The Add/Clear buttons
*/
?>
<script type="text/template" id="tmpl-generate-sections-buttons">
<a href="#" id="generate-add-section" class="button-primary button-large"><?php _e( 'Add Section', 'gp-premium' );?></a>
<a href="#" style="display:none;" id="generate-delete-sections" class="button button-large"><?php _e( 'Remove Sections', 'gp-premium');?></a>
<?php wp_nonce_field( 'generate_sections_nonce', '_generate_sections_nonce' ); ?>
</script>
<?php
/**
* The Modal Window, including sidebar and content area.
* Add menu items to ".media-frame-menu"
* Add content to ".media-frame-content"
*/
?>
<script type="text/html" id="tmpl-generate-sections-modal-window">
<div class="<?php echo esc_attr( $class ); ?>">
<button type="button" class="button-link media-modal-close" aria-label="close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close', 'gp-premium' ); ?></span></span></button>
<div class="media-modal-content">
<div class="media-frame mode-select wp-core-ui hide-router">
<div class="media-frame-menu"><div class="media-menu"></div></div>
<div class="media-frame-title">
<h1><?php _e( 'Edit Section', 'gp-premium' ); ?><span class="dashicons dashicons-arrow-down"></span></h1>
</div>
<div class="media-frame-content"></div>
<div class="media-frame-toolbar">
<div class="media-toolbar">
<div class="media-toolbar-primary">
<button type="button" class="button media-button button-primary button-large media-button-insert"><?php _e( 'Apply', 'gp-premium' ); ?></button>
<button type="button" class="button button media-button button button-large media-button-close"><?php _e( 'Cancel', 'gp-premium' ); ?></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="media-modal-backdrop"></div>
</script>
<?php
/**
* Base template for a navigation-bar menu item
*/
?>
<script type="text/html" id='tmpl-generate-sections-modal-menu-item'>
<a class="media-menu-item generate-section-item-{{ data.target }}" data-target="{{ data.target }}">{{ data.name }}</a>
</script>
<?php
/**
* the Edit Sections
*/
?>
<script type="text/html" id="tmpl-generate-sections-edit-content">
<div data-id="content" class="panel generate-section-content">
<div class="gs-grid-100 section-title">
<label for="title"><?php _e( 'Section Label', 'gp-premium' );?></label>
<p>
<input type="text" name="title" placeholder="{{{ generate_sections_metabox_i18n.default_title }}}" id="title" value="{{{ data.title }}}"/>
</p>
</div>
<?php if ( version_compare( get_bloginfo( 'version' ), '5.0', '<' ) ) : ?>
<div class="gs-grid-100 wp-core-ui wp-editor-wrap">
<div class="postarea wp-editor-expand">
<div id="wp-generate-sections-editor-wrap" class="wp-core-ui wp-editor-wrap old-sections-js">
<div id="wp-generate-sections-editor-editor-tools" class="wp-editor-tools hide-if-no-js">
<div class="wp-media-buttons">
<button type="button" class="button insert-media add_media generate-sections-add-media" data-editor="generate-sections-editor"><span class="wp-media-buttons-icon"></span><?php _e( 'Add Media', 'gp-premium' );?></button>
<?php do_action( 'media_buttons' ); ?>
</div>
<div class="wp-editor-tabs">
<button type="button" id="content-tmce" class="wp-switch-editor switch-tmce" data-wp-editor-id="generate-sections-editor"><?php _e( 'Visual', 'gp-premium' ); ?></button>
<button type="button" id="content-html" class="wp-switch-editor switch-html" data-wp-editor-id="generate-sections-editor"><?php _ex( 'Text', 'Name for the Text editor tab (formerly HTML)', 'gp-premium' ); ?></button>
</div>
</div><!-- .wp-editor-tools -->
<div class="wp-editor-container">
<textarea id="generate-sections-editor" class="wp-editor-area" autocomplete="off" cols="40" name="content">{{{ data.content }}}</textarea>
</div>
</div>
</div>
</div>
<?php else : ?>
<div class="gs-grid-100 generate-sections-editor-wrap">
<div id="custom-media-buttons">
<?php do_action( 'media_buttons' ); ?>
</div>
<textarea id="generate-sections-editor" class="wp-editor-area" autocomplete="off" cols="40" name="content">{{{ data.content }}}</textarea>
</div>
<?php endif; ?>
</div>
</script>
<script type="text/html" id="tmpl-generate-sections-edit-layout">
<div data-id="layout" class="panel">
</div>
</script>
<script type="text/html" id="tmpl-generate-sections-edit-style">
<div data-id="style" class="panel generate-section-settings">
<div class="gs-grid-container gs-grid-parent">
<div class="gs-grid-33">
<h3><?php _e( 'Layout', 'gp-premium' ); ?></h3>
<label for="box_type"><?php _e('Box Type', 'gp-premium');?></label>
<p>
<select name="box_type" id="box_type">
<option value=""><?php _e( 'Full Width', 'gp-premium' );?></option>
<option value="contained"><?php _ex( 'Contained', 'Width', 'gp-premium' );?></option>
</select>
</p>
<label for="inner_box_type"><?php _e('Inner Box Type', 'gp-premium');?></label>
<p>
<select name="inner_box_type" id="inner_box_type">
<option value=""><?php _ex( 'Contained', 'Width', 'gp-premium' );?></option>
<option value="fluid"><?php _e( 'Full Width', 'gp-premium' );?></option>
</select>
</p>
<label for="custom_id"><?php _e( 'Custom ID', 'gp-premium' );?></label>
<p>
<input type="text" name="custom_id" id="custom_id" value="{{{ data.custom_id }}}"/>
</p>
<label for="custom_classes"><?php _e( 'Custom Classes', 'gp-premium' );?></label>
<p>
<input type="text" name="custom_classes" id="custom_classes" value="{{{ data.custom_classes }}}"/>
</p>
<label for="top_padding"><?php _e( 'Top Padding', 'gp-premium' );?></label>
<p>
<input placeholder="{{{ generate_sections_metabox_i18n.top_padding }}}" type="number" name="top_padding" id="top_padding" value="{{{ data.top_padding }}}"/><select style="margin:0;position:relative;top:-2px;" name="top_padding_unit" id="top_padding_unit">
<option value="">px</option>
<option value="%">%</option>
</select>
</p>
<label for="bottom_padding"><?php _e( 'Bottom Padding', 'gp-premium' );?></label>
<p>
<input placeholder="{{{ generate_sections_metabox_i18n.bottom_padding }}}" type="number" name="bottom_padding" id="bottom_padding" value="{{{ data.bottom_padding }}}"/><select style="margin:0;position:relative;top:-2px;" name="bottom_padding_unit" id="bottom_padding_unit">
<option value="">px</option>
<option value="%">%</option>
</select>
</p>
</div>
<div class="gs-grid-33">
<h3><?php _e( 'Colors', 'gp-premium' ); ?></h3>
<label for="background_color"><?php _e( 'Background Color', 'gp-premium' );?></label>
<p>
<input class="generate-sections-color" type="text" class="color-picker" data-alpha-enabled="true" data-alpha-color-type="hex" name="background_color" id="background_color" value="{{{ data.background_color }}}"/>
</p>
<label for="text_color"><?php _e( 'Text Color', 'gp-premium' );?></label>
<p>
<input class="generate-sections-color" type="text" name="text_color" id="text_color" value="{{{ data.text_color }}}"/>
</p>
<label for="link_color"><?php _e( 'Link Color', 'gp-premium' );?></label>
<p>
<input class="generate-sections-color" type="text" name="link_color" id="link_color" value="{{{ data.link_color }}}"/>
</p>
<label for="link_color_hover"><?php _e('Link Color Hover', 'gp-premium');?></label>
<p>
<input class="generate-sections-color" type="text" name="link_color_hover" id="link_color_hover" value="{{{ data.link_color_hover }}}"/>
</p>
</div>
<div class="gs-grid-33">
<h3><?php _e( 'Background', 'gp-premium' ); ?></h3>
<label for="generate-sections-background-image"><?php _e( 'Background Image', 'gp-premium' );?></label>
<p id="generate-section-image-preview"></p>
<p>
<input class="image_id" type="hidden" id="generate-sections-background-image" name="background_image" value="{{{ data.background_image }}}" />
<button id="image_button" class="generate-sections-upload-button button" type="button" data-uploader_title="<?php _e( 'Background Image', 'gp-premium' );?>"><?php _e('Upload', 'gp-premium') ;?></button>
<button id="remove_image" class="generate-sections-remove-image button" type="button"><?php _e( 'Remove', 'gp-premium' );?></button>
</p>
<label for="parallax_effect"><?php _e('Parallax Effect', 'gp-premium');?></label>
<p>
<select name="parallax_effect" id="parallax_effect">
<option value=""><?php _e( 'Disable', 'gp-premium' );?></option>
<option value="enable"><?php _e( 'Enable', 'gp-premium' );?></option>
</select>
</p>
<label for="background_color_overlay"><?php _e( 'Background Color Overlay', 'gp-premium' );?></label>
<p>
<select name="background_color_overlay" id="background_color_overlay">
<option value=""><?php _e( 'Disable', 'gp-premium' );?></option>
<option value="enable"><?php _e( 'Enable', 'gp-premium' );?></option>
</select>
</p>
</div>
</div>
</div>
</script>
<?php
}