with border-left.
*/
class wpbc_bfb_field_divider extends Base {
/**
* Return default props for "divider" field.
* Must stay in sync with PHP schema defaults.
*
* @returns {{type:string,orientation:'horizontal'|'vertical',line_style:'solid'|'dashed'|'dotted',thickness_px:number,length:string,align:string,color:string,margin_top_px:number,margin_bottom_px:number,margin_left_px:number,margin_right_px:number,cssclass_extra:string,name:string,html_id:string,help:string,usage_key:string}}
*/
static get_defaults() {
return {
type : 'divider',
orientation : 'horizontal', // 'horizontal' | 'vertical'
line_style : 'solid', // 'solid' | 'dashed' | 'dotted'
thickness_px : 1,
length : '100%', // width for horizontal, height for vertical
align : 'center', // 'left' | 'center' | 'right' (or vertical equivalents; normalized later)
color : '#e0e0e0',
margin_top_px : 2,
margin_bottom_px: 2,
margin_left_px : 2,
margin_right_px : 2,
cssclass_extra : '',
name : '',
html_id : '',
help : '',
usage_key : 'divider'
};
}
/**
* Normalize align tokens for the current orientation.
* - For horizontal: accepts left|center|right or top|middle|bottom → maps to left|center|right.
* - For vertical : accepts top|middle|bottom or left|center|right → maps to top|middle|bottom.
*
* @param {'horizontal'|'vertical'} orientation
* @param {string|undefined|null} align_raw
* @returns {'left'|'center'|'right'|'top'|'middle'|'bottom'}
*/
static normalize_align(orientation, align_raw) {
const a = String(align_raw ?? '').toLowerCase();
const H = { top: 'left', middle: 'center', bottom: 'right' };
const V = { left: 'top', center: 'middle', right: 'bottom' };
const isV = orientation === 'vertical';
if (isV) return (a in V) ? /** @type any */(V)[a] : (['top','middle','bottom'].includes(a) ? /** @type any */(a) : 'middle');
return (a in H) ? /** @type any */(H)[a] : (['left','center','right'].includes(a) ? /** @type any */(a) : 'center');
}
/**
* Render the preview markup into the field element.
*
* @param {HTMLElement} el Field root element inside the canvas.
* @param {Object} data Field props (already normalized by schema).
* @param {{builder?:any, sanit?:any}} [ctx] Context object.
* @returns {void}
*/
static render(el, data, ctx) {
if (!el) return;
// Normalize against defaults first.
const d = this.normalize_data(data);
// ----- Core sanitize helpers (static) -----
const eh = (v) => Core.WPBC_BFB_Sanitize.escape_html(v);
const sid = (v) => Core.WPBC_BFB_Sanitize.sanitize_html_id(v);
const sname = (v) => Core.WPBC_BFB_Sanitize.sanitize_html_name(v);
const sclass = (v) => Core.WPBC_BFB_Sanitize.sanitize_css_classlist(v);
/**
* @param {any} v
* @param {number} def
* @param {number} [min]
* @param {number} [max]
* @returns {number}
*/
const to_int = (v, def, min, max) => {
let n = parseInt(v, 10);
if (isNaN(n)) n = def;
if (typeof min === 'number' && n < min) n = min;
if (typeof max === 'number' && n > max) n = max;
return n;
};
/**
* @param {any} v
* @param {string} def
* @returns {string}
*/
const to_str = (v, def) => (v === undefined || v === null) ? def : String(v);
// Coerce props.
/** @type {'horizontal'|'vertical'} */
const orientation = (to_str(d.orientation, 'horizontal') === 'vertical') ? 'vertical' : 'horizontal';
/** @type {'solid'|'dashed'|'dotted'} */
const line_style = ({ solid:1, dashed:1, dotted:1 }[ to_str(d.line_style, 'solid') ]) ? d.line_style : 'solid';
const align_norm = wpbc_bfb_field_divider.normalize_align(orientation, to_str(d.align, orientation === 'vertical' ? 'middle' : 'center')); // accept both sets, then normalize to the active orientation.
const thickness_px = to_int(d.thickness_px, 1, 1, 20);
const length_val = Core.WPBC_BFB_Sanitize.sanitize_css_len(d.length, '100%');
const color_val = Core.WPBC_BFB_Sanitize.sanitize_hex_color(d.color, '#e0e0e0');
const m_top = to_int(d.margin_top_px, 8, 0, 200);
const m_bottom = to_int(d.margin_bottom_px, 8, 0, 200);
const m_left = to_int(d.margin_left_px, 8, 0, 200);
const m_right = to_int(d.margin_right_px, 8, 0, 200);
const html_id = d.html_id ? sid(String(d.html_id)) : '';
const name_val = d.name ? sname(String(d.name)) : '';
const cls_extra = sclass(String(d.cssclass_extra || ''));
// Persist useful props on dataset (do not mutate wrapper classes directly).
if (el.dataset.orientation !== orientation) el.dataset.orientation = orientation;
if (el.dataset.line_style !== line_style) el.dataset.line_style = line_style;
if (String(el.dataset.thickness_px) !== String(thickness_px)) el.dataset.thickness_px = String(thickness_px);
if (el.dataset.length !== length_val) el.dataset.length = length_val;
if (el.dataset.align !== align_norm) el.dataset.align = align_norm;
if (el.dataset.color !== color_val) el.dataset.color = color_val;
if (String(el.dataset.margin_top_px) !== String(m_top)) el.dataset.margin_top_px = String(m_top);
if (String(el.dataset.margin_bottom_px) !== String(m_bottom)) el.dataset.margin_bottom_px = String(m_bottom);
if (String(el.dataset.margin_left_px) !== String(m_left)) el.dataset.margin_left_px = String(m_left);
if (String(el.dataset.margin_right_px) !== String(m_right)) el.dataset.margin_right_px = String(m_right);
if (el.dataset.cssclass_extra !== cls_extra) el.dataset.cssclass_extra = cls_extra;
if (el.dataset.html_id !== html_id) el.dataset.html_id = html_id;
if (el.dataset.name !== name_val) el.dataset.name = name_val;
// Attribute fragments for the line element.
const id_attr = html_id ? ` id="${eh(html_id)}"` : '';
const name_attr = name_val ? ` name="${eh(name_val)}"` : '';
const cls_attr = cls_extra ? ` class="${eh(cls_extra)}"` : '';
// Compute style for margins (outer wrapper).
const outer_style_attr = ` style="margin:${m_top}px ${m_right}px ${m_bottom}px ${m_left}px;"`;
// Build inner line markup based on orientation.
let line_html = '';
if (orientation === 'horizontal') {
// Horizontal:
using border-top.
const ml = (align_norm === 'left') ? '0' : 'auto';
const mr = (align_norm === 'right') ? '0' : 'auto';
const hr_style = [
'border:none',
'height:0',
`border-top:${thickness_px}px ${line_style} ${color_val}`,
`width:${length_val}`,
`margin-left:${ml}`,
`margin-right:${mr}`
].join(';');
line_html = `
`;
} else {
// Vertical: using border-left and height.
let v_align = '';
v_align = (align_norm === 'top') ? 'position:absolute;top:0;' : v_align;
v_align = (align_norm === 'middle') ? 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);' : v_align;
v_align = (align_norm === 'bottom') ? 'position:absolute;bottom:0;' : v_align;
const vr_style = [
`border-left:${thickness_px}px ${line_style} ${color_val}`,
`height:${length_val}`,
`${v_align}`,
'padding-left:0'
].join(';');
line_html = `
${eh(String(d.help))}
` : '';
// Render preview HTML.
el.innerHTML = `
${line_html}
${help_html}
`;
// Overlay (handles/toolbars).
Core.UI?.WPBC_BFB_Overlay?.ensure?.(ctx?.builder, el);
}
/**
* Optional hook executed after field is dropped from the palette.
*
* @param {Object} data
* @param {HTMLElement} el
* @param {{palette_item?: HTMLElement}} [ctx]
* @returns {void}
*/
static on_field_drop(data, el, ctx) {
// Keep base behavior (auto-name, etc.).
super.on_field_drop?.(data, el, ctx);
// Apply orientation from palette hint (data-orientation) once on drop.
try {
const src = ctx?.palette_item;
if (src) {
const ori = src.getAttribute('data-orientation');
if (ori === 'horizontal' || ori === 'vertical') {
el.dataset.orientation = ori;
}
}
} catch (e) {}
}
}
try {
registry.register('divider', wpbc_bfb_field_divider);
} catch (e) { _wpbc?.dev?.error?.('wpbc_bfb_field_divider.register', e); }
// -----------------------------------------------------------------------------
// Exporters – booking form + “Content of booking fields data”
// -----------------------------------------------------------------------------
/**
* Register booking form exporter for "divider".
* Mirrors the previous legacy export logic but now kept inside the pack.
*/
function register_divider_form_exporter() {
if (!w.WPBC_BFB_Exporter || typeof w.WPBC_BFB_Exporter.register !== 'function') {
return;
}
w.WPBC_BFB_Exporter.register('divider', function (field, emit, extras) {
if (!field || typeof emit !== 'function') return;
const core = (extras && extras.core) || w.WPBC_BFB_Core || {};
const Sanit = core.WPBC_BFB_Sanitize || {};
const esc_html = Sanit.escape_html ? Sanit.escape_html.bind(Sanit) : (s) => String(s);
const cls_sanit = Sanit.sanitize_css_classlist ? Sanit.sanitize_css_classlist.bind(Sanit) : (s) => String(s);
const sid = Sanit.sanitize_html_id ? Sanit.sanitize_html_id.bind(Sanit) : (s) => String(s);
const sname = Sanit.sanitize_html_name ? Sanit.sanitize_html_name.bind(Sanit) : (s) => String(s);
/**
* @param {any} v
* @param {number} def
* @param {number} [min]
* @param {number} [max]
* @returns {number}
*/
const to_int = (v, def, min, max) => {
let n = parseInt(v, 10);
if (isNaN(n)) n = def;
if (typeof min === 'number' && n < min) n = min;
if (typeof max === 'number' && n > max) n = max;
return n;
};
/**
* @param {any} v
* @param {string} def
* @returns {string}
*/
const to_str = (v, def) => (v == null || v === '') ? def : String(v);
// Normalize against defaults (schema-driven).
const d = wpbc_bfb_field_divider.normalize_data(field);
// ---- read & sanitize props (keep in sync with preview/schema) ----
/** @type {'horizontal'|'vertical'} */
const orientation = (to_str(d.orientation, 'horizontal') === 'vertical') ? 'vertical' : 'horizontal';
const line_style_in = to_str(d.line_style, 'solid');
/** @type {'solid'|'dashed'|'dotted'} */
const line_style = ({ solid:1, dashed:1, dotted:1 })[ line_style_in ] ? line_style_in : 'solid';
const thickness_px = to_int(d.thickness_px, 1, 1, 20);
const length_val = to_str(d.length, '100%');
const align_norm = wpbc_bfb_field_divider.normalize_align(
orientation,
to_str(d.align, orientation === 'vertical' ? 'middle' : 'center')
); // accept both sets; normalize to orientation-appropriate token.
const color_val = to_str(d.color, '#e0e0e0');
const mt = to_int(d.margin_top_px, 8, 0, 200);
const mb = to_int(d.margin_bottom_px, 8, 0, 200);
const ml = to_int(d.margin_left_px, 8, 0, 200);
const mr = to_int(d.margin_right_px, 8, 0, 200);
const html_id = d.html_id ? sid(String(d.html_id)) : '';
const name_val = d.name ? sname(String(d.name)) : '';
const cls_extra = cls_sanit(String(d.cssclass_extra || d.cssclass || d.class || ''));
const id_attr = html_id ? ` id="${esc_html(html_id)}"` : '';
const name_attr = name_val ? ` name="${esc_html(name_val)}"` : '';
// Wrap styles (margins applied on the wrapper, not the line itself).
// In vertical mode we also make the wrapper flex and stretch so height:100% resolves.
const wrapper_styles = [
`margin:${mt}px ${mr}px ${mb}px ${ml}px`,
(orientation === 'vertical') ? 'display:flex' : '',
(orientation === 'vertical') ? 'align-self:stretch' : ''
].filter(Boolean).join('; ');
const wrapper_attr = wrapper_styles ? ` style="${esc_html(wrapper_styles)}"` : '';
let line_html = '';
if (orientation === 'horizontal') {
// Horizontal divider via
with border-top
const ml_auto = (align_norm === 'left') ? '0' : 'auto';
const mr_auto = (align_norm === 'right') ? '0' : 'auto';
const hr_styles = [
'border:none',
'height:0',
`border-top:${thickness_px}px ${line_style} ${color_val}`,
`width:${length_val}`,
`margin-left:${ml_auto}`,
`margin-right:${mr_auto}`
].join('; ');
line_html = `