Displays form sections of Admin Page Framework with custom groups.

admin-page-framework-test-custom-section-tabs.php

<?php
/* Plugin Name: Admin Page Framework Test - Custom Seciton Tabs */ 

// Include the library file. Set your file path here.
$_sLibraryPath = defined( 'WP_DEBUG' ) && WP_DEBUG 
    ? dirname( dirname( __FILE__ ) ) . '/admin-page-framework/development/admin-page-framework.php'
    : dirname( dirname( __FILE__ ) ) . '/admin-page-framework/library/admin-page-framework.min.php';
if ( ! class_exists( 'AdminPageFramework' ) && ! include( $_sLibraryPath ) ) {
    return;    
}

class APF_Test_CustomSectionTabs extends AdminPageFramework {
    
    /**
     * Defines pages.
     */
    public function setUp() {
        
        $this->setRootMenuPage( __( 'Custom Seciton Tabs', 'admin-page-framework-test' ) );
        
        $this->addSubMenuItems(     
            array(
                'title'        => __( 'Custom Section Tabs', 'admin-page-framework-test' ),
                'page_slug'    => 'apf_test_cusotm_section_tabs',
            )
        );        
    
    }
    
    /**
     * Defines form elements.
     * 
     * This method gets triggered when the `apf_test_cusotm_section_tabs` page loads.
     */
    public function load_apf_test_cusotm_section_tabs( $oFactory ) {
        
        // Define custom groups
        $this->aCustomSectionGroups = array(
            array( 
                'group_id'  => 'my_group_a',
                'title'     => __( 'Seciton A and B', 'admin-page-framework-test' ),
                'sections'  => array( 'my_section_a', 'my_section_b' ),
            ),
            array( 
                'group_id'  => 'my_group_b',
                'title'     => __( 'Section C', 'admin-page-framework-test' ),
                'sections'  => array( 'my_section_c' ),
            ), 
        );
        
        $this->addSettingSections(
            'apf_test_cusotm_section_tabs', // the target page slug                
            array(
                'section_id'    => 'my_section_a', 
                'title'         => __( 'Section A', 'admin-page-framework-test' ),
                'collapsible'   => true,
            ),                
            array(
                'section_id'    => 'my_section_b', 
                'title'         => __( 'Section B', 'admin-page-framework-test' ),
                'collapsible'   => true,
            ),                                      
            array(
                'section_id'    => 'my_section_c', 
                'title'         => __( 'Section C', 'admin-page-framework-test' ),
                'collapsible'   => true,
            )        
        );              
                
        $this->addSettingFields(
            'my_section_a',  // the target section id
            array(
                'field_id'          => 'image_test',
                'type'              => 'image',
                'title'             => __( 'Image', 'admin-page-framework-test' ),
                'attributes'        => array(
                    'preview'   => array(
                        'style' => 'max-width: 200px;',
                    ),
                ),
            ),
            array(
                'field_id'          => 'text_test',
                'type'              => 'text',
                'title'             => __( 'Text', 'admin-page-framework-test' ),
            )
        );
        
        $this->addSettingFields(
            'my_section_b',  // the target section id
            array(
                'field_id'          => 'color_test',
                'type'              => 'color',
                'title'             => __( 'Coloer', 'admin-page-framework-test' ),
            ),
            array(
                'field_id'          => 'select_test',
                'type'              => 'select',
                'title'             => __( 'Select', 'admin-page-framework-test' ),
                'label'             => array(
                    'a' => 'A',
                    'b' => 'B',
                    'c' => 'C',
                ),
            )
        );               
        
        $this->addSettingFields(
            'my_section_c',  // the target section id
            array(
                'field_id'          => 'textarea_test',
                'type'              => 'textarea',
                'title'             => __( 'Text Area', 'admin-page-framework-test' ),
            ),
            array(
                'field_id'          => 'checkbox_test',
                'type'              => 'checkbox',
                'title'             => __( 'Checkbox', 'admin-page-framework-test' ),
                'label'             => __( 'Check me', 'admin-paeg-framework-test' ),
            )
        );   
        
        wp_enqueue_script( 'jquery-ui-tabs' );
        // new AdminPageFramework_Script_Tab( $this->oMsg );
        add_action( 'admin_print_footer_scripts', array( $this, 'replyToPrintInlineScript' ) );
        
    }
    
    /**
     * Inserts a custom output.
     * 
     * content_{page slug}
     */
    public function content_apf_test_cusotm_section_tabs( $sContent ) {
                
        return '<h3>Custom Section Tabs</h3>'
            . $this->_generateSectionTitleList()
            . $sContent
            . get_submit_button();
        
    }
        /**
         * Generates an HTML list output like this.
         * 
         * <ul>
         *     <li><a href="#sectionset-id-1"><span>One</span></a></li>
         *     <li><a href="#sectionset-id-2"><span>Two</span></a></li>
         *     <li><a href="#sectionset-id-3"><span>Three</span></a></li>
         * </ul>
         */
        private function _generateSectionTitleList() {
            
            $_aLists = array();
            foreach( $this->aCustomSectionGroups as $_iIndex => $_aGroup ) {
                
                if ( ! isset( $_aGroup['group_id'], $_aGroup['title'] ) ) {
                    continue; 
                }

                $_aLists[] = "<li>"
                        . "<a href='#{$_aGroup['group_id']}'>" // the href attribute will be assigned by a jQuery script.
                            . $_aGroup['title']
                        . "</a>"
                    . "</li>";

            }
            return "<ul id='custom_section_tabs'>"
                    . implode( PHP_EOL, $_aLists )
                . "</ul>"
                ;
                
        }

    /**
     * Inserts a JavaScript script in the footer.
     * 
     * A callback function for the 'admin_print_scripts' action hook.
     */
    public function replyToPrintInlineScript() {
        
        $_aSectionGroups      = json_encode( $this->aCustomSectionGroups );
        $_sScript = <<<JAVASCRIPT
        
jQuery( document ).ready( function(){
    
    var _oAPFContainer = jQuery( '#custom_section_tabs' ).parent();
    
    // Move sectionset elements into grouped containers
    jQuery( jQuery( {$_aSectionGroups} ).get().reverse() ).each( function( iIndex, aGroup ) {

        if ( ! aGroup.hasOwnProperty( 'group_id' )){
            return  true;   // skip
        }
        var _oSectionGroup = jQuery( '<div class=\"custom-section-group\" id=\"' + aGroup['group_id'] + '\"></div>' );
        
        if ( ! aGroup.hasOwnProperty( 'sections' )){
            return  true;   // skip
        }
        jQuery( aGroup['sections'] ).each( function( iIndex, sSectionID ) {    
                
            jQuery( '#section-' + sSectionID + '__0' ).closest( '.admin-page-framework-sectionset' )
                .detach()
                .appendTo( _oSectionGroup );
        } );
        jQuery( '#custom_section_tabs' ).after( _oSectionGroup );
      
    } );
    
    // Enable jQuery switchable tabs
    jQuery( '#custom_section_tabs' ).parent().tabs();
    // jQuery( '#custom_section_tabs' ).parent().createTabs();  // or use the framework method to create tabs
    
});
JAVASCRIPT;

        echo "<script type='text/javascript' id='admin-page-framework-test-custom-section-tabs'>\n"
            .$_sScript
            . "\n</script>";
        
    }
}

new APF_Test_CustomSectionTabs(
    null,                  // the option key - when null is passed the class name in this case 'APF_Demo' will be used
    __FILE__               // the caller script path.
);