# booking/11.9/includes/page-form-builder/field-packs/section/_src/section-wptpl.js
Booking Calendar, version 11.9. 172 lines.
- Page: https://pluginprobe.com/plugins/booking/11.9/code/includes/page-form-builder/field-packs/section/_src/section-wptpl.js
- Raw: https://pluginprobe.com/plugins/booking/11.9/raw/includes/page-form-builder/field-packs/section/_src/section-wptpl.js
- Modified: 2026-03-23T09:05:02+00:00
Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/booking/11.9/code/includes/page-form-builder/field-packs/section/_src/section-wptpl.js#L10-L20`.
```javascript
/**
* WPBC BFB: Section Renderer (WP-template–driven, slim version)
* ---------------------------------------------------------------------------------
* - Delegates column-style logic to UI.WPBC_BFB_Column_Styles (separate module)
* - Inspector glue is moved to: /_out/core/bfb-inspector-patches.js
*
* Contracts:
* - Registry: Registry.register( 'section', WPBC_BFB_Section );
* - Class API: static get_defaults(), static render(el, data, ctx), static on_field_drop(data, el, ctx?)
*
* File: /includes/page-form-builder/field-packs/section/_out/section-wptpl.js
*
* @since 11.0.0
* @modified 2025-09-16 11:24
* @version 1.1.0
*/
(function ( w ) {
'use strict';
var Core = w.WPBC_BFB_Core || {};
var Registry = Core.WPBC_BFB_Field_Renderer_Registry;
var Base = Core.WPBC_BFB_Field_Base;
var UI = ( Core.UI = Core.UI || {} );
if ( ! Registry || typeof Registry.register !== 'function' || ! Base ) {
w._wpbc && w._wpbc.dev && w._wpbc.dev.error && w._wpbc.dev.error( 'WPBC_BFB_Section', 'Core registry/base missing' );
return;
}
// Shortcuts.
var S = Core.WPBC_BFB_Sanitize;
var ColStyles = UI.WPBC_BFB_Column_Styles || null;
/**
* Clamp number of columns to supported range.
*
* @param {number|string} n
* @returns {number}
*/
function clamp_cols( n ) {
return S.clamp( Number( n ) || 1, 1, 4 );
}
class WPBC_BFB_Section extends Base {
static template_id = 'wpbc-bfb-section';
/**
* Default data for a new Section.
* NOTE: Keep in sync with PHP schema.
*/
static get_defaults() {
return {
type : 'section',
label : 'Section',
columns : 1,
id : '',
html_id : '',
cssclass : '',
col_styles : '' // JSON string, empty by default to avoid activation
};
}
/**
* Render section preview into element.
*
* @param {HTMLElement} el
* @param {object} data
* @param {object} ctx
*/
static render( el, data, ctx ) {
if ( ! el ) { return; }
var d = this.normalize_data( data );
var html_id = d.html_id ? S.sanitize_html_id( String( d.html_id ) ) : '';
var next_class = S.sanitize_css_classlist( String( d.cssclass || '' ) );
var col_styles = ( d.col_styles != null ) ? String( d.col_styles ) : '';
// Treat legacy "[]" as empty / inactive.
if ( col_styles.trim() === '[]' ) { col_styles = ''; }
el.classList.add( 'wpbc_bfb__section' );
el.dataset.type = 'section';
el.dataset.label = ( d.label != null ? String( d.label ) : '' );
el.dataset.columns = ( d.columns != null ? String( clamp_cols( d.columns ) ) : '1' );
el.dataset.html_id = html_id;
el.dataset.cssclass = next_class || '';
el.dataset.col_styles = col_styles;
// Replace previous custom classes.
var prev = ( el.__wpbc_prev_classes || '' );
if ( prev ) {
prev.split( /\s+/ ).filter( Boolean ).forEach( function ( cls ) { el.classList.remove( cls ); } );
}
if ( next_class ) {
next_class.split( /\s+/ ).filter( Boolean ).forEach( function ( cls ) { el.classList.add( cls ); } );
}
el.__wpbc_prev_classes = next_class || '';
// Render wp.template.
var tpl = this.get_template( this.template_id );
if ( typeof tpl !== 'function' ) {
w._wpbc && w._wpbc.dev && w._wpbc.dev.error && w._wpbc.dev.error( 'section_wptpl.tpl.missing', 'Template not found: ' + this.template_id );
el.innerHTML = 'Template not found: wpbc-bfb-section.
';
return;
}
try {
el.innerHTML = tpl( {
type : 'section',
label : el.dataset.label || 'Section',
columns : Number( el.dataset.columns || 1 ),
id : d.id || '',
html_id : html_id,
cssclass : next_class
} );
} catch ( e ) {
w._wpbc && w._wpbc.dev && w._wpbc.dev.error && w._wpbc.dev.error( 'section_wptpl.tpl.render', e );
el.innerHTML = 'Error rendering section preview.
';
}
// Apply per-column styles via shared UI service (no-op if missing).
try {
if ( ColStyles && typeof ColStyles.apply === 'function' ) {
var arr = ColStyles.parse_col_styles( col_styles );
ColStyles.apply( el, arr );
}
} catch ( e2 ) {
w._wpbc && w._wpbc.dev && w._wpbc.dev.error && w._wpbc.dev.error( 'section_wptpl.apply_col_styles', e2 );
}
// Overlay controls (selection/toolbar), if available.
UI && UI.WPBC_BFB_Overlay && UI.WPBC_BFB_Overlay.ensure && UI.WPBC_BFB_Overlay.ensure( ctx && ctx.builder, el );
}
/**
* After drop hook.
*
* @param {object} data
* @param {HTMLElement} el
* @param {object} ctx
*/
static on_field_drop( data, el, ctx ) {
try {
var cols = clamp_cols(
( data && ( data.columns != null ? data.columns : data['data-columns'] ) )
|| ( el && el.dataset && el.dataset.columns )
|| 1
);
if ( ctx && ctx.builder && typeof ctx.builder.set_section_columns === 'function' ) {
ctx.builder.set_section_columns( el, cols );
}
el.dataset.columns = String( cols );
// Re-apply styles (baseline + activation state).
if ( ColStyles && typeof ColStyles.apply === 'function' ) {
var arr = ColStyles.parse_col_styles( el.dataset.col_styles || '' );
ColStyles.apply( el, arr );
}
} catch ( e ) {
w._wpbc && w._wpbc.dev && w._wpbc.dev.error && w._wpbc.dev.error( 'WPBC_BFB_Section.on_field_drop', e );
}
}
}
try {
Registry.register( 'section', WPBC_BFB_Section );
} catch ( e ) {
w._wpbc && w._wpbc.dev && w._wpbc.dev.error && w._wpbc.dev.error( 'WPBC_BFB_Section.register_wptpl', e );
}
})( window );
```