OptionsBuilder Class

OptionsBuilder Class (UI Engine)

---

The OptionsBuilder class is a specialized UI utility in GeniXCMS 2.0.0 designed to construct professional, high-performance administration settings panels for themes and modules. It abstracts complex HTML rendering, handles data persistence, and features an integrated Dynamic CSS Engine for automated frontend styling.

---

✨ Integrated Engine Features

• 📂 Visual Tabbed Interface: Automatically organizes settings into logical tabs and sidebar groups with zero manual HTML.
• 🎨 Rich Component Library: Native support for color pickers, range sliders, toggles, and complex typography groups.
• ⚡ Dynamic CSS Generator: Automatically generates <style> blocks and manages Google Fonts injection based on user selections.
• 📱 Responsive Grid Layout: Built-in support for 2 and 3 column responsive field grids.

---

🏗️ Implementing an Admin Panel

To use the builder in your theme's options.php or a module's settings interface:

// 1. Prepare your data repository
$opt = json_decode(Options::get('modern_theme_opts'), true) ?? [];

// 2. Define the UI Schema (Tabs -> Cards -> Fields)
$schema = [
    [
        'id'       => 'tab-branding',
        'label'    => 'Branding',
        'icon'     => 'bi bi-palette',
        'group'    => 'Design',
        'title'    => 'Theme Appearance',
        'cards'    => [
            [
                'title'  => 'Color Palette',
                'fields' => [
                    ['type' => 'color', 'name' => 'primary_color', 'label' => 'Accent'],
                    ['type' => 'toggle', 'name' => 'dark_mode', 'label' => 'Enable Dark Mode'],
                ]
            ]
        ]
    ]
];

// 3. Instantiate and Render
$builder = new OptionsBuilder($opt, [], [], [
    'brandName' => 'Modern Nexus',
    'saveKey'   => 'save_options_btn'
]);
$builder->render($schema);

---

📝 Available UI Components

The builder supports a wide range of specialized field types:

Type	Visual Representation	Best Use Case
color	Hex + Visual Picker	Theme accent and background colors.
range	Slider with Value Badge	Spacing, font sizes, and opacity.
toggle	iOS-style Switch	Feature toggles and dark mode switches.
typo_row	Composite Typography	Comprehensive font family, size, and weight management.
select	Styled Dropdown	Theme layout or font family selection.
select_media	Integrated Media Picker	Selecting logos or background images from the library.

---

🚀 Dynamic CSS Generation

The builder can automatically generate and minify CSS for your theme's frontend, including intelligent asynchronous loading of Google Fonts.

// In your theme's header.php or NexusTheme::styles()
echo OptionsBuilder::generateFrontendCSS($opt, [
    'themeUrl' => Url::theme(),
    'minify'   => true,
    'id'       => 'theme-custom-styles'
]);

---

⚡ Class Reference Summary

• __construct(array $opt, ...): Initializes the engine with saved data and configuration parameters.
• render(array $schema): Computes and outputs the full HTML for the administrative panel.
• static generateFrontendCSS(array $opt, ...): Static utility to return <link> tags and a <style> block for the frontend.

---

---

See Also

• Theme Development Guide — How to integrate OptionsBuilder into a custom theme.
• Options Class — How data is persistently stored in the database.