| 1 |
/* globals window, document */ |
| 2 |
(function (w, d) { |
| 3 |
'use strict'; |
| 4 |
|
| 5 |
var api = w.WPBC_BFB_Form_Details = w.WPBC_BFB_Form_Details || {}; |
| 6 |
|
| 7 |
var is_ready = false; |
| 8 |
|
| 9 |
function get_input_el(setting_key) { |
| 10 |
var id = 'wpbc_bfb_setting__' + setting_key; |
| 11 |
return d.getElementById(id); |
| 12 |
} |
| 13 |
|
| 14 |
function get_picture_url_el() { |
| 15 |
return get_input_el('bfb_form_details__picture_url'); |
| 16 |
} |
| 17 |
|
| 18 |
function get_preview_img_el() { |
| 19 |
var root = d.querySelector('[data-wpbc-bfb-form-details-media="1"]'); |
| 20 |
return root ? root.querySelector('.wpbc_bfb__form_details_media__img') : null; |
| 21 |
} |
| 22 |
|
| 23 |
function get_preview_placeholder_el() { |
| 24 |
var root = d.querySelector('[data-wpbc-bfb-form-details-media="1"]'); |
| 25 |
return root ? root.querySelector('.wpbc_bfb__form_details_media__placeholder') : null; |
| 26 |
} |
| 27 |
|
| 28 |
function get_preview_img_el__at_top_toolbar() { |
| 29 |
var el = d.querySelector( '.wpbc_bfb__hint__top_bar .wpbc_bfb__form_details_media__img' ); |
| 30 |
return el ? el : null; |
| 31 |
} |
| 32 |
|
| 33 |
function get_preview_placeholder_el__at_top_toolbar() { |
| 34 |
var el = d.querySelector( '.wpbc_bfb__hint__top_bar .wpbc_bfb__form_details_media__placeholder' ); |
| 35 |
return el ? el : null; |
| 36 |
} |
| 37 |
|
| 38 |
function show_hide_preview_image(url, img, ph) { |
| 39 |
|
| 40 |
if ( ! img || ! ph ) { |
| 41 |
return; |
| 42 |
} |
| 43 |
|
| 44 |
if ( typeof url === 'string' && url.trim() ) { |
| 45 |
img.src = url; |
| 46 |
img.style.display = 'block'; |
| 47 |
ph.style.display = 'none'; |
| 48 |
} else { |
| 49 |
img.src = ''; |
| 50 |
img.style.display = 'none'; |
| 51 |
ph.style.display = 'block'; |
| 52 |
} |
| 53 |
} |
| 54 |
|
| 55 |
function set_preview_image(url) { |
| 56 |
|
| 57 |
var img = get_preview_img_el(); |
| 58 |
var ph = get_preview_placeholder_el(); |
| 59 |
show_hide_preview_image( url, img, ph ); |
| 60 |
|
| 61 |
img = get_preview_img_el__at_top_toolbar(); |
| 62 |
ph = get_preview_placeholder_el__at_top_toolbar(); |
| 63 |
show_hide_preview_image( url, img, ph ); |
| 64 |
} |
| 65 |
|
| 66 |
function sanitize_form_name(raw_value) { |
| 67 |
var val = (typeof raw_value === 'string') ? raw_value : ''; |
| 68 |
val = val.trim(); |
| 69 |
|
| 70 |
// Prefer core sanitize if available. |
| 71 |
if ( w.WPBC_BFB_Core && w.WPBC_BFB_Core.Sanitize && typeof w.WPBC_BFB_Core.Sanitize.to_token === 'function' ) { |
| 72 |
return w.WPBC_BFB_Core.Sanitize.to_token(val); |
| 73 |
} |
| 74 |
|
| 75 |
// Fallback: allow a-z 0-9 _ only. |
| 76 |
val = val.toLowerCase(); |
| 77 |
val = val.replace(/[^a-z0-9_]+/g, '_'); |
| 78 |
val = val.replace(/^_+|_+$/g, ''); |
| 79 |
return val; |
| 80 |
} |
| 81 |
|
| 82 |
function apply_loaded_data(detail) { |
| 83 |
if ( ! w.jQuery ) { |
| 84 |
return; |
| 85 |
} |
| 86 |
|
| 87 |
var loaded = (detail && typeof detail.loaded_data === 'object' && detail.loaded_data) ? detail.loaded_data : {}; |
| 88 |
|
| 89 |
var form_name_el = get_input_el('bfb_form_details__form_name'); |
| 90 |
var title_el = get_input_el('bfb_form_details__title'); |
| 91 |
var picture_url_el = get_picture_url_el(); |
| 92 |
var desc_el = get_input_el('bfb_form_details__description'); |
| 93 |
|
| 94 |
var form_name = loaded.form_name || detail.form_name || 'standard'; |
| 95 |
var title = (typeof loaded.title === 'string' && loaded.title.trim()) ? loaded.title.trim() : form_name; |
| 96 |
var picture_url = (typeof loaded.picture_url === 'string' && loaded.picture_url.trim()) ? loaded.picture_url.trim() : ''; |
| 97 |
var description = (typeof loaded.description === 'string' && loaded.description.trim()) ? loaded.description.trim() : ''; |
| 98 |
|
| 99 |
if ( form_name_el ) { form_name_el.value = form_name; } |
| 100 |
if ( title_el ) { title_el.value = title; } |
| 101 |
if ( picture_url_el ) { picture_url_el.value = picture_url; } |
| 102 |
if ( desc_el ) { desc_el.value = description; } |
| 103 |
|
| 104 |
set_preview_image(picture_url); |
| 105 |
|
| 106 |
// Optional: update the existing hint title, if present. |
| 107 |
var $hint_title = w.jQuery('.wpbc_bfb__hint__form_name .wpbc_bfb__hint__form_name__title a.value'); |
| 108 |
var $hint_pic = w.jQuery('.wpbc_bfb__hint__form_name .wpbc_bfb__form_details_media__img'); |
| 109 |
var $hint_slug = w.jQuery('.wpbc_bfb__hint__form_name .wpbc_bfb__hint__form_name__slug span.value'); |
| 110 |
var $hint_title_i = w.jQuery('.wpbc_bfb__hint__form_name .wpbc_bfb__hint__form_name__title i'); |
| 111 |
if ( $hint_title.length ) { $hint_title.text(title); } |
| 112 |
if ( $hint_title.length ) { $hint_title.attr("title", description); } |
| 113 |
if ( $hint_pic.length ) { $hint_pic.attr("src", picture_url); } |
| 114 |
if ( $hint_slug.length ) { $hint_slug.text( form_name ); } |
| 115 |
w.jQuery( '.wpbc_bfb__hint__form_name__label' ).css( 'display', 'flex' ); |
| 116 |
if (picture_url){ |
| 117 |
w.jQuery( '.wpbc_bfb__hint__top_bar.wpbc_bfb__hint__form_name .wpbc_bfb__form_details_media__preview img' ).css( 'display', 'block' ); |
| 118 |
w.jQuery( '.wpbc_bfb__hint__top_bar.wpbc_bfb__hint__form_name .wpbc_bfb__form_details_media__preview .wpbc_bfb__form_details_media__placeholder' ).css( 'display', 'none' ); |
| 119 |
} |
| 120 |
} |
| 121 |
|
| 122 |
|
| 123 |
/** |
| 124 |
* Sync UI after picture URL change. |
| 125 |
* |
| 126 |
* @return void |
| 127 |
*/ |
| 128 |
function on_picture_url_changed() { |
| 129 |
|
| 130 |
var picture_url_el = get_picture_url_el(); |
| 131 |
var url = ( picture_url_el && typeof picture_url_el.value === 'string' ) ? picture_url_el.value : ''; |
| 132 |
|
| 133 |
set_preview_image( url ); |
| 134 |
|
| 135 |
// Keep existing hint image in sync (if present). |
| 136 |
if ( w.jQuery ) { |
| 137 |
var $hint_pic = w.jQuery( '.wpbc_bfb__hint__form_name .wpbc_bfb__form_details_media__img' ); |
| 138 |
if ( $hint_pic.length ) { |
| 139 |
$hint_pic.attr( 'src', url ); |
| 140 |
} |
| 141 |
} |
| 142 |
} |
| 143 |
|
| 144 |
function remove_selected_image() { |
| 145 |
|
| 146 |
var picture_url_el = get_picture_url_el(); |
| 147 |
|
| 148 |
if ( picture_url_el ) { |
| 149 |
picture_url_el.value = ''; |
| 150 |
} |
| 151 |
|
| 152 |
on_picture_url_changed(); |
| 153 |
} |
| 154 |
|
| 155 |
function bind_ui() { |
| 156 |
|
| 157 |
if ( is_ready ) { |
| 158 |
return; |
| 159 |
} |
| 160 |
is_ready = true; |
| 161 |
|
| 162 |
// Load values when current form is loaded/saved via AJAX. |
| 163 |
d.addEventListener( 'wpbc:bfb:form:ajax_loaded', function ( e ) { |
| 164 |
apply_loaded_data( e && e.detail ? e.detail : null ); |
| 165 |
}, { passive: true } ); |
| 166 |
|
| 167 |
d.addEventListener( 'wpbc:bfb:form:ajax_saved', function ( e ) { |
| 168 |
apply_loaded_data( e && e.detail ? e.detail : null ); |
| 169 |
}, { passive: true } ); |
| 170 |
|
| 171 |
// React to URL changes (manual edits + programmatic set from uploader). |
| 172 |
var picture_url_el = get_picture_url_el(); |
| 173 |
if ( picture_url_el ) { |
| 174 |
|
| 175 |
picture_url_el.addEventListener( 'input', on_picture_url_changed, { passive: true } ); |
| 176 |
picture_url_el.addEventListener( 'change', on_picture_url_changed, { passive: true } ); |
| 177 |
|
| 178 |
// Your custom uploader hook (jQuery event). |
| 179 |
if ( w.jQuery ) { |
| 180 |
w.jQuery( picture_url_el ).on( 'wpbc_media_upload_url_set', function () { |
| 181 |
on_picture_url_changed(); |
| 182 |
} ); |
| 183 |
} |
| 184 |
} |
| 185 |
|
| 186 |
// Remove button stays native. |
| 187 |
var btn_remove = d.getElementById( 'wpbc_bfb__form_details_remove_image' ); |
| 188 |
if ( btn_remove ) { |
| 189 |
btn_remove.addEventListener( 'click', function ( evt ) { |
| 190 |
evt.preventDefault(); |
| 191 |
remove_selected_image(); |
| 192 |
} ); |
| 193 |
} |
| 194 |
|
| 195 |
// Optional: keyboard support for clickable preview (if it’s a DIV). |
| 196 |
var btn_img = d.querySelector( '.wpbc_bfb__form_details_media__preview' ); |
| 197 |
if ( btn_img ) { |
| 198 |
btn_img.addEventListener( 'keydown', function ( evt ) { |
| 199 |
if ( 'Enter' === evt.key || ' ' === evt.key ) { |
| 200 |
evt.preventDefault(); |
| 201 |
btn_img.click(); |
| 202 |
} |
| 203 |
} ); |
| 204 |
} |
| 205 |
|
| 206 |
// Sanitize slug on blur (keep your existing code). |
| 207 |
var form_name_el = get_input_el( 'bfb_form_details__form_name' ); |
| 208 |
if ( form_name_el ) { |
| 209 |
form_name_el.addEventListener( 'blur', function () { |
| 210 |
form_name_el.value = sanitize_form_name( form_name_el.value ); |
| 211 |
} ); |
| 212 |
} |
| 213 |
} |
| 214 |
|
| 215 |
function boot() { |
| 216 |
bind_ui(); |
| 217 |
bind_events(); |
| 218 |
} |
| 219 |
|
| 220 |
if ( d.readyState === 'loading' ) { |
| 221 |
d.addEventListener('DOMContentLoaded', boot, { once: true }); |
| 222 |
} else { |
| 223 |
boot(); |
| 224 |
} |
| 225 |
|
| 226 |
// Public helpers. |
| 227 |
api.apply_loaded_data = apply_loaded_data; |
| 228 |
|
| 229 |
// == Top Toolbar Form Name and Picture tumb ====================================================================== |
| 230 |
function bind_events() { |
| 231 |
// On click on Booking form Title in top toolbar. |
| 232 |
d.addEventListener( 'click', function (ev) { |
| 233 |
var btn = ev.target && ev.target.closest( '.wpbc_bfb__hint__top_bar .wpbc_bfb__hint__form_name__title .value' ); |
| 234 |
if ( ! btn ) { return; } |
| 235 |
ev.preventDefault(); |
| 236 |
// Open "From Details" inspector sidebar. |
| 237 |
d.querySelector( '[role="tab"][aria-controls="wpbc_bfb__inspector_form_details"]' ).click(); |
| 238 |
} ); |
| 239 |
} |
| 240 |
|
| 241 |
})(window, document); |
| 242 |
|
