Skip to content

Instantly share code, notes, and snippets.

@michaeluno
Created January 30, 2022 12:03
Show Gist options
  • Save michaeluno/6321c0e28b3c7a4d63cbdf403a026ef3 to your computer and use it in GitHub Desktop.
Save michaeluno/6321c0e28b3c7a4d63cbdf403a026ef3 to your computer and use it in GitHub Desktop.
This is a WordPress plugin that demonstrates custom collapsible sortable sections with Admin Page Framework.
<?php
/**
* Plugin Name: Admin Page Framework - Demo: Custom Sortable Sections
* Description: Demonstrates custom sortable sections.
* Version: 0.0.1
* Author: Michael Uno
*/
namespace AdminPageFrameworkCustomSortableSections;
class Load {
public function __construct() {
add_action( 'plugins_loaded', array( $this, 'load' ) );
}
public function load() {
if ( ! class_exists( 'AdminPageFramework' ) ) {
return;
}
include( __DIR__ . '/AdminPage.php' );
new AdminPage;
}
}
new Load;
<?php
namespace AdminPageFrameworkCustomSortableSections;
class AdminPage extends \AdminPageFramework {
public $sPageSlug = 'apf_custom_sortable_collapsible_sections';
public function setUp() {
$this->setRootMenuPage( 'Settings' );
// Add the sub menus and the pages
$this->addSubMenuItems(
array(
'title' => 'Custom Sortable Sections',
'page_slug' => $this->sPageSlug,
)
);
$this->addInPageTabs(
$this->sPageSlug, // page slug
array(
'tab_slug' => 'general', // avoid hyphen(dash), dots, and white spaces
'title' => 'General',
),
array(
'tab_slug' => 'form',
'title' => 'Forms',
'script' => array(
'src' => __DIR__ . '/custom-sortable-sections.js',
'in_footer' => true,
),
),
array(
'tab_slug' => 'notification',
'title' => 'Notifications',
)
);
add_filter( "options_{$this->oProp->sClassName}", array( $this, 'getDefaultOptionValues' ) );
}
public function getDefaultOptionValues( $aOptions ) {
return $this->oUtil->uniteArrays( $aOptions, array(
'root' => array(
'child_1' => array(
'text' => 'hello',
'checkbox' => true,
),
'child_2' => array(
'text' => 'this is a second child section.',
'radio' => 'b',
),
),
) );
}
/**
* @callback add_action() do_{page slug}_{tab slug}
*/
public function do_apf_custom_sortable_collapsible_sections_general() {
echo "<h2>General</h2>"
. "<p>This is a general tab.</p>";
}
/**
* @callback add_action() load_{page slug}_{tab slug}
*/
public function load_apf_custom_sortable_collapsible_sections_form() {
$this->addSettingSections(
$this->sPageSlug, // the target page slug
array(
'section_id' => 'root',
'title' => 'Root',
'collapsible' => array(
'toggle_all_button' => 'top-right',
),
'class' => 'custom-sortable-sections',
'content' => $this->___getChildSections(),
)
);
$this->addSettingFields(
array( 'root', 'child_1' ), // the target section ID - pass dimensional keys of the section
array(
'field_id' => 'text',
'title' => 'Text',
'type' => 'text',
),
array(
'field_id' => 'checkbox',
'title' => 'Checkbox',
'type' => 'checkbox',
'label' => 'Check this.',
)
);
$this->addSettingFields(
array( 'root', 'child_2' ), // the target section ID - pass dimensional keys of the section
array(
'field_id' => 'text',
'title' => 'Text',
'type' => 'text',
),
array(
'field_id' => 'radio',
'title' => 'Radio Box',
'type' => 'radio',
'label' => array(
'a' => 'Apple',
'b' => 'Banana',
'c' => 'Cherry',
),
)
);
}
private function ___getChildSections() {
$_aChildSections = array(
'child_1' => array(
'section_id' => 'child_1',
'title' => 'Child 1',
'collapsible' => true,
),
'child_2' => array(
'section_id' => 'child_2',
'title' => 'Child 2',
'collapsible' => true,
),
);
$_aSavedOptions = $this->getValue();
if ( ! isset( $_aSavedOptions[ 'root' ] ) ) {
return array_values( $_aChildSections ); // convert to a linear array
}
// Sort
$_aSorted = array();
foreach( $_aSavedOptions[ 'root' ] as $_sChildID => $_aChild ) {
$_aSorted[] = $this->oUtil->getElement( $_aChildSections, array( $_sChildID ) );
}
return $_aSorted;
}
public function do_apf_custom_sortable_collapsible_sections_form() {
submit_button( 'Save' );
echo "<h3>Saved Options</h3>"
. "<div>"
. \AdminPageFramework_Debug::get( $this->getValue() ) // or \AdminPageFramework_Debug::get( get_option( $this->oProp->sOptionKey ) )
. "</div>";
}
/**
* @callback add_action() do_{page slug}_{tab slug}
*/
public function do_apf_custom_sortable_collapsible_sections_notification() {
echo "<h2>Notifications</h2>"
. "<p>This is a notification tab.</p>";
}
}
(function($) {
$( document ).ready( function() {
$( '.custom-sortable-sections > table > tbody > tr > td > div' ).sortable({
items: '> .admin-page-framework-sectionset',
handle: '.admin-page-framework-collapsible-title',
});
});
}( jQuery ));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment