Commit 5f05852e authored by alexpott's avatar alexpott

Issue #2329917 by lauriii, Manuel Garcia, davidhernandez, akalata, nathandao,...

Issue #2329917 by lauriii, Manuel Garcia, davidhernandez, akalata, nathandao, LewisNyman: Move views classes from preprocess to templates
parent a7e819e1
...@@ -9,6 +9,10 @@ ...@@ -9,6 +9,10 @@
* - view: The view object. * - view: The view object.
* - rows: The rendered view results. * - rows: The rendered view results.
* - options: The view plugin style options. * - options: The view plugin style options.
* - row_class_default: A flag indicating whether default classes should be
* used on rows.
* - col_class_default: A flag indicating whether default classes should be
* used on columns.
* - items: A list of grid items. Each item contains a list of rows or columns. * - items: A list of grid items. Each item contains a list of rows or columns.
* The order in what comes first (row or column) depends on which alignment * The order in what comes first (row or column) depends on which alignment
* type is chosen (horizontal or vertical). * type is chosen (horizontal or vertical).
...@@ -22,29 +26,53 @@ ...@@ -22,29 +26,53 @@
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
{%
set classes = [
'views-view-grid',
options.alignment,
'cols-' ~ options.columns,
'clearfix',
]
%}
{% if options.row_class_default %}
{%
set row_classes = [
'views-row',
options.alignment == 'horizontal' ? 'clearfix',
]
%}
{% endif %}
{% if options.col_class_default %}
{%
set col_classes = [
'views-col',
options.alignment == 'vertical' ? 'clearfix',
]
%}
{% endif %}
{% if title %} {% if title %}
<h3>{{ title }}</h3> <h3>{{ title }}</h3>
{% endif %} {% endif %}
<div{{ attributes }}> <div{{ attributes.addClass(classes) }}>
{% if options.alignment == 'horizontal' %} {% if options.alignment == 'horizontal' %}
{% for row in items %} {% for row in items %}
<div{{ row.attributes }}> <div{{ row.attributes.addClass(row_classes, options.row_class_default ? 'row-' ~ loop.index) }}>
{% for column in row.content %} {% for column in row.content %}
<div{{ column.attributes }}> <div{{ column.attributes.addClass(col_classes, options.col_class_default ? 'col-' ~ loop.index) }}>
{{ column.content }} {{ column.content }}
</div> </div>
{% endfor %}
</div>
{% endfor %} {% endfor %}
</div> {% else %}
{% endfor %} {% for column in items %}
{% else %} <div{{ column.attributes.addClass(col_classes, options.col_class_default ? 'col-' ~ loop.index) }}>
{% for column in items %} {% for row in column.content %}
<div{{ column.attributes }}> <div{{ row.attributes.addClass(row_classes, options.row_class_default ? 'row-' ~ loop.index) }}>
{% for row in column.content %} {{ row.content }}
<div{{ row.attributes }}> </div>
{{ row.content }} {% endfor %}
</div> </div>
{% endfor %} {% endfor %}
</div> {% endif %}
{% endfor %}
{% endif %}
</div> </div>
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
* - count: The number of items this summary item represents. * - count: The number of items this summary item represents.
* - separator: A separator between each row. * - separator: A separator between each row.
* - attributes: HTML attributes for a row. * - attributes: HTML attributes for a row.
* - active: A flag indicating whether the row is active.
* - options: Flags indicating how each row should be displayed. This contains: * - options: Flags indicating how each row should be displayed. This contains:
* - count: A flag indicating whether the row's 'count' should be displayed. * - count: A flag indicating whether the row's 'count' should be displayed.
* - inline: A flag indicating whether the item should be wrapped in an inline * - inline: A flag indicating whether the item should be wrapped in an inline
...@@ -24,7 +25,7 @@ ...@@ -24,7 +25,7 @@
{% if row.separator -%} {% if row.separator -%}
{{ row.separator }} {{ row.separator }}
{%- endif %} {%- endif %}
<a href="{{ row.url }}"{{ row.attributes }}>{{ row.link }}</a> <a href="{{ row.url }}"{{ row.attributes.addClass(row.active ? 'active') }}>{{ row.link }}</a>
{% if options.count %} {% if options.count %}
({{ row.count }}) ({{ row.count }})
{% endif %} {% endif %}
......
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
* - link: The summary link text. * - link: The summary link text.
* - count: The number of items under this grouping. * - count: The number of items under this grouping.
* - attributes: HTML attributes to apply to each row. * - attributes: HTML attributes to apply to each row.
* - active: A flag indicating whtether the row is active.
* - options: Flags indicating how the summary should be displayed. * - options: Flags indicating how the summary should be displayed.
* This contains: * This contains:
* - count: A flag indicating whether the count should be displayed. * - count: A flag indicating whether the count should be displayed.
...@@ -22,7 +23,7 @@ ...@@ -22,7 +23,7 @@
<div class="item-list"> <div class="item-list">
<ul class="views-summary"> <ul class="views-summary">
{% for row in rows %} {% for row in rows %}
<li><a href="{{ row.url }}"{{ row.attributes }}>{{ row.link }}</a> <li><a href="{{ row.url }}"{{ row.attributes.addClass(row.active ? 'active') }}>{{ row.link }}</a>
{% if options.count %} {% if options.count %}
({{ row.count }}) ({{ row.count }})
{% endif %} {% endif %}
......
...@@ -11,6 +11,8 @@ ...@@ -11,6 +11,8 @@
* - attributes: Remaining HTML attributes for the element. * - attributes: Remaining HTML attributes for the element.
* - content: HTML classes to apply to each header cell, indexed by * - content: HTML classes to apply to each header cell, indexed by
* the header's key. * the header's key.
* - default_classes: A flag indicating whether default classes should be
* used.
* - caption_needed: Is the caption tag needed. * - caption_needed: Is the caption tag needed.
* - caption: The caption for this table. * - caption: The caption for this table.
* - accessibility_description: Extended description for the table details. * - accessibility_description: Extended description for the table details.
...@@ -20,13 +22,26 @@ ...@@ -20,13 +22,26 @@
* - columns: Row column items. Columns are keyed by column number. * - columns: Row column items. Columns are keyed by column number.
* - attributes: HTML classes to apply to each column. * - attributes: HTML classes to apply to each column.
* - content: The column content. * - content: The column content.
* - default_classes: A flag indicating whether default classes should be
* used.
* - responsive: A flag indicating whether table is responsive.
* - sticky: A flag indicating whether table header is sticky.
* *
* @see template_preprocess_views_view_table() * @see template_preprocess_views_view_table()
* *
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
<table{{ attributes }}> {%
set classes = [
'views-table',
'views-view-table',
'cols-' ~ header|length,
responsive ? 'responsive-enabled',
sticky ? 'sticky-enabled',
]
%}
<table{{ attributes.addClass(classes) }}>
{% if caption_needed %} {% if caption_needed %}
<caption> <caption>
{% if caption %} {% if caption %}
...@@ -49,8 +64,16 @@ ...@@ -49,8 +64,16 @@
{% if header %} {% if header %}
<thead> <thead>
<tr> <tr>
{% for column in header %} {% for key, column in header %}
<th{{ column.attributes }} scope="col"> {% if column.default_classes %}
{%
set column_classes = [
'views-field',
'views-field-' ~ fields[key],
]
%}
{% endif %}
<th{{ column.attributes.addClass(column_classes) }} scope="col">
{{ column.content }} {{ column.content }}
</th> </th>
{% endfor %} {% endfor %}
...@@ -60,8 +83,18 @@ ...@@ -60,8 +83,18 @@
<tbody> <tbody>
{% for row in rows %} {% for row in rows %}
<tr{{ row.attributes }}> <tr{{ row.attributes }}>
{% for column in row.columns %} {% for key, column in row.columns %}
<td{{ column.attributes }}> {% if column.default_classes %}
{%
set column_classes = [
'views-field'
]
%}
{% for field in column.fields %}
{% set column_classes = column_classes|merge(['views-field-' ~ field]) %}
{% endfor %}
{% endif %}
<td{{ column.attributes.addClass(column_classes) }}>
{{ column.content }} {{ column.content }}
</td> </td>
{% endfor %} {% endfor %}
......
...@@ -8,6 +8,9 @@ ...@@ -8,6 +8,9 @@
* - rows: A list of the view's row items. * - rows: A list of the view's row items.
* - attributes: The row's HTML attributes. * - attributes: The row's HTML attributes.
* - content: The row's content. * - content: The row's content.
* - view: The view object.
* - default_row_class: A flag indicating whether default classes should be
* used on rows.
* *
* @see template_preprocess_views_view_unformatted() * @see template_preprocess_views_view_unformatted()
* *
...@@ -18,7 +21,12 @@ ...@@ -18,7 +21,12 @@
<h3>{{ title }}</h3> <h3>{{ title }}</h3>
{% endif %} {% endif %}
{% for row in rows %} {% for row in rows %}
<div{{ row.attributes }}> {%
set row_classes = [
default_row_class ? 'views-row',
]
%}
<div{{ row.attributes.addClass(row_classes) }}>
{{ row.content }} {{ row.content }}
</div> </div>
{% endfor %} {% endfor %}
...@@ -4,14 +4,7 @@ ...@@ -4,14 +4,7 @@
* Default theme implementation for main view template. * Default theme implementation for main view template.
* *
* Available variables: * Available variables:
* - attributes: Remaining HTML attributes for the element including: * - attributes: Remaining HTML attributes for the element.
* - class: HTML classes that can be used to style contextually
* through CSS, including:
* - view
* - view-[css_name]
* - view-id-[view_name]
* - view-display-id-[display_name]
* - view-dom-id-[dom_id]
* - css_name: A css-safe version of the view name. * - css_name: A css-safe version of the view name.
* - css_class: The user-specified classes names, if any. * - css_class: The user-specified classes names, if any.
* - header: The optional header. * - header: The optional header.
...@@ -31,13 +24,24 @@ ...@@ -31,13 +24,24 @@
* view content. * view content.
* - attachment_after: An optional attachment view to be displayed after the * - attachment_after: An optional attachment view to be displayed after the
* view content. * view content.
* - dom_id: Unique id for every view being printed to give unique class for
* Javascript.
* *
* @see template_preprocess_views_view() * @see template_preprocess_views_view()
* *
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
<div{{ attributes }}> {%
set classes = [
'view',
'view-' ~ id|clean_class,
'view-id-' ~ id,
'view-display-id-' ~ display_id,
dom_id ? 'view-dom-id-' ~ dom_id,
]
%}
<div{{ attributes.addClass(classes) }}>
{{ title_prefix }} {{ title_prefix }}
{% if title %} {% if title %}
{{ title }} {{ title }}
......
...@@ -34,13 +34,6 @@ function template_preprocess_views_view(&$variables) { ...@@ -34,13 +34,6 @@ function template_preprocess_views_view(&$variables) {
// for an example of this. // for an example of this.
$variables['title'] = ''; $variables['title'] = '';
// Basic classes.
$variables['attributes']['class'] = array();
$variables['attributes']['class'][] = 'view';
$variables['attributes']['class'][] = 'view-' . Html::cleanCssIdentifier($variables['id']);
$variables['attributes']['class'][] = 'view-id-' . $variables['id'];
$variables['attributes']['class'][] = 'view-display-id-' . $variables['display_id'];
$css_class = $view->display_handler->getOption('css_class'); $css_class = $view->display_handler->getOption('css_class');
if (!empty($css_class)) { if (!empty($css_class)) {
$variables['css_class'] = preg_replace('/[^a-zA-Z0-9- ]/', '-', $css_class); $variables['css_class'] = preg_replace('/[^a-zA-Z0-9- ]/', '-', $css_class);
...@@ -60,7 +53,6 @@ function template_preprocess_views_view(&$variables) { ...@@ -60,7 +53,6 @@ function template_preprocess_views_view(&$variables) {
// identifier for each view. This identifier is written to both // identifier for each view. This identifier is written to both
// drupalSettings and the DIV wrapper. // drupalSettings and the DIV wrapper.
$variables['dom_id'] = $view->dom_id; $variables['dom_id'] = $view->dom_id;
$variables['attributes']['class'][] = 'view-dom-id-' . $variables['dom_id'];
} }
} }
...@@ -343,10 +335,8 @@ function template_preprocess_views_view_summary(&$variables) { ...@@ -343,10 +335,8 @@ function template_preprocess_views_view_summary(&$variables) {
} }
$variables['rows'][$id]->url = $url->toString(); $variables['rows'][$id]->url = $url->toString();
$variables['rows'][$id]->count = intval($row->{$argument->count_alias}); $variables['rows'][$id]->count = intval($row->{$argument->count_alias});
if (isset($active_urls[$variables['rows'][$id]->url])) {
$variables['rows'][$id]->attributes['class'][] = 'active';
}
$variables['rows'][$id]->attributes = new Attribute($variables['rows'][$id]->attributes); $variables['rows'][$id]->attributes = new Attribute($variables['rows'][$id]->attributes);
$variables['rows'][$id]->active = isset($active_urls[$variables['rows'][$id]->url]);
} }
} }
...@@ -412,9 +402,7 @@ function template_preprocess_views_view_summary_unformatted(&$variables) { ...@@ -412,9 +402,7 @@ function template_preprocess_views_view_summary_unformatted(&$variables) {
} }
$variables['rows'][$id]->url = $url->toString(); $variables['rows'][$id]->url = $url->toString();
$variables['rows'][$id]->count = intval($row->{$argument->count_alias}); $variables['rows'][$id]->count = intval($row->{$argument->count_alias});
if (isset($active_urls[$variables['rows'][$id]->url])) { $variables['rows'][$id]->active = isset($active_urls[$variables['rows'][$id]->url]);
$variables['rows'][$id]->attributes['class'][] = 'active';
}
$variables['rows'][$id]->attributes = new Attribute($variables['rows'][$id]->attributes); $variables['rows'][$id]->attributes = new Attribute($variables['rows'][$id]->attributes);
} }
} }
...@@ -502,12 +490,9 @@ function template_preprocess_views_view_table(&$variables) { ...@@ -502,12 +490,9 @@ function template_preprocess_views_view_table(&$variables) {
$variables['header'][$field]['content'] = \Drupal::l($label, new Url('<current>', [], $link_options)); $variables['header'][$field]['content'] = \Drupal::l($label, new Url('<current>', [], $link_options));
} }
$variables['header'][$field]['default_classes'] = $fields[$field]->options['element_default_classes'];
// Set up the header label class. // Set up the header label class.
$variables['header'][$field]['attributes'] = array(); $variables['header'][$field]['attributes'] = array();
if ($fields[$field]->options['element_default_classes']) {
$variables['header'][$field]['attributes']['class'][] = 'views-field';
$variables['header'][$field]['attributes']['class'][] = 'views-field-' . $variables['fields'][$field];
}
$class = $fields[$field]->elementLabelClasses(0); $class = $fields[$field]->elementLabelClasses(0);
if ($class) { if ($class) {
$variables['header'][$field]['attributes']['class'][] = $class; $variables['header'][$field]['attributes']['class'][] = $class;
...@@ -555,14 +540,16 @@ function template_preprocess_views_view_table(&$variables) { ...@@ -555,14 +540,16 @@ function template_preprocess_views_view_table(&$variables) {
// Reference to the column in the loop to make the code easier to read. // Reference to the column in the loop to make the code easier to read.
$column_reference =& $variables['rows'][$num]['columns'][$column]; $column_reference =& $variables['rows'][$num]['columns'][$column];
$column_reference['default_classes'] = $fields[$field]->options['element_default_classes'];
// Set the field key to the column so it can be used for adding classes
// in a template.
$column_reference['fields'][] = $variables['fields'][$field];
// Add field classes. // Add field classes.
if (!isset($column_reference['attributes'])) { if (!isset($column_reference['attributes'])) {
$column_reference['attributes'] = array(); $column_reference['attributes'] = array();
} }
if ($fields[$field]->options['element_default_classes']) {
$column_reference['attributes']['class'][] = 'views-field';
$column_reference['attributes']['class'][] = 'views-field-' . $variables['fields'][$field];
}
if ($classes = $fields[$field]->elementClasses($num)) { if ($classes = $fields[$field]->elementClasses($num)) {
$column_reference['attributes']['class'][] = $classes; $column_reference['attributes']['class'][] = $classes;
...@@ -635,8 +622,6 @@ function template_preprocess_views_view_table(&$variables) { ...@@ -635,8 +622,6 @@ function template_preprocess_views_view_table(&$variables) {
$variables['rows'][$num]['attributes'] = new Attribute($variables['rows'][$num]['attributes']); $variables['rows'][$num]['attributes'] = new Attribute($variables['rows'][$num]['attributes']);
} }
$variables['attributes']['class'][] = 'views-table';
$variables['attributes']['class'][] = 'views-view-table';
if (empty($variables['rows']) && !empty($options['empty_table'])) { if (empty($variables['rows']) && !empty($options['empty_table'])) {
$build = $view->display_handler->renderArea('empty'); $build = $view->display_handler->renderArea('empty');
$variables['rows'][0]['columns'][0]['content'] = drupal_render($build); $variables['rows'][0]['columns'][0]['content'] = drupal_render($build);
...@@ -648,11 +633,11 @@ function template_preprocess_views_view_table(&$variables) { ...@@ -648,11 +633,11 @@ function template_preprocess_views_view_table(&$variables) {
)); ));
} }
$variables['sticky'] = FALSE;
if (!empty($options['sticky'])) { if (!empty($options['sticky'])) {
$variables['view']->element['#attached']['library'][] = 'core/drupal.tableheader'; $variables['view']->element['#attached']['library'][] = 'core/drupal.tableheader';
$variables['attributes']['class'][] = "sticky-enabled"; $variables['sticky'] = TRUE;
} }
$variables['attributes']['class'][] = 'cols-' . count($variables['header']);
// Add the caption to the list if set. // Add the caption to the list if set.
if (!empty($handler->options['caption'])) { if (!empty($handler->options['caption'])) {
...@@ -668,6 +653,7 @@ function template_preprocess_views_view_table(&$variables) { ...@@ -668,6 +653,7 @@ function template_preprocess_views_view_table(&$variables) {
$variables['description'] = $handler->options['description']; $variables['description'] = $handler->options['description'];
$variables['caption_needed'] |= !empty($variables['summary']) || !empty($variables['description']); $variables['caption_needed'] |= !empty($variables['summary']) || !empty($variables['description']);
$variables['responsive'] = FALSE;
// If the table has headers and it should react responsively to columns hidden // If the table has headers and it should react responsively to columns hidden
// with the classes represented by the constants RESPONSIVE_PRIORITY_MEDIUM // with the classes represented by the constants RESPONSIVE_PRIORITY_MEDIUM
// and RESPONSIVE_PRIORITY_LOW, add the tableresponsive behaviors. // and RESPONSIVE_PRIORITY_LOW, add the tableresponsive behaviors.
...@@ -675,7 +661,7 @@ function template_preprocess_views_view_table(&$variables) { ...@@ -675,7 +661,7 @@ function template_preprocess_views_view_table(&$variables) {
$variables['view']->element['#attached']['library'][] = 'core/drupal.tableresponsive'; $variables['view']->element['#attached']['library'][] = 'core/drupal.tableresponsive';
// Add 'responsive-enabled' class to the table to identify it for JS. // Add 'responsive-enabled' class to the table to identify it for JS.
// This is needed to target tables constructed by this function. // This is needed to target tables constructed by this function.
$variables['attributes']['class'][] = 'responsive-enabled'; $variables['responsive'] = TRUE;
} }
} }
...@@ -693,13 +679,6 @@ function template_preprocess_views_view_grid(&$variables) { ...@@ -693,13 +679,6 @@ function template_preprocess_views_view_grid(&$variables) {
$options = $variables['options'] = $variables['view']->style_plugin->options; $options = $variables['options'] = $variables['view']->style_plugin->options;
$horizontal = ($options['alignment'] === 'horizontal'); $horizontal = ($options['alignment'] === 'horizontal');
$variables['attributes']['class'] = array(
'views-view-grid',
$options['alignment'],
'cols-' . $options['columns'],
'clearfix',
);
$col = 0; $col = 0;
$row = 0; $row = 0;
$items = array(); $items = array();
...@@ -720,14 +699,6 @@ function template_preprocess_views_view_grid(&$variables) { ...@@ -720,14 +699,6 @@ function template_preprocess_views_view_grid(&$variables) {
// Create attributes for rows. // Create attributes for rows.
if (!$horizontal || ($horizontal && empty($items[$row]['attributes']))) { if (!$horizontal || ($horizontal && empty($items[$row]['attributes']))) {
$row_attributes = array('class' => array()); $row_attributes = array('class' => array());
// Add default views row classes.
if ($options['row_class_default']) {
$row_attributes['class'][] = 'views-row';
$row_attributes['class'][] = 'row-' . ($row + 1);
if ($horizontal) {
$row_attributes['class'][] = 'clearfix';
}
}
// Add custom row classes. // Add custom row classes.
$row_class = array_filter(explode(' ', $variables['view']->style_plugin->getCustomClass($result_index, 'row'))); $row_class = array_filter(explode(' ', $variables['view']->style_plugin->getCustomClass($result_index, 'row')));
if (!empty($row_class)) { if (!empty($row_class)) {
...@@ -746,13 +717,6 @@ function template_preprocess_views_view_grid(&$variables) { ...@@ -746,13 +717,6 @@ function template_preprocess_views_view_grid(&$variables) {
if ($horizontal || (!$horizontal && empty($items[$col]['attributes']))) { if ($horizontal || (!$horizontal && empty($items[$col]['attributes']))) {
$col_attributes = array('class' => array()); $col_attributes = array('class' => array());
// Add default views column classes. // Add default views column classes.
if ($options['col_class_default']) {
$col_attributes['class'][] = 'views-col';
$col_attributes['class'][] = 'col-' . ($col + 1);
if (!$horizontal) {
$col_attributes['class'][] = 'clearfix';
}
}
// Add custom column classes. // Add custom column classes.
$col_class = array_filter(explode(' ', $variables['view']->style_plugin->getCustomClass($result_index, 'col'))); $col_class = array_filter(explode(' ', $variables['view']->style_plugin->getCustomClass($result_index, 'col')));
if (!empty($col_class)) { if (!empty($col_class)) {
...@@ -818,18 +782,15 @@ function template_preprocess_views_view_unformatted(&$variables) { ...@@ -818,18 +782,15 @@ function template_preprocess_views_view_unformatted(&$variables) {
$style = $view->style_plugin; $style = $view->style_plugin;
$options = $style->options; $options = $style->options;
$default_row_class = isset($options['default_row_class']) ? $options['default_row_class'] : FALSE; $variables['default_row_class'] = !empty($options['default_row_class']);
foreach ($rows as $id => $row) { foreach ($rows as $id => $row) {
$variables['rows'][$id] = array(); $variables['rows'][$id] = array();
$variables['rows'][$id]['content'] = $row; $variables['rows'][$id]['content'] = $row;
$variables['rows'][$id]['attributes'] = array(); $variables['rows'][$id]['attributes'] = array();
if ($default_row_class) { $variables['rows'][$id]['attributes'] = new Attribute($variables['rows'][$id]['attributes']);
$variables['rows'][$id]['attributes']['class'][] = 'views-row';
}
if ($row_class = $view->style_plugin->getRowClass($id)) { if ($row_class = $view->style_plugin->getRowClass($id)) {
$variables['rows'][$id]['attributes']['class'][] = $row_class; $variables['rows'][$id]['attributes']->addClass($row_class);
} }
$variables['rows'][$id]['attributes'] = new Attribute($variables['rows'][$id]['attributes']);
} }
} }
......
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