Merge pull request #61 from wpmudev/new/FOR-4002

✨ new(slider): added slider component for forminator.
wpmudev · Dec 22, 2023 · 37fd7c5 · 37fd7c5
2 parents 87fe7c5 + 79b840a
commit 37fd7c5
Show file tree

Hide file tree

Showing 12 changed files with 432 additions and 6 deletions.
diff --git a/assets/js/public/forms-section-elements.js b/assets/js/public/forms-section-elements.js
@@ -48,6 +48,7 @@
 							const textarea = $( this ).find( '.forminator-textarea' );
 							const select = $( this ).find( '.forminator-select' );
 							const select2 = $( this ).find( '.forminator-select2' );
+							const slider = $( this ).find( '.forminator-slider' );
 
 							// Unique id
 							SHOWCASE.uniqueFormField( this );
@@ -69,6 +70,11 @@
 								});
 							}
 
+							// Load select function
+							if ( slider.length ) {
+								FUI.slider();
+							}
+
 							// Load select2 function
 							if ( select2.length ) {
 								FUI.select2();

diff --git a/assets/js/public/samples-form.js b/assets/js/public/samples-form.js
@@ -20,7 +20,8 @@
 				'checkbox',
 				'multiselect',
 				'fileupload',
-				'submit'
+				'submit',
+				'slider'
 			];
 
 			// Get form design

diff --git a/gulpfile.js b/gulpfile.js
@@ -101,6 +101,7 @@ library.watch.scripts.all = [
 	library.source.scripts + 'multiselect-states.js',
 	library.source.scripts + 'select2.js',
 	library.source.scripts + 'authentication.js',
+	library.source.scripts + 'slider.js',
 	library.source.scripts + 'poll-chart.js',
 	library.source.scripts + 'form-submit.js'
 ];
