Add tab options to layout designer

assets/css/admin.css

@@ -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;

assets/css/sportspress.css

@@ -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 {

assets/js/admin/sportspress-admin.js

@@ -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

assets/js/sportspress.js

@@ -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);

includes/admin/settings/class-sp-settings-events.php

@@ -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' ),

includes/admin/settings/class-sp-settings-page.php

@@ -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>
@@ -98,7 +103,63 @@ class SP_Settings_Page {
 		    <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 );

includes/admin/settings/class-sp-settings-players.php

@@ -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' ),

includes/admin/settings/class-sp-settings-staff.php

@@ -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' ),

includes/admin/settings/class-sp-settings-teams.php

@@ -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' ),

includes/class-sp-template-loader.php

@@ -74,24 +74,79 @@ class SP_Template_Loader {
 		
 		$templates = apply_filters( 'sportspress_' . $type . '_templates', $templates );
 
+		// 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();
+		}
+
 		ob_start();
 		
-		// Loop through templates
+		// Loop through sections
-		foreach ( $templates as $key => $template ) {
+		if ( ! empty( $section_templates ) ) {
-			// Ignore templates that are unavailable or that have been turned off
+			foreach ( $section_templates as $key => $template ) {
-			if ( ! is_array( $template ) ) continue;
+				// Ignore templates that are unavailable or that have been turned off
-			if ( ! isset( $template['option'] ) ) continue;
+				if ( ! is_array( $template ) ) continue;
-			if ( 'yes' !== get_option( $template['option'], sp_array_value( $template, 'default', 'yes' ) ) ) continue;
+				if ( ! isset( $template['option'] ) ) continue;
+				if ( 'yes' !== get_option( $template['option'], sp_array_value( $template, 'default', 'yes' ) ) ) continue;
 				
-			// Render the template
+				// Render the template
-			if ( 'content' === $key ) {
+				echo '<div class="sp-section-content sp-section-content-' . $key . '">';
-				echo $content;
+				if ( 'content' === $key ) {
-			} else {
+					echo $content;
-				call_user_func( $template['action'] );
+				} else {
+					call_user_func( $template['action'] );
+				}
+				echo '</div>';
 			}
 		}
 		
-		return ob_get_clean();
+		$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 ) {