http://www.mediawiki.org/wiki/Special:Code/MediaWiki/94778
Revision: 94778
Author: salvatoreingala
Date: 2011-08-17 17:14:18 +0000 (Wed, 17 Aug 2011)
Log Message:
-----------
Added a tooltip to show values of sliders on mouseover and during sliding.
Modified Paths:
--------------
branches/salvatoreingala/Gadgets/ui/resources/jquery.formBuilder.css
branches/salvatoreingala/Gadgets/ui/resources/jquery.formBuilder.js
Modified: branches/salvatoreingala/Gadgets/ui/resources/jquery.formBuilder.css
===================================================================
--- branches/salvatoreingala/Gadgets/ui/resources/jquery.formBuilder.css
2011-08-17 17:11:49 UTC (rev 94777)
+++ branches/salvatoreingala/Gadgets/ui/resources/jquery.formBuilder.css
2011-08-17 17:14:18 UTC (rev 94778)
@@ -26,6 +26,16 @@
width: 50%;
}
+.formBuilder-slider-tooltip {
+ padding: 2px;
+ min-width: 20px;
+ text-align: center;
+ -o-box-shadow: 0 0 3px #aaa;
+ -moz-box-shadow: 0 0 3px #aaa;
+ -webkit-box-shadow: 0 0 3px #aaa;
+ box-shadow: 0 0 3px #aaa;
+}
+
.formbuilder select {
width: 40%;
}
Modified: branches/salvatoreingala/Gadgets/ui/resources/jquery.formBuilder.js
===================================================================
--- branches/salvatoreingala/Gadgets/ui/resources/jquery.formBuilder.js
2011-08-17 17:11:49 UTC (rev 94777)
+++ branches/salvatoreingala/Gadgets/ui/resources/jquery.formBuilder.js
2011-08-17 17:14:18 UTC (rev 94778)
@@ -979,15 +979,86 @@
};
if ( typeof value != 'undefined' ) {
- rangeOptions['value'] = value;
+ rangeOptions.value = value;
}
if ( typeof this.desc.step != 'undefined' ) {
- rangeOptions['step'] = this.desc.step;
+ rangeOptions.step = this.desc.step;
}
+ //A tooltip to show current value.
+ //TODO: use jQuery UI tooltips when they are released (in 1.9)
+ var $tooltip = $( '<div/>' )
+ .addClass( 'formBuilder-slider-tooltip ui-widget
ui-corner-all ui-widget-content' )
+ .css( {
+ position: 'absolute',
+ display: 'none'
+ } )
+ .appendTo( this.$div );
+
+ var tooltipShown = false, sliding = false, mouseOver = false;
+
+ function refreshTooltip( visible, handle, value ) {
+ if ( !tooltipShown && visible ) {
+ $tooltip.fadeIn( 'fast' );
+ tooltipShown = true;
+ } else if ( tooltipShown && !visible ) {
+ $tooltip.fadeOut( 'fast' );
+ tooltipShown = false;
+ }
+
+ $tooltip
+ .zIndex( $( handle ).parent().zIndex() + 1 )
+ .text( value )
+ .position( {
+ my: "bottom",
+ at: "top",
+ of: handle
+ } );
+ }
+
+ $.extend( rangeOptions, {
+ start: function( event, ui ) {
+ sliding = true;
+ },
+ slide: function( event, ui ) {
+ //Deferring to allow the widget to refresh his
position
+ setTimeout( function() {
+ refreshTooltip( true, $slider.find(
'.ui-slider-handle' ), ui.value );
+ }, 1 );
+ },
+ stop: function( event, ui ) {
+ setTimeout( function() {
+ if ( !$handle.is( ':focus' ) &&
!mouseOver) {
+ refreshTooltip( false,
$slider.find( '.ui-slider-handle' ), ui.value );
+ }
+ }, 300 );
+ sliding = false;
+ }
+ } );
+
$slider.slider( rangeOptions );
-
+
+ var $handle = $slider.find( '.ui-slider-handle' )
+ .focus( function( event ) {
+ refreshTooltip( true, $handle, $slider.slider(
'value' ) );
+ } )
+ .blur( function( event ) {
+ refreshTooltip( false, $handle, $slider.slider(
'value' ) );
+ } )
+ .mouseenter( function( event ) {
+ mouseOver = true;
+ refreshTooltip( true, $handle, $slider.slider(
'value' ) );
+ } )
+ .mouseleave( function( event ) {
+ setTimeout( function() {
+ if ( !$handle.is( ':focus' ) &&
!sliding ) {
+ refreshTooltip( false, $handle,
$slider.slider( 'value' ) );
+ }
+ }, 1 );
+ mouseOver = false;
+ } );
+
this.$div.append( $slider );
}
_______________________________________________
MediaWiki-CVS mailing list
MediaWiki-CVS@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-cvs
