diff --git a/modules/option-field/assets/build/checkbox.asset.php b/modules/option-field/assets/build/checkbox.asset.php index 3e5cc51ef..10613991e 100644 --- a/modules/option-field/assets/build/checkbox.asset.php +++ b/modules/option-field/assets/build/checkbox.asset.php @@ -1 +1 @@ - array(), 'version' => '0a3ef3c1811be5626bbd'); + array(), 'version' => '707e41f232e360f0cef0'); diff --git a/modules/option-field/assets/build/checkbox.js b/modules/option-field/assets/build/checkbox.js index 51a408bc1..39b6ed921 100644 --- a/modules/option-field/assets/build/checkbox.js +++ b/modules/option-field/assets/build/checkbox.js @@ -1 +1 @@ -(()=>{var t={554(){const{CalculatedFormula:t}=JetFormBuilderAbstract,{addAction:e}=JetPlugins.hooks,r="__JFB_OPTION_FIELD_DEFAULT_VALUE_OBSERVER__";function n(t){if("string"!=typeof t||t.length<2)return t;const e=t.charAt(0),r=t.charAt(t.length-1);return"'"===e&&"'"===r||'"'===e&&'"'===r?t.slice(1,-1):t}function o(t){return Array.isArray(t)?t.some(o):"string"==typeof t&&t.includes("%")}function s(t){return!(""===t||null===t||Array.isArray(t)&&!t.length)}function i(e,r){const i=Array.isArray(r)?r:[r],a=[],u=new Array(i.length);i.forEach((c,l)=>{const d=new t(e);d.observe(function(t){if("string"!=typeof t)return t;const e=t.trim();return!o(e)||function(t){if("string"!=typeof t||t.length<2)return!1;const e=t.charAt(0),r=t.charAt(t.length-1);return"'"===e&&"'"===r||'"'===e&&'"'===r}(e)?e:`'${e.replace(/'/g,"\\'")}'`}(c)),d.setResult=()=>{const t=d.calculate();s(t)&&(u[l]=t,Object.keys(u).length===i.length&&u.every(s)&&(function(t,e){if(Array.isArray(e))return void t.value.setIfEmpty(e.map(t=>n(""+t)));const r=n(""+e);if(!t.isArray())return function(t){if(t.isArray()||"select"!==t.inputType)return!1;const[e]=t.nodes;if(!e||"select-one"!==e.type||e.multiple||!e.options?.length)return!1;const r=Array.from(e.options),[n]=r;return!!n&&!r.some(t=>""===t.value)&&!r.some(t=>t.defaultSelected)&&0===e.selectedIndex&&e.value===n.value}(t)?void(t.value.current=r):void t.value.setIfEmpty(r);const o=function(t){if("string"!=typeof t)return t;const e=t.trim();try{const r=JSON.parse(e);return Array.isArray(r)?r:t}catch(r){if(e.startsWith("[")&&e.endsWith("]")&&e.includes("'"))try{const r=e.replace(/'((?:\\'|[^'])*)'/g,(t,e)=>`"${e.replace(/"/g,'\\"')}"`),n=JSON.parse(r);return Array.isArray(n)?n:t}catch(e){return t}return t}}(r);t.value.setIfEmpty(Array.isArray(o)?o.map(t=>n(""+t)):[r])}(e,Array.isArray(r)?u:u[0]),a.forEach(t=>t.clearWatchers())))},d.setResult(),a.push(d)})}function a(t){var e,r,n;const[s]=t.nodes,a=null!==(e=t.wrapper)&&void 0!==e?e:s,u=null!==(r=null!==(n=a?.dataset?.defaultVal)&&void 0!==n?n:s?.dataset?.defaultVal)&&void 0!==r?r:"",c=function(t){if("string"!=typeof t)return t;const e=t.trim();try{const t=JSON.parse(e);return Array.isArray(t)?t:e}catch(t){if(e.startsWith("[")&&e.endsWith("]")&&e.includes("'"))try{const t=e.replace(/'((?:\\'|[^'])*)'/g,(t,e)=>`"${e.replace(/"/g,'\\"')}"`),r=JSON.parse(t);return Array.isArray(r)?r:e}catch(t){return e}return e}}(u);(function(t,e){if(Array.isArray(e))return e.length>0;if("string"!=typeof t)return o(e);const r=t.trim();return o(e)||r.startsWith("[")&&r.endsWith("]")})(u,c)&&i(t,c)}window[r]||(window[r]=!0,e("jet.fb.observe.after","jet-form-builder/option-field-default-value",function(t){for(const e of t.getInputs()){const[t]=e.nodes;t&&["select","radio","checkbox"].includes(e.inputType)&&a(e)}}))}},e={};function r(n){var o=e[n];if(void 0!==o)return o.exports;var s=e[n]={exports:{}};return t[n](s,s.exports,r),s.exports}(()=>{"use strict";const t=function(t){return t.nextElementSibling.querySelector("input.text-field")},e=function(t,e,r){var n;if(t.checked=e?.includes(t.value),!t.checked)return;if(r.calcValue+=parseFloat(null!==(n=t.dataset?.calculate)&&void 0!==n?n:t.value),!r.isArray())return;const o=e.indexOf(t.value);e.splice(o,1)},{isEmpty:n}=JetFormBuilderFunctions,{InputData:o,ReactiveHook:s}=JetFormBuilderAbstract,{getParsedName:i}=JetFormBuilderFunctions;function a(){o.call(this),this.wrapper=null,this.isResetCalcValue=!1}a.prototype=Object.create(o.prototype),a.prototype.wrapper=null,a.prototype.isSupported=function(t){return t.classList.contains("checkradio-wrap")&&t.querySelector(".checkboxes-wrap")},a.prototype.addListeners=function(){this.enterKey=new s,this.wrapper.addEventListener("change",this.onChangeValue.bind(this)),this.wrapper.addEventListener("keydown",this.handleEnterKey.bind(this)),this.wrapper.addEventListener("focusout",t=>{[...this.nodes].includes(t?.relatedTarget)||t?.relatedTarget?.closest?.(".jet-form-builder__field-wrap.custom-option")||this.reportOnBlur()}),this.addNewButton&&this.wrapper.addEventListener("click",t=>{t?.target&&!this.addNewButton.isEqualNode(t.target)||(this.silenceSet([...this.value.current,!0]),this.getCustomNodes().at(-1).closest(".jet-form-builder__field-wrap").querySelector("span input.jet-form-builder__field").focus())}),this.isArray()&&this.sanitize(t=>function(t,e){return Array.isArray(t)?(!e?.keepCommas&&1===t.length&&t[0]&&1!=t[0]&&String(t[0]).includes(",")&&(t=(t=String(t[0]).split(",")).map(t=>"true"===t?"":"false"===t?null:t)),t):[t].filter(Boolean)}(t,this)),this.callable=null,this.sanitize(r=>function(r,o){o.calcValue=0;const s=o.isArray()?[...r]:r;for(const t of o.nodes)!t.dataset.custom&&e(t,s,o);if(!o.addNewButton)return r;const i=o.getCustomNodes();if(!i.length||s.length){for(let e=Math.max(i.length,s.length)-1;e>=0;e--){let r=i[e];const a=s[e];if(null==a){r&&r.closest(".custom-option").remove();continue}if(void 0===r){if(!1===a)continue;o.addCustomOption(),r=o.nodes[o.nodes.length-1]}const u=t(r);u.disabled=!1===a,u.disabled||n(a)||!0===a||(o.calcValue+=1),u.value!==a&&"boolean"!=typeof a&&(u.value=a)}return r.filter(t=>null!==t)}for(let t=Math.max(i.length,s.length)-1;t>=0;t--)if(i[t]){let e=i[t];void 0===s[t]&&e.closest(".custom-option").remove()}}(r,this))},a.prototype.onChangeValue=function(t){this.value.current=this.getActiveValue()},a.prototype.setValue=function(){this.value.current=this.getActiveValue(),this.value.applySanitizers(this.value.current)},a.prototype.setNode=function(t){t.jfbSync=this,this.nodes=t.getElementsByClassName("jet-form-builder__field checkboxes-field"),this.rawName=this.nodes[0].name,this.name=i(this.rawName),this.inputType="checkbox",this.wrapper=t,this.addNewButton=t.querySelector(".jet-form-builder__field-wrap.custom-option .add-custom-option")},a.prototype.getActiveValue=function(){var t;const e=[];this.keepCommas=!1;for(const t of this.nodes)t.checked&&"1"===t.dataset.keepCommas&&(this.keepCommas=!0),this.processValueFormSingleChoice(t,e);return this.isArray()?e:null!==(t=e?.[0])&&void 0!==t?t:""},a.prototype.processValueFormSingleChoice=function(e,r){if(!e.dataset.custom&&!e.checked)return;if(!e.dataset.custom)return void r.push(e.value);const n=t(e);e.checked||n.value?n.value||!e.checked?n.value&&r.push(!!e.checked&&n.value):r.push(!0):r.push(null)},a.prototype.isArray=function(){return Boolean(this.addNewButton)||this.nodes.item&&this.nodes.item(0)?.name?.includes?.("[]")},a.prototype.addCustomOption=function(){const t=this.addNewButton.closest(".custom-option");return this.wrapper.insertBefore(this.getCustomOptionNode(),t)},a.prototype.getCustomOptionNode=function(){if(!this.addNewButton)return!1;const t=this.addNewButton.querySelector("template"),e=document.createElement("template");return e.innerHTML=t.innerHTML.trim(),e.content.firstChild},a.prototype.getCustomNodes=function(){return[...this.nodes].filter(t=>t.dataset.custom&&t.nextElementSibling)};const u=a;r(554);const{addFilter:c}=JetPlugins.hooks;window.JetFormBuilderAbstract={...window.JetFormBuilderAbstract,CheckboxData:u},c("jet.fb.inputs","jet-form-builder/checkbox-field",function(t){return[u,...t]})})()})(); \ No newline at end of file +(()=>{var t={554(){const{CalculatedFormula:t}=JetFormBuilderAbstract,{addAction:e}=JetPlugins.hooks,r="__JFB_OPTION_FIELD_DEFAULT_VALUE_OBSERVER__";function n(t){if("string"!=typeof t||t.length<2)return t;const e=t.charAt(0),r=t.charAt(t.length-1);return"'"===e&&"'"===r||'"'===e&&'"'===r?t.slice(1,-1):t}function o(t){return Array.isArray(t)?t.some(o):"string"==typeof t&&t.includes("%")}function i(t){return!(""===t||null===t||Array.isArray(t)&&!t.length)}function s(e,r){const s=Array.isArray(r)?r:[r],a=[],u=new Array(s.length);s.forEach((c,l)=>{const d=new t(e);d.observe(function(t){if("string"!=typeof t)return t;const e=t.trim();return!o(e)||function(t){if("string"!=typeof t||t.length<2)return!1;const e=t.charAt(0),r=t.charAt(t.length-1);return"'"===e&&"'"===r||'"'===e&&'"'===r}(e)?e:`'${e.replace(/'/g,"\\'")}'`}(c)),d.setResult=()=>{const t=d.calculate();i(t)&&(u[l]=t,Object.keys(u).length===s.length&&u.every(i)&&(function(t,e){if(Array.isArray(e))return void t.value.setIfEmpty(e.map(t=>n(""+t)));const r=n(""+e);if(!t.isArray())return function(t){if(t.isArray()||"select"!==t.inputType)return!1;const[e]=t.nodes;if(!e||"select-one"!==e.type||e.multiple||!e.options?.length)return!1;const r=Array.from(e.options),[n]=r;return!!n&&!r.some(t=>""===t.value)&&!r.some(t=>t.defaultSelected)&&0===e.selectedIndex&&e.value===n.value}(t)?void(t.value.current=r):void t.value.setIfEmpty(r);const o=function(t){if("string"!=typeof t)return t;const e=t.trim();try{const r=JSON.parse(e);return Array.isArray(r)?r:t}catch(r){if(e.startsWith("[")&&e.endsWith("]")&&e.includes("'"))try{const r=e.replace(/'((?:\\'|[^'])*)'/g,(t,e)=>`"${e.replace(/"/g,'\\"')}"`),n=JSON.parse(r);return Array.isArray(n)?n:t}catch(e){return t}return t}}(r);t.value.setIfEmpty(Array.isArray(o)?o.map(t=>n(""+t)):[r])}(e,Array.isArray(r)?u:u[0]),a.forEach(t=>t.clearWatchers())))},d.setResult(),a.push(d)})}function a(t){var e,r,n;const[i]=t.nodes,a=null!==(e=t.wrapper)&&void 0!==e?e:i,u=null!==(r=null!==(n=a?.dataset?.defaultVal)&&void 0!==n?n:i?.dataset?.defaultVal)&&void 0!==r?r:"",c=function(t){if("string"!=typeof t)return t;const e=t.trim();try{const t=JSON.parse(e);return Array.isArray(t)?t:e}catch(t){if(e.startsWith("[")&&e.endsWith("]")&&e.includes("'"))try{const t=e.replace(/'((?:\\'|[^'])*)'/g,(t,e)=>`"${e.replace(/"/g,'\\"')}"`),r=JSON.parse(t);return Array.isArray(r)?r:e}catch(t){return e}return e}}(u);(function(t,e){if(Array.isArray(e))return e.length>0;if("string"!=typeof t)return o(e);const r=t.trim();return o(e)||r.startsWith("[")&&r.endsWith("]")})(u,c)&&s(t,c)}window[r]||(window[r]=!0,e("jet.fb.observe.after","jet-form-builder/option-field-default-value",function(t){for(const e of t.getInputs()){const[t]=e.nodes;t&&["select","radio","checkbox"].includes(e.inputType)&&a(e)}}))}},e={};function r(n){var o=e[n];if(void 0!==o)return o.exports;var i=e[n]={exports:{}};return t[n](i,i.exports,r),i.exports}(()=>{"use strict";const t=function(t){return t.nextElementSibling.querySelector("input.text-field")},e=function(t,e,r){var n;if(t.checked=e?.includes(t.value),!t.checked)return;if(r.calcValue+=parseFloat(null!==(n=t.dataset?.calculate)&&void 0!==n?n:t.value),!r.isArray())return;const o=e.indexOf(t.value);e.splice(o,1)},{isEmpty:n}=JetFormBuilderFunctions,{InputData:o,ReactiveHook:i}=JetFormBuilderAbstract,{getParsedName:s}=JetFormBuilderFunctions;function a(){o.call(this),this.wrapper=null,this.isResetCalcValue=!1}a.prototype=Object.create(o.prototype),a.prototype.wrapper=null,a.prototype.isSupported=function(t){return t.classList.contains("checkradio-wrap")&&t.querySelector(".checkboxes-wrap")},a.prototype.addListeners=function(){this.enterKey=new i,this.wrapper.addEventListener("change",this.onChangeValue.bind(this)),this.wrapper.addEventListener("keydown",this.handleEnterKey.bind(this)),this.wrapper.addEventListener("focusout",t=>{[...this.nodes].includes(t?.relatedTarget)||t?.relatedTarget?.closest?.(".jet-form-builder__field-wrap.custom-option")||this.reportOnBlur()}),this.addNewButton&&this.wrapper.addEventListener("click",t=>{t?.target&&!this.addNewButton.isEqualNode(t.target)||(this.silenceSet([...this.value.current,!0]),this.getCustomNodes().at(-1).closest(".jet-form-builder__field-wrap").querySelector("span input.jet-form-builder__field").focus())}),this.isArray()&&this.sanitize(t=>function(t,e){return Array.isArray(t)?(!e?.keepCommas&&1===t.length&&t[0]&&1!=t[0]&&String(t[0]).includes(",")&&(t=(t=String(t[0]).split(",")).map(t=>"true"===t?"":"false"===t?null:t)),t):[t].filter(Boolean)}(t,this)),this.callable=null,this.sanitize(r=>function(r,o){o.calcValue=0;const i=o.isArray()?[...r]:r;for(const t of o.nodes)!t.dataset.custom&&e(t,i,o);if(!o.addNewButton)return r;const s=o.getCustomNodes();if(s.length&&!i.length){for(let t=Math.max(s.length,i.length)-1;t>=0;t--)if(s[t]){let e=s[t];void 0===i[t]&&o.removeCustomOption(e)}return r}for(let e=Math.max(s.length,i.length)-1;e>=0;e--){let r=s[e];const a=i[e];if(null==a){r&&o.removeCustomOption(r);continue}if(void 0===r){if(!1===a)continue;o.addCustomOption(),r=o.nodes[o.nodes.length-1]}const u=t(r);r.checked=!1!==a,u.disabled=!1===a,u.disabled||n(a)||!0===a||(o.calcValue+=1),u.value!==a&&"boolean"!=typeof a&&(u.value=a)}return r.filter(t=>null!==t)}(r,this))},a.prototype.onChangeValue=function(t){this.value.current=this.getActiveValue()},a.prototype.setValue=function(){this.value.current=this.getActiveValue(),this.value.applySanitizers(this.value.current)},a.prototype.setNode=function(e){e.jfbSync=this,this.nodes=e.getElementsByClassName("jet-form-builder__field checkboxes-field");const r=this.nodes[0];this.rawName=r.name||t(r).name,this.name=s(this.rawName),this.inputType="checkbox",this.wrapper=e,this.addNewButton=e.querySelector(".jet-form-builder__field-wrap.custom-option .add-custom-option")},a.prototype.getActiveValue=function(){var t;const e=[];this.keepCommas=!1;for(const t of this.nodes)t.checked&&"1"===t.dataset.keepCommas&&(this.keepCommas=!0),this.processValueFormSingleChoice(t,e);return this.isArray()?e:null!==(t=e?.[0])&&void 0!==t?t:""},a.prototype.processValueFormSingleChoice=function(e,r){if(!e.dataset.custom&&!e.checked)return;if(!e.dataset.custom)return void r.push(e.value);const n=t(e);if(e.checked||n.value)n.value||!e.checked?n.value&&r.push(!!e.checked&&n.value):r.push(!0);else{if(1===this.nodes.length)return;r.push(null)}},a.prototype.isArray=function(){return Boolean(this.addNewButton)||this.nodes.item&&this.nodes.item(0)?.name?.includes?.("[]")},a.prototype.addCustomOption=function(){const t=this.addNewButton.closest(".custom-option");return this.wrapper.insertBefore(this.getCustomOptionNode(),t)},a.prototype.getCustomOptionNode=function(){if(!this.addNewButton)return!1;const t=this.addNewButton.querySelector("template"),e=document.createElement("template");return e.innerHTML=t.innerHTML.trim(),e.content.firstChild},a.prototype.getCustomNodes=function(){return[...this.nodes].filter(t=>t.dataset.custom&&t.nextElementSibling)},a.prototype.removeCustomOption=function(e){if(1===this.nodes.length){const r=t(e);return e.checked=!1,r.value="",void(r.disabled=!0)}e.closest(".custom-option").remove()};const u=a;r(554);const{addFilter:c}=JetPlugins.hooks;window.JetFormBuilderAbstract={...window.JetFormBuilderAbstract,CheckboxData:u},c("jet.fb.inputs","jet-form-builder/checkbox-field",function(t){return[u,...t]})})()})(); \ No newline at end of file diff --git a/modules/option-field/assets/src/frontend/blocks/checkbox/CheckboxData.js b/modules/option-field/assets/src/frontend/blocks/checkbox/CheckboxData.js index 4b3fe4095..74875313d 100644 --- a/modules/option-field/assets/src/frontend/blocks/checkbox/CheckboxData.js +++ b/modules/option-field/assets/src/frontend/blocks/checkbox/CheckboxData.js @@ -134,7 +134,8 @@ CheckboxData.prototype.setNode = function ( node ) { this.nodes = node.getElementsByClassName( 'jet-form-builder__field checkboxes-field' ); - this.rawName = this.nodes[ 0 ].name; + const firstNode = this.nodes[ 0 ]; + this.rawName = firstNode.name || getCustomCheckboxInput( firstNode ).name; this.name = getParsedName( this.rawName ); this.inputType = 'checkbox'; @@ -186,6 +187,9 @@ CheckboxData.prototype.processValueFormSingleChoice = function ( node, value ) { const input = getCustomCheckboxInput( node ); if ( !node.checked && !input.value ) { + if ( this.nodes.length === 1 ) { + return; + } value.push( null ); return; } @@ -241,4 +245,17 @@ CheckboxData.prototype.getCustomNodes = function () { ); }; -export default CheckboxData; \ No newline at end of file +CheckboxData.prototype.removeCustomOption = function ( node ) { + // Keep one empty input when there are no predefined options. + if ( this.nodes.length === 1 ) { + const input = getCustomCheckboxInput( node ); + node.checked = false; + input.value = ''; + input.disabled = true; + return; + } + + node.closest( '.custom-option' ).remove(); +}; + +export default CheckboxData; diff --git a/modules/option-field/assets/src/frontend/blocks/checkbox/functions/sanitizeCheckbox.js b/modules/option-field/assets/src/frontend/blocks/checkbox/functions/sanitizeCheckbox.js index 2c8013f9a..d9d5f451e 100644 --- a/modules/option-field/assets/src/frontend/blocks/checkbox/functions/sanitizeCheckbox.js +++ b/modules/option-field/assets/src/frontend/blocks/checkbox/functions/sanitizeCheckbox.js @@ -41,12 +41,12 @@ function sanitizeCheckbox( value, input ) { // value has been removed if ( undefined === currentValue ) { - currentNode.closest( '.custom-option' ).remove(); + input.removeCustomOption( currentNode ); } } } - return; + return value; } const limit = Math.max( customNodes.length, copyValue.length ); @@ -58,7 +58,7 @@ function sanitizeCheckbox( value, input ) { // value has been removed if ( null === currentValue || undefined === currentValue ) { if ( currentNode ) { - currentNode.closest( '.custom-option' ).remove(); + input.removeCustomOption( currentNode ); } continue; @@ -76,6 +76,7 @@ function sanitizeCheckbox( value, input ) { } const inputNode = getCustomCheckboxInput( currentNode ); + currentNode.checked = false !== currentValue; inputNode.disabled = false === currentValue; // add 1 if custom option not deselected, not with empty value @@ -99,4 +100,4 @@ function sanitizeCheckbox( value, input ) { return value.filter( val => null !== val ); } -export default sanitizeCheckbox; \ No newline at end of file +export default sanitizeCheckbox; diff --git a/modules/option-field/blocks/checkbox/block-render.php b/modules/option-field/blocks/checkbox/block-render.php index 0a9082daa..fe20dc6a8 100644 --- a/modules/option-field/blocks/checkbox/block-render.php +++ b/modules/option-field/blocks/checkbox/block-render.php @@ -152,26 +152,21 @@ public function render_option( $value, $option ): string { } protected function render_custom_option(): string { - $html = '
'; - $class_name = $this->args['class_name'] ?? ''; + $html = '
'; + $has_options = ! empty( $this->args['field_options'] ); $name = esc_attr( $this->block_type->get_field_name() . $this->get_name_suffix() ); $checkbox = sprintf( - '', + '', Builder_Helper::attrs( array( array( 'type', 'checkbox' ), - array( 'checked', 'checked' ), + array( 'checked', $has_options ? 'checked' : '' ), array( 'data-field-name', esc_attr( $this->args['name'] ) ), array( 'data-custom', 1 ), - array( - 'class', - 'jet-form-builder__field checkboxes-field checkradio-field' . ( - $class_name ? " {$class_name}" : '' - ), - ), ) - ) + ), + $this->get_attributes_string_save() ); $input = sprintf( @@ -207,13 +202,20 @@ protected function render_custom_option(): string { $html . $item_template . '
' ); + if ( ! $has_options ) { + return $html . $item_template . '
' . $html . $button . ''; + } + $html .= $button . ''; return $html; } public function get_name_suffix(): string { - return count( $this->args['field_options'] ) > 1 ? '[]' : ''; + return ( + count( $this->args['field_options'] ) > 1 + || ! empty( $this->args['custom_option']['allow'] ) + ) ? '[]' : ''; } /**