Unverified Commit b022734b authored by larowlan's avatar larowlan

Issue #2917594 by kevin.dutra, robin.ingelbrecht, jwkovell, Lendude: Add...

Issue #2917594 by kevin.dutra, robin.ingelbrecht, jwkovell, Lendude: Add support for HTML5 placeholder in views exposed filters
parent 694b95b9
......@@ -73,10 +73,31 @@ views.filter.string:
required:
type: boolean
label: 'Required'
placeholder:
type: string
label: 'Placeholder'
value:
type: string
label: 'Value'
views.filter.numeric:
type: views_filter
label: 'Numeric'
mapping:
expose:
type: mapping
label: 'Exposed'
mapping:
min_placeholder:
type: string
label: 'Min placeholder'
max_placeholder:
type: string
label: 'Max placeholder'
placeholder:
type: string
label: 'Placeholder'
views.filter_value.numeric:
type: mapping
label: 'Numeric'
......
......@@ -26,9 +26,69 @@ protected function defineOptions() {
],
];
$options['expose']['contains']['placeholder'] = ['default' => ''];
$options['expose']['contains']['min_placeholder'] = ['default' => ''];
$options['expose']['contains']['max_placeholder'] = ['default' => ''];
return $options;
}
/**
* {@inheritdoc}
*/
public function defaultExposeOptions() {
parent::defaultExposeOptions();
$this->options['expose']['min_placeholder'] = NULL;
$this->options['expose']['max_placeholder'] = NULL;
$this->options['expose']['placeholder'] = NULL;
}
/**
* {@inheritdoc}
*/
public function buildExposeForm(&$form, FormStateInterface $form_state) {
parent::buildExposeForm($form, $form_state);
$form['expose']['min_placeholder'] = [
'#type' => 'textfield',
'#default_value' => $this->options['expose']['min_placeholder'],
'#title' => $this->t('Min placeholder'),
'#size' => 40,
'#description' => $this->t('Hint text that appears inside the Min field when empty.'),
];
$form['expose']['max_placeholder'] = [
'#type' => 'textfield',
'#default_value' => $this->options['expose']['max_placeholder'],
'#title' => $this->t('Max placeholder'),
'#size' => 40,
'#description' => $this->t('Hint text that appears inside the Max field when empty.'),
];
// Setup #states for all operators with two value.
$states = [[':input[name="options[expose][use_operator]"]' => ['checked' => TRUE]]];
foreach ($this->operatorValues(2) as $operator) {
$states[] = [
':input[name="options[operator]"]' => ['value' => $operator],
];
}
$form['expose']['min_placeholder']['#states']['visible'] = $states;
$form['expose']['max_placeholder']['#states']['visible'] = $states;
$form['expose']['placeholder'] = [
'#type' => 'textfield',
'#default_value' => $this->options['expose']['placeholder'],
'#title' => $this->t('Placeholder'),
'#size' => 40,
'#description' => $this->t('Hint text that appears inside the field when empty.'),
];
// Setup #states for all operators with one value.
$form['expose']['placeholder']['#states']['visible'] = [[':input[name="options[expose][use_operator]"]' => ['checked' => TRUE]]];
foreach ($this->operatorValues(1) as $operator) {
$form['expose']['placeholder']['#states']['visible'][] = [
':input[name="options[operator]"]' => ['value' => $operator],
];
}
}
public function operators() {
$operators = [
'<' => [
......@@ -165,6 +225,9 @@ protected function valueForm(&$form, FormStateInterface $form_state) {
'#size' => 30,
'#default_value' => $this->value['value'],
];
if (!empty($this->options['expose']['placeholder'])) {
$form['value']['value']['#attributes']['placeholder'] = $this->options['expose']['placeholder'];
}
// Setup #states for all operators with one value.
foreach ($this->operatorValues(1) as $operator) {
$form['value']['value']['#states']['visible'][] = [
......@@ -185,6 +248,9 @@ protected function valueForm(&$form, FormStateInterface $form_state) {
'#size' => 30,
'#default_value' => $this->value['value'],
];
if (!empty($this->options['expose']['placeholder'])) {
$form['value']['#attributes']['placeholder'] = $this->options['expose']['placeholder'];
}
if ($exposed && !isset($user_input[$identifier])) {
$user_input[$identifier] = $this->value['value'];
$form_state->setUserInput($user_input);
......@@ -197,14 +263,20 @@ protected function valueForm(&$form, FormStateInterface $form_state) {
'#title' => !$exposed ? $this->t('Min') : $this->exposedInfo()['label'],
'#size' => 30,
'#default_value' => $this->value['min'],
'#description' => !$exposed ? '' : $this->exposedInfo()['description']
'#description' => !$exposed ? '' : $this->exposedInfo()['description'],
];
if (!empty($this->options['expose']['min_placeholder'])) {
$form['value']['min']['#attributes']['placeholder'] = $this->options['expose']['min_placeholder'];
}
$form['value']['max'] = [
'#type' => 'textfield',
'#title' => !$exposed ? $this->t('And max') : $this->t('And'),
'#size' => 30,
'#default_value' => $this->value['max'],
];
if (!empty($this->options['expose']['max_placeholder'])) {
$form['value']['max']['#attributes']['placeholder'] = $this->options['expose']['max_placeholder'];
}
if ($which == 'all') {
$states = [];
// Setup #states for all operators with two values.
......
......@@ -27,10 +27,33 @@ protected function defineOptions() {
$options = parent::defineOptions();
$options['expose']['contains']['required'] = ['default' => FALSE];
$options['expose']['contains']['placeholder'] = ['default' => ''];
return $options;
}
/**
* {@inheritdoc}
*/
public function defaultExposeOptions() {
parent::defaultExposeOptions();
$this->options['expose']['placeholder'] = NULL;
}
/**
* {@inheritdoc}
*/
public function buildExposeForm(&$form, FormStateInterface $form_state) {
parent::buildExposeForm($form, $form_state);
$form['expose']['placeholder'] = [
'#type' => 'textfield',
'#default_value' => $this->options['expose']['placeholder'],
'#title' => $this->t('Placeholder'),
'#size' => 40,
'#description' => $this->t('Hint text that appears inside the field when empty.'),
];
}
/**
* This kind of construct makes it relatively easy for a child class
* to add or remove functionality by overriding this function and
......@@ -211,6 +234,9 @@ protected function valueForm(&$form, FormStateInterface $form_state) {
'#size' => 30,
'#default_value' => $this->value,
];
if (!empty($this->options['expose']['placeholder'])) {
$form['value']['#attributes']['placeholder'] = $this->options['expose']['placeholder'];
}
$user_input = $form_state->getUserInput();
if ($exposed && !isset($user_input[$identifier])) {
$user_input[$identifier] = $this->value;
......
<?php
/**
* @file
* Test fixture.
*/
use Drupal\Core\Database\Database;
use Drupal\Core\Serialization\Yaml;
$connection = Database::getConnection();
$connection->insert('config')
->fields([
'collection' => '',
'name' => 'views.view.placeholder_text_test',
'data' => serialize(Yaml::decode(file_get_contents('core/modules/views/tests/fixtures/update/views.view.placeholder_text_test.yml'))),
])
->execute();
langcode: en
status: true
dependencies:
config:
- core.entity_view_mode.node.teaser
module:
- node
- user
id: placeholder_text_test
label: 'Placeholder text test'
module: views
description: ''
tag: ''
base_table: node_field_data
base_field: nid
core: 8.x
display:
default:
display_plugin: default
id: default
display_title: Master
position: 0
display_options:
access:
type: perm
options:
perm: 'access content'
cache:
type: tag
options: { }
query:
type: views_query
options:
disable_sql_rewrite: false
distinct: false
replica: false
query_comment: ''
query_tags: { }
exposed_form:
type: basic
options:
submit_button: Apply
reset_button: false
reset_button_label: Reset
exposed_sorts_label: 'Sort by'
expose_sort_order: true
sort_asc_label: Asc
sort_desc_label: Desc
pager:
type: mini
options:
items_per_page: 10
offset: 0
id: 0
total_pages: null
expose:
items_per_page: false
items_per_page_label: 'Items per page'
items_per_page_options: '5, 10, 25, 50'
items_per_page_options_all: false
items_per_page_options_all_label: '- All -'
offset: false
offset_label: Offset
tags:
previous: ‹‹
next: ››
style:
type: table
options:
grouping: { }
row_class: ''
default_row_class: true
override: true
sticky: false
caption: ''
summary: ''
description: ''
columns:
title: title
info:
title:
sortable: false
default_sort_order: asc
align: ''
separator: ''
empty_column: false
responsive: ''
default: '-1'
empty_table: false
row:
type: 'entity:node'
options:
view_mode: teaser
fields:
title:
id: title
table: node_field_data
field: title
entity_type: node
entity_field: title
label: ''
alter:
alter_text: false
make_link: false
absolute: false
trim: false
word_boundary: false
ellipsis: false
strip_tags: false
html: false
hide_empty: false
empty_zero: false
settings:
link_to_entity: true
plugin_id: field
relationship: none
group_type: group
admin_label: ''
exclude: false
element_type: ''
element_class: ''
element_label_type: ''
element_label_class: ''
element_label_colon: true
element_wrapper_type: ''
element_wrapper_class: ''
element_default_classes: true
empty: ''
hide_alter_empty: true
click_sort_column: value
type: string
group_column: value
group_columns: { }
group_rows: true
delta_limit: 0
delta_offset: 0
delta_reversed: false
delta_first_last: false
multi_type: separator
separator: ', '
field_api_classes: false
filters:
title:
id: title
table: node_field_data
field: title
relationship: none
group_type: group
admin_label: ''
operator: '='
value: ''
group: 1
exposed: true
expose:
operator_id: title_op
label: Title
description: ''
use_operator: false
operator: title_op
identifier: title
required: false
remember: false
multiple: false
remember_roles:
authenticated: authenticated
anonymous: '0'
administrator: '0'
is_grouped: false
group_info:
label: ''
description: ''
identifier: ''
optional: true
widget: select
multiple: false
remember: false
default_group: All
default_group_multiple: { }
group_items: { }
entity_type: node
entity_field: title
plugin_id: string
created:
id: created
table: node_field_data
field: created
relationship: none
group_type: group
admin_label: ''
operator: '='
value:
min: ''
max: ''
value: ''
type: date
group: 1
exposed: true
expose:
operator_id: created_op
label: 'Authored on'
description: ''
use_operator: false
operator: created_op
identifier: created
required: false
remember: false
multiple: false
remember_roles:
authenticated: authenticated
anonymous: '0'
administrator: '0'
is_grouped: false
group_info:
label: ''
description: ''
identifier: ''
optional: true
widget: select
multiple: false
remember: false
default_group: All
default_group_multiple: { }
group_items: { }
entity_type: node
entity_field: created
plugin_id: date
sorts: { }
title: 'Placeholder text test'
header: { }
footer: { }
empty: { }
relationships: { }
arguments: { }
display_extenders: { }
filter_groups:
operator: AND
groups:
1: AND
cache_metadata:
max-age: 0
contexts:
- 'languages:language_content'
- 'languages:language_interface'
- url
- url.query_args
- 'user.node_grants:view'
- user.permissions
tags: { }
page_1:
display_plugin: page
id: page_1
display_title: Page
position: 1
display_options:
display_extenders: { }
path: placeholder-text-test
cache_metadata:
max-age: 0
contexts:
- 'languages:language_content'
- 'languages:language_interface'
- url
- url.query_args
- 'user.node_grants:view'
- user.permissions
tags: { }
langcode: en
status: true
dependencies:
config:
- core.entity_view_mode.node.teaser
module:
- node
id: test_filter_placeholder_text
label: 'Test filter placeholder text'
module: views
description: ''
tag: ''
base_table: node_field_data
base_field: nid
core: 8.x
display:
default:
display_plugin: default
id: default
display_title: Master
position: 0
display_options:
access:
type: none
options: { }
cache:
type: tag
options: { }
query:
type: views_query
options:
disable_sql_rewrite: false
distinct: false
replica: false
query_comment: ''
query_tags: { }
exposed_form:
type: basic
options:
submit_button: Apply
reset_button: false
reset_button_label: Reset
exposed_sorts_label: 'Sort by'
expose_sort_order: true
sort_asc_label: Asc
sort_desc_label: Desc
pager:
type: some
options:
items_per_page: 10
offset: 0
style:
type: table
options:
grouping: { }
row_class: ''
default_row_class: true
override: true
sticky: false
caption: ''
summary: ''
description: ''
columns:
title: title
info:
title:
sortable: false
default_sort_order: asc
align: ''
separator: ''
empty_column: false
responsive: ''
default: '-1'
empty_table: false
row:
type: 'entity:node'
options:
view_mode: teaser
fields:
title:
id: title
table: node_field_data
field: title
entity_type: node
entity_field: title
label: ''
alter:
alter_text: false
make_link: false
absolute: false
trim: false
word_boundary: false
ellipsis: false
strip_tags: false
html: false
hide_empty: false
empty_zero: false
settings:
link_to_entity: true
plugin_id: field
relationship: none
group_type: group
admin_label: ''
exclude: false
element_type: ''
element_class: ''
element_label_type: ''
element_label_class: ''
element_label_colon: true
element_wrapper_type: ''
element_wrapper_class: ''
element_default_classes: true
empty: ''
hide_alter_empty: true
click_sort_column: value
type: string
group_column: value
group_columns: { }
group_rows: true
delta_limit: 0
delta_offset: 0
delta_reversed: false
delta_first_last: false
multi_type: separator
separator: ', '
field_api_classes: false
filters:
title:
id: title
table: node_field_data
field: title
relationship: none
group_type: group
admin_label: ''
operator: '='
value: ''
group: 1
exposed: true
expose:
operator_id: title_op
label: Title
description: ''
use_operator: false
operator: title_op
identifier: title
required: false
remember: false
multiple: false
remember_roles:
authenticated: authenticated
anonymous: '0'
administrator: '0'
placeholder: ''
is_grouped: false
group_info:
label: ''
description: ''
identifier: ''
optional: true
widget: select
multiple: false
remember: false
default_group: All
default_group_multiple: { }
group_items: { }
entity_type: node
entity_field: title
plugin_id: string
title_1:
id: title_1
table: node_field_data
field: title
relationship: none
group_type: group
admin_label: ''
operator: '='
value: ''
group: 1
exposed: true
expose:
operator_id: title_1_op
label: Title
description: ''
use_operator: false
operator: title_1_op
identifier: title_with_placeholder
required: false
remember: false
multiple: false
remember_roles:
authenticated: authenticated
anonymous: '0'
administrator: '0'
placeholder: 'title placeholder'
is_grouped: false
group_info:
label: ''
description: ''
identifier: ''
optional: true
widget: select
multiple: false
remember: false
default_group: All
default_group_multiple: { }
group_items: { }
entity_type: node
entity_field: title
plugin_id: string
created:
id: created