| @@ -1,57 +1,249 @@ | ||
| 1 | +<?php | |
| 2 | + | |
| 3 | +// This file is included via Render::view() using extract(); all variables below are in the calling method's local scope, not global namespace. | |
| 4 | + | |
| 5 | +use BitCode\BitForm\Core\Util\EscapingHelper; | |
| 6 | + | |
| 7 | +if (!defined('ABSPATH')) { | |
| 8 | + exit; | |
| 9 | +} | |
| 10 | +if (!defined('BITFORMS_ASSET_URI')) { | |
| 11 | + exit; | |
| 12 | +} | |
| 13 | + | |
| 14 | +$formUpdateVersion = get_option('bitform_form_update_version'); | |
| 15 | +$formIdSafe = sanitize_key((string) $formID); | |
| 16 | + | |
| 17 | +$baseCSSPath = "/form-styles/bitform-{$formID}.css"; | |
| 18 | +$baseConversationalCSSPath = "/form-styles/bitform-conversational-{$formID}.css"; | |
| 19 | +$customCSSPath = "/form-styles/bitform-custom-{$formID}.css"; | |
| 20 | +$standaloneCSSPath = "/form-styles/bitform-standalone-{$formID}.css"; | |
| 21 | + | |
| 22 | +wp_register_style('bitform-conversational-base-' . $formIdSafe, BITFORMS_UPLOAD_BASE_URL . $baseCSSPath, [], $formUpdateVersion); | |
| 23 | +wp_register_style('bitform-conversational-' . $formIdSafe, BITFORMS_UPLOAD_BASE_URL . $baseConversationalCSSPath, [], $formUpdateVersion); | |
| 24 | +wp_enqueue_style('bitform-conversational-base-' . $formIdSafe); | |
| 25 | +wp_enqueue_style('bitform-conversational-' . $formIdSafe); | |
| 26 | + | |
| 27 | +if (file_exists(BITFORMS_CONTENT_DIR . $customCSSPath)) { | |
| 28 | + wp_register_style('bitform-conversational-custom-' . $formIdSafe, BITFORMS_UPLOAD_BASE_URL . $customCSSPath, [], $formUpdateVersion); | |
| 29 | + wp_enqueue_style('bitform-conversational-custom-' . $formIdSafe); | |
| 30 | +} | |
| 31 | + | |
| 32 | +if (file_exists(BITFORMS_CONTENT_DIR . $standaloneCSSPath)) { | |
| 33 | + wp_register_style('bitform-conversational-standalone-' . $formIdSafe, BITFORMS_UPLOAD_BASE_URL . $standaloneCSSPath, [], $formUpdateVersion); | |
| 34 | + wp_enqueue_style('bitform-conversational-standalone-' . $formIdSafe); | |
| 35 | +} | |
| 36 | + | |
| 37 | +if (isset($font) && '' !== $font) { | |
| 38 | + wp_register_style('bitform-conversational-font-' . $formIdSafe, $font, [], $formUpdateVersion); | |
| 39 | + wp_enqueue_style('bitform-conversational-font-' . $formIdSafe); | |
| 40 | +} | |
| 41 | + | |
| 42 | +$conversationalJsPath = BITFORMS_UPLOAD_BASE_URL . '/form-scripts/bitform-conversational-' . $formID . '.js'; | |
| 43 | +wp_register_script('bitform-conversational-' . $formIdSafe, $conversationalJsPath, [], $formUpdateVersion, true); | |
| 44 | +wp_enqueue_script('bitform-conversational-' . $formIdSafe); | |
| 45 | +if (isset($bfGlobals) && '' !== $bfGlobals) { | |
| 46 | + wp_add_inline_script('bitform-conversational-' . $formIdSafe, (string) $bfGlobals, 'before'); | |
| 47 | +} | |
| 48 | +?> | |
| 49 | + | |
| 1 | 50 | <!DOCTYPE html> |
| 2 | 51 | <html lang="en"> |
| 52 | + | |
| 3 | 53 | <head> |
| 4 | 54 | <meta charset="UTF-8"> |
| 5 | 55 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | - <title><?= isset($title) ? $title : 'Conversational Form'; ?></title> | |
| 56 | + <title><?php echo isset($title) ? esc_html($title) : 'Conversational Form'; ?></title> | |
| 7 | 57 | <style> |
| 8 | - * { | |
| 9 | - padding: 0; | |
| 10 | - margin: 0; | |
| 11 | - box-sizing: border-box; | |
| 12 | - } | |
| 58 | + * { | |
| 59 | + padding: 0; | |
| 60 | + margin: 0; | |
| 61 | + box-sizing: border-box; | |
| 62 | + } | |
| 13 | 63 | |
| 14 | - body.bit-conversational-form { | |
| 15 | - height: 100vh; | |
| 16 | - overflow: hidden; | |
| 17 | - } | |
| 64 | + body.bit-conversational-form { | |
| 65 | + height: 100vh; | |
| 66 | + overflow: hidden; | |
| 67 | + } | |
| 18 | 68 | |
| 19 | - @media (max-width: 575.98px) { | |
| 20 | - .standalone-form-wrapper { | |
| 21 | - width: 100%; | |
| 22 | - } | |
| 69 | + @media (max-width: 575.98px) { | |
| 70 | + .standalone-form-wrapper { | |
| 71 | + width: 100%; | |
| 23 | 72 | } |
| 73 | + } | |
| 74 | + </style> | |
| 75 | + <?php if (isset($font) && '' !== $font) : ?> | |
| 76 | + <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| 77 | + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| 78 | + <?php endif; ?> | |
| 79 | + <?php | |
| 80 | + wp_enqueue_emoji_styles(); | |
| 81 | + wp_print_styles(); | |
| 82 | + ?> | |
| 83 | +</head> | |
| 24 | 84 | |
| 25 | - </style> | |
| 85 | +<body class="bit-conversational-form"> | |
| 26 | 86 | <?php |
| 27 | - $baseCSSPath = "/form-styles/bitform-{$formID}.css"; | |
| 28 | - $baseConversationalCSSPath = "/form-styles/bitform-conversational-{$formID}.css"; | |
| 29 | - $customCSSPath = "/form-styles/bitform-custom-{$formID}.css"; | |
| 30 | - $standaloneCSSPath = "/form-styles/bitform-standalone-{$formID}.css"; | |
| 87 | + // Fallback config for when an optimizer defers or drops the inline script. | |
| 88 | + // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- built by buildFormConfigTag(), JSON_HEX_* escaped. | |
| 89 | + echo isset($configTag) ? $configTag : ''; | |
| 31 | 90 | ?> |
| 32 | - <link rel="stylesheet" href="<?= BITFORMS_UPLOAD_BASE_URL . $baseCSSPath ?>" /> | |
| 33 | - <link rel="stylesheet" href="<?= BITFORMS_UPLOAD_BASE_URL . $baseConversationalCSSPath ?>" /> | |
| 34 | - | |
| 35 | - <?php if (file_exists(BITFORMS_CONTENT_DIR . $customCSSPath)) : ?> | |
| 36 | - <link rel="stylesheet" href="<?= BITFORMS_UPLOAD_BASE_URL . $customCSSPath ?>" /> | |
| 91 | + <?php echo wp_kses($formHTML, EscapingHelper::getFormAllowedHtml(isset($formContent) ? $formContent : null)); ?> | |
| 92 | + <?php if (!empty($isPreview)) : ?> | |
| 93 | + <style>.bc-live-hidden { display: none !important; }</style> | |
| 94 | + <script>window.bf_preview_mode = true;</script> | |
| 37 | 95 | <?php endif; ?> |
| 96 | + <?php wp_print_scripts(); ?> | |
| 97 | + <?php if (!empty($isPreview)) : ?> | |
| 98 | + <script> | |
| 99 | + (function() { | |
| 100 | + var FID = <?php echo (int) $formID; ?>; | |
| 101 | + var pfx = 'bc' + FID + '-'; | |
| 38 | 102 | |
| 39 | - <?php if (file_exists(BITFORMS_CONTENT_DIR . $standaloneCSSPath)) : ?> | |
| 40 | - <link rel="stylesheet" href="<?= BITFORMS_UPLOAD_BASE_URL . $standaloneCSSPath ?>" /> | |
| 41 | - <?php endif; ?> | |
| 103 | + function q(sel) { return document.querySelector('.' + pfx + sel); } | |
| 104 | + function qa(sel) { return document.querySelectorAll('.' + pfx + sel); } | |
| 105 | + function toggle(el, show) { if (el) el.classList.toggle('bc-live-hidden', !show); } | |
| 106 | + function setTxt(el, val) { if (el && val !== undefined && val !== null) el.textContent = val; } | |
| 42 | 107 | |
| 43 | - <?php if (isset($font) && '' !== $font) : ?> | |
| 44 | - <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| 45 | - <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| 46 | - <link rel="stylesheet" href="<?= $font ?>" /> | |
| 47 | - <?php endif; ?> | |
| 108 | + var LAYOUT_CLASSES = ['normal-layout', 'compact-left-layout', 'compact-right-layout', 'padding-left-layout', 'padding-right-layout', 'centered-card-layout']; | |
| 48 | 109 | |
| 49 | -</head> | |
| 50 | -<body class="bit-conversational-form"> | |
| 51 | - <?=$formHTML?> | |
| 52 | - <script> | |
| 53 | - <?= $bfGlobals ?>; | |
| 110 | + function applyLiveSettings(settings) { | |
| 111 | + var nav = settings.navigationSettings || {}; | |
| 112 | + var stl = settings.stepListObject || {}; | |
| 113 | + var all = stl.allSteps || {}; | |
| 114 | + | |
| 115 | + // Visibility toggles | |
| 116 | + toggle(q('nav-wrpr'), nav.show !== false); | |
| 117 | + toggle(q('progress-lbl-wrpr'), !!nav.showProgressLabel); | |
| 118 | + toggle(q('progress-bar-wrpr'), !!nav.showProgressBar); | |
| 119 | + toggle(q('branding-wrpr'), nav.showBranding !== false); | |
| 120 | + toggle(q('nav-btn-wrpr'), !!nav.showNavigateBtn); | |
| 121 | + | |
| 122 | + // Welcome page text content | |
| 123 | + var wp = stl.welcomePage || {}; | |
| 124 | + var titleEl = document.querySelector('.' + pfx + 'welcome-title h2'); | |
| 125 | + setTxt(titleEl, wp.title); | |
| 126 | + // Welcome page rich content (everything between title and button wrapper) | |
| 127 | + var welcomeContentEl = q('welcome-content'); | |
| 128 | + if (welcomeContentEl && wp.content !== undefined) { | |
| 129 | + // Find the text node area — insert content after title, before button wrapper | |
| 130 | + var btnWrpr = welcomeContentEl.querySelector('.' + pfx + 'step-btn-wrpr'); | |
| 131 | + var titleWrpr = welcomeContentEl.querySelector('.' + pfx + 'welcome-title'); | |
| 132 | + // Remove existing text nodes / content nodes between title and button | |
| 133 | + var children = Array.from(welcomeContentEl.childNodes); | |
| 134 | + children.forEach(function(node) { | |
| 135 | + if (node !== titleWrpr && node !== btnWrpr) { | |
| 136 | + welcomeContentEl.removeChild(node); | |
| 137 | + } | |
| 138 | + }); | |
| 139 | + var tempDiv = document.createElement('div'); | |
| 140 | + tempDiv.innerHTML = wp.content || ''; | |
| 141 | + var frag = document.createDocumentFragment(); | |
| 142 | + while (tempDiv.firstChild) frag.appendChild(tempDiv.firstChild); | |
| 143 | + welcomeContentEl.insertBefore(frag, btnWrpr); | |
| 144 | + } | |
| 145 | + | |
| 146 | + // Per-step: button text, hints, layout, image, background | |
| 147 | + var wrappers = qa('step-wrapper'); | |
| 148 | + var fieldKeys = Object.keys(stl).filter(function(k) { return k !== 'allSteps' && k !== 'welcomePage'; }); | |
| 149 | + var welcomeOffset = (wp.enable) ? 1 : 0; | |
| 150 | + | |
| 151 | + Array.prototype.forEach.call(wrappers, function(wrapper, idx) { | |
| 152 | + var isWelcome = wrapper.classList.contains(pfx + 'welcome'); | |
| 153 | + var cfg = isWelcome ? wp : (stl[fieldKeys[idx - welcomeOffset]] || {}); | |
| 154 | + | |
| 155 | + // Button text (start button on welcome, ok button on steps) | |
| 156 | + if (isWelcome) { | |
| 157 | + var startBtn = wrapper.querySelector('.' + pfx + 'start-btn'); | |
| 158 | + if (startBtn) { | |
| 159 | + // preserve icon elements, update only text node | |
| 160 | + var textNode = Array.from(startBtn.childNodes).find(function(n) { return n.nodeType === 3 && n.textContent.trim(); }); | |
| 161 | + if (textNode) textNode.textContent = '\n ' + (cfg.btnTxt || all.btnTxt || 'Start') + '\n '; | |
| 162 | + } | |
| 163 | + } else { | |
| 164 | + var btnEl = wrapper.querySelector('.' + pfx + 'btn-ok'); | |
| 165 | + if (btnEl) { | |
| 166 | + var textNode = Array.from(btnEl.childNodes).find(function(n) { return n.nodeType === 3 && n.textContent.trim(); }); | |
| 167 | + if (textNode) textNode.textContent = '\n ' + (cfg.btnTxt || all.btnTxt || 'OK') + '\n '; | |
| 168 | + } | |
| 169 | + } | |
| 170 | + | |
| 171 | + // Step hints — rendered as HTML (same as PHP frontend output). | |
| 172 | + var hintsEl = wrapper.querySelector('.' + pfx + 'step-hints'); | |
| 173 | + var hintsVal = cfg.stepHints !== undefined ? cfg.stepHints : all.stepHints; | |
| 174 | + if (hintsEl && hintsVal !== undefined && hintsVal !== null) hintsEl.innerHTML = hintsVal; | |
| 175 | + | |
| 176 | + // Layout class | |
| 177 | + var layout = cfg.layout || all.layout || 'normal-layout'; | |
| 178 | + LAYOUT_CLASSES.forEach(function(c) { wrapper.classList.remove(c); }); | |
| 179 | + wrapper.classList.add(layout); | |
| 180 | + | |
| 181 | + // Layout image | |
| 182 | + var imgEl = wrapper.querySelector('.' + pfx + 'step-img'); | |
| 183 | + if (imgEl) imgEl.src = cfg.layoutImage || all.layoutImage || ''; | |
| 184 | + | |
| 185 | + // Show/hide image container based on layout | |
| 186 | + var imgCntnr = wrapper.querySelector('.' + pfx + 'step-img-cntnr'); | |
| 187 | + if (imgCntnr) imgCntnr.style.display = (layout === 'normal-layout' || layout === 'centered-card-layout') ? 'none' : ''; | |
| 188 | + | |
| 189 | + // Step background — Floating Card redirects to card element; others apply to wrapper. | |
| 190 | + var bg = cfg.background || all.background || ''; | |
| 191 | + var bgColor = typeof bg === 'object' ? (bg['background-color'] || '') : bg; | |
| 192 | + var cardEl = wrapper.querySelector('.' + pfx + 'step-content'); | |
| 193 | + var isRealColor = bgColor && bgColor !== 'transparent'; | |
| 194 | + if (layout === 'centered-card-layout') { | |
| 195 | + wrapper.style.removeProperty('background'); | |
| 196 | + wrapper.style.removeProperty('background-color'); | |
| 197 | + if (cardEl) { | |
| 198 | + // Only override CSS white fallback when user has a real color set. | |
| 199 | + if (isRealColor) cardEl.style.setProperty('background-color', bgColor, 'important'); | |
| 200 | + else cardEl.style.removeProperty('background-color'); | |
| 201 | + } | |
| 202 | + } else { | |
| 203 | + if (cardEl) cardEl.style.removeProperty('background-color'); | |
| 204 | + if (isRealColor) wrapper.style.setProperty('background-color', bgColor, 'important'); | |
| 205 | + else wrapper.style.removeProperty('background-color'); | |
| 206 | + } | |
| 207 | + }); | |
| 208 | + } | |
| 209 | + | |
| 210 | + var BF_ALLOWED_ORIGIN = <?php | |
| 211 | + $bfParsed = wp_parse_url(get_site_url()); | |
| 212 | + $bfOrigin = $bfParsed['scheme'] . '://' . $bfParsed['host']; | |
| 213 | + if (!empty($bfParsed['port'])) $bfOrigin .= ':' . $bfParsed['port']; | |
| 214 | + echo wp_json_encode($bfOrigin); | |
| 215 | + ?>; | |
| 216 | + window.addEventListener('message', function(e) { | |
| 217 | + if (!e.origin || e.origin !== BF_ALLOWED_ORIGIN) return; | |
| 218 | + var d = e.data; | |
| 219 | + if (!d || !d.__bf) return; | |
| 220 | + | |
| 221 | + if (d.type === 'bf:css') { | |
| 222 | + var el = document.getElementById('bf-live-preview-css'); | |
| 223 | + if (!el) { | |
| 224 | + el = document.createElement('style'); | |
| 225 | + el.id = 'bf-live-preview-css'; | |
| 226 | + document.head.appendChild(el); | |
| 227 | + } | |
| 228 | + el.textContent = d.css; | |
| 229 | + } | |
| 230 | + | |
| 231 | + if (d.type === 'bf:settings') { | |
| 232 | + applyLiveSettings(d.settings); | |
| 233 | + } | |
| 234 | + | |
| 235 | + if (d.type === 'bf:navigate') { | |
| 236 | + var contentIds = Object.keys(window.bf_globals || {}); | |
| 237 | + for (var i = 0; i < contentIds.length; i++) { | |
| 238 | + var g = window.bf_globals[contentIds[i]]; | |
| 239 | + var inst = g && g.inits && g.inits.conversational_form; | |
| 240 | + if (inst && typeof inst.goToStep === 'function') { inst.goToStep(d.stepIndex); break; } | |
| 241 | + } | |
| 242 | + } | |
| 243 | + }); | |
| 244 | + })(); | |
| 54 | 245 | </script> |
| 55 | - <script src="<?= BITFORMS_UPLOAD_BASE_URL ?>/form-scripts/bitform-conversational-<?= $formID ?>.js"></script> | |
| 246 | + <?php endif; ?> | |
| 56 | 247 | </body> |
| 57 | -</html> | |
| 248 | + | |
| 249 | +</html> | |
