2020-04-07 13:03:04 +00:00
< ? 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 >
2021-07-25 23:25:02 +00:00
< 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 }}} " />
2020-04-07 13:03:04 +00:00
</ 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
}
