summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorxjm2015-10-05 22:03:30 (GMT)
committerxjm2015-10-05 22:08:24 (GMT)
commitd5c827e43c567c771c4d91aa0afda87bdbebf670 (patch)
tree7a6ebc529f244eecf7502bf6e13cbee74ef48fde
parent89c69496c6fc71c1291e67c40276098b7f222a8c (diff)
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
-rw-r--r--core/modules/views_ui/css/views_ui.admin.theme.css8
-rw-r--r--core/modules/views_ui/js/views-admin.js76
-rw-r--r--core/modules/views_ui/src/Form/Ajax/AddHandler.php43
-rw-r--r--core/modules/views_ui/views_ui.libraries.yml1
4 files changed, 63 insertions, 65 deletions
diff --git a/core/modules/views_ui/css/views_ui.admin.theme.css b/core/modules/views_ui/css/views_ui.admin.theme.css
index 5dc2e4d..190345b 100644
--- a/core/modules/views_ui/css/views_ui.admin.theme.css
+++ b/core/modules/views_ui/css/views_ui.admin.theme.css
@@ -560,20 +560,20 @@ td.group-title {
/* The contents of the popup dialog on the views edit form. */
.views-filterable-options .form-type-checkbox {
- border: 1px solid #ccc;
padding: 5px 8px;
border-top: none;
}
.views-filterable-options {
border-top: 1px solid #ccc;
}
-.views-filterable-options .filterable-option.odd .form-type-checkbox {
- background-color: #f3f4ee;
-}
.filterable-option .form-item {
margin-bottom: 0;
margin-top: 0;
}
+.views-filterable-options .filterable-option .title {
+ font-weight: bold;
+ cursor: pointer;
+}
.views-filterable-options .form-type-checkbox .description {
margin-top: 0;
margin-bottom: 0;
diff --git a/core/modules/views_ui/js/views-admin.js b/core/modules/views_ui/js/views-admin.js
index 28e2e96..8e35c47 100644
--- a/core/modules/views_ui/js/views-admin.js
+++ b/core/modules/views_ui/js/views-admin.js
@@ -291,7 +291,7 @@
*/
Drupal.viewsUi.AddItemForm.prototype.handleCheck = function (event) {
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.
if ($target.is(':checked')) {
this.$selected_div.show().css('display', 'block');
@@ -443,11 +443,18 @@
*/
this.$form = $form;
- /**
- * Add a keyup handler to the search box.
- */
- this.$searchBox = this.$form.find('[data-drupal-selector="edit-override-controls-options-search"]');
- this.$searchBox.on('keyup', $.proxy(this.handleKeyup, this));
+ // Click on the title checks the box.
+ this.$form.on('click', 'td.title', function (event) {
+ var $target = $(event.currentTarget);
+ $target.closest('tr').find('input').trigger('click');
+ });
+
+ 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
@@ -455,8 +462,6 @@
*/
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.
this.$searchBox.on('keypress', function (event) {
if (event.which === 13) {
@@ -486,7 +491,7 @@
for (var i = 0; i < length; i++) {
$option = $($allOptions[i]);
$label = $option.find('label');
- $description = $option.find('div.description');
+ $description = $option.find('.description');
options[i] = {
// Search on the lowercase version of the label text + description.
searchText: $label.text().toLowerCase() + " " + $description.text().toLowerCase(),
@@ -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.
*
* @param {jQuery.Event} event
- * The keyup event.
+ * The formUpdated event.
*/
- handleKeyup: function (event) {
- var found;
- var option;
- var zebraClass;
-
+ handleFilter: function (event) {
// Determine the user's search query. The search text has been converted
// to lowercase.
var search = this.$searchBox.val().toLowerCase();
var words = search.split(' ');
- var wordsLength = words.length;
-
- // Start the counter for restriping rows.
- var zebraCounter = 0;
+ // Get selected Group
+ var group = this.$controlGroup.val();
// Search through the search texts in the form for matching text.
- var length = this.options.length;
- for (var i = 0; i < length; i++) {
- // Use a local variable for the option being searched, for performance.
- option = this.options[i];
- found = true;
+ this.options.forEach(function (option) {
+ function hasWord(word) {
+ return option.searchText.indexOf(word) !== -1;
+ }
+
+ var found = true;
// Each word in the search string has to match the item in order for the
// item to be shown.
- for (var j = 0; j < wordsLength; j++) {
- if (option.searchText.indexOf(words[j]) === -1) {
- found = false;
- }
+ if (search) {
+ found = words.every(hasWord);
}
- 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');
}
});
diff --git a/core/modules/views_ui/src/Form/Ajax/AddHandler.php b/core/modules/views_ui/src/Form/Ajax/AddHandler.php
index 56cb435..0a74996 100644
--- a/core/modules/views_ui/src/Form/Ajax/AddHandler.php
+++ b/core/modules/views_ui/src/Form/Ajax/AddHandler.php
@@ -107,11 +107,15 @@ class AddHandler extends ViewsFormBase {
$form['options']['name'] = array(
'#prefix' => '<div class="views-radio-box form-checkboxes views-filterable-options">',
'#suffix' => '</div>',
- '#tree' => TRUE,
- '#default_value' => 'all',
+ '#type' => 'tableselect',
+ '#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();
foreach ($options as $key => $option) {
$group = preg_replace('/[^a-z0-9]/', '-', strtolower($option['group']));
@@ -137,23 +141,22 @@ class AddHandler extends ViewsFormBase {
foreach ($grouped_options as $group => $group_options) {
foreach ($group_options as $key => $option) {
- $form['options']['name'][$key] = array(
- '#type' => 'checkbox',
- '#title' => $this->t('@group: @field', array('@group' => $option['group'], '@field' => $option['title'])),
- '#description' => $option['help'],
- '#return_value' => $key,
- '#prefix' => "<div class='filterable-option'>",
- '#suffix' => '</div>',
- '#states' => array(
- 'visible' => array(
- array(
- ':input[name="override[controls][group]"]' => array('value' => 'all'),
- ),
- array(
- ':input[name="override[controls][group]"]' => array('value' => $group),
- ),
- )
- )
+ $form['options']['name']['#options'][$key] = array(
+ '#attributes' => array(
+ 'class' => array('filterable-option', $group),
+ ),
+ 'title' => array(
+ 'data' => array(
+ '#title' => $option['title'],
+ '#plain_text' => $option['title'],
+ ),
+ 'class' => array('title'),
+ ),
+ 'group' => $option['group'],
+ 'help' => array(
+ 'data' => $option['help'],
+ 'class' => array('description'),
+ ),
);
}
}
diff --git a/core/modules/views_ui/views_ui.libraries.yml b/core/modules/views_ui/views_ui.libraries.yml
index 112aa03..44b6832 100644
--- a/core/modules/views_ui/views_ui.libraries.yml
+++ b/core/modules/views_ui/views_ui.libraries.yml
@@ -10,6 +10,7 @@ views_ui.admin:
- core/drupalSettings
- core/jquery.once
- core/jquery.form
+ - core/drupal.form
- core/drupal.ajax
- core/drupal.dropbutton
- views/views.ajax