Merge pull request #494 from infinum/feature/range-custom

6.1.2

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 on 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

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

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);
+		}
 	}
 
 	/**
@@ -1597,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.
@@ -1959,6 +1966,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.
 	 *

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);

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;
+			});
+		}
 	}
 
 	/**

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' && (
+					<IconToggle
+						icon={icons.fieldPlaceholder}
+						label={__('Show custom input field', 'eightshift-forms')}
+						checked={inputRangeUseCustomField}
+						onChange={(value) => setAttributes({ [getAttrKey('inputRangeUseCustomField', attributes, manifest)]: value })}
+					/>
+				)}
 			</Section>
 
 			<FieldOptions

src/Blocks/components/input/input.php

@@ -45,6 +45,7 @@
 $inputRangeShowCurrent = Helpers::checkAttr('inputRangeShowCurrent', $attributes, $manifest);
 $inputRangeShowCurrentPrefix = Helpers::checkAttr('inputRangeShowCurrentPrefix', $attributes, $manifest);
 $inputRangeShowCurrentSuffix = Helpers::checkAttr('inputRangeShowCurrentSuffix', $attributes, $manifest);
+$inputRangeUseCustomField = Helpers::checkAttr('inputRangeUseCustomField', $attributes, $manifest);
 $inputTwSelectorsData = Helpers::checkAttr('inputTwSelectorsData', $attributes, $manifest);
 
 $inputId = $inputName . '-' . Helpers::getUnique();
@@ -129,9 +130,22 @@ class="' . esc_attr($inputClass) . '"
 		' . wp_readonly($inputIsReadOnly, true, false) . '
 		' . $inputAttrsOutput . '
 	/>
-	' . $additionalContent . '
 ';
 
+if ($inputRangeUseCustomField) {
+	$input .= '<input
+		class="' . esc_attr(FormsHelper::getTwBase($twClasses, 'range', "{$componentClass}__range-custom")) . '"
+		type="number"
+		' . disabled($inputIsDisabled, true, false) . '
+		' . wp_readonly($inputIsReadOnly, true, false) . '
+		' . $inputAttrsOutput . '
+	/>';
+}
+
+if ($additionalContent) {
+	$input .= $additionalContent;
+}
+
 echo Helpers::render(
 	'field',
 	array_merge(

src/Blocks/components/input/manifest.json

@@ -127,6 +127,10 @@
 		"inputRangeShowCurrentPrefix": {
 			"type": "string"
 		},
+		"inputRangeUseCustomField": {
+			"type": "boolean",
+			"default": false
+		},
 		"inputRangeShowCurrentSuffix": {
 			"type": "string"
 		},