From 946c5bd1bcaa8748dfdf9cd01af2d3e1e6d6ecd1 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 6 Dec 2023 01:25:31 +0530 Subject: [PATCH 01/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20added=20slider?= =?UTF-8?q?=20component=20for=20forminator.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/js/public/forms-section-elements.js | 8 + assets/js/public/samples-form.js | 3 +- gulpfile.js | 4 +- library/js/slider.js | 36 ++++ library/scss/forms/elements/_slider.scss | 170 ++++++++++++++++++ .../src/form/forminator-form-bold.base.scss | 4 +- .../form/forminator-form-default.base.scss | 4 +- .../src/form/forminator-form-flat.base.scss | 4 +- .../form/forminator-form-material.base.scss | 4 +- .../scss/src/settings/components/_slider.scss | 164 +++++++++++++++++ page-forms.html | 3 + templates/form-elements/field-slider.html | 25 +++ templates/page-forms/section-elements.html | 45 +++++ 13 files changed, 468 insertions(+), 6 deletions(-) create mode 100644 library/js/slider.js create mode 100644 library/scss/forms/elements/_slider.scss create mode 100644 library/scss/src/settings/components/_slider.scss create mode 100644 templates/form-elements/field-slider.html diff --git a/assets/js/public/forms-section-elements.js b/assets/js/public/forms-section-elements.js index 015360cc..6b8a7954 100644 --- a/assets/js/public/forms-section-elements.js +++ b/assets/js/public/forms-section-elements.js @@ -48,6 +48,9 @@ const textarea = $( this ).find( '.forminator-textarea' ); const select = $( this ).find( '.forminator-select' ); const select2 = $( this ).find( '.forminator-select2' ); + const slider = $( this ).find( '.forminator-slider' ); + + console.log( 'Slider: ' + slider.length ); // Unique id SHOWCASE.uniqueFormField( this ); @@ -69,6 +72,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 index 52cf7333..1edd083a 100644 --- 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 index 554e888e..fd2c923b 100644 --- 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 new file mode 100644 index 00000000..ab18e923 --- /dev/null +++ b/library/js/slider.js @@ -0,0 +1,36 @@ +( 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() { + + var $element = $( this ); + var isRange = $element.data( 'is-range' ); + var minRange = parseInt( $element.data( 'min' ) ); + var maxRange = parseInt( $element.data( 'max' ) ); + var value = parseInt( $element.data( 'value' ) ); + var valueMax = parseInt( $element.data( 'value-max' ) ); + var step = parseInt( $element.data( 'step' ) ); + + $element.slider({ + range: isRange ? true : 'min', + min: minRange, + max: maxRange, + ...( step && { step: step }), + ...( isRange ? { values: [ value, valueMax ] } : { value: value }) + + // slide: function( event, ui ) { + // $( '#amount' ).text( '$' + ui.values[ 0 ] + ' - $' + ui.values[ 1 ]); + // } + }); + }); + }; +}( jQuery ) ); diff --git a/library/scss/forms/elements/_slider.scss b/library/scss/forms/elements/_slider.scss new file mode 100644 index 00000000..e1d7012b --- /dev/null +++ b/library/scss/forms/elements/_slider.scss @@ -0,0 +1,170 @@ +@include body-class(custom-form, all, false) { + + .forminator-slider { + cursor: default; + pointer-events: none; + display: flex; + position: relative; + margin: 5px 0; + border: 1px solid #000; + + input { + @extend %screen-readers; + + &:checked { + + + span[aria-hidden]:before { + @include opacity(1); + } + } + } + + span { + cursor: pointer; + pointer-events: all; + display: block; + } + + span[aria-hidden] { + width: map-get($checkbox, size); + height: map-get($checkbox, size); + flex: 0 0 map-get($checkbox, size); + position: relative; + + @include icon(before, check) { + @include opacity(0); + display: block; + position: absolute; + top: 50%; + left: 50%; + color: map-get($icon, color); + font-size: map-get($checkbox, icon); + transform: translate(-50%, -50%); + transition: map-get($transition, ease); + } + + + span { + margin-left: 10px; + } + } + + span:not([aria-hidden]) { + flex: 0 1 auto; + line-height: 20px; + } + + // VARIATION: Inline + &.forminator-slider-inline { + display: inline-flex; + vertical-align: middle; + margin-right: 20px; + margin-bottom: 0; + + &:last-of-type { + margin-right: 0; + } + } + + // VARIATION: Stacked + &:not(.forminator-slider-inline) { + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + } +} + +// ============================================= +// DESIGN: Default +@include body-class(custom-form, default, false) { + + .forminator-slider { + + span[aria-hidden] { + border-width: map-get($border-width, default); + border-style: map-get($border-style, default); + border-radius: map-get($border-radius, default); + } + } +} + +// ============================================= +// DESIGN: Flat +@include body-class(custom-form, flat, false) { + + .forminator-slider { + + span[aria-hidden] { + border-width: map-get($border-width, flat); + border-style: map-get($border-style, flat); + border-radius: map-get($border-radius, flat); + } + } +} + +// ============================================= +// DESIGN: Bold +@include body-class(custom-form, bold, false) { + + .forminator-slider { + + span[aria-hidden] { + border-width: map-get($border-width, bold); + border-style: map-get($border-style, bold); + border-radius: map-get($border-radius, bold); + } + } +} + +// ============================================= +// DESIGN: Material +@include body-class(custom-form, material, false) { + + .forminator-slider { + + input { + + &:checked { + + + span[aria-hidden]:after { + @include opacity(1); + } + + &:focus { + + + span[aria-hidden]:after { + animation-name: click-animation; + } + } + } + } + + span[aria-hidden] { + position: relative; + border-width: #{map-get($border-width, material) * 2}; + border-style: map-get($border-style, material); + border-radius: map-get($border-radius, material); + + &:after { + content: " "; + @include opacity(0); + width: map-get($checkbox, size); + height: map-get($checkbox, size); + position: absolute; + top: 50%; + left: 50%; + border-radius: 100%; + transform: translate(-50%, -50%) scale(0); + transform-origin: center; + transform-style: preserve-3d; + animation-duration: 0.6s; + animation-fill-mode: both; + } + } + } +} \ No newline at end of file diff --git a/library/scss/src/form/forminator-form-bold.base.scss b/library/scss/src/form/forminator-form-bold.base.scss index b25c0d04..26c55ea3 100644 --- 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}); \ No newline at end of file +@include component-repeater(#{$form-type}, #{$form-theme}); +@include component-slider(#{$form-type}, #{$form-theme}); \ No newline at end of file diff --git a/library/scss/src/form/forminator-form-default.base.scss b/library/scss/src/form/forminator-form-default.base.scss index 32b7de86..0c44765f 100644 --- 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}); \ No newline at end of file +@include component-repeater(#{$form-type}, #{$form-theme}); +@include component-slider(#{$form-type}, #{$form-theme}); \ No newline at end of file diff --git a/library/scss/src/form/forminator-form-flat.base.scss b/library/scss/src/form/forminator-form-flat.base.scss index 65690d74..67d618a0 100644 --- 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}); \ No newline at end of file +@include component-repeater(#{$form-type}, #{$form-theme}); +@include component-slider(#{$form-type}, #{$form-theme}); \ No newline at end of file diff --git a/library/scss/src/form/forminator-form-material.base.scss b/library/scss/src/form/forminator-form-material.base.scss index a690b3cf..2be2782c 100644 --- 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}); \ No newline at end of file +@include component-repeater(#{$form-type}, #{$form-theme}); +@include component-slider(#{$form-type}, #{$form-theme}); \ No newline at end of file diff --git a/library/scss/src/settings/components/_slider.scss b/library/scss/src/settings/components/_slider.scss new file mode 100644 index 00000000..bb77200e --- /dev/null +++ b/library/scss/src/settings/components/_slider.scss @@ -0,0 +1,164 @@ +@mixin component-slider($form-type: no-type, $form-theme: no-theme) { + + @include form-class($form-type, $form-theme, false) { + + .forminator-slider { + border: 1px solid #777771; + background: #EDEDED; + border-radius: 4px; + position: relative; + text-align: left; + + .ui-slider-range { + background: #17A8E3; + } + + .ui-slider-handle { + width: 20px; + height: 20px; + border-radius: 100%; + background: #17A8E3; + border: 0; + position: absolute; + z-index: 2; + cursor: pointer; + -ms-touch-action: none; + touch-action: none; + outline: none; + + &:hover, + &:focus { + background: #1289BA; + } + } + + .ui-slider-range { + position: absolute; + z-index: 1; + font-size: .7em; + display: block; + border: 0; + background-position: 0 0; + } + + /* support: IE8 - See #6727 */ + .ui-state-disabled .ui-slider-handle, + .ui-state-disabled .ui-slider-range { + filter: inherit; + } + + &.ui-slider-horizontal { + height: 8px; + margin: 6px 0; + } + + &.ui-slider-horizontal .ui-slider-handle { + top: -7px; + margin-left: -8px; + } + + &.ui-slider-horizontal .ui-slider-range { + top: 0; + height: 100%; + } + + &.ui-slider-horizontal .ui-slider-range-min { + left: 0; + } + + &.ui-slider-horizontal .ui-slider-range-max { + right: 0; + } + + // border: 1px solid #000 !important; + // box-sizing: border-box; + // width: 100%; + // min-height: $textarea--height; + // resize: vertical; + // display: block; + // margin: 0; + // @if ('default' == $form-theme) { + // padding: #{$textarea--padding - $default--border-width}; + // border-width: $default--border-width; + // border-style: $default--border-style; + // border-radius: $default--border-radius; + // } + // @if ('flat' == $form-theme) { + // padding: $textarea--padding; + // border: 0; + // border-radius: 0; + // } + // @if ('bold' == $form-theme) { + // padding: #{$textarea--padding - $bold--border-width}; + // border-width: $bold--border-width; + // border-style: $bold--border-style; + // border-radius: 0; + // } + // @if ('material' == $form-theme) { + // padding: 0 #{$input--padding - $material--border-width} #{$input--padding - $material--border-width}; + // border-width: $material--border-width; + // border-style: $material--border-style; + // border-radius: $material--border-radius; + // line-height: 20px; + // } + // background-image: unset; + // line-height: $textarea--line-height; + // transition: $transition--ease; + + // &, + // &:hover, + // &:focus, + // &:active, + // &:disabled { + // outline: none; + // box-shadow: none; + // } + + // &:disabled { + // pointer-events: none; + // border-style: dotted; + + // &:-moz-placeholder { + // @include opacity(0.4); + // } + + // &::-moz-placeholder { + // @include opacity(0.4); + // } + + // &:-ms-input-placeholder { + // @include opacity(0.4); + // } + + // &::-webkit-input-placeholder { + // @include opacity(0.4); + // } + // } + } + + @if ('material' == $form-theme) { + + // .forminator-textarea--wrap { + // position: relative; + + // &:after { + // content: " "; + // width: 100%; + // height: 100%; + // user-select: none; + // pointer-events: none; + // position: absolute; + // z-index: 1; + // top: 0; + // left: 0; + // border-width: #{$material--border-width * 2}; + // border-style: $material--border-style; + // border-radius: $material--border-radius; + // box-sizing: border-box; + // @include opacity(0); + // transition: $transition--ease; + // } + // } + } + } +} \ No newline at end of file diff --git a/page-forms.html b/page-forms.html index 8c751b28..3e470d20 100644 --- a/page-forms.html +++ b/page-forms.html @@ -86,8 +86,11 @@

--> + + diff --git a/templates/form-elements/field-slider.html b/templates/form-elements/field-slider.html new file mode 100644 index 00000000..ab72ede6 --- /dev/null +++ b/templates/form-elements/field-slider.html @@ -0,0 +1,25 @@ +
+ + + +
+ +
$0 - $10
+ +
+ + This field is required. + + Optional description for slider. + +
\ No newline at end of file diff --git a/templates/page-forms/section-elements.html b/templates/page-forms/section-elements.html index 06b148c0..190e5161 100644 --- a/templates/page-forms/section-elements.html +++ b/templates/page-forms/section-elements.html @@ -1222,4 +1222,49 @@

Example

+ +
+ +
+
+ + Slider + +
+
+ +
+ +

Donec ullamcorper nulla non metus auctor fringilla.

+ +
+ +
+

Example

+
+ +
+ +
+ +
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ \ No newline at end of file From cee9ebe1f2c785aea09c52a92739e2caca93e2e9 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 6 Dec 2023 11:03:15 +0530 Subject: [PATCH 02/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20slider=20compo?= =?UTF-8?q?nent=20material=20bold=20styles.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- library/js/slider.js | 17 +++++-- .../scss/src/settings/components/_slider.scss | 47 ++++++++++++++++++- templates/form-elements/field-slider.html | 8 +++- 3 files changed, 67 insertions(+), 5 deletions(-) diff --git a/library/js/slider.js b/library/js/slider.js index ab18e923..5bdd9b28 100644 --- a/library/js/slider.js +++ b/library/js/slider.js @@ -11,26 +11,37 @@ FUI.slider = function() { $( '.forminator-slider' ).each( function() { - var $element = $( this ); var isRange = $element.data( 'is-range' ); + + // Parse integer values from data attributes with error handling var minRange = parseInt( $element.data( 'min' ) ); var maxRange = parseInt( $element.data( 'max' ) ); var value = parseInt( $element.data( 'value' ) ); var valueMax = parseInt( $element.data( 'value-max' ) ); var step = parseInt( $element.data( 'step' ) ); + // Check for valid integer values obtained from data attributes + // If any value is not a number, use default values or handle errors appropriately + minRange = isNaN( minRange ) ? 0 : minRange; + maxRange = isNaN( maxRange ) ? 100 : maxRange; + value = isNaN( value ) ? minRange : value; + valueMax = isNaN( valueMax ) ? maxRange : valueMax; + step = isNaN( step ) ? 1 : step; + $element.slider({ range: isRange ? true : 'min', min: minRange, max: maxRange, - ...( step && { step: step }), + step: step, ...( isRange ? { values: [ value, valueMax ] } : { value: value }) + // Add comments to clarify the purpose of the commented-out section // slide: function( event, ui ) { - // $( '#amount' ).text( '$' + ui.values[ 0 ] + ' - $' + ui.values[ 1 ]); + // $( '#amount' ).text( '$' + ui.values[ 0 ] + ' - $' + ui.values[ 1 ]); // } }); }); + }; }( jQuery ) ); diff --git a/library/scss/src/settings/components/_slider.scss b/library/scss/src/settings/components/_slider.scss index bb77200e..6d499fb8 100644 --- a/library/scss/src/settings/components/_slider.scss +++ b/library/scss/src/settings/components/_slider.scss @@ -3,12 +3,36 @@ @include form-class($form-type, $form-theme, false) { .forminator-slider { - border: 1px solid #777771; + border: 1px solid transparent; background: #EDEDED; border-radius: 4px; position: relative; text-align: left; + @if ('default' == $form-theme) { + border: 1px solid #777771; + } + + @if ('bold' == $form-theme) { + border: 2px solid #777771; + } + + &.forminator-disabled { + pointer-events: none; + user-select: none; + border: none; + background: #DDD; + border: 1px solid transparent; + + .ui-slider-range { + background: #ddd; + } + + .ui-slider-handle { + background: #aaa; + } + } + .ui-slider-range { background: #17A8E3; } @@ -29,6 +53,21 @@ &:hover, &:focus { background: #1289BA; + + @if('material' == $form-theme) { + background: #17A8E3; + + &:after { + content: ''; + position: absolute; + top: -4px; + bottom: -4px; + left: -4px; + right: -4px; + border-radius: 100%; + background: rgba(23, 168, 227, 0.4); + } + } } } @@ -55,6 +94,10 @@ &.ui-slider-horizontal .ui-slider-handle { top: -7px; margin-left: -8px; + + @if ('bold' == $form-theme) { + top: -8px; + } } &.ui-slider-horizontal .ui-slider-range { @@ -64,6 +107,8 @@ &.ui-slider-horizontal .ui-slider-range-min { left: 0; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; } &.ui-slider-horizontal .ui-slider-range-max { diff --git a/templates/form-elements/field-slider.html b/templates/form-elements/field-slider.html index ab72ede6..8978cbeb 100644 --- a/templates/form-elements/field-slider.html +++ b/templates/form-elements/field-slider.html @@ -16,7 +16,13 @@
$0 - $10
-
+
+ +
This field is required. From 0dd9cd2a1ebabaa2e0e077994c1318086c61ddf6 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 6 Dec 2023 12:31:25 +0530 Subject: [PATCH 03/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20slider=20compo?= =?UTF-8?q?nent=20variation.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- library/js/slider.js | 58 ++++--- .../scss/src/settings/components/_slider.scss | 143 ++++-------------- templates/form-elements/field-slider.html | 40 +++-- 3 files changed, 93 insertions(+), 148 deletions(-) diff --git a/library/js/slider.js b/library/js/slider.js index 5bdd9b28..d10a3c78 100644 --- a/library/js/slider.js +++ b/library/js/slider.js @@ -11,37 +11,59 @@ FUI.slider = function() { $( '.forminator-slider' ).each( function() { + + // Cache the current slider element var $element = $( this ); + + // Check if it's a range slider var isRange = $element.data( 'is-range' ); // Parse integer values from data attributes with error handling - var minRange = parseInt( $element.data( 'min' ) ); - var maxRange = parseInt( $element.data( 'max' ) ); - var value = parseInt( $element.data( 'value' ) ); - var valueMax = parseInt( $element.data( 'value-max' ) ); - var step = parseInt( $element.data( 'step' ) ); - - // Check for valid integer values obtained from data attributes - // If any value is not a number, use default values or handle errors appropriately - minRange = isNaN( minRange ) ? 0 : minRange; - maxRange = isNaN( maxRange ) ? 100 : maxRange; - value = isNaN( value ) ? minRange : value; - valueMax = isNaN( valueMax ) ? maxRange : valueMax; - step = isNaN( step ) ? 1 : step; + var minRange = parseInt( $element.data( 'min' ) ) || 0; + var maxRange = parseInt( $element.data( 'max' ) ) || 100; + var value = parseInt( $element.data( 'value' ) ) || minRange; + var valueMax = parseInt( $element.data( 'value-max' ) ) || maxRange; + var step = parseInt( $element.data( 'step' ) ) || 1; + // Get slider value wrapper and template + var sliderValueWrapper = $element.next( '.forminator-slider-amount' ); + var sliderValueTemplate = sliderValueWrapper.data( 'value-template' ) || '{slider-value}'; + + // Initialize the slider with the parsed values $element.slider({ range: isRange ? true : 'min', min: minRange, max: maxRange, step: step, - ...( isRange ? { values: [ value, valueMax ] } : { value: value }) + ...( isRange ? { values: [ value, valueMax ] } : { value: value }), + + slide: function( event, ui ) { - // Add comments to clarify the purpose of the commented-out section - // slide: function( event, ui ) { - // $( '#amount' ).text( '$' + ui.values[ 0 ] + ' - $' + ui.values[ 1 ]); - // } + // Format the slider values using the template + var formattedValue = isRange ? valueTemplate( ui.values[0]) : valueTemplate( ui.value ); + var formattedValueMax = isRange ? valueTemplate( ui.values[1]) : null; + + // Update the UI with the formatted values + updateSliderValues( formattedValue, formattedValueMax ); + } }); + + // Function to format the slider value using the template + function valueTemplate( sliderValue ) { + return sliderValueTemplate.replace( '{slider-value}', sliderValue ); + } + + // Function to update the UI with the formatted values + function updateSliderValues( minValue, maxValue ) { + if ( isRange ) { + sliderValueWrapper.find( '.forminator-slider-value-min' ).text( minValue ); + sliderValueWrapper.find( '.forminator-slider-value-max' ).text( maxValue ); + } else { + sliderValueWrapper.text( minValue ); + } + } }); + }; }( jQuery ) ); diff --git a/library/scss/src/settings/components/_slider.scss b/library/scss/src/settings/components/_slider.scss index 6d499fb8..3e5c2a5f 100644 --- a/library/scss/src/settings/components/_slider.scss +++ b/library/scss/src/settings/components/_slider.scss @@ -33,10 +33,6 @@ } } - .ui-slider-range { - background: #17A8E3; - } - .ui-slider-handle { width: 20px; height: 20px; @@ -72,6 +68,7 @@ } .ui-slider-range { + background: #17A8E3; position: absolute; z-index: 1; font-size: .7em; @@ -81,129 +78,41 @@ } /* support: IE8 - See #6727 */ - .ui-state-disabled .ui-slider-handle, - .ui-state-disabled .ui-slider-range { - filter: inherit; + .ui-state-disabled { + .ui-slider-range, + .ui-slider-handle { + filter: inherit; + } } &.ui-slider-horizontal { height: 8px; margin: 6px 0; - } - - &.ui-slider-horizontal .ui-slider-handle { - top: -7px; - margin-left: -8px; - @if ('bold' == $form-theme) { - top: -8px; + .ui-slider-handle { + top: -7px; + margin-left: -8px; + + @if ('bold' == $form-theme) { + top: -8px; + } } - } - - &.ui-slider-horizontal .ui-slider-range { - top: 0; - height: 100%; - } - - &.ui-slider-horizontal .ui-slider-range-min { - left: 0; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - &.ui-slider-horizontal .ui-slider-range-max { - right: 0; - } - - // border: 1px solid #000 !important; - // box-sizing: border-box; - // width: 100%; - // min-height: $textarea--height; - // resize: vertical; - // display: block; - // margin: 0; - // @if ('default' == $form-theme) { - // padding: #{$textarea--padding - $default--border-width}; - // border-width: $default--border-width; - // border-style: $default--border-style; - // border-radius: $default--border-radius; - // } - // @if ('flat' == $form-theme) { - // padding: $textarea--padding; - // border: 0; - // border-radius: 0; - // } - // @if ('bold' == $form-theme) { - // padding: #{$textarea--padding - $bold--border-width}; - // border-width: $bold--border-width; - // border-style: $bold--border-style; - // border-radius: 0; - // } - // @if ('material' == $form-theme) { - // padding: 0 #{$input--padding - $material--border-width} #{$input--padding - $material--border-width}; - // border-width: $material--border-width; - // border-style: $material--border-style; - // border-radius: $material--border-radius; - // line-height: 20px; - // } - // background-image: unset; - // line-height: $textarea--line-height; - // transition: $transition--ease; - - // &, - // &:hover, - // &:focus, - // &:active, - // &:disabled { - // outline: none; - // box-shadow: none; - // } - - // &:disabled { - // pointer-events: none; - // border-style: dotted; - - // &:-moz-placeholder { - // @include opacity(0.4); - // } - - // &::-moz-placeholder { - // @include opacity(0.4); - // } - - // &:-ms-input-placeholder { - // @include opacity(0.4); - // } - - // &::-webkit-input-placeholder { - // @include opacity(0.4); - // } - // } - } - - @if ('material' == $form-theme) { + .ui-slider-range { + top: 0; + height: 100%; + } - // .forminator-textarea--wrap { - // position: relative; + .ui-slider-range-min { + left: 0; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } - // &:after { - // content: " "; - // width: 100%; - // height: 100%; - // user-select: none; - // pointer-events: none; - // position: absolute; - // z-index: 1; - // top: 0; - // left: 0; - // border-width: #{$material--border-width * 2}; - // border-style: $material--border-style; - // border-radius: $material--border-radius; - // box-sizing: border-box; - // @include opacity(0); - // transition: $transition--ease; - // } - // } + .ui-slider-range-max { + right: 0; + } + } } } } \ No newline at end of file diff --git a/templates/form-elements/field-slider.html b/templates/form-elements/field-slider.html index 8978cbeb..5038ae79 100644 --- a/templates/form-elements/field-slider.html +++ b/templates/form-elements/field-slider.html @@ -1,28 +1,42 @@ -
+
- +
-
$0 - $10
+
2suffix
+ + This field is required. + + Optional description for slider. + +
+ +
+ +
-
+
+ prefix2suffix + prefix40suffix +
This field is required. From e1c0ee0f80520210939d3a189513305599e3f396 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 6 Dec 2023 12:49:26 +0530 Subject: [PATCH 04/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20slider=20compo?= =?UTF-8?q?nent=20variation.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- library/js/slider.js | 8 ++++---- page-forms.html | 2 -- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/library/js/slider.js b/library/js/slider.js index d10a3c78..fca5ede9 100644 --- a/library/js/slider.js +++ b/library/js/slider.js @@ -50,16 +50,16 @@ // Function to format the slider value using the template function valueTemplate( sliderValue ) { - return sliderValueTemplate.replace( '{slider-value}', sliderValue ); + return sliderValueTemplate.replace( '{slider-value}', '' + $( '
' ).text( sliderValue ).html() + '' ); } // Function to update the UI with the formatted values function updateSliderValues( minValue, maxValue ) { if ( isRange ) { - sliderValueWrapper.find( '.forminator-slider-value-min' ).text( minValue ); - sliderValueWrapper.find( '.forminator-slider-value-max' ).text( maxValue ); + sliderValueWrapper.find( '.forminator-slider-value-min' ).html( minValue ); + sliderValueWrapper.find( '.forminator-slider-value-max' ).html( maxValue ); } else { - sliderValueWrapper.text( minValue ); + sliderValueWrapper.html( minValue ); } } }); diff --git a/page-forms.html b/page-forms.html index 3e470d20..6a37052d 100644 --- a/page-forms.html +++ b/page-forms.html @@ -86,8 +86,6 @@

--> - From a513a193f7083209e782416cb58d1a39d61ccf64 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 6 Dec 2023 14:09:02 +0530 Subject: [PATCH 05/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20slider=20marku?= =?UTF-8?q?p=20improvements.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- library/js/slider.js | 19 ++-- .../scss/src/settings/components/_slider.scss | 86 +++++++++++++++---- templates/form-elements/field-slider.html | 65 ++++++++++---- 3 files changed, 129 insertions(+), 41 deletions(-) diff --git a/library/js/slider.js b/library/js/slider.js index fca5ede9..2d5684d0 100644 --- a/library/js/slider.js +++ b/library/js/slider.js @@ -14,23 +14,24 @@ // Cache the current slider element var $element = $( this ); + var $slide = $( this ).find( '.forminator-slide' ); // Check if it's a range slider - var isRange = $element.data( 'is-range' ); + var isRange = $slide.data( 'is-range' ); // Parse integer values from data attributes with error handling - var minRange = parseInt( $element.data( 'min' ) ) || 0; - var maxRange = parseInt( $element.data( 'max' ) ) || 100; - var value = parseInt( $element.data( 'value' ) ) || minRange; - var valueMax = parseInt( $element.data( 'value-max' ) ) || maxRange; - var step = parseInt( $element.data( 'step' ) ) || 1; + 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; // Get slider value wrapper and template - var sliderValueWrapper = $element.next( '.forminator-slider-amount' ); + var sliderValueWrapper = $element.find( '.forminator-slider-amount' ); var sliderValueTemplate = sliderValueWrapper.data( 'value-template' ) || '{slider-value}'; // Initialize the slider with the parsed values - $element.slider({ + $slide.slider({ range: isRange ? true : 'min', min: minRange, max: maxRange, @@ -59,7 +60,7 @@ sliderValueWrapper.find( '.forminator-slider-value-min' ).html( minValue ); sliderValueWrapper.find( '.forminator-slider-value-max' ).html( maxValue ); } else { - sliderValueWrapper.html( minValue ); + sliderValueWrapper.find( '.forminator-slider-value-min' ).html( minValue ); } } }); diff --git a/library/scss/src/settings/components/_slider.scss b/library/scss/src/settings/components/_slider.scss index 3e5c2a5f..55c1d028 100644 --- a/library/scss/src/settings/components/_slider.scss +++ b/library/scss/src/settings/components/_slider.scss @@ -3,26 +3,35 @@ @include form-class($form-type, $form-theme, false) { .forminator-slider { - border: 1px solid transparent; - background: #EDEDED; - border-radius: 4px; - position: relative; - text-align: left; - - @if ('default' == $form-theme) { - border: 1px solid #777771; - } + display: flex; + flex-direction: column; - @if ('bold' == $form-theme) { - border: 2px solid #777771; + .forminator-slide { + border: 1px solid transparent; + background: #EDEDED; + border-radius: 4px; + position: relative; + text-align: left; + + @if ('default' == $form-theme) { + border: 1px solid #777771; + } + + @if ('bold' == $form-theme) { + border: 2px solid #777771; + } } + &.forminator-disabled { pointer-events: none; user-select: none; - border: none; - background: #DDD; - border: 1px solid transparent; + + .forminator-slide { + border: none; + background: #DDD; + border: 1px solid transparent; + } .ui-slider-range { background: #ddd; @@ -85,7 +94,7 @@ } } - &.ui-slider-horizontal { + .ui-slider-horizontal { height: 8px; margin: 6px 0; @@ -113,6 +122,53 @@ right: 0; } } + + &.forminator-slider-small { + width: 25%; + } + + &.forminator-slider-medium { + width: 50%; + } + + &.forminator-slider-large { + width: 75%; + } + } + + .forminator-slider-amount { + display: flex; + justify-content: space-between; + color: #888; + font-size: 13px; + font-style: normal; + font-weight: 500; + line-height: 22px; + letter-spacing: -0.2px; + + .forminator-slider-value { + display: inline-block; + color: #333; + font-size: 15px; + font-weight: 400; + margin: 0 2px; + } + + &.forminator-slider-amount-top-left, + &.forminator-slider-amount-top-right, + &.forminator-slider-amount-top { + order: -1; + } + + &.forminator-slider-amount-top-left, + &.forminator-slider-amount-bottom-left { + align-self: flex-start; + } + + &.forminator-slider-amount-top-right, + &.forminator-slider-amount-bottom-right { + align-self: flex-end; + } } } } \ No newline at end of file diff --git a/templates/form-elements/field-slider.html b/templates/form-elements/field-slider.html index 5038ae79..8b6b7ead 100644 --- a/templates/form-elements/field-slider.html +++ b/templates/form-elements/field-slider.html @@ -4,12 +4,41 @@
+ > +
+
2suffix
+

+ -
2suffix
+ +
+
+
2suffix
+
+ +
+
+
2suffix
+
+ +
+
+
2suffix
+
This field is required. @@ -24,20 +53,22 @@
- -
- prefix2suffix - prefix40suffix + aria-required="false" + > +
+
+ prefix2suffix + prefix40suffix +
- + This field is required. Optional description for slider. From 2febbd362b749a1495afa8fdd161d84c6d825034 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 6 Dec 2023 14:17:11 +0530 Subject: [PATCH 06/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20slider=20mobil?= =?UTF-8?q?e=20improvements.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- page-forms.html | 1 + 1 file changed, 1 insertion(+) diff --git a/page-forms.html b/page-forms.html index 6a37052d..a6a8b190 100644 --- a/page-forms.html +++ b/page-forms.html @@ -89,6 +89,7 @@

+ From e3fad4ccfaa82b3b3b824f703b75d4fb22af09e0 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 6 Dec 2023 14:23:00 +0530 Subject: [PATCH 07/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20slider=20mobil?= =?UTF-8?q?e=20improvements.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- templates/form-elements/field-slider.html | 31 +---------------------- 1 file changed, 1 insertion(+), 30 deletions(-) diff --git a/templates/form-elements/field-slider.html b/templates/form-elements/field-slider.html index 8b6b7ead..30b8fb18 100644 --- a/templates/form-elements/field-slider.html +++ b/templates/form-elements/field-slider.html @@ -2,42 +2,13 @@ -
-
-
2suffix
-
- - - -
-
-
2suffix
-
- -
-
-
2suffix
-
-
-
2suffix
+
2suffix
This field is required. From 79b9020330c2af011c8601fda24c6addf19bb259 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 6 Dec 2023 16:25:11 +0530 Subject: [PATCH 08/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20removed=20unus?= =?UTF-8?q?ed=20styles.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- library/scss/forms/elements/_slider.scss | 170 ----------------------- 1 file changed, 170 deletions(-) delete mode 100644 library/scss/forms/elements/_slider.scss diff --git a/library/scss/forms/elements/_slider.scss b/library/scss/forms/elements/_slider.scss deleted file mode 100644 index e1d7012b..00000000 --- a/library/scss/forms/elements/_slider.scss +++ /dev/null @@ -1,170 +0,0 @@ -@include body-class(custom-form, all, false) { - - .forminator-slider { - cursor: default; - pointer-events: none; - display: flex; - position: relative; - margin: 5px 0; - border: 1px solid #000; - - input { - @extend %screen-readers; - - &:checked { - - + span[aria-hidden]:before { - @include opacity(1); - } - } - } - - span { - cursor: pointer; - pointer-events: all; - display: block; - } - - span[aria-hidden] { - width: map-get($checkbox, size); - height: map-get($checkbox, size); - flex: 0 0 map-get($checkbox, size); - position: relative; - - @include icon(before, check) { - @include opacity(0); - display: block; - position: absolute; - top: 50%; - left: 50%; - color: map-get($icon, color); - font-size: map-get($checkbox, icon); - transform: translate(-50%, -50%); - transition: map-get($transition, ease); - } - - + span { - margin-left: 10px; - } - } - - span:not([aria-hidden]) { - flex: 0 1 auto; - line-height: 20px; - } - - // VARIATION: Inline - &.forminator-slider-inline { - display: inline-flex; - vertical-align: middle; - margin-right: 20px; - margin-bottom: 0; - - &:last-of-type { - margin-right: 0; - } - } - - // VARIATION: Stacked - &:not(.forminator-slider-inline) { - - &:first-child { - margin-top: 0; - } - - &:last-child { - margin-bottom: 0; - } - } - } -} - -// ============================================= -// DESIGN: Default -@include body-class(custom-form, default, false) { - - .forminator-slider { - - span[aria-hidden] { - border-width: map-get($border-width, default); - border-style: map-get($border-style, default); - border-radius: map-get($border-radius, default); - } - } -} - -// ============================================= -// DESIGN: Flat -@include body-class(custom-form, flat, false) { - - .forminator-slider { - - span[aria-hidden] { - border-width: map-get($border-width, flat); - border-style: map-get($border-style, flat); - border-radius: map-get($border-radius, flat); - } - } -} - -// ============================================= -// DESIGN: Bold -@include body-class(custom-form, bold, false) { - - .forminator-slider { - - span[aria-hidden] { - border-width: map-get($border-width, bold); - border-style: map-get($border-style, bold); - border-radius: map-get($border-radius, bold); - } - } -} - -// ============================================= -// DESIGN: Material -@include body-class(custom-form, material, false) { - - .forminator-slider { - - input { - - &:checked { - - + span[aria-hidden]:after { - @include opacity(1); - } - - &:focus { - - + span[aria-hidden]:after { - animation-name: click-animation; - } - } - } - } - - span[aria-hidden] { - position: relative; - border-width: #{map-get($border-width, material) * 2}; - border-style: map-get($border-style, material); - border-radius: map-get($border-radius, material); - - &:after { - content: " "; - @include opacity(0); - width: map-get($checkbox, size); - height: map-get($checkbox, size); - position: absolute; - top: 50%; - left: 50%; - border-radius: 100%; - transform: translate(-50%, -50%) scale(0); - transform-origin: center; - transform-style: preserve-3d; - animation-duration: 0.6s; - animation-fill-mode: both; - } - } - } -} \ No newline at end of file From 452e96f4ad070b45d955d728b869ffec73df151e Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 6 Dec 2023 18:52:33 +0530 Subject: [PATCH 09/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20removed=20unus?= =?UTF-8?q?ed=20code.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/js/public/forms-section-elements.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/assets/js/public/forms-section-elements.js b/assets/js/public/forms-section-elements.js index 6b8a7954..243cf5c3 100644 --- a/assets/js/public/forms-section-elements.js +++ b/assets/js/public/forms-section-elements.js @@ -50,8 +50,6 @@ const select2 = $( this ).find( '.forminator-select2' ); const slider = $( this ).find( '.forminator-slider' ); - console.log( 'Slider: ' + slider.length ); - // Unique id SHOWCASE.uniqueFormField( this ); From 784956ccbc5632ff38d6be24ecee4b331f12a66c Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Thu, 7 Dec 2023 09:14:03 +0530 Subject: [PATCH 10/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20slider=20defau?= =?UTF-8?q?lt=20value=20initially.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- library/js/slider.js | 11 +++++++++++ templates/form-elements/field-slider.html | 6 +++--- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/library/js/slider.js b/library/js/slider.js index 2d5684d0..491aa1d5 100644 --- a/library/js/slider.js +++ b/library/js/slider.js @@ -37,7 +37,17 @@ max: maxRange, step: step, ...( isRange ? { values: [ value, valueMax ] } : { value: value }), + create: function( event, ui ) { + // Format the slider values using the template + var formattedValue = isRange ? valueTemplate( value ) : valueTemplate( value ); + var formattedValueMax = isRange ? valueTemplate( valueMax ) : null; + + console.log( value, valueMax ); + + // Update the UI with the formatted values + updateSliderValues( formattedValue, formattedValueMax ); + }, slide: function( event, ui ) { // Format the slider values using the template @@ -51,6 +61,7 @@ // Function to format the slider value using the template function valueTemplate( sliderValue ) { + console.log( sliderValue ); return sliderValueTemplate.replace( '{slider-value}', '' + $( '
' ).text( sliderValue ).html() + '' ); } diff --git a/templates/form-elements/field-slider.html b/templates/form-elements/field-slider.html index 30b8fb18..33a4a3a3 100644 --- a/templates/form-elements/field-slider.html +++ b/templates/form-elements/field-slider.html @@ -7,7 +7,7 @@ class="forminator-slider forminator-slider-full" aria-required="false" > -
+
2suffix
@@ -35,8 +35,8 @@ data-value-max="40" >

- prefix2suffix - prefix40suffix + +
From 8d99deb7fcce23c17d8e559ea1bfed5cdddff077 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Thu, 7 Dec 2023 09:20:37 +0530 Subject: [PATCH 11/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20slider=20defau?= =?UTF-8?q?lt=20value=20initially.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- library/js/slider.js | 2 -- templates/form-elements/field-slider.html | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/library/js/slider.js b/library/js/slider.js index 491aa1d5..c2572535 100644 --- a/library/js/slider.js +++ b/library/js/slider.js @@ -43,8 +43,6 @@ var formattedValue = isRange ? valueTemplate( value ) : valueTemplate( value ); var formattedValueMax = isRange ? valueTemplate( valueMax ) : null; - console.log( value, valueMax ); - // Update the UI with the formatted values updateSliderValues( formattedValue, formattedValueMax ); }, diff --git a/templates/form-elements/field-slider.html b/templates/form-elements/field-slider.html index 33a4a3a3..a1c46616 100644 --- a/templates/form-elements/field-slider.html +++ b/templates/form-elements/field-slider.html @@ -7,7 +7,7 @@ class="forminator-slider forminator-slider-full" aria-required="false" > -
+
2suffix
From 9d3e8858c60cc4011dfd7bf8a8b02c46e2b67cd5 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Thu, 7 Dec 2023 20:32:23 +0530 Subject: [PATCH 12/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20slider=20dynam?= =?UTF-8?q?ic=20value=20setting.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- library/js/slider.js | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/library/js/slider.js b/library/js/slider.js index c2572535..00b4e9d2 100644 --- a/library/js/slider.js +++ b/library/js/slider.js @@ -49,27 +49,31 @@ slide: function( event, ui ) { // Format the slider values using the template - var formattedValue = isRange ? valueTemplate( ui.values[0]) : valueTemplate( ui.value ); - var formattedValueMax = isRange ? valueTemplate( ui.values[1]) : null; + var value = isRange ? ui.values[0] : ui.value; + var valueMax = isRange ? ui.values[1] : null; + var formattedValue = isRange ? valueTemplate( value ) : valueTemplate( value ); + var formattedValueMax = isRange ? valueTemplate( valueMax ) : null; // Update the UI with the formatted values - updateSliderValues( formattedValue, formattedValueMax ); + updateSliderValues( formattedValue, formattedValueMax, value, valueMax ); } }); // Function to format the slider value using the template function valueTemplate( sliderValue ) { - console.log( sliderValue ); return sliderValueTemplate.replace( '{slider-value}', '' + $( '
' ).text( sliderValue ).html() + '' ); } // Function to update the UI with the formatted values - function updateSliderValues( minValue, maxValue ) { + function updateSliderValues( formattedValue, formattedValueMax, minValue, maxValue ) { if ( isRange ) { - sliderValueWrapper.find( '.forminator-slider-value-min' ).html( minValue ); - sliderValueWrapper.find( '.forminator-slider-value-max' ).html( maxValue ); + sliderValueWrapper.find( '.forminator-slider-value-min' ).html( formattedValue ); + sliderValueWrapper.find( '.forminator-slider-value-max' ).html( formattedValueMax ); + sliderValueWrapper.find( '.forminator-slider-hidden-min' ).val( minValue ); + sliderValueWrapper.find( '.forminator-slider-hidden-max' ).val( maxValue ); } else { - sliderValueWrapper.find( '.forminator-slider-value-min' ).html( minValue ); + sliderValueWrapper.find( '.forminator-slider-value-min' ).html( formattedValue ); + sliderValueWrapper.find( '.forminator-slider-hidden-min' ).val( minValue ); } } }); From cd8627cce0528d1a76e4e4e953251538dd72335f Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Thu, 7 Dec 2023 20:55:37 +0530 Subject: [PATCH 13/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20slider=20dynam?= =?UTF-8?q?ic=20value=20setting.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- library/js/slider.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/library/js/slider.js b/library/js/slider.js index 00b4e9d2..06f71109 100644 --- a/library/js/slider.js +++ b/library/js/slider.js @@ -40,18 +40,18 @@ create: function( event, ui ) { // Format the slider values using the template - var formattedValue = isRange ? valueTemplate( value ) : valueTemplate( value ); + var formattedValue = valueTemplate( value ); var formattedValueMax = isRange ? valueTemplate( valueMax ) : null; // Update the UI with the formatted values - updateSliderValues( formattedValue, formattedValueMax ); + updateSliderValues( 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 = isRange ? valueTemplate( value ) : valueTemplate( value ); + var formattedValue = valueTemplate( value ); var formattedValueMax = isRange ? valueTemplate( valueMax ) : null; // Update the UI with the formatted values From 75a2358277f73ef0e16639219b0d79b10bc0e125 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Fri, 8 Dec 2023 15:52:44 +0530 Subject: [PATCH 14/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20slider=20same?= =?UTF-8?q?=20value=20cannot=20be=20selected.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- library/js/slider.js | 5 +++++ templates/form-elements/field-slider.html | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/library/js/slider.js b/library/js/slider.js index 06f71109..2134b752 100644 --- a/library/js/slider.js +++ b/library/js/slider.js @@ -54,6 +54,11 @@ var formattedValue = valueTemplate( value ); var formattedValueMax = isRange ? valueTemplate( valueMax ) : null; + // return if min and max slider value is same. + if ( isRange && ( ( ui.values[0]) == ui.values[1]) ) { + return false; + } + // Update the UI with the formatted values updateSliderValues( formattedValue, formattedValueMax, value, valueMax ); } diff --git a/templates/form-elements/field-slider.html b/templates/form-elements/field-slider.html index a1c46616..0ca4b7d3 100644 --- a/templates/form-elements/field-slider.html +++ b/templates/form-elements/field-slider.html @@ -29,8 +29,8 @@
From 09b120e748187fa891c83d7ea2be29195c7ce534 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Fri, 8 Dec 2023 15:56:00 +0530 Subject: [PATCH 15/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20range=20slider?= =?UTF-8?q?=20same=20value=20cannot=20be=20selected.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- library/js/slider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/library/js/slider.js b/library/js/slider.js index 2134b752..dc7fad38 100644 --- a/library/js/slider.js +++ b/library/js/slider.js @@ -55,7 +55,7 @@ var formattedValueMax = isRange ? valueTemplate( valueMax ) : null; // return if min and max slider value is same. - if ( isRange && ( ( ui.values[0]) == ui.values[1]) ) { + if ( isRange && ( value == valueMax ) ) { return false; } From e030e395860f90e86a5c8afcb1464a63305ddbcd Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Fri, 8 Dec 2023 16:43:35 +0530 Subject: [PATCH 16/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20revert=20last?= =?UTF-8?q?=20commit.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- library/js/slider.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/library/js/slider.js b/library/js/slider.js index dc7fad38..06f71109 100644 --- a/library/js/slider.js +++ b/library/js/slider.js @@ -54,11 +54,6 @@ var formattedValue = valueTemplate( value ); var formattedValueMax = isRange ? valueTemplate( valueMax ) : null; - // return if min and max slider value is same. - if ( isRange && ( value == valueMax ) ) { - return false; - } - // Update the UI with the formatted values updateSliderValues( formattedValue, formattedValueMax, value, valueMax ); } From c19c604811a8752c6daa3789de6ce30db5d91f01 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Tue, 12 Dec 2023 14:53:16 +0530 Subject: [PATCH 17/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20slider=20acces?= =?UTF-8?q?sibility=20fix.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- library/js/slider.js | 16 ++++++++++++++-- .../scss/src/settings/components/_slider.scss | 4 ++++ templates/form-elements/field-slider.html | 10 +++++----- 3 files changed, 23 insertions(+), 7 deletions(-) diff --git a/library/js/slider.js b/library/js/slider.js index 06f71109..5385dfdf 100644 --- a/library/js/slider.js +++ b/library/js/slider.js @@ -15,6 +15,7 @@ // Cache the current slider element var $element = $( this ); var $slide = $( this ).find( '.forminator-slide' ); + var $input = $( this ).find( '.forminator-hidden-input' ); // Check if it's a range slider var isRange = $slide.data( 'is-range' ); @@ -30,6 +31,9 @@ var sliderValueWrapper = $element.find( '.forminator-slider-amount' ); var sliderValueTemplate = sliderValueWrapper.data( 'value-template' ) || '{slider-value}'; + // 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', @@ -59,6 +63,16 @@ } }); + // Add a click event listener to the label + $label.on( 'click', function() { + var handles = $slide.find( '.ui-slider-handle' ); + 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( sliderValue ) { return sliderValueTemplate.replace( '{slider-value}', '' + $( '
' ).text( sliderValue ).html() + '' ); @@ -77,7 +91,5 @@ } } }); - - }; }( jQuery ) ); diff --git a/library/scss/src/settings/components/_slider.scss b/library/scss/src/settings/components/_slider.scss index 55c1d028..dc905b28 100644 --- a/library/scss/src/settings/components/_slider.scss +++ b/library/scss/src/settings/components/_slider.scss @@ -6,6 +6,10 @@ display: flex; flex-direction: column; + .forminator-hidden-input { + display: none; + } + .forminator-slide { border: 1px solid transparent; background: #EDEDED; diff --git a/templates/form-elements/field-slider.html b/templates/form-elements/field-slider.html index 0ca4b7d3..60a1fae9 100644 --- a/templates/form-elements/field-slider.html +++ b/templates/form-elements/field-slider.html @@ -1,12 +1,12 @@
- + -
+
2suffix
@@ -19,13 +19,13 @@
- +
+
Date: Wed, 13 Dec 2023 12:48:23 +0530 Subject: [PATCH 18/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20FOR-4002=20sli?= =?UTF-8?q?der=20min=20max=20improvements.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- library/js/slider.js | 9 ++++- .../scss/src/settings/components/_slider.scss | 39 +++++++------------ templates/form-elements/field-slider.html | 12 +++++- 3 files changed, 31 insertions(+), 29 deletions(-) diff --git a/library/js/slider.js b/library/js/slider.js index 5385dfdf..29de68b9 100644 --- a/library/js/slider.js +++ b/library/js/slider.js @@ -81,8 +81,13 @@ // Function to update the UI with the formatted values function updateSliderValues( formattedValue, formattedValueMax, minValue, maxValue ) { if ( isRange ) { - sliderValueWrapper.find( '.forminator-slider-value-min' ).html( formattedValue ); - sliderValueWrapper.find( '.forminator-slider-value-max' ).html( formattedValueMax ); + if ( minValue === maxValue ) { + sliderValueWrapper.find( '.forminator-slider-value-min' ).html( formattedValue ); + sliderValueWrapper.find( '.forminator-slider-value-max' ).html( '' ); + } else { + sliderValueWrapper.find( '.forminator-slider-value-min' ).html( formattedValue + ' - ' ); + sliderValueWrapper.find( '.forminator-slider-value-max' ).html( formattedValueMax ); + } sliderValueWrapper.find( '.forminator-slider-hidden-min' ).val( minValue ); sliderValueWrapper.find( '.forminator-slider-hidden-max' ).val( maxValue ); } else { diff --git a/library/scss/src/settings/components/_slider.scss b/library/scss/src/settings/components/_slider.scss index dc905b28..0c2e8605 100644 --- a/library/scss/src/settings/components/_slider.scss +++ b/library/scss/src/settings/components/_slider.scss @@ -139,40 +139,29 @@ width: 75%; } } - - .forminator-slider-amount { + + .forminator-slider-limit { display: flex; justify-content: space-between; color: #888; - font-size: 13px; - font-style: normal; - font-weight: 500; + font-size: 15px; + font-weight: 400; + line-height: 22px; + } + + .forminator-slider-amount { + display: flex; + color: #333; + gap: 2px; + font-size: 16px; + font-weight: 400; line-height: 22px; letter-spacing: -0.2px; + margin: 5px 0; - .forminator-slider-value { - display: inline-block; - color: #333; - font-size: 15px; - font-weight: 400; - margin: 0 2px; - } - - &.forminator-slider-amount-top-left, - &.forminator-slider-amount-top-right, &.forminator-slider-amount-top { order: -1; } - - &.forminator-slider-amount-top-left, - &.forminator-slider-amount-bottom-left { - align-self: flex-start; - } - - &.forminator-slider-amount-top-right, - &.forminator-slider-amount-bottom-right { - align-self: flex-end; - } } } } \ No newline at end of file diff --git a/templates/form-elements/field-slider.html b/templates/form-elements/field-slider.html index 60a1fae9..5a4948bb 100644 --- a/templates/form-elements/field-slider.html +++ b/templates/form-elements/field-slider.html @@ -8,7 +8,11 @@ >
-
2suffix
+
+ 0 + 10 +
+
2suffix
This field is required. @@ -34,8 +38,12 @@ data-value="2" data-value-max="40" >
+
+ 0 + 48 +
- +
From 03f603dff7c2932ae9ac0ea625da6551bf9c7c6c Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 13 Dec 2023 13:00:08 +0530 Subject: [PATCH 19/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20FOR-4002=20sli?= =?UTF-8?q?der=20min=20max=20improvements.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- templates/form-elements/field-slider.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/form-elements/field-slider.html b/templates/form-elements/field-slider.html index 5a4948bb..2adfe0b7 100644 --- a/templates/form-elements/field-slider.html +++ b/templates/form-elements/field-slider.html @@ -34,13 +34,13 @@ data-is-range="true" data-min="0" data-max="50" - data-step="4" + data-step="1" data-value="2" data-value-max="40" >
0 - 48 + 50
From 57bf9444e2281392d59d4147d132a1ad67d93eef Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 13 Dec 2023 13:07:26 +0530 Subject: [PATCH 20/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20FOR-4002=20sli?= =?UTF-8?q?der=20min=20max=20improvements.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- library/js/slider.js | 5 +++-- templates/form-elements/field-slider.html | 3 ++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/library/js/slider.js b/library/js/slider.js index 29de68b9..3ba8c945 100644 --- a/library/js/slider.js +++ b/library/js/slider.js @@ -81,11 +81,12 @@ // Function to update the UI with the formatted values function updateSliderValues( formattedValue, formattedValueMax, minValue, maxValue ) { if ( isRange ) { + sliderValueWrapper.find( '.forminator-slider-value-min' ).html( formattedValue ); if ( minValue === maxValue ) { - sliderValueWrapper.find( '.forminator-slider-value-min' ).html( formattedValue ); + sliderValueWrapper.find( '.forminator-slider-seperator' ).hide(); sliderValueWrapper.find( '.forminator-slider-value-max' ).html( '' ); } else { - sliderValueWrapper.find( '.forminator-slider-value-min' ).html( formattedValue + ' - ' ); + sliderValueWrapper.find( '.forminator-slider-seperator' ).show(); sliderValueWrapper.find( '.forminator-slider-value-max' ).html( formattedValueMax ); } sliderValueWrapper.find( '.forminator-slider-hidden-min' ).val( minValue ); diff --git a/templates/form-elements/field-slider.html b/templates/form-elements/field-slider.html index 2adfe0b7..ff9ce3e3 100644 --- a/templates/form-elements/field-slider.html +++ b/templates/form-elements/field-slider.html @@ -43,7 +43,8 @@ 50
- + + -
From 58fc4703375aa98067080c9263bc6be1219ee893 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 13 Dec 2023 13:11:59 +0530 Subject: [PATCH 21/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20slider=20seper?= =?UTF-8?q?ator=20fix.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- library/scss/src/settings/components/_slider.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/library/scss/src/settings/components/_slider.scss b/library/scss/src/settings/components/_slider.scss index 0c2e8605..f2301398 100644 --- a/library/scss/src/settings/components/_slider.scss +++ b/library/scss/src/settings/components/_slider.scss @@ -148,6 +148,10 @@ font-weight: 400; line-height: 22px; } + + .forminator-slider-seperator { + display: none; + } .forminator-slider-amount { display: flex; From fd4a9439ae61b1ca880180d548f5ed57c91912da Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 13 Dec 2023 15:33:55 +0530 Subject: [PATCH 22/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20slider=20bar?= =?UTF-8?q?=20height=20fix.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- library/scss/src/settings/components/_slider.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/library/scss/src/settings/components/_slider.scss b/library/scss/src/settings/components/_slider.scss index f2301398..896a175f 100644 --- a/library/scss/src/settings/components/_slider.scss +++ b/library/scss/src/settings/components/_slider.scss @@ -112,8 +112,8 @@ } .ui-slider-range { - top: 0; - height: 100%; + top: -1px; + bottom: -1px; } .ui-slider-range-min { From d6092163c44943a0c80df3a38e4104cd642a9450 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 13 Dec 2023 15:46:13 +0530 Subject: [PATCH 23/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20added=20slider?= =?UTF-8?q?=20disabled=20state.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- library/js/slider.js | 7 +++++++ templates/form-elements/field-slider.html | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/library/js/slider.js b/library/js/slider.js index 3ba8c945..760fd727 100644 --- a/library/js/slider.js +++ b/library/js/slider.js @@ -16,6 +16,7 @@ var $element = $( this ); var $slide = $( this ).find( '.forminator-slide' ); var $input = $( this ).find( '.forminator-hidden-input' ); + var $disabled = $( this ).hasClass( 'forminator-disabled' ); // Check if it's a range slider var isRange = $slide.data( 'is-range' ); @@ -39,6 +40,7 @@ range: isRange ? true : 'min', min: minRange, max: maxRange, + disabled: $disabled, step: step, ...( isRange ? { values: [ value, valueMax ] } : { value: value }), create: function( event, ui ) { @@ -66,6 +68,11 @@ // 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 { diff --git a/templates/form-elements/field-slider.html b/templates/form-elements/field-slider.html index ff9ce3e3..2c74d376 100644 --- a/templates/form-elements/field-slider.html +++ b/templates/form-elements/field-slider.html @@ -26,7 +26,7 @@
From 1668f8cfa5ce8825580c62d3ff138059712f684c Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 13 Dec 2023 15:55:30 +0530 Subject: [PATCH 24/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20added=20slider?= =?UTF-8?q?=20disabled=20state.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- templates/form-elements/field-slider.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/form-elements/field-slider.html b/templates/form-elements/field-slider.html index 2c74d376..012ebf2b 100644 --- a/templates/form-elements/field-slider.html +++ b/templates/form-elements/field-slider.html @@ -10,7 +10,7 @@
0 - 10 + 100
2suffix
From abf579a4439793cb0a8cfd9b26977f5a5035a818 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Thu, 14 Dec 2023 10:40:30 +0530 Subject: [PATCH 25/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20slider=20amoun?= =?UTF-8?q?t=20improvement.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- library/scss/src/settings/components/_slider.scss | 6 ++++++ templates/form-elements/field-slider.html | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/library/scss/src/settings/components/_slider.scss b/library/scss/src/settings/components/_slider.scss index 896a175f..4f05f421 100644 --- a/library/scss/src/settings/components/_slider.scss +++ b/library/scss/src/settings/components/_slider.scss @@ -152,6 +152,12 @@ .forminator-slider-seperator { display: none; } + + .forminator-slider-value-max, + .forminator-slider-value-min { + display: flex; + gap: 2px; + } .forminator-slider-amount { display: flex; diff --git a/templates/form-elements/field-slider.html b/templates/form-elements/field-slider.html index 012ebf2b..ed66157c 100644 --- a/templates/form-elements/field-slider.html +++ b/templates/form-elements/field-slider.html @@ -26,7 +26,7 @@
From 1cc44b919ab383b56968ff0380bd3275fc0937fc Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Thu, 14 Dec 2023 22:12:24 +0530 Subject: [PATCH 26/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20added=20slider?= =?UTF-8?q?=20trigger=20change=20on=20hidden=20value=20update.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- library/js/slider.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/library/js/slider.js b/library/js/slider.js index 760fd727..37334afb 100644 --- a/library/js/slider.js +++ b/library/js/slider.js @@ -96,11 +96,11 @@ sliderValueWrapper.find( '.forminator-slider-seperator' ).show(); sliderValueWrapper.find( '.forminator-slider-value-max' ).html( formattedValueMax ); } - sliderValueWrapper.find( '.forminator-slider-hidden-min' ).val( minValue ); - sliderValueWrapper.find( '.forminator-slider-hidden-max' ).val( maxValue ); + sliderValueWrapper.find( '.forminator-slider-hidden-min' ).val( minValue ).trigger( 'change' ); + sliderValueWrapper.find( '.forminator-slider-hidden-max' ).val( maxValue ).trigger( 'change' ); } else { sliderValueWrapper.find( '.forminator-slider-value-min' ).html( formattedValue ); - sliderValueWrapper.find( '.forminator-slider-hidden-min' ).val( minValue ); + sliderValueWrapper.find( '.forminator-slider-hidden-min' ).val( minValue ).trigger( 'change' ); } } }); From f0a734c0e02c86bf37f493b7ecb256d82f15f1eb Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Mon, 18 Dec 2023 15:14:09 +0530 Subject: [PATCH 27/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20slider=20compo?= =?UTF-8?q?nent=20script=20improved.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- library/js/slider.js | 111 ++++++++++-------- .../scss/src/settings/components/_slider.scss | 1 + 2 files changed, 60 insertions(+), 52 deletions(-) diff --git a/library/js/slider.js b/library/js/slider.js index 37334afb..aca10675 100644 --- a/library/js/slider.js +++ b/library/js/slider.js @@ -14,95 +14,102 @@ // Cache the current slider element var $element = $( this ); - var $slide = $( this ).find( '.forminator-slide' ); - var $input = $( this ).find( '.forminator-hidden-input' ); - var $disabled = $( this ).hasClass( 'forminator-disabled' ); + 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' ); + 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; - - // Get slider value wrapper and template - var sliderValueWrapper = $element.find( '.forminator-slider-amount' ); - var sliderValueTemplate = sliderValueWrapper.data( 'value-template' ) || '{slider-value}'; + 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; // 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, + range: $isRange ? true : 'min', + min: $minRange, + max: $maxRange, disabled: $disabled, - step: step, - ...( isRange ? { values: [ value, valueMax ] } : { value: value }), + step: $step, + ...( $isRange ? { values: [ $value, $valueMax ] } : { value: $value }), create: function( event, ui ) { // Format the slider values using the template - var formattedValue = valueTemplate( value ); - var formattedValueMax = isRange ? valueTemplate( valueMax ) : null; + var $formattedValue = valueTemplate( $element, $value ); + var $formattedValueMax = $isRange ? valueTemplate( $element, $valueMax ) : null; - // Update the UI with the formatted values - updateSliderValues( formattedValue, formattedValueMax, value, valueMax ); + // Create the UI with the formatted values + updateSliderValues( $element, ui, $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( value ); - var formattedValueMax = isRange ? valueTemplate( valueMax ) : null; + 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( formattedValue, formattedValueMax, value, valueMax ); + updateSliderValues( $element, ui, $formattedValue, $formattedValueMax, $value, $valueMax ); } }); // Add a click event listener to the label $label.on( 'click', function() { - var handles = $slide.find( '.ui-slider-handle' ); + 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 + 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 + $handles.focus(); // Focus on the handle for single sliders } }); + }); - // Function to format the slider value using the template - function valueTemplate( sliderValue ) { - return sliderValueTemplate.replace( '{slider-value}', '' + $( '
' ).text( sliderValue ).html() + '' ); - } - - // Function to update the UI with the formatted values - function updateSliderValues( formattedValue, formattedValueMax, minValue, maxValue ) { - if ( isRange ) { - sliderValueWrapper.find( '.forminator-slider-value-min' ).html( formattedValue ); - if ( minValue === maxValue ) { - sliderValueWrapper.find( '.forminator-slider-seperator' ).hide(); - sliderValueWrapper.find( '.forminator-slider-value-max' ).html( '' ); - } else { - sliderValueWrapper.find( '.forminator-slider-seperator' ).show(); - sliderValueWrapper.find( '.forminator-slider-value-max' ).html( formattedValueMax ); - } - sliderValueWrapper.find( '.forminator-slider-hidden-min' ).val( minValue ).trigger( 'change' ); - sliderValueWrapper.find( '.forminator-slider-hidden-max' ).val( maxValue ).trigger( 'change' ); + // 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}', '' + $( '
' ).text( $sliderValue ).html() + '' ); + } + + // Function to update the UI with the formatted values + function updateSliderValues( $element, ui, $formattedValue, $formattedValueMax, $minValue, $maxValue ) { + 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 ( $minValue === $maxValue ) { + $sliderValueWrapper.find( '.forminator-slider-seperator' ).hide(); + $sliderValueWrapper.find( '.forminator-slider-value-max' ).html( '' ); } else { - sliderValueWrapper.find( '.forminator-slider-value-min' ).html( formattedValue ); - sliderValueWrapper.find( '.forminator-slider-hidden-min' ).val( minValue ).trigger( 'change' ); + $sliderValueWrapper.find( '.forminator-slider-seperator' ).show(); + $sliderValueWrapper.find( '.forminator-slider-value-max' ).html( $formattedValueMax ); } + + if ( ui.handle === $element.find( '.ui-slider-handle' )[0]) { + $sliderValueWrapper.find( '.forminator-slider-hidden-min' ).val( $minValue ).change(); + } else if ( ui.handle === $element.find( '.ui-slider-handle' )[1]) { + $sliderValueWrapper.find( '.forminator-slider-hidden-max' ).val( $maxValue ).change(); + } + } else { + $sliderValueWrapper.find( '.forminator-slider-hidden-min' ).val( $minValue ).change(); } - }); + } + }; }( jQuery ) ); diff --git a/library/scss/src/settings/components/_slider.scss b/library/scss/src/settings/components/_slider.scss index 4f05f421..c5301413 100644 --- a/library/scss/src/settings/components/_slider.scss +++ b/library/scss/src/settings/components/_slider.scss @@ -16,6 +16,7 @@ border-radius: 4px; position: relative; text-align: left; + cursor: pointer; @if ('default' == $form-theme) { border: 1px solid #777771; From d7759a1785f23ebd0fdc065fe79fec7848967735 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Mon, 18 Dec 2023 15:52:57 +0530 Subject: [PATCH 28/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20slider=20compo?= =?UTF-8?q?nent=20class=20name=20fix.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- library/js/slider.js | 4 ++-- library/scss/src/settings/components/_slider.scss | 2 +- templates/form-elements/field-slider.html | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/library/js/slider.js b/library/js/slider.js index aca10675..a7ccab4d 100644 --- a/library/js/slider.js +++ b/library/js/slider.js @@ -94,10 +94,10 @@ if ( $isRange ) { if ( $minValue === $maxValue ) { - $sliderValueWrapper.find( '.forminator-slider-seperator' ).hide(); + $sliderValueWrapper.find( '.forminator-slider-separator' ).hide(); $sliderValueWrapper.find( '.forminator-slider-value-max' ).html( '' ); } else { - $sliderValueWrapper.find( '.forminator-slider-seperator' ).show(); + $sliderValueWrapper.find( '.forminator-slider-separator' ).show(); $sliderValueWrapper.find( '.forminator-slider-value-max' ).html( $formattedValueMax ); } diff --git a/library/scss/src/settings/components/_slider.scss b/library/scss/src/settings/components/_slider.scss index c5301413..5ed01fc9 100644 --- a/library/scss/src/settings/components/_slider.scss +++ b/library/scss/src/settings/components/_slider.scss @@ -150,7 +150,7 @@ line-height: 22px; } - .forminator-slider-seperator { + .forminator-slider-separator { display: none; } diff --git a/templates/form-elements/field-slider.html b/templates/form-elements/field-slider.html index ed66157c..ffc5c242 100644 --- a/templates/form-elements/field-slider.html +++ b/templates/form-elements/field-slider.html @@ -44,7 +44,7 @@
- - + -
From 79b840a837513eb70aa8fe4ea8fcbb253886493c Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Tue, 19 Dec 2023 11:47:28 +0530 Subject: [PATCH 29/29] =?UTF-8?q?=E2=9C=A8=20new(slider):=20slider=20js=20?= =?UTF-8?q?hidden=20value=20change=20trigger=20fix.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- library/js/slider.js | 37 +++++++++++++++++++++++++------------ 1 file changed, 25 insertions(+), 12 deletions(-) diff --git a/library/js/slider.js b/library/js/slider.js index a7ccab4d..b867dc9c 100644 --- a/library/js/slider.js +++ b/library/js/slider.js @@ -27,6 +27,7 @@ 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' ) + '"]' ); @@ -45,8 +46,14 @@ 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, ui, $formattedValue, $formattedValueMax, $value, $valueMax ); + updateSliderValues( $element, $formattedValue, $formattedValueMax, $value, $valueMax ); }, slide: function( event, ui ) { @@ -57,7 +64,21 @@ var $formattedValueMax = $isRange ? valueTemplate( $element, $valueMax ) : null; // Update the UI with the formatted values - updateSliderValues( $element, ui, $formattedValue, $formattedValueMax, $value, $valueMax ); + 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(); + } } }); @@ -85,7 +106,7 @@ } // Function to update the UI with the formatted values - function updateSliderValues( $element, ui, $formattedValue, $formattedValueMax, $minValue, $maxValue ) { + 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' ); @@ -93,21 +114,13 @@ $sliderValueWrapper.find( '.forminator-slider-value-min' ).html( $formattedValue ); if ( $isRange ) { - if ( $minValue === $maxValue ) { + 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 ); } - - if ( ui.handle === $element.find( '.ui-slider-handle' )[0]) { - $sliderValueWrapper.find( '.forminator-slider-hidden-min' ).val( $minValue ).change(); - } else if ( ui.handle === $element.find( '.ui-slider-handle' )[1]) { - $sliderValueWrapper.find( '.forminator-slider-hidden-max' ).val( $maxValue ).change(); - } - } else { - $sliderValueWrapper.find( '.forminator-slider-hidden-min' ).val( $minValue ).change(); } }