Commit d5c827e4 authored by xjm's avatar xjm

Issue #1832862 by jerdavis, nlisgo, Zekvyrin, Maouna, nod_, royal121,...

Issue #1832862 by jerdavis, nlisgo, Zekvyrin, Maouna, nod_, royal121, tadityar, Lendude, dawehner, tim.plunkett, B_man, damiankloip, ohthehugemanatee, YesCT, Bojhan, xjm, dajjen, yoroy, lisarex, penyaskito, metzlerd, veronicanerak: Make views add field scannable
parent 89c69496
...@@ -560,20 +560,20 @@ td.group-title { ...@@ -560,20 +560,20 @@ td.group-title {
/* The contents of the popup dialog on the views edit form. */ /* The contents of the popup dialog on the views edit form. */
.views-filterable-options .form-type-checkbox { .views-filterable-options .form-type-checkbox {
border: 1px solid #ccc;
padding: 5px 8px; padding: 5px 8px;
border-top: none; border-top: none;
} }
.views-filterable-options { .views-filterable-options {
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
} }
.views-filterable-options .filterable-option.odd .form-type-checkbox {
background-color: #f3f4ee;
}
.filterable-option .form-item { .filterable-option .form-item {
margin-bottom: 0; margin-bottom: 0;
margin-top: 0; margin-top: 0;
} }
.views-filterable-options .filterable-option .title {
font-weight: bold;
cursor: pointer;
}
.views-filterable-options .form-type-checkbox .description { .views-filterable-options .form-type-checkbox .description {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
......
...@@ -291,7 +291,7 @@ ...@@ -291,7 +291,7 @@
*/ */
Drupal.viewsUi.AddItemForm.prototype.handleCheck = function (event) { Drupal.viewsUi.AddItemForm.prototype.handleCheck = function (event) {
var $target = $(event.target); var $target = $(event.target);
var label = $.trim($target.next().html()); var label = $.trim($target.closest('td').next().html());
// Add/remove the checked item to the list. // Add/remove the checked item to the list.
if ($target.is(':checked')) { if ($target.is(':checked')) {
this.$selected_div.show().css('display', 'block'); this.$selected_div.show().css('display', 'block');
...@@ -443,11 +443,18 @@ ...@@ -443,11 +443,18 @@
*/ */
this.$form = $form; this.$form = $form;
/** // Click on the title checks the box.
* Add a keyup handler to the search box. this.$form.on('click', 'td.title', function (event) {
*/ var $target = $(event.currentTarget);
this.$searchBox = this.$form.find('[data-drupal-selector="edit-override-controls-options-search"]'); $target.closest('tr').find('input').trigger('click');
this.$searchBox.on('keyup', $.proxy(this.handleKeyup, this)); });
var searchBoxSelector = '[data-drupal-selector="edit-override-controls-options-search"]';
var controlGroupSelector = '[data-drupal-selector="edit-override-controls-group"]';
this.$form.on('formUpdated', searchBoxSelector + ',' + controlGroupSelector, $.proxy(this.handleFilter, this));
this.$searchBox = this.$form.find(searchBoxSelector);
this.$controlGroup = this.$form.find(controlGroupSelector);
/** /**
* Get a list of option labels and their corresponding divs and maintain it * Get a list of option labels and their corresponding divs and maintain it
...@@ -455,8 +462,6 @@ ...@@ -455,8 +462,6 @@
*/ */
this.options = this.getOptions(this.$form.find('.filterable-option')); this.options = this.getOptions(this.$form.find('.filterable-option'));
// Restripe on initial loading.
this.handleKeyup();
// Trap the ENTER key in the search box so that it doesn't submit the form. // Trap the ENTER key in the search box so that it doesn't submit the form.
this.$searchBox.on('keypress', function (event) { this.$searchBox.on('keypress', function (event) {
if (event.which === 13) { if (event.which === 13) {
...@@ -486,7 +491,7 @@ ...@@ -486,7 +491,7 @@
for (var i = 0; i < length; i++) { for (var i = 0; i < length; i++) {
$option = $($allOptions[i]); $option = $($allOptions[i]);
$label = $option.find('label'); $label = $option.find('label');
$description = $option.find('div.description'); $description = $option.find('.description');
options[i] = { options[i] = {
// Search on the lowercase version of the label text + description. // Search on the lowercase version of the label text + description.
searchText: $label.text().toLowerCase() + " " + $description.text().toLowerCase(), searchText: $label.text().toLowerCase() + " " + $description.text().toLowerCase(),
...@@ -500,52 +505,41 @@ ...@@ -500,52 +505,41 @@
}, },
/** /**
* Keyup handler for the search box that hides or shows the relevant * Filter handler for the search box and type select that hides or shows the relevant
* options. * options.
* *
* @param {jQuery.Event} event * @param {jQuery.Event} event
* The keyup event. * The formUpdated event.
*/ */
handleKeyup: function (event) { handleFilter: function (event) {
var found;
var option;
var zebraClass;
// Determine the user's search query. The search text has been converted // Determine the user's search query. The search text has been converted
// to lowercase. // to lowercase.
var search = this.$searchBox.val().toLowerCase(); var search = this.$searchBox.val().toLowerCase();
var words = search.split(' '); var words = search.split(' ');
var wordsLength = words.length; // Get selected Group
var group = this.$controlGroup.val();
// Start the counter for restriping rows.
var zebraCounter = 0;
// Search through the search texts in the form for matching text. // Search through the search texts in the form for matching text.
var length = this.options.length; this.options.forEach(function (option) {
for (var i = 0; i < length; i++) { function hasWord(word) {
// Use a local variable for the option being searched, for performance. return option.searchText.indexOf(word) !== -1;
option = this.options[i]; }
found = true;
var found = true;
// Each word in the search string has to match the item in order for the // Each word in the search string has to match the item in order for the
// item to be shown. // item to be shown.
for (var j = 0; j < wordsLength; j++) { if (search) {
if (option.searchText.indexOf(words[j]) === -1) { found = words.every(hasWord);
found = false;
}
}
if (found) {
zebraClass = (zebraCounter % 2) ? 'odd' : 'even';
// Show the checkbox row, and restripe it.
option.$div.removeClass('even odd');
option.$div.addClass(zebraClass);
option.$div.show();
zebraCounter++;
}
else {
// The search string wasn't found; hide this item.
option.$div.hide();
} }
if (found && group !== 'all') {
found = option.$div.hasClass(group);
} }
option.$div.toggle(found);
});
// Adapt dialog to content size.
$(event.target).trigger('dialogContentResize');
} }
}); });
......
...@@ -107,11 +107,15 @@ public function buildForm(array $form, FormStateInterface $form_state) { ...@@ -107,11 +107,15 @@ public function buildForm(array $form, FormStateInterface $form_state) {
$form['options']['name'] = array( $form['options']['name'] = array(
'#prefix' => '<div class="views-radio-box form-checkboxes views-filterable-options">', '#prefix' => '<div class="views-radio-box form-checkboxes views-filterable-options">',
'#suffix' => '</div>', '#suffix' => '</div>',
'#tree' => TRUE, '#type' => 'tableselect',
'#default_value' => 'all', '#header' => array(
'title' => $this->t('Title'),
'group' => $this->t('Category'),
'help' => $this->t('Description'),
),
'#js_select' => FALSE,
); );
// Group options first to simplify the usage of #states.
$grouped_options = array(); $grouped_options = array();
foreach ($options as $key => $option) { foreach ($options as $key => $option) {
$group = preg_replace('/[^a-z0-9]/', '-', strtolower($option['group'])); $group = preg_replace('/[^a-z0-9]/', '-', strtolower($option['group']));
...@@ -137,23 +141,22 @@ public function buildForm(array $form, FormStateInterface $form_state) { ...@@ -137,23 +141,22 @@ public function buildForm(array $form, FormStateInterface $form_state) {
foreach ($grouped_options as $group => $group_options) { foreach ($grouped_options as $group => $group_options) {
foreach ($group_options as $key => $option) { foreach ($group_options as $key => $option) {
$form['options']['name'][$key] = array( $form['options']['name']['#options'][$key] = array(
'#type' => 'checkbox', '#attributes' => array(
'#title' => $this->t('@group: @field', array('@group' => $option['group'], '@field' => $option['title'])), 'class' => array('filterable-option', $group),
'#description' => $option['help'], ),
'#return_value' => $key, 'title' => array(
'#prefix' => "<div class='filterable-option'>", 'data' => array(
'#suffix' => '</div>', '#title' => $option['title'],
'#states' => array( '#plain_text' => $option['title'],
'visible' => array( ),
array( 'class' => array('title'),
':input[name="override[controls][group]"]' => array('value' => 'all'),
), ),
array( 'group' => $option['group'],
':input[name="override[controls][group]"]' => array('value' => $group), 'help' => array(
'data' => $option['help'],
'class' => array('description'),
), ),
)
)
); );
} }
} }
......
...@@ -10,6 +10,7 @@ views_ui.admin: ...@@ -10,6 +10,7 @@ views_ui.admin:
- core/drupalSettings - core/drupalSettings
- core/jquery.once - core/jquery.once
- core/jquery.form - core/jquery.form
- core/drupal.form
- core/drupal.ajax - core/drupal.ajax
- core/drupal.dropbutton - core/drupal.dropbutton
- views/views.ajax - views/views.ajax
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment