| Index: branches/salvatoreingala/Gadgets/ui/resources/jquery.formBuilder.css |
| — | — | @@ -26,6 +26,16 @@ |
| 27 | 27 | width: 50%; |
| 28 | 28 | } |
| 29 | 29 | |
| | 30 | +.formBuilder-slider-tooltip { |
| | 31 | + padding: 2px; |
| | 32 | + min-width: 20px; |
| | 33 | + text-align: center; |
| | 34 | + -o-box-shadow: 0 0 3px #aaa; |
| | 35 | + -moz-box-shadow: 0 0 3px #aaa; |
| | 36 | + -webkit-box-shadow: 0 0 3px #aaa; |
| | 37 | + box-shadow: 0 0 3px #aaa; |
| | 38 | +} |
| | 39 | + |
| 30 | 40 | .formbuilder select { |
| 31 | 41 | width: 40%; |
| 32 | 42 | } |
| Index: branches/salvatoreingala/Gadgets/ui/resources/jquery.formBuilder.js |
| — | — | @@ -979,15 +979,86 @@ |
| 980 | 980 | }; |
| 981 | 981 | |
| 982 | 982 | if ( typeof value != 'undefined' ) { |
| 983 | | - rangeOptions['value'] = value; |
| | 983 | + rangeOptions.value = value; |
| 984 | 984 | } |
| 985 | 985 | |
| 986 | 986 | if ( typeof this.desc.step != 'undefined' ) { |
| 987 | | - rangeOptions['step'] = this.desc.step; |
| | 987 | + rangeOptions.step = this.desc.step; |
| 988 | 988 | } |
| 989 | 989 | |
| | 990 | + //A tooltip to show current value. |
| | 991 | + //TODO: use jQuery UI tooltips when they are released (in 1.9) |
| | 992 | + var $tooltip = $( '<div/>' ) |
| | 993 | + .addClass( 'formBuilder-slider-tooltip ui-widget ui-corner-all ui-widget-content' ) |
| | 994 | + .css( { |
| | 995 | + position: 'absolute', |
| | 996 | + display: 'none' |
| | 997 | + } ) |
| | 998 | + .appendTo( this.$div ); |
| | 999 | + |
| | 1000 | + var tooltipShown = false, sliding = false, mouseOver = false; |
| | 1001 | + |
| | 1002 | + function refreshTooltip( visible, handle, value ) { |
| | 1003 | + if ( !tooltipShown && visible ) { |
| | 1004 | + $tooltip.fadeIn( 'fast' ); |
| | 1005 | + tooltipShown = true; |
| | 1006 | + } else if ( tooltipShown && !visible ) { |
| | 1007 | + $tooltip.fadeOut( 'fast' ); |
| | 1008 | + tooltipShown = false; |
| | 1009 | + } |
| | 1010 | + |
| | 1011 | + $tooltip |
| | 1012 | + .zIndex( $( handle ).parent().zIndex() + 1 ) |
| | 1013 | + .text( value ) |
| | 1014 | + .position( { |
| | 1015 | + my: "bottom", |
| | 1016 | + at: "top", |
| | 1017 | + of: handle |
| | 1018 | + } ); |
| | 1019 | + } |
| | 1020 | + |
| | 1021 | + $.extend( rangeOptions, { |
| | 1022 | + start: function( event, ui ) { |
| | 1023 | + sliding = true; |
| | 1024 | + }, |
| | 1025 | + slide: function( event, ui ) { |
| | 1026 | + //Deferring to allow the widget to refresh his position |
| | 1027 | + setTimeout( function() { |
| | 1028 | + refreshTooltip( true, $slider.find( '.ui-slider-handle' ), ui.value ); |
| | 1029 | + }, 1 ); |
| | 1030 | + }, |
| | 1031 | + stop: function( event, ui ) { |
| | 1032 | + setTimeout( function() { |
| | 1033 | + if ( !$handle.is( ':focus' ) && !mouseOver) { |
| | 1034 | + refreshTooltip( false, $slider.find( '.ui-slider-handle' ), ui.value ); |
| | 1035 | + } |
| | 1036 | + }, 300 ); |
| | 1037 | + sliding = false; |
| | 1038 | + } |
| | 1039 | + } ); |
| | 1040 | + |
| 990 | 1041 | $slider.slider( rangeOptions ); |
| 991 | | - |
| | 1042 | + |
| | 1043 | + var $handle = $slider.find( '.ui-slider-handle' ) |
| | 1044 | + .focus( function( event ) { |
| | 1045 | + refreshTooltip( true, $handle, $slider.slider( 'value' ) ); |
| | 1046 | + } ) |
| | 1047 | + .blur( function( event ) { |
| | 1048 | + refreshTooltip( false, $handle, $slider.slider( 'value' ) ); |
| | 1049 | + } ) |
| | 1050 | + .mouseenter( function( event ) { |
| | 1051 | + mouseOver = true; |
| | 1052 | + refreshTooltip( true, $handle, $slider.slider( 'value' ) ); |
| | 1053 | + } ) |
| | 1054 | + .mouseleave( function( event ) { |
| | 1055 | + setTimeout( function() { |
| | 1056 | + if ( !$handle.is( ':focus' ) && !sliding ) { |
| | 1057 | + refreshTooltip( false, $handle, $slider.slider( 'value' ) ); |
| | 1058 | + } |
| | 1059 | + }, 1 ); |
| | 1060 | + mouseOver = false; |
| | 1061 | + } ); |
| | 1062 | + |
| 992 | 1063 | this.$div.append( $slider ); |
| 993 | 1064 | } |
| 994 | 1065 | |