| 1 |
<?php |
| 2 |
/** |
| 3 |
* WPBC BFB Pack: Divider (Horizontal / Vertical line) — Schema-driven, Factory Inspector |
| 4 |
* |
| 5 |
* Purpose: |
| 6 |
* - Adds a simple visual separator field that renders as a horizontal or vertical line. |
| 7 |
* - One pack type "divider" with an 'orientation' property: 'horizontal' | 'vertical'. |
| 8 |
* - Inspector is Factory-driven (no WP templates). Preview is rendered by a pure JS renderer class. |
| 9 |
* - Keep defaults in 'schema' synchronized with JS get_defaults() in _out/divider.js. |
| 10 |
* |
| 11 |
* Contracts Used: |
| 12 |
* - Filter: wpbc_bfb_register_field_packs |
| 13 |
* - Action: wpbc_enqueue_js_field_pack |
| 14 |
* - Action: wpbc_bfb_palette_register_items (optional palette registration) |
| 15 |
* |
| 16 |
* File: ../includes/page-form-builder/field-packs/divider/field-divider.php |
| 17 |
* |
| 18 |
* @package Booking Calendar |
| 19 |
* @author wpdevelop |
| 20 |
* @since 11.0.0 |
| 21 |
* @modified 2025-09-22 |
| 22 |
* @version 1.0.0 |
| 23 |
*/ |
| 24 |
|
| 25 |
if ( ! defined( 'ABSPATH' ) ) { |
| 26 |
exit; |
| 27 |
} |
| 28 |
|
| 29 |
/** |
| 30 |
* Register the "divider" field pack (Schema-driven Inspector). |
| 31 |
* |
| 32 |
* Props stored in schema (coercion/validation is handled by Inspector/Factory): |
| 33 |
* - orientation : string 'horizontal' | 'vertical' (default 'horizontal') |
| 34 |
* - line_style : string 'solid' | 'dashed' | 'dotted' (default 'solid') |
| 35 |
* - thickness_px : int 1..20 (default 1) |
| 36 |
* - length : string CSS length/percent, e.g. '100%', '120px' (default '100%') |
| 37 |
* - align : string 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom' |
| 38 |
* - color : string CSS color (default '#e0e0e0') |
| 39 |
* - margin_top_px : int 0..200 (default 8) |
| 40 |
* - margin_bottom_px: int 0..200 (default 8) |
| 41 |
* - margin_left_px : int 0..200 (default 8) |
| 42 |
* - margin_right_px : int 0..200 (default 8) |
| 43 |
* - cssclass_extra : string optional extra CSS classes |
| 44 |
* - name : string optional internal name |
| 45 |
* - html_id : string optional HTML id |
| 46 |
* - help : string optional help text (Inspector-only) |
| 47 |
* |
| 48 |
* @param array $packs Accumulated packs. |
| 49 |
* |
| 50 |
* @return array Modified packs with "divider" field included. |
| 51 |
*/ |
| 52 |
function wpbc_bfb_register_field_packs__field_divider_schema( $packs ) { |
| 53 |
|
| 54 |
$packs['divider'] = array( |
| 55 |
'kind' => 'field', |
| 56 |
'type' => 'divider', |
| 57 |
'label' => __( 'Divider', 'booking' ), |
| 58 |
'icon' => 'minus', |
| 59 |
'usage_key' => 'divider', |
| 60 |
|
| 61 |
// === Schema: coercion/validation + defaults for Inspector/serialization === |
| 62 |
'schema' => array( |
| 63 |
'props' => array( |
| 64 |
'orientation' => array( 'type' => 'enum', 'values' => array( 'horizontal', 'vertical' ), 'default' => 'horizontal' ), |
| 65 |
'line_style' => array( 'type' => 'enum', 'values' => array( 'solid', 'dashed', 'dotted' ), 'default' => 'solid' ), |
| 66 |
'thickness_px' => array( 'type' => 'int', 'min' => 1, 'max' => 20, 'default' => 1 ), |
| 67 |
'length' => array( 'type' => 'string', 'default' => '100%' ), |
| 68 |
'align' => array( 'type' => 'enum', 'values' => array( 'left', 'center', 'right', 'top', 'middle', 'bottom' ), 'default' => 'center' ), |
| 69 |
'color' => array( 'type' => 'string', 'default' => '#e0e0e0' ), |
| 70 |
'margin_top_px' => array( 'type' => 'int', 'min' => 0, 'max' => 200, 'default' => 8 ), |
| 71 |
'margin_bottom_px' => array( 'type' => 'int', 'min' => 0, 'max' => 200, 'default' => 8 ), |
| 72 |
'margin_left_px' => array( 'type' => 'int', 'min' => 0, 'max' => 200, 'default' => 8 ), |
| 73 |
'margin_right_px' => array( 'type' => 'int', 'min' => 0, 'max' => 200, 'default' => 8 ), |
| 74 |
'cssclass_extra' => array( 'type' => 'string', 'default' => '' ), |
| 75 |
'name' => array( 'type' => 'string', 'default' => '' ), |
| 76 |
'html_id' => array( 'type' => 'string', 'default' => '' ), |
| 77 |
'help' => array( 'type' => 'string', 'default' => '' ), |
| 78 |
), |
| 79 |
), |
| 80 |
|
| 81 |
// === Inspector UI (Factory-driven; no WP templates here) === |
| 82 |
'inspector_ui' => array( |
| 83 |
'title' => __( 'Divider', 'booking' ), |
| 84 |
'description' => __( 'Configure a horizontal or vertical separator line.', 'booking' ), |
| 85 |
'header_variant' => 'toolbar', |
| 86 |
'header_actions' => array( 'deselect', 'scrollto', 'move-up', 'move-down', 'duplicate', 'delete' ), |
| 87 |
'groups' => array( |
| 88 |
array( |
| 89 |
'key' => 'basic', |
| 90 |
'label' => __( 'Basic', 'booking' ), |
| 91 |
'open' => true, |
| 92 |
'controls' => array( |
| 93 |
array( |
| 94 |
'type' => 'select', |
| 95 |
'key' => 'orientation', |
| 96 |
'label' => __( 'Orientation', 'booking' ), |
| 97 |
'options' => array( |
| 98 |
array( 'value' => 'horizontal', 'label' => __( 'Horizontal', 'booking' ) ), |
| 99 |
array( 'value' => 'vertical', 'label' => __( 'Vertical', 'booking' ) ), |
| 100 |
), |
| 101 |
), |
| 102 |
array( |
| 103 |
'type' => 'select', |
| 104 |
'key' => 'line_style', |
| 105 |
'label' => __( 'Line Style', 'booking' ), |
| 106 |
'options' => array( |
| 107 |
array( 'value' => 'solid', 'label' => __( 'Solid', 'booking' ) ), |
| 108 |
array( 'value' => 'dashed', 'label' => __( 'Dashed', 'booking' ) ), |
| 109 |
array( 'value' => 'dotted', 'label' => __( 'Dotted', 'booking' ) ), |
| 110 |
), |
| 111 |
), |
| 112 |
array( |
| 113 |
'type' => 'range_number', |
| 114 |
'key' => 'thickness_px', |
| 115 |
'label' => __( 'Thickness (px)', 'booking' ), |
| 116 |
'min' => 1, |
| 117 |
'max' => 20, |
| 118 |
'step' => 1, |
| 119 |
), |
| 120 |
array( |
| 121 |
'type' => 'len', |
| 122 |
'key' => 'length', |
| 123 |
'label' => __( 'Length', 'booking' ), |
| 124 |
'units' => array( '%', 'px', 'rem', 'em' ), |
| 125 |
'fallback_unit' => '%', |
| 126 |
// Optional per-unit slider bounds (defaults shown below; omit to use JS defaults). |
| 127 |
'slider' => array( |
| 128 |
'%' => array( 'min' => 0, 'max' => 100, 'step' => 1 ), |
| 129 |
'px' => array( 'min' => 0, 'max' => 512, 'step' => 1 ), |
| 130 |
'rem' => array( 'min' => 0, 'max' => 10, 'step' => 0.1 ), |
| 131 |
'em' => array( 'min' => 0, 'max' => 10, 'step' => 0.1 ), |
| 132 |
), |
| 133 |
), |
| 134 |
|
| 135 |
array( |
| 136 |
'type' => 'select', |
| 137 |
'key' => 'align', |
| 138 |
'label' => __( 'Alignment', 'booking' ), |
| 139 |
'options' => array( |
| 140 |
array( 'value' => 'left', 'label' => __( 'Left', 'booking' ) ), |
| 141 |
array( 'value' => 'center', 'label' => __( 'Center', 'booking' ) ), |
| 142 |
array( 'value' => 'right', 'label' => __( 'Right', 'booking' ) ), |
| 143 |
// Extra options for vertical orientation; will be disabled for horizontal in JS. |
| 144 |
array( 'value' => 'top', 'label' => __( 'Top', 'booking' ) ), |
| 145 |
array( 'value' => 'middle', 'label' => __( 'Middle', 'booking' ) ), |
| 146 |
array( 'value' => 'bottom', 'label' => __( 'Bottom', 'booking' ) ), |
| 147 |
), |
| 148 |
), |
| 149 |
array( 'type' => 'color', 'key' => 'color', 'label' => __( 'Color', 'booking' ), 'placeholder' => '#e0e0e0' ), |
| 150 |
), |
| 151 |
), |
| 152 |
array( |
| 153 |
'key' => 'spacing', |
| 154 |
'label' => __( 'Spacing', 'booking' ), |
| 155 |
'controls' => array( |
| 156 |
array( 'type' => 'range_number', 'key' => 'margin_top_px', 'label' => __( 'Margin Top (px)', 'booking' ), 'min' => 0, 'max' => 200, 'step' => 1 ), |
| 157 |
array( 'type' => 'range_number', 'key' => 'margin_bottom_px', 'label' => __( 'Margin Bottom (px)', 'booking' ), 'min' => 0, 'max' => 200, 'step' => 1 ), |
| 158 |
array( 'type' => 'range_number', 'key' => 'margin_left_px', 'label' => __( 'Margin Left (px)', 'booking' ), 'min' => 0, 'max' => 200, 'step' => 1 ), |
| 159 |
array( 'type' => 'range_number', 'key' => 'margin_right_px', 'label' => __( 'Margin Right (px)', 'booking' ), 'min' => 0, 'max' => 200, 'step' => 1 ), |
| 160 |
|
| 161 |
), |
| 162 |
), |
| 163 |
array( |
| 164 |
'key' => 'advanced', |
| 165 |
'label' => __( 'Advanced', 'booking' ), |
| 166 |
'controls' => array( |
| 167 |
array( 'type' => 'text', 'key' => 'cssclass_extra', 'label' => __( 'Extra CSS classes', 'booking' ) ), |
| 168 |
array( 'type' => 'text', 'key' => 'name', 'label' => __( 'Name', 'booking' ) ), |
| 169 |
array( 'type' => 'text', 'key' => 'html_id', 'label' => __( 'HTML ID', 'booking' ) ), |
| 170 |
array( 'type' => 'textarea', 'key' => 'help', 'label' => __( 'Help text', 'booking' ), 'rows' => 3 ), |
| 171 |
), |
| 172 |
), |
| 173 |
), |
| 174 |
), |
| 175 |
); |
| 176 |
|
| 177 |
return $packs; |
| 178 |
} |
| 179 |
add_filter( 'wpbc_bfb_register_field_packs', 'wpbc_bfb_register_field_packs__field_divider_schema' ); |
| 180 |
|
| 181 |
|
| 182 |
/** |
| 183 |
* Enqueue the Divider field pack assets for the Builder page. |
| 184 |
* |
| 185 |
* Notes: |
| 186 |
* - The JS file must implement the 'divider' renderer and respect the schema defaults above. |
| 187 |
* - The CSS file can be minimal; most visuals are inline-styled by the renderer for simplicity. |
| 188 |
* |
| 189 |
* @param string $page Current admin page slug (unused, provided for parity with other packs). |
| 190 |
* |
| 191 |
* @return void |
| 192 |
*/ |
| 193 |
function wpbc_bfb_enqueue__field_divider_schema_assets( $page ) { |
| 194 |
|
| 195 |
wp_enqueue_script( 'wpbc-bfb_field_divider_schema', wpbc_plugin_url( '/includes/page-form-builder/field-packs/divider/_out/divider.js' ), array( 'wpbc-bfb' ), WP_BK_VERSION_NUM, true ); |
| 196 |
} |
| 197 |
add_action( 'wpbc_enqueue_js_field_pack', 'wpbc_bfb_enqueue__field_divider_schema_assets', 10, 1 ); |
| 198 |
|
| 199 |
|
| 200 |
/** |
| 201 |
* (Optional) Register ready-to-use "Horizontal" and "Vertical" palette items in "general/bottom". |
| 202 |
* |
| 203 |
* If your palette auto-builds from packs, you can remove this action. |
| 204 |
* We provide flat data-* hints so the builder can initialize presets without templates: |
| 205 |
* data-orientation="horizontal|vertical" |
| 206 |
* data-line_style="solid|dashed|dotted" |
| 207 |
* data-thickness_px="N" |
| 208 |
* data-length="CSSLen" |
| 209 |
* data-align="left|center|right" |
| 210 |
* data-color="#hex" |
| 211 |
* |
| 212 |
* @param string $group Palette group: 'general' | 'advanced' | ... |
| 213 |
* @param string $position Position: 'top' | 'bottom' |
| 214 |
* |
| 215 |
* @return void |
| 216 |
*/ |
| 217 |
function wpbc_bfb_palette_register_items__divider_schema( $group, $position ) { |
| 218 |
|
| 219 |
if ( 'layout' !== $group || 'top' !== $position ) { |
| 220 |
return; |
| 221 |
} |
| 222 |
?> |
| 223 |
<li style="width:100%;margin: -5px 0;"><hr /></li> |
| 224 |
<li class="wpbc_bfb__field" data-id="divider_horizontal" data-type="divider" data-usage_key="divider" data-orientation="horizontal" |
| 225 |
data-line_style="solid" data-thickness_px="1" data-length="100%" data-align="center" data-color="#e0e0e0"> |
| 226 |
<i class="menu_icon icon-1x wpbc-bi-border-center"></i> <span class="wpbc_bfb__field-label"><?php echo esc_html( __( 'Horizontal Line', 'booking' ) ); ?></span> |
| 227 |
<span class="wpbc_bfb__field-type">divider</span> |
| 228 |
</li> |
| 229 |
|
| 230 |
<li class="wpbc_bfb__field" data-id="divider_vertical" data-type="divider" data-usage_key="divider" data-orientation="vertical" |
| 231 |
data-line_style="solid" data-thickness_px="1" data-length="100%" data-align="middle" data-color="#e0e0e0"> |
| 232 |
<i class="menu_icon icon-1x wpbc-bi-border-middle"></i> <span class="wpbc_bfb__field-label"><?php echo esc_html( __( 'Vertical Line', 'booking' ) ); ?></span> |
| 233 |
<span class="wpbc_bfb__field-type">divider</span> |
| 234 |
</li> |
| 235 |
<?php |
| 236 |
} |
| 237 |
add_action( 'wpbc_bfb_palette_register_items', 'wpbc_bfb_palette_register_items__divider_schema', 10, 2 ); |
| 238 |
|