@@ -114,7 +115,8 @@ library.watch.scripts.form = [
 	library.source.scripts + 'checkbox-states.js',
 	library.source.scripts + 'multiselect-states.js',
 	library.source.scripts + 'select2.js',
-	library.source.scripts + 'authentication.js'
+	library.source.scripts + 'authentication.js',
+	library.source.scripts + 'slider.js'
 ];
 
 library.watch.scripts.poll = [

diff --git a/library/js/slider.js b/library/js/slider.js
@@ -0,0 +1,128 @@
+( function( $ ) {
+
+	// Enable strict mode
+	'use strict';
+
+	// Define global FUI object if it doesn't exist.
+	if ( 'object' !== typeof window.FUI ) {
+		window.FUI = {};
+	}
+
+	FUI.slider = function() {
+
+		$( '.forminator-slider' ).each( function() {
+
+			// Cache the current slider element
+			var $element = $( this );
+			var $slide = $element.find( '.forminator-slide' );
+			var $input = $element.find( '.forminator-hidden-input' );
+			var $disabled = $element.hasClass( 'forminator-disabled' );
+
+			// Check if it's a range slider
+			var $isRange = $slide.data( 'is-range' );
+
+			// Parse integer values from data attributes with error handling
+			var $minRange = parseInt( $slide.data( 'min' ) ) || 0;
+			var $maxRange = parseInt( $slide.data( 'max' ) ) || 100;
+			var $value = parseInt( $slide.data( 'value' ) ) || $minRange;
+			var $valueMax = parseInt( $slide.data( 'value-max' ) ) || $maxRange;
+			var $step = parseInt( $slide.data( 'step' ) ) || 1;
+			var $sliderValueWrapper = $element.find( '.forminator-slider-amount' );
+
+			// Get the label associated with this slider
+			var $label = $( 'label[for="' + $input.attr( 'id' ) + '"]' );
+
+			// Initialize the slider with the parsed values
+			$slide.slider({
+				range: $isRange ? true : 'min',
+				min: $minRange,
+				max: $maxRange,
+				disabled: $disabled,
+				step: $step,
+				...( $isRange ? { values: [ $value, $valueMax ] } : { value: $value }),
+				create: function( event, ui ) {
+
+					// Format the slider values using the template
+					var $formattedValue = valueTemplate( $element, $value );
+					var $formattedValueMax = $isRange ? valueTemplate( $element, $valueMax ) : null;
+
+					$sliderValueWrapper.find( '.forminator-slider-hidden-min' ).val( $value ).change();
+
+					if ( $isRange ) {
+						$sliderValueWrapper.find( '.forminator-slider-hidden-max' ).val( $valueMax ).change();
+					}
+
+					// Create the UI with the formatted values
+					updateSliderValues( $element, $formattedValue, $formattedValueMax, $value, $valueMax );
+				},
+				slide: function( event, ui ) {
+
+					// Format the slider values using the template
+					var $value = $isRange ? ui.values[0] : ui.value;
+					var $valueMax = $isRange ? ui.values[1] : null;
+					var $formattedValue = valueTemplate( $element, $value );
+					var $formattedValueMax = $isRange ? valueTemplate( $element, $valueMax ) : null;
+
+					// Update the UI with the formatted values
+					updateSliderValues( $element, $formattedValue, $formattedValueMax, $value, $valueMax );
+				},
+				stop: function( event, ui ) {
+
+					// Format the slider values using the template
+					var $value = $isRange ? ui.values[0] : ui.value;
+					var $valueMax = $isRange ? ui.values[1] : null;
+
+					if ( ui.handle === $element.find( '.ui-slider-handle' )[0]) {
+						$sliderValueWrapper.find( '.forminator-slider-hidden-min' ).val( $value ).change();
+					} else if ( ui.handle === $element.find( '.ui-slider-handle' )[1]) {
+						$sliderValueWrapper.find( '.forminator-slider-hidden-max' ).val( $valueMax ).change();
+					} else {
+						$sliderValueWrapper.find( '.forminator-slider-hidden-min' ).val( $value ).change();
+					}
+				}
+			});
+
+			// Add a click event listener to the label
+			$label.on( 'click', function() {
+				var $handles = $slide.find( '.ui-slider-handle' );
+
+				if ( $disabled ) {
+					return;
+				}
+
+				if ( $isRange && 1 < $handles.length ) {
+					$( $handles[0]).focus(); // Focus on the first handle for range sliders
+				} else {
+					$handles.focus(); // Focus on the handle for single sliders
+				}
+			});
+		});
+
+		// Function to format the slider value using the template
+		function valueTemplate( $element, $sliderValue ) {
+			var $sliderValueWrapper = $element.find( '.forminator-slider-amount' );
+			var $sliderValueTemplate = $sliderValueWrapper.data( 'value-template' ) || '{slider-value}';
+			return $sliderValueTemplate.replace( '{slider-value}', '<span class="forminator-slider-value">' + $( '<div>' ).text( $sliderValue ).html() + '</span>' );
+		}
+
+		// Function to update the UI with the formatted values
+		function updateSliderValues( $element, $formattedValue, $formattedValueMax, $value, $valueMax ) {
+			var $sliderValueWrapper = $element.find( '.forminator-slider-amount' );
+			var $slide = $element.find( '.forminator-slide' );
+			var $isRange = $slide.data( 'is-range' );
+
+			$sliderValueWrapper.find( '.forminator-slider-value-min' ).html( $formattedValue );
+
+			if ( $isRange ) {
+				if ( $value === $valueMax ) {
+					$sliderValueWrapper.find( '.forminator-slider-separator' ).hide();
+					$sliderValueWrapper.find( '.forminator-slider-value-max' ).html( '' );
+				} else {
+					$sliderValueWrapper.find( '.forminator-slider-separator' ).show();
+					$sliderValueWrapper.find( '.forminator-slider-value-max' ).html( $formattedValueMax );
+				}
+			}
+		}
+
+	};
+}( jQuery ) );
diff --git a/library/scss/src/form/forminator-form-bold.base.scss b/library/scss/src/form/forminator-form-bold.base.scss
@@ -39,6 +39,7 @@ $form-theme: bold;
 @import "../settings/components/recaptcha";
 @import "../settings/components/repeater-buttons";
 @import "../settings/components/repeater";
+@import "../settings/components/slider";
 
 // Call Components.
 @include component-response(#{$form-type}, #{$form-theme});
@@ -54,4 +55,5 @@ $form-theme: bold;
 @include component-button(#{$form-type}, #{$form-theme});
 @include component-recaptcha(#{$form-type}, #{$form-theme});
 @include component-repeater-buttons(#{$form-type}, #{$form-theme});
-@include component-repeater(#{$form-type}, #{$form-theme});
+@include component-repeater(#{$form-type}, #{$form-theme});
+@include component-slider(#{$form-type}, #{$form-theme});
diff --git a/library/scss/src/form/forminator-form-default.base.scss b/library/scss/src/form/forminator-form-default.base.scss
@@ -39,6 +39,7 @@ $form-theme: default;
 @import "../settings/components/recaptcha";
 @import "../settings/components/repeater-buttons";
 @import "../settings/components/repeater";
+@import "../settings/components/slider";
 
 // Call Components.
 @include component-response(#{$form-type}, #{$form-theme});
@@ -54,4 +55,5 @@ $form-theme: default;
 @include component-button(#{$form-type}, #{$form-theme});
 @include component-recaptcha(#{$form-type}, #{$form-theme});
 @include component-repeater-buttons(#{$form-type}, #{$form-theme});
-@include component-repeater(#{$form-type}, #{$form-theme});
+@include component-repeater(#{$form-type}, #{$form-theme});
+@include component-slider(#{$form-type}, #{$form-theme});
diff --git a/library/scss/src/form/forminator-form-flat.base.scss b/library/scss/src/form/forminator-form-flat.base.scss
@@ -39,6 +39,7 @@ $form-theme: flat;
 @import "../settings/components/recaptcha";
 @import "../settings/components/repeater-buttons";
 @import "../settings/components/repeater";
+@import "../settings/components/slider";
 
 // Call Components.
 @include component-response(#{$form-type}, #{$form-theme});
@@ -54,4 +55,5 @@ $form-theme: flat;
 @include component-button(#{$form-type}, #{$form-theme});
 @include component-recaptcha(#{$form-type}, #{$form-theme});
 @include component-repeater-buttons(#{$form-type}, #{$form-theme});
-@include component-repeater(#{$form-type}, #{$form-theme});
+@include component-repeater(#{$form-type}, #{$form-theme});
+@include component-slider(#{$form-type}, #{$form-theme});
diff --git a/library/scss/src/form/forminator-form-material.base.scss b/library/scss/src/form/forminator-form-material.base.scss
@@ -39,6 +39,7 @@ $form-theme: material;
 @import "../settings/components/recaptcha";
 @import "../settings/components/repeater-buttons";
 @import "../settings/components/repeater";
+@import "../settings/components/slider";
 
 // Call Components.
 @include component-response(#{$form-type}, #{$form-theme});
@@ -54,4 +55,5 @@ $form-theme: material;
 @include component-button(#{$form-type}, #{$form-theme});
 @include component-recaptcha(#{$form-type}, #{$form-theme});
 @include component-repeater-buttons(#{$form-type}, #{$form-theme});
-@include component-repeater(#{$form-type}, #{$form-theme});
+@include component-repeater(#{$form-type}, #{$form-theme});
+@include component-slider(#{$form-type}, #{$form-theme});