From 566b214b54ec0b63b9ccb8b4c4b53e2ab4d46987 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Ruz=CC=8Cevic=CC=81?= Date: Wed, 5 Feb 2025 11:58:29 +0100 Subject: [PATCH 1/3] adding custom range input field --- CHANGELOG.md | 7 ++++ eightshift-forms.php | 2 +- src/Blocks/components/form/assets/form.js | 42 +++++++++++++++++++ .../components/form/assets/state-init.js | 3 +- src/Blocks/components/form/assets/utils.js | 18 ++++---- .../input/components/input-options.js | 10 +++++ src/Blocks/components/input/input.php | 16 ++++++- src/Blocks/components/input/manifest.json | 4 ++ 8 files changed, 92 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 950eb2f3..52abf64c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file. This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a CHANGELOG](https://keepachangelog.com/). +## [6.1.2] + +### Added + +- Ability for range slider to have a custom input value in the side. + ## [6.1.1] ### Fixed @@ -1096,6 +1102,7 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a - Initial production release. +[6.1.2]: https://github.com/infinum/eightshift-forms/compare/6.1.1...6.1.2 [6.1.1]: https://github.com/infinum/eightshift-forms/compare/6.1.0...6.1.1 [6.1.0]: https://github.com/infinum/eightshift-forms/compare/6.0.0...6.1.0 [6.0.0]: https://github.com/infinum/eightshift-forms/compare/5.9.10...6.0.0 diff --git a/eightshift-forms.php b/eightshift-forms.php index 8494feee..61765da7 100644 --- a/eightshift-forms.php +++ b/eightshift-forms.php @@ -6,7 +6,7 @@ * Description: Eightshift Forms is a complete form builder plugin that utilizes modern Block editor features with multiple third-party integrations, bringing your project to a new level. * Author: WordPress team @Infinum * Author URI: https://eightshift.com/ - * Version: 6.1.1 + * Version: 6.1.2 * Text Domain: eightshift-forms * * @package EightshiftForms diff --git a/src/Blocks/components/form/assets/form.js b/src/Blocks/components/form/assets/form.js index 6c740d16..7ac516e0 100644 --- a/src/Blocks/components/form/assets/form.js +++ b/src/Blocks/components/form/assets/form.js @@ -1124,6 +1124,7 @@ export class Form { */ setupRangeField(formId, name) { const input = this.state.getStateElementInput(name, formId); + const custom = this.state.getStateElementCustom(name, formId); this.state.setStateElementLoaded(name, true, formId); @@ -1144,6 +1145,10 @@ export class Form { } else { input.addEventListener('input', this.onInputEvent); } + + if (custom) { + custom.addEventListener('input', this.onRangeCustom); + } } /** @@ -1959,6 +1964,43 @@ export class Form { } }; + /** + * On range custom event. + * + * @param {object} event Event callback. + * + * @returns {void} + */ + onRangeCustom = (event) => { + const target = event?.target; + + if (!target) { + return; + } + + const formId = this.state.getFormIdByElement(target); + const field = this.state.getFormFieldElementByChild(target); + const name = field.getAttribute(this.state.getStateAttribute('fieldName')); + let value = parseInt(target?.value); + const min = parseInt(target?.min); + const max = parseInt(target?.max); + + if (isNaN(value)) { + value = min || 0; + } + + if (value < min) { + value = min; + } + + if (value > max) { + value = max; + } + + target.value = value; + this.utils.setManualRangeValue(formId, name, value.toString()); + }; + /** * On rating event. * diff --git a/src/Blocks/components/form/assets/state-init.js b/src/Blocks/components/form/assets/state-init.js index 266d7f12..38d1dd79 100644 --- a/src/Blocks/components/form/assets/state-init.js +++ b/src/Blocks/components/form/assets/state-init.js @@ -357,7 +357,7 @@ export function setStateFormInitial(formId) { disabled, } = item; - if (name === 'search_terms') { + if (name === 'search_terms' || !name) { return; } @@ -444,6 +444,7 @@ export function setStateFormInitial(formId) { setState([StateEnum.ELEMENTS, name, StateEnum.INITIAL], value, formId); setState([StateEnum.ELEMENTS, name, StateEnum.VALUE], value, formId); setState([StateEnum.ELEMENTS, name, StateEnum.INPUT], item, formId); + setState([StateEnum.ELEMENTS, name, StateEnum.CUSTOM], item?.nextElementSibling, formId); setState([StateEnum.ELEMENTS, name, StateEnum.IS_DISABLED], disabled, formId); setState([StateEnum.ELEMENTS, name, StateEnum.RANGE_CURRENT], field.querySelectorAll(getStateSelector('inputRangeCurrent', true)), formId); setState([StateEnum.ELEMENTS, name, StateEnum.TRACKING], field.getAttribute(getStateAttribute('tracking')), formId); diff --git a/src/Blocks/components/form/assets/utils.js b/src/Blocks/components/form/assets/utils.js index a59ba785..87a2c8bc 100644 --- a/src/Blocks/components/form/assets/utils.js +++ b/src/Blocks/components/form/assets/utils.js @@ -1307,23 +1307,27 @@ export class Utils { setRangeCurrentValue(formId, name) { const current = this.state.getStateElementRangeCurrent(name, formId); const input = this.state.getStateElementInput(name, formId); + const custom = this.state.getStateElementCustom(name, formId); + const value = this.state.getStateElementValue(name, formId); // Set range current value as css variable due to inconsistency in browsers. if (input) { const min = input.min || 0; const max = input.max || 100; - const parsedProgress = (Number(((input.value - min) * 100) / (max - min))).toFixed(2); + const parsedProgress = (Number(((value - min) * 100) / (max - min))).toFixed(2); input.style.setProperty('--es-form-range-progress', `${parsedProgress}%`); - } - if (!current.length) { - return; + if (custom) { + custom.value = value; + } } - current.forEach((item) => { - item.innerHTML = this.state.getStateElementValue(name, formId); - }); + if (current.length) { + current.forEach((item) => { + item.innerHTML = value; + }); + } } /** diff --git a/src/Blocks/components/input/components/input-options.js b/src/Blocks/components/input/components/input-options.js index 81a0da0b..1f87f979 100644 --- a/src/Blocks/components/input/components/input-options.js +++ b/src/Blocks/components/input/components/input-options.js @@ -84,6 +84,7 @@ export const InputOptions = (attributes) => { const inputRangeShowCurrent = checkAttr('inputRangeShowCurrent', attributes, manifest); const inputRangeShowCurrentPrefix = checkAttr('inputRangeShowCurrentPrefix', attributes, manifest); const inputRangeShowCurrentSuffix = checkAttr('inputRangeShowCurrentSuffix', attributes, manifest); + const inputRangeUseCustomField = checkAttr('inputRangeUseCustomField', attributes, manifest); let inputValidationPatternOptions = []; @@ -141,6 +142,15 @@ export const InputOptions = (attributes) => { closeMenuAfterSelect /> } + + {inputType === 'range' && ( + setAttributes({ [getAttrKey('inputRangeUseCustomField', attributes, manifest)]: value })} + /> + )} - ' . $additionalContent . ' '; +if ($inputRangeUseCustomField) { + $input .= ''; +} + +if ($additionalContent) { + $input .= $additionalContent; +} + echo Helpers::render( 'field', array_merge( diff --git a/src/Blocks/components/input/manifest.json b/src/Blocks/components/input/manifest.json index ff3a8ff3..31374f83 100644 --- a/src/Blocks/components/input/manifest.json +++ b/src/Blocks/components/input/manifest.json @@ -127,6 +127,10 @@ "inputRangeShowCurrentPrefix": { "type": "string" }, + "inputRangeUseCustomField": { + "type": "boolean", + "default": false + }, "inputRangeShowCurrentSuffix": { "type": "string" }, From 51fbf3f8fef666861813e0bd6b1a47a8055f6afd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Ruz=CC=8Cevic=CC=81?= Date: Wed, 5 Feb 2025 11:59:02 +0100 Subject: [PATCH 2/3] adding custom range input field --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 52abf64c..3f8bbb63 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,7 +8,7 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a ### Added -- Ability for range slider to have a custom input value in the side. +- Ability for range slider to have a custom input value on the side. ## [6.1.1] From 489e8a111ee439d0295705c8c01f3bda8984828d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Ruz=CC=8Cevic=CC=81?= Date: Wed, 5 Feb 2025 12:01:00 +0100 Subject: [PATCH 3/3] adding custom range input field --- src/Blocks/components/form/assets/form.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Blocks/components/form/assets/form.js b/src/Blocks/components/form/assets/form.js index 7ac516e0..d75b0251 100644 --- a/src/Blocks/components/form/assets/form.js +++ b/src/Blocks/components/form/assets/form.js @@ -1602,12 +1602,14 @@ export class Form { // Range. [...this.state.getStateElementByTypeField('range', formId)].forEach((range) => { const input = this.state.getStateElementInput(range.name, formId); + const custom = this.state.getStateElementCustom(range.name, formId); input?.removeEventListener('keydown', this.onFocusEvent); input?.removeEventListener('focus', this.onFocusEvent); input?.removeEventListener('blur', this.onBlurEvent); input?.removeEventListener('input', this.onInputEvent); input?.removeEventListener('keydown', this.onKeyDownEvent); + custom?.addEventListener('input', this.onRangeCustom); }); // Date.