Add tab options to layout designer

This commit is contained in:
Brian Miyaji
2016-08-20 23:08:41 +10:00
parent ac0f742bea
commit 7f97fc9ba0
10 changed files with 195 additions and 19 deletions

View File

@@ -640,6 +640,13 @@ table.widefat.sp-sortable-table tbody tr .icon {
}
/* Sortable lists */
.sp-sortable-list {
margin: 0;
overflow: hidden;
padding-top: 5px;
min-height: 50px;
}
.sp-sortable-list li {
float: left;
clear: both;

View File

@@ -40,6 +40,37 @@
overflow: hidden;
}
/* Tabs */
.sp-tab-menu {
display: block;
clear: both;
padding: 0 5px;
margin: 0 0 1.5em;
list-style: none;
}
.sp-tab-menu-item {
display: inline-block;
margin: 0;
}
.sp-tab-menu-item a {
display: block;
margin: 0 10px;
color: inherit;
opacity: 0.5;
transition: all .3s;
}
.sp-tab-menu-item a:focus {
outline: none;
}
.sp-tab-menu-item-active a,
.sp-tab-menu-item a:hover {
color: inherit;
opacity: 1;
}
.sp-tab-content {
display: none;
}
/* Data Tables */
.sp-scrollable-table-wrapper {
width: 100%;
@@ -339,6 +370,7 @@
max-width: none;
width: 100%;
height: auto;
color: inherit;
}
.sp-template-event-logos-block .team-logo img {

View File

@@ -315,7 +315,8 @@ jQuery(document).ready(function($){
// Sortable lists
$( ".sp-sortable-list" ).sortable({
handle: ".sp-item-handle",
placeholder: "sp-item-placeholder"
placeholder: "sp-item-placeholder",
connectWith: ".sp-connected-list"
});
// Autosave

View File

@@ -79,4 +79,12 @@ function sp_viewport() {
/* Scrollable Tables */
$(".sp-scrollable-table").wrap("<div class=\"sp-scrollable-table-wrapper\"></div>");
/* Template tabs */
$(".sp-tab-menu-item a").click(function() {
$template = $(this).data("sp-tab");
$(this).closest(".sp-tab-menu-item").addClass("sp-tab-menu-item-active").siblings(".sp-tab-menu-item").removeClass("sp-tab-menu-item-active");
$(this).closest(".sp-tab-group").find(".sp-tab-content-"+$template).show().siblings(".sp-tab-content").hide();
return false;
});
})(jQuery);

View File

@@ -32,6 +32,7 @@ class SP_Settings_Events extends SP_Settings_Page {
add_action( 'sportspress_admin_field_current_mode', array( $this, 'current_mode_setting' ) );
add_action( 'sportspress_admin_field_delimiter', array( $this, 'delimiter_setting' ) );
add_action( 'sportspress_admin_field_event_layout', array( $this, 'layout_setting' ) );
add_action( 'sportspress_admin_field_event_tabs', array( $this, 'tabs_setting' ) );
add_action( 'sportspress_settings_save_' . $this->id, array( $this, 'save' ) );
}
@@ -61,6 +62,8 @@ class SP_Settings_Events extends SP_Settings_Page {
apply_filters( 'sportspress_event_template_options', array(
array( 'type' => 'event_layout' ),
array( 'type' => 'event_tabs' ),
array(
'title' => __( 'Display', 'sportspress' ),
'desc' => __( 'Date', 'sportspress' ),

View File

@@ -90,6 +90,11 @@ class SP_Settings_Page {
}
$templates = array_merge( array_flip( $layout ), $templates );
$slice = array_search( 'tabs', array_flip( $templates ) );
if ( $slice ) {
$templates = array_slice( $templates, 0, $slice );
}
?>
<tr valign="top">
<th>
@@ -97,8 +102,64 @@ class SP_Settings_Page {
</th>
<td class="sp-sortable-list-container">
<p class="description"><?php _e( 'Drag each item into the order you prefer.', 'sportspress' ); ?></p>
<ul class="sp-layout sp-sortable-list ui-sortable">
<ul class="sp-layout sp-sortable-list sp-connected-list ui-sortable">
<?php foreach ( $templates as $template => $details ) {
if ( ! is_array( $details ) ) continue;
$option = sp_array_value( $details, 'option', 'sportspress_' . $this->template . '_show_' . $template );
$visibility = get_option( $option, sp_array_value( $details, 'default', 'yes' ) );
?>
<li>
<div class="sp-item-bar sp-layout-item-bar">
<div class="sp-item-handle sp-layout-item-handle ui-sortable-handle">
<span class="sp-item-title item-title"><?php echo sp_array_value( $details, 'title', ucfirst( $template ) ); ?></span>
<input type="hidden" name="sportspress_<?php echo $this->template; ?>_template_order[]" value="<?php echo $template; ?>">
</div>
<input type="hidden" name="sportspress_template_visibility[<?php echo $option; ?>]" value="0">
<input class="sp-toggle-switch" type="checkbox" name="sportspress_template_visibility[<?php echo $option; ?>]" id="<?php echo $option; ?>" value="1" <?php checked( $visibility, 'yes' ); ?>>
<label for="sportspress_<?php echo $this->template; ?>_show_<?php echo $template; ?>"></label>
</div>
</li>
<?php } ?>
</ul>
</td>
</tr>
<?php
}
/**
* Tabs settings
*
* @access public
* @return void
*/
public function tabs_setting() {
$templates = apply_filters( 'sportspress_' . $this->template . '_templates', $this->templates );
$layout = get_option( 'sportspress_' . $this->template . '_template_order' );
if ( false === $layout ) {
$layout = array_keys( $templates );
}
$templates = array_merge( array_flip( $layout ), $templates );
$slice = array_search( 'tabs', array_flip( $templates ) );
if ( $slice ) {
$templates = array_slice( $templates, $slice );
} else {
$templates = array();
}
?>
<tr valign="top">
<th>
<?php _e( 'Tabs', 'sportspress' ); ?>
</th>
<td class="sp-sortable-list-container">
<p class="description"><?php _e( 'Drag items here to display them as tabs.', 'sportspress' ); ?></p>
<input type="hidden" name="sportspress_<?php echo $this->template; ?>_template_order[]" value="tabs">
<ul class="sp-layout sp-sortable-list sp-connected-list ui-sortable">
<?php foreach ( $templates as $template => $details ) {
if ( ! is_array( $details ) ) continue;
$option = sp_array_value( $details, 'option', 'sportspress_' . $this->template . '_show_' . $template );

View File

@@ -30,6 +30,7 @@ class SP_Settings_Players extends SP_Settings_Page {
add_filter( 'sportspress_settings_tabs_array', array( $this, 'add_settings_page' ), 20 );
add_action( 'sportspress_settings_' . $this->id, array( $this, 'output' ) );
add_action( 'sportspress_admin_field_player_layout', array( $this, 'layout_setting' ) );
add_action( 'sportspress_admin_field_player_tabs', array( $this, 'tabs_setting' ) );
add_action( 'sportspress_settings_save_' . $this->id, array( $this, 'save' ) );
}
@@ -48,6 +49,8 @@ class SP_Settings_Players extends SP_Settings_Page {
apply_filters( 'sportspress_player_options', array(
array( 'type' => 'player_layout' ),
array( 'type' => 'player_tabs' ),
array(
'title' => __( 'Link', 'sportspress' ),
'desc' => __( 'Link players', 'sportspress' ),

View File

@@ -30,6 +30,7 @@ class SP_Settings_Staff extends SP_Settings_Page {
add_filter( 'sportspress_settings_tabs_array', array( $this, 'add_settings_page' ), 20 );
add_action( 'sportspress_settings_' . $this->id, array( $this, 'output' ) );
add_action( 'sportspress_admin_field_staff_layout', array( $this, 'layout_setting' ) );
add_action( 'sportspress_admin_field_staff_tabs', array( $this, 'tabs_setting' ) );
add_action( 'sportspress_settings_save_' . $this->id, array( $this, 'save' ) );
}
@@ -48,6 +49,8 @@ class SP_Settings_Staff extends SP_Settings_Page {
apply_filters( 'sportspress_staff_options', array(
array( 'type' => 'staff_layout' ),
array( 'type' => 'staff_tabs' ),
array(
'title' => __( 'Link', 'sportspress' ),
'desc' => __( 'Link staff', 'sportspress' ),

View File

@@ -30,6 +30,7 @@ class SP_Settings_Teams extends SP_Settings_Page {
add_filter( 'sportspress_settings_tabs_array', array( $this, 'add_settings_page' ), 20 );
add_action( 'sportspress_settings_' . $this->id, array( $this, 'output' ) );
add_action( 'sportspress_admin_field_team_layout', array( $this, 'layout_setting' ) );
add_action( 'sportspress_admin_field_team_tabs', array( $this, 'tabs_setting' ) );
add_action( 'sportspress_settings_save_' . $this->id, array( $this, 'save' ) );
}
@@ -49,6 +50,8 @@ class SP_Settings_Teams extends SP_Settings_Page {
apply_filters( 'sportspress_team_options', array(
array( 'type' => 'team_layout' ),
array( 'type' => 'team_tabs' ),
array(
'title' => __( 'Link', 'sportspress' ),
'desc' => __( 'Link teams', 'sportspress' ),

View File

@@ -74,24 +74,79 @@ class SP_Template_Loader {
$templates = apply_filters( 'sportspress_' . $type . '_templates', $templates );
ob_start();
// Loop through templates
foreach ( $templates as $key => $template ) {
// Ignore templates that are unavailable or that have been turned off
if ( ! is_array( $template ) ) continue;
if ( ! isset( $template['option'] ) ) continue;
if ( 'yes' !== get_option( $template['option'], sp_array_value( $template, 'default', 'yes' ) ) ) continue;
// Render the template
if ( 'content' === $key ) {
echo $content;
} else {
call_user_func( $template['action'] );
}
// Split templates into sections and tabs
$slice = array_search( 'tabs', array_flip( $templates ) );
if ( $slice ) {
$section_templates = array_slice( $templates, 0, $slice );
$tab_templates = array_slice( $templates, $slice );
} else {
$section_templates = $templates;
$tab_templates = array();
}
return ob_get_clean();
ob_start();
// Loop through sections
if ( ! empty( $section_templates ) ) {
foreach ( $section_templates as $key => $template ) {
// Ignore templates that are unavailable or that have been turned off
if ( ! is_array( $template ) ) continue;
if ( ! isset( $template['option'] ) ) continue;
if ( 'yes' !== get_option( $template['option'], sp_array_value( $template, 'default', 'yes' ) ) ) continue;
// Render the template
echo '<div class="sp-section-content sp-section-content-' . $key . '">';
if ( 'content' === $key ) {
echo $content;
} else {
call_user_func( $template['action'] );
}
echo '</div>';
}
}
$ob = ob_get_clean();
ob_start();
$tabs = '';
if ( ! empty( $tab_templates ) ) {
$i = 0;
foreach ( $tab_templates as $key => $template ) {
// Ignore templates that are unavailable or that have been turned off
if ( ! is_array( $template ) ) continue;
if ( ! isset( $template['option'] ) ) continue;
if ( 'yes' !== get_option( $template['option'], sp_array_value( $template, 'default', 'yes' ) ) ) continue;
// Add to tabs
$tabs .= '<li class="sp-tab-menu-item' . ( 0 === $i ? ' sp-tab-menu-item-active' : '' ) . '"><a href="#sp-tab-content-' . $key . '" data-sp-tab="' . $key . '">' . apply_filters( 'gettext', $template['title'], $template['title'], 'sportspress' ) . '</a></li>';
// Render the template
echo '<div class="sp-tab-content sp-tab-content-' . $key . '" id="sp-tab-content-' . $key . '"' . ( 0 === $i ? ' style="display: block;"' : '' ) . '>';
if ( 'content' === $key ) {
echo $content;
} else {
call_user_func( $template['action'] );
}
echo '</div>';
$i++;
}
$ob .= '<div class="sp-tab-group">';
if ( ! empty( $tabs ) ) {
$ob .= '<ul class="sp-tab-menu">' . $tabs . '</ul>';
}
$ob .= ob_get_clean();
$ob .= '</div>';
}
return $ob;
}
public function event_content( $content ) {