Permalink
Browse files

Revamp 'slider' field. Also add its demo #266

- Add 'js_options' param to allow more control with JS
- Add 'prefix' and 'suffix' params for text value labels. Not sure these names are good. Please comment.
  • Loading branch information...
1 parent eaed499 commit 17133630ffddb99508b773d1e99a82c90888f46a @rilwis committed Apr 6, 2013
Showing with 84 additions and 51 deletions.
  1. +8 −0 css/slider.css
  2. +24 −3 demo/demo.php
  3. +30 −8 inc/fields/slider.php
  4. +22 −40 js/slider.js
View
8 css/slider.css
@@ -0,0 +1,8 @@
+.rwmb-slider {
+ width: 50%;
+ display: inline-block;
+}
+.rwmb-slider-value-label {
+ display: inline-block;
+ margin-left: 10px;
+}
View
27 demo/demo.php
@@ -140,6 +140,23 @@
'title' => 'Advanced Fields',
'fields' => array(
+ // SLIDER
+ array(
+ 'name' => 'Slider',
+ 'id' => "{$prefix}slider",
+ 'type' => 'slider',
+
+ // Text labels displayed before and after value
+ 'prefix' => '$',
+ 'suffix' => ' USD',
+
+ // jQuery UI slider options. See here http://api.jqueryui.com/slider/
+ 'js_options' => array(
+ 'min' => 10,
+ 'max' => 255,
+ 'step' => 5,
+ ),
+ ),
// NUMBER
array(
'name' => 'Number',
@@ -155,7 +172,7 @@
'id' => "{$prefix}date",
'type' => 'date',
- // jQuery date picker options. See here http://jqueryui.com/demos/datepicker
+ // jQuery date picker options. See here http://api.jqueryui.com/datepicker
'js_options' => array(
'appendText' => '(yyyy-mm-dd)',
'dateFormat' => 'yy-mm-dd',
@@ -170,7 +187,9 @@
'id' => $prefix . 'datetime',
'type' => 'datetime',
- // jQuery datetime picker options. See here http://trentrichardson.com/examples/timepicker/
+ // jQuery datetime picker options.
+ // For date options, see here http://api.jqueryui.com/datepicker
+ // For time options, see here http://trentrichardson.com/examples/timepicker/
'js_options' => array(
'stepMinute' => 15,
'showTimepicker' => true,
@@ -182,7 +201,9 @@
'id' => $prefix . 'time',
'type' => 'time',
- // jQuery datetime picker options. See here http://trentrichardson.com/examples/timepicker/
+ // jQuery datetime picker options.
+ // For date options, see here http://api.jqueryui.com/datepicker
+ // For time options, see here http://trentrichardson.com/examples/timepicker/
'js_options' => array(
'stepMinute' => 5,
'showSecond' => true,
View
38 inc/fields/slider.php
@@ -2,7 +2,7 @@
// Prevent loading this file directly
defined( 'ABSPATH' ) || exit;
-if ( ! class_exists( 'RWMB_Slider_Field' ) )
+if ( !class_exists( 'RWMB_Slider_Field' ) )
{
class RWMB_Slider_Field
{
@@ -16,8 +16,9 @@ static function admin_enqueue_scripts()
$url = RWMB_CSS_URL . 'jqueryui';
wp_enqueue_style( 'jquery-ui-core', "{$url}/jquery.ui.core.css", array(), '1.8.17' );
wp_enqueue_style( 'jquery-ui-theme', "{$url}/jquery.ui.theme.css", array(), '1.8.17' );
+ wp_enqueue_style( 'rwmb-slider', RWMB_CSS_URL . 'slider.css' );
- wp_enqueue_script( 'rwmb-slider', RWMB_JS_URL . 'slider.js', array( 'jquery-ui-slider' ), RWMB_VER, true );
+ wp_enqueue_script( 'rwmb-slider', RWMB_JS_URL . 'slider.js', array( 'jquery-ui-slider', 'jquery-ui-widget', 'jquery-ui-mouse', 'jquery-ui-core' ), RWMB_VER, true );
}
/**
@@ -33,14 +34,35 @@ static function html( $html, $meta, $field )
{
return sprintf(
'<div class="clearfix">
- <div class="rwmb-slider" rel="%s" id="%s"></div>
+ <div class="rwmb-slider" id="%s" data-options="%s"></div>
+ <span class="rwmb-slider-value-label">%s<span>%s</span>%s</span>
<input type="hidden" name="%s" value="%s" />
</div>',
- $field['format'],
- $field['id'],
- $field['field_name'],
- $meta
+ $field['id'], esc_attr( json_encode( $field['js_options'] ) ),
+ $field['prefix'], $meta, $field['suffix'],
+ $field['field_name'], $meta
);
}
+
+ /**
+ * Normalize parameters for field
+ *
+ * @param array $field
+ *
+ * @return array
+ */
+ static function normalize_field( $field )
+ {
+ $field = wp_parse_args( $field, array(
+ 'prefix' => '',
+ 'suffix' => '',
+ 'js_options' => array(),
+ ) );
+ $field['js_options'] = wp_parse_args( $field['js_options'], array(
+ 'range' => 'min', // range = 'min' will add a dark background to sliding part, better UI
+ ) );
+
+ return $field;
+ }
}
-}
+}
View
62 js/slider.js
@@ -1,50 +1,32 @@
-jQuery( document ).ready( function( $ )
+jQuery( function( $ )
{
- var
- id = null
- , el = null
- , input = null
- , label = null
- , format = null
- , value = null
- , update = null
- ;
- $( '.rwmb-slider' ).each( function( i, val )
+ $( '.rwmb-slider' ).each( function()
{
- id = $( val ).attr( 'id' );
- el = $( '#' + id );
- input = $( '[name=' + id + ']' );
- label = $( '[for=' + id + ']' );
- format = $( el ).attr( 'rel' );
+ var $this = $( this ),
+ $input = $this.siblings( 'input' ),
+ $valueLabel = $this.siblings( '.rwmb-slider-value-label' ).find( 'span' ),
+ value = $input.val(),
+ options = $this.data( 'options' );
- $( label ).append( ': <span id="' + id + '-label"></span>' );
- update = $( '#' + id + '-label' );
-
- if (
- !$( input ).val()
- || 'undefined' === $( input ).val()
- || null === typeof $( input ).val()
- )
+ if ( !value )
{
- $( input ).val( $( el ).slider( "values", 0 ) );
- $( update ).text( "0" );
+ value = 0;
+ $input.val( 0 );
+ $valueLabel.text( '0' );
}
else
{
- value = $( input ).val();
- $( update ).text( value );
+ $valueLabel.text( value );
}
- if ( 0 < format.length )
- $( update ).append( ' ' + format );
- el.slider(
- {
- value: value,
- slide: function( event, ui )
- {
- $( input ).val( ui.value );
- $( update ).text( ui.value + ' ' + format );
- }
- } );
+ // Assign field value and callback function when slide
+ options.value = value;
+ options.slide = function( event, ui )
+ {
+ $input.val( ui.value );
+ $valueLabel.text( ui.value );
+ };
+
+ $this.slider( options );
} );
-} );
+} );

0 comments on commit 1713363

Please sign in to comment.