diff --git a/better_exposed_filters.css b/better_exposed_filters.css
index bc1c2d9..4d49803 100644
--- a/better_exposed_filters.css
+++ b/better_exposed_filters.css
@@ -13,3 +13,13 @@ fieldset.bef-select-as-checkboxes-fieldset.collapsed legend
{
position: relative;
}
+
+/*
+ * Styles for the jQuery UI slider widgets.
+ */
+.bef-slider.ui-slider-horizontal {
+ margin-top: 6px;
+}
+.bef-slider.ui-slider-vertical {
+ margin-top: 12px;
+}
diff --git a/better_exposed_filters.js b/better_exposed_filters.js
index 3a7b59b..8c12c12 100644
--- a/better_exposed_filters.js
+++ b/better_exposed_filters.js
@@ -83,11 +83,11 @@
;
// Check for and initialize datepickers
- if (Drupal.settings.better_exposed_filters.bef_datepicker) {
+ if (Drupal.settings.better_exposed_filters.datepicker) {
// Note: JavaScript does not treat "" as null
- if (Drupal.settings.better_exposed_filters.bef_dateformat) {
+ if (Drupal.settings.better_exposed_filters.datepicker_options.dateformat) {
$('.bef-datepicker').datepicker({
- dateFormat: Drupal.settings.better_exposed_filters.bef_dateformat
+ dateFormat: Drupal.settings.better_exposed_filters.datepicker_options.dateformat
});
}
else {
@@ -124,6 +124,107 @@
});
}
}
+
+ Drupal.behaviors.better_exposed_filters_slider = {
+ attach: function(context, settings) {
+ if (Drupal.settings.better_exposed_filters.slider) {
+ $.each(Drupal.settings.better_exposed_filters.slider_options, function(i, sliderOptions) {
+ // Only make one slider per filter.
+ $("#" + sliderOptions.viewId + " #edit-" + sliderOptions.id + "-wrapper").once('slider-filter', function() {
+ var $input = $(this).find('input[type=text]');
+
+ // This is a "between" or "not between" filter with two values.
+ if ($input.length == 2) {
+ var $min = $input.parent().find('input#edit-' + sliderOptions.id + '-min'),
+ $max = $input.parent().find('input#edit-' + sliderOptions.id + '-max'),
+ default_min,
+ default_max;
+
+ if (!$min.length || !$max.length) {
+ return;
+ }
+
+ // Get the default values.
+ // We use slider min & max if there are no defaults.
+ default_min = parseInt(($min.val() == '') ? sliderOptions.min : $min.val());
+ default_max = parseInt(($max.val() == '') ? sliderOptions.max : $max.val());
+ // Set the element value in case we are using the slider min & max.
+ $min.val(default_min);
+ $max.val(default_max);
+
+ $min.parents('div.views-widget').after(
+ $('').slider({
+ range: true,
+ min: parseInt(sliderOptions.min),
+ max: parseInt(sliderOptions.max),
+ animate: sliderOptions.animate ? sliderOptions.animate : false,
+ orientation: sliderOptions.orientation,
+ values: [default_min, default_max],
+ // Update the textfields as the sliders are moved
+ slide: function (event, ui) {
+ $min.val(ui.values[0]);
+ $max.val(ui.values[1]);
+ },
+ // Attach stop listeners.
+ stop: function(event, ui) {
+ // Click the auto submit button.
+ $(this).parents('form').find('.ctools-auto-submit-click').click();
+ }
+ })
+ );
+
+ // Update the slider when the fields are updated.
+ $min.blur(function() {
+ befUpdateSlider($(this), 0, sliderOptions);
+ });
+ $max.blur(function() {
+ befUpdateSlider($(this), 1, sliderOptions);
+ });
+ }
+ // This is single value filter.
+ else if ($input.length == 1) {
+ if ($input.attr('id') != 'edit-' + sliderOptions.id) {
+ return;
+ }
+
+ // Get the default value. We use slider min if there is no default.
+ var default_value = parseInt(($input.val() == '') ? sliderOptions.min : $input.val());
+ // Set the element value in case we are using the slider min.
+ $input.val(default_value);
+
+ $input.parents('div.views-widget').after(
+ $('').slider({
+ min: parseInt(sliderOptions.min),
+ max: parseInt(sliderOptions.max),
+ animate: sliderOptions.animate ? sliderOptions.animate : false,
+ orientation: sliderOptions.orientation,
+ value: default_value,
+ // Update the textfields as the sliders are moved
+ slide: function (event, ui) {
+ $input.val(ui.value);
+ },
+ // Attach stop listeners.
+ stop: function(event, ui) {
+ // Click the auto submit button.
+ $(this).parents('form').find('.ctools-auto-submit-click').click();
+ }
+ })
+ );
+
+ // Update the slider when the field is updated.
+ $input.blur(function() {
+ befUpdateSlider($(this), null, sliderOptions);
+ });
+ }
+ else {
+ return;
+ }
+ })
+ });
+ }
+ }
+ };
+
/*
* Helper functions
*/
@@ -138,4 +239,60 @@
: $elem.closest('.form-item', context).removeClass('highlight');
}
+ /**
+ * Update a slider when a related input element is changed.
+ *
+ * @param $el
+ * A jQuery object of the updated element.
+ * @param valIndex
+ * The index of the value for a range slider or null for a non-range slider.
+ * @param sliderOptions
+ * The options for the current slider.
+ */
+ function befUpdateSlider($el, valIndex, sliderOptions) {
+ var val = parseInt($el.val()),
+ currentMin = $el.parents('div.views-widget').next('.bef-slider').slider('values', 0),
+ currentMax = $el.parents('div.views-widget').next('.bef-slider').slider('values', 1);
+ // Make sure our number is not more than the slider max.
+ if (val > sliderOptions.max) {
+ val = sliderOptions.max;
+ }
+ // Make sure our number is not more than the slider min.
+ if (val < sliderOptions.min) {
+ val = sliderOptions.min;
+ }
+ // If we have a range slider.
+ if (valIndex != null) {
+ // Make sure the min is not more than the current max value.
+ if (valIndex == 0 && val > currentMax) {
+ val = currentMax;
+ }
+ // Make sure the max is not more than the current max value.
+ if (valIndex == 1 && val < currentMin) {
+ val = currentMin;
+ }
+ // If the number is invalid, go back to the last value.
+ if (isNaN(val)) {
+ val = $el.parents('div.views-widget').next('.bef-slider').slider('values', valIndex);
+ }
+ }
+ else {
+ // If the number is invalid, go back to the last value.
+ if (isNaN(val)) {
+ val = $el.parents('div.views-widget').next('.bef-slider').slider('value');
+ }
+ }
+ // Make sure we are an int again.
+ val = parseInt(val);
+ // Reset the element in case an invalid value was entered.
+ $el.val(val);
+ // Set the slider to the new value.
+ if (valIndex != null) {
+ $el.parents('div.views-widget').next('.bef-slider').slider('values', valIndex, val);
+ }
+ else {
+ $el.parents('div.views-widget').next('.bef-slider').slider('value', val);
+ }
+ }
+
}) (jQuery);
diff --git a/better_exposed_filters.module b/better_exposed_filters.module
index 76eae42..8c79658 100644
--- a/better_exposed_filters.module
+++ b/better_exposed_filters.module
@@ -87,3 +87,30 @@ function bef_sort_combine_submit($form, &$form_state) {
// And pass this along to Views
views_exposed_form_submit($form, $form_state);
}
+
+/**
+ * Form element validation handler for BEF jQuery slider required fields.
+ */
+function better_expose_filters_element_validate_slider_required($element, &$form_state) {
+ $value = $element['#value'];
+ // If a jQuery slider format has been selected make sure the min & max value
+ // fields are not empty.
+ if (isset($element['#bef_filter_id']) &&
+ isset($form_state['values']['exposed_form_options']['bef'][$element['#bef_filter_id']]['bef_format']) &&
+ $form_state['values']['exposed_form_options']['bef'][$element['#bef_filter_id']]['bef_format'] == 'bef_slider' &&
+ $value == '') {
+ form_error($element, t('!name field is required.', array('!name' => $element['#title'])));
+ }
+}
+
+/**
+ * Form element validation handler for BEF jQuery slider animate setting.
+ */
+function better_expose_filters_element_validate_slider_animate($element, &$form_state) {
+ $value = $element['#value'];
+ if ($value !== '' &&
+ ((!is_numeric($value) || intval($value) != $value || $value <= 0) &&
+ !in_array($value, array('slow', 'normal', 'fast')))) {
+ form_error($element, t('%name must be "slow", "normal", "fast" or the number of milliseconds to run the animation (e.g. 1000).', array('%name' => $element['#title'])));
+ }
+}
diff --git a/better_exposed_filters_exposed_form_plugin.inc b/better_exposed_filters_exposed_form_plugin.inc
index 68ca833..fdbdac2 100644
--- a/better_exposed_filters_exposed_form_plugin.inc
+++ b/better_exposed_filters_exposed_form_plugin.inc
@@ -214,6 +214,9 @@ Title Desc|Z -> A Leave the replacement value blank to remove an option al
// Used for date-based filters
$bef_datepicker = FALSE;
+ // Used for numeric filters.
+ $bef_slider = FALSE;
+
/*
* Check various filter types and determine what options are available
*/
@@ -244,6 +247,10 @@ Title Desc|Z -> A Leave the replacement value blank to remove an option al
$bef_datepicker = TRUE;
}
+ if ($filter instanceof views_handler_filter_numeric) {
+ $bef_slider = TRUE;
+ }
+
// All filters can use the default filter exposed by Views
$display_options = array('default' => t('Default select list'));
@@ -264,6 +271,10 @@ Title Desc|Z -> A Leave the replacement value blank to remove an option al
$display_options['bef_datepicker'] = t('jQuery UI Datepicker');
}
+ if ($bef_slider) {
+ $display_options['bef_slider'] = t('jQuery UI slider');
+ }
+
if ($bef_standard) {
// Less used BEF options, so put them last.
$display_options['bef_links'] = t('Links');
@@ -329,6 +340,73 @@ Title Desc|Z -> A Leave the replacement value blank to remove an option al
);
}
+ if ($bef_slider) {
+ $bef_options[$label]['more_options']['bef_slider_min'] = array(
+ '#type' => 'textfield',
+ '#title' => t('Range minimum'),
+ '#default_value' => $this->options['bef'][$label]['more_options']['bef_slider_min'],
+ '#bef_filter_id' => $label,
+ '#states' => array(
+ 'visible' => array(
+ ':input[name="exposed_form_options[bef][' . $label . '][bef_format]"]' => array('value' => 'bef_slider'),
+ ),
+ 'required' => array(
+ ':input[name="exposed_form_options[bef][' . $label . '][bef_format]"]' => array('value' => 'bef_slider'),
+ ),
+ ),
+ '#description' => t('The minimum allowed value for the jQuery range slider.'),
+ '#element_validate' => array('element_validate_integer', 'better_expose_filters_element_validate_slider_required'),
+ );
+ $bef_options[$label]['more_options']['bef_slider_max'] = array(
+ '#type' => 'textfield',
+ '#title' => t('Range maximum'),
+ '#default_value' => $this->options['bef'][$label]['more_options']['bef_slider_max'],
+ '#bef_filter_id' => $label,
+ '#states' => array(
+ 'visible' => array(
+ ':input[name="exposed_form_options[bef][' . $label . '][bef_format]"]' => array('value' => 'bef_slider'),
+ ),
+ 'required' => array(
+ ':input[name="exposed_form_options[bef][' . $label . '][bef_format]"]' => array('value' => 'bef_slider'),
+ ),
+ ),
+ '#description' => t('The maximum allowed value for the jQuery range slider.'),
+ '#element_validate' => array('element_validate_integer', 'better_expose_filters_element_validate_slider_required'),
+ );
+ $bef_options[$label]['more_options']['bef_slider_animate'] = array(
+ '#type' => 'textfield',
+ '#title' => t('Animate'),
+ '#default_value' => $this->options['bef'][$label]['more_options']['bef_slider_animate'],
+ '#bef_filter_id' => $label,
+ '#states' => array(
+ 'visible' => array(
+ ':input[name="exposed_form_options[bef][' . $label . '][bef_format]"]' => array('value' => 'bef_slider'),
+ ),
+ ),
+ '#description' => t('Whether to slide handle smoothly when user click outside handle on the bar. Allowed values are "slow", "normal", "fast" or the number of milliseconds to run the animation (e.g. 1000). If left blank, there will be no animation, the slider will just jump to the new value instantly.'),
+ '#element_validate' => array('better_expose_filters_element_validate_slider_animate'),
+ );
+ $bef_options[$label]['more_options']['bef_slider_orientation'] = array(
+ '#type' => 'select',
+ '#title' => t('Orientation'),
+ '#options' => array(
+ 'horizontal' => t('Horizontal'),
+ 'vertical' => t('Vertical'),
+ ),
+ '#default_value' => $this->options['bef'][$label]['more_options']['bef_slider_orientation'],
+ '#bef_filter_id' => $label,
+ '#states' => array(
+ 'visible' => array(
+ ':input[name="exposed_form_options[bef][' . $label . '][bef_format]"]' => array('value' => 'bef_slider'),
+ ),
+ 'required' => array(
+ ':input[name="exposed_form_options[bef][' . $label . '][bef_format]"]' => array('value' => 'bef_slider'),
+ ),
+ ),
+ '#description' => t('The orientation of the jQuery range slider.'),
+ );
+ }
+
// Allow any filter to be moved into the secondary options fieldset
$bef_options[$label]['more_options']['is_secondary'] = array(
'#type' => 'checkbox',
@@ -419,10 +497,16 @@ Title Desc|Z -> A Leave the replacement value blank to remove an option al
// If we have no visible elements, we don't show the Apply button.
$show_apply = FALSE;
- // We only want to add the datepicker code once.
- // TODO: Does this need to be moved to a behavior.attach()?
- $add_datepicker = FALSE;
- $datepicker_format = '';
+ // Collect BEF's Javascript settings, add to Drupal.settings at the end.
+ $bef_add_js = FALSE;
+ $bef_js = array(
+ 'datepicker' => FALSE,
+ 'slider' => FALSE,
+ 'settings' => array(),
+ );
+
+ // Some widgets will require additional CSS.
+ $bef_add_css = FALSE;
// Grab BEF settings
$settings = $this->_bef_get_settings();
@@ -699,7 +783,9 @@ Title Desc|Z -> A Leave the replacement value blank to remove an option al
switch ($options['bef_format']) {
case 'bef_datepicker':
$show_apply = TRUE;
- $add_datepicker = TRUE;
+ $bef_add_js = TRUE;
+ $bef_js['datepicker'] = TRUE;
+ $bef_js['datepicker_options'] = array();
if ((
// Single Date API-based input element
@@ -782,7 +868,7 @@ Title Desc|Z -> A Leave the replacement value blank to remove an option al
$form[$field_id]['min']['#attributes']['class'][] = 'bef-datepicker';
$form[$field_id]['max']['#attributes']['class'][] = 'bef-datepicker';
}
- $datepicker_format = str_replace(array_keys($convert), array_values($convert), $format);
+ $bef_js['datepicker_options']['dateformat'] = str_replace(array_keys($convert), array_values($convert), $format);
}
else {
/*
@@ -804,6 +890,23 @@ Title Desc|Z -> A Leave the replacement value blank to remove an option al
}
break;
+ case 'bef_slider':
+ $show_apply = TRUE;
+ $bef_add_js = TRUE;
+ $bef_add_css = TRUE;
+ $bef_js['slider'] = TRUE;
+
+ // Add js options for the slider for this filter.
+ $bef_js['slider_options'][$field_id] = array(
+ 'min' => $options['more_options']['bef_slider_min'],
+ 'max' => $options['more_options']['bef_slider_max'],
+ 'animate' => $options['more_options']['bef_slider_animate'],
+ 'orientation' => $options['more_options']['bef_slider_orientation'],
+ 'id' => drupal_html_id($field_id),
+ 'viewId' => $form['#id'],
+ );
+ break;
+
case 'bef_links':
$show_apply = TRUE;
@@ -955,9 +1058,7 @@ Title Desc|Z -> A Leave the replacement value blank to remove an option al
}
if ($options['more_options']['bef_select_all_none'] || $options['more_options']['bef_select_all_none_nested']) {
- // Add BEF's JavaScript to the mix to handle select all/none functionality
- // @TODO: move to #attached?
- drupal_add_js(drupal_get_path('module', 'better_exposed_filters') . '/better_exposed_filters.js');
+ $bef_add_js = TRUE;
if ($options['more_options']['bef_select_all_none']) {
$form[$field_id]['#bef_select_all_none'] = TRUE;
@@ -1009,18 +1110,21 @@ Title Desc|Z -> A Leave the replacement value blank to remove an option al
$form['submit']['#access'] = $show_apply;
$form['reset']['#access'] = $show_apply;
- // Only add datepicker code once
- drupal_add_js(array('better_exposed_filters' => array('bef_datepicker' => FALSE)), 'setting');
- if ($add_datepicker) {
- // Add Datepicker JS and CSS
- drupal_add_library('system', 'ui.datepicker');
- drupal_add_js(drupal_get_path('module', 'better_exposed_filters') . '/better_exposed_filters.js');
+ // Add Javascript as needed.
+ if ($bef_add_js) {
+ // Add jQuery UI library code as needed.
+ if ($bef_js['datepicker']) {
+ drupal_add_library('system', 'ui.datepicker');
+ }
+ if ($bef_js['slider']) {
+ drupal_add_library('system', 'ui.slider');
+ }
- // Trigger datepicker in better_exposed_filters.js
- drupal_add_js(array('better_exposed_filters' => array(
- 'bef_datepicker' => TRUE,
- 'bef_dateformat' => $datepicker_format,
- )), 'setting');
+ drupal_add_js(array('better_exposed_filters' => $bef_js), 'setting');
+ drupal_add_js(drupal_get_path('module', 'better_exposed_filters') . '/better_exposed_filters.js');
+ }
+ if ($bef_add_css) {
+ drupal_add_css(drupal_get_path('module', 'better_exposed_filters') . '/better_exposed_filters.css');
}
// Check for secondary elements