Add list_default_organisationen template: UUID-based logos, improved tag filter
This commit is contained in:
Jürgen Mummert
@@ -0,0 +1,258 @@
|
||||
{% extends '@Contao/block_searchable.html.twig' %}
|
||||
|
||||
{% set wrapperAttributes = attrs()
|
||||
.addClass(['ce_table', 'listing'])
|
||||
.mergeWith(wrapperAttributes|default)
|
||||
%}
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% set legacyTagLabels = {
|
||||
'10': 'Sport',
|
||||
'11': 'Kultur',
|
||||
'12': 'Politik',
|
||||
'13': 'Soziales',
|
||||
'14': 'Freizeit',
|
||||
'15': 'Bildung',
|
||||
'16': 'Religion',
|
||||
'17': 'Natur',
|
||||
'18': 'Gesellschaft'
|
||||
} %}
|
||||
|
||||
{% if searchable %}
|
||||
<div class="list_search">
|
||||
<form method="get">
|
||||
<div class="formbody">
|
||||
<input type="hidden" name="order_by" value="{{ order_by }}">
|
||||
<input type="hidden" name="sort" value="{{ sort }}">
|
||||
{% if per_page %}
|
||||
<input type="hidden" name="per_page" value="{{ per_page }}">
|
||||
{% endif %}
|
||||
<div class="widget widget-select">
|
||||
<label for="ctrl_search" class="invisible">{{ fields_label }}</label>
|
||||
<select name="search" id="ctrl_search" class="select">
|
||||
{{ search_fields|raw }}
|
||||
</select>
|
||||
</div>
|
||||
<div class="widget widget-text">
|
||||
<label for="ctrl_for" class="invisible">{{ keywords_label }}</label>
|
||||
<input type="text" name="for" id="ctrl_for" class="text" value="{{ for }}">
|
||||
</div>
|
||||
<div class="widget widget-submit">
|
||||
<button type="submit" class="submit">{{ search_label }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if per_page %}
|
||||
<div class="list_per_page">
|
||||
<form method="get">
|
||||
<div class="formbody">
|
||||
<input type="hidden" name="order_by" value="{{ order_by }}">
|
||||
<input type="hidden" name="sort" value="{{ sort }}">
|
||||
<input type="hidden" name="search" value="{{ search }}">
|
||||
<input type="hidden" name="for" value="{{ for }}">
|
||||
<div class="widget widget-select">
|
||||
<label for="ctrl_per_page" class="invisible">{{ per_page_label }}</label>
|
||||
<select name="per_page" id="ctrl_per_page" class="select">
|
||||
<option value="10"{% if 10 == per_page %} selected{% endif %}>10</option>
|
||||
<option value="20"{% if 20 == per_page %} selected{% endif %}>20</option>
|
||||
<option value="30"{% if 30 == per_page %} selected{% endif %}>30</option>
|
||||
<option value="50"{% if 50 == per_page %} selected{% endif %}>50</option>
|
||||
<option value="100"{% if 100 == per_page %} selected{% endif %}>100</option>
|
||||
<option value="250"{% if 250 == per_page %} selected{% endif %}>250</option>
|
||||
<option value="500"{% if 500 == per_page %} selected{% endif %}>500</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="widget widget-submit">
|
||||
<button type="submit" class="submit">{{ per_page_label }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if searchable and for and not tbody|default %}
|
||||
{{ no_results }}
|
||||
{% else %}
|
||||
{% set tagOptions = {} %}
|
||||
|
||||
{% for row in tbody|default([]) %}
|
||||
{% set tagsRaw = row.tag_labels.content|default(row.tags.content|default(''))|striptags %}
|
||||
{% set tagsPrepared = tagsRaw|replace({' ': '', '&nbsp;': '', ' ': '', ';': ',', '|': ',', '/': ',', ', ': ',', ' ,': ','}) %}
|
||||
{% set tagParts = tagsPrepared is not empty ? tagsPrepared|split(',') : [] %}
|
||||
|
||||
{% for part in tagParts %}
|
||||
{% set tagValue = part|striptags|replace({' ': '', '&nbsp;': '', ' ': ''})|trim %}
|
||||
|
||||
{% if legacyTagLabels[tagValue] is defined %}
|
||||
{% set tagLabel = legacyTagLabels[tagValue] %}
|
||||
{% elseif tagValue matches '/^\\d+$/' %}
|
||||
{% set tagLabel = '' %}
|
||||
{% elseif tagValue matches '/^[\\p{L}\\p{N}\\s._,&+\\-\\/]+$/u' %}
|
||||
{% set tagLabel = tagValue %}
|
||||
{% else %}
|
||||
{% set tagLabel = '' %}
|
||||
{% endif %}
|
||||
|
||||
{% if tagLabel is not empty %}
|
||||
{% set tagSlug = tagLabel|lower|replace({'ä': 'ae', 'ö': 'oe', 'ü': 'ue', 'ß': 'ss', ' ': '-', '/': '-', '&': '-', '+': '-', '.': '', ',': '', '(': '', ')': '', '"': '', "'": ''}) %}
|
||||
|
||||
{% if tagSlug is not empty and tagOptions[tagSlug] is not defined %}
|
||||
{% set tagOptions = tagOptions|merge({ (tagSlug): tagLabel }) %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slim-select@3/dist/slimselect.min.css">
|
||||
|
||||
<div id="orgfilters" class="controls filters">
|
||||
<label for="org-tag-filter" class="visually-hidden">Nach Typ filtern</label>
|
||||
<select id="org-tag-filter" class="select" data-placeholder="Typ wählen">
|
||||
<option value="">Alle</option>
|
||||
{% for slug, label in tagOptions %}
|
||||
<option value="{{ slug }}">{{ label }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<button type="button" id="org-filter-reset" class="submit" style="display:none;">Filter zurücksetzen</button>
|
||||
</div>
|
||||
|
||||
<div id="org">
|
||||
<div id="org-list">
|
||||
{% for row in tbody|default([]) %}
|
||||
{% set tagSlugsRaw = row.tag_slugs.content|default('')|trim %}
|
||||
{% set tagsRaw = row.tag_labels.content|default(row.tags.content|default(''))|striptags %}
|
||||
{% set tagsPrepared = tagsRaw|replace({' ': '', '&nbsp;': '', ' ': '', ';': ',', '|': ',', '/': ',', ', ': ',', ' ,': ','}) %}
|
||||
{% set tagParts = tagsPrepared is not empty ? tagsPrepared|split(',') : [] %}
|
||||
|
||||
{% set tagClasses = [] %}
|
||||
{% set tagSlugs = [] %}
|
||||
|
||||
{% if tagSlugsRaw is not empty %}
|
||||
{% for slug in tagSlugsRaw|split(',') %}
|
||||
{% set cleanedSlug = slug|trim %}
|
||||
|
||||
{% if cleanedSlug is not empty %}
|
||||
{% set tagSlugs = tagSlugs|merge([cleanedSlug]) %}
|
||||
{% set tagClasses = tagClasses|merge(['tag-' ~ cleanedSlug]) %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% for part in tagParts if tagSlugsRaw is empty %}
|
||||
{% set tagValue = part|striptags|replace({' ': '', '&nbsp;': '', ' ': ''})|trim %}
|
||||
|
||||
{% if legacyTagLabels[tagValue] is defined %}
|
||||
{% set tagLabel = legacyTagLabels[tagValue] %}
|
||||
{% elseif tagValue matches '/^\\d+$/' %}
|
||||
{% set tagLabel = '' %}
|
||||
{% elseif tagValue matches '/^[\\p{L}\\p{N}\\s._,&+\\-\\/]+$/u' %}
|
||||
{% set tagLabel = tagValue %}
|
||||
{% else %}
|
||||
{% set tagLabel = '' %}
|
||||
{% endif %}
|
||||
|
||||
{% if tagLabel is not empty %}
|
||||
{% set tagSlug = tagLabel|lower|replace({'ä': 'ae', 'ö': 'oe', 'ü': 'ue', 'ß': 'ss', ' ': '-', '/': '-', '&': '-', '+': '-', '.': '', ',': '', '(': '', ')': '', '"': '', "'": ''}) %}
|
||||
|
||||
{% if tagSlug is not empty %}
|
||||
{% set tagClasses = tagClasses|merge(['tag-' ~ tagSlug]) %}
|
||||
{% set tagSlugs = tagSlugs|merge([tagSlug]) %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% set title = row.title.content|default('') %}
|
||||
{% set logoUuid = row.logo_uuid.content|default('')|trim %}
|
||||
{% set lastCol = row|last %}
|
||||
|
||||
<div class="org-item{% if tagClasses|length %} {{ tagClasses|join(' ') }}{% endif %}"{% if tagSlugs|length %} data-tags="{{ tagSlugs|join(',') }}"{% endif %}>
|
||||
<div class="wrapper">
|
||||
{% if logoUuid is not empty %}
|
||||
<div class="logo">{{ ('{{figure::' ~ logoUuid ~ '}}')|insert_tag_raw }}</div>
|
||||
{% endif %}
|
||||
|
||||
{% if title is not empty %}
|
||||
<div class="title">{{ title|sanitize_html }}</div>
|
||||
{% endif %}
|
||||
|
||||
{% if details and lastCol and lastCol.url|default %}
|
||||
<a class="details" href="{{ lastCol.url }}" title="{{ title|striptags }} - Details"></a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if pagination is defined %}
|
||||
{{ pagination|raw }}
|
||||
{% endif %}
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/slim-select@3/dist/slimselect.min.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
const selectElement = document.querySelector('#org-tag-filter');
|
||||
const resetButton = document.querySelector('#org-filter-reset');
|
||||
const items = Array.from(document.querySelectorAll('#org-list .org-item'));
|
||||
|
||||
if (!selectElement || !items.length || typeof SlimSelect === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
const slim = new SlimSelect({
|
||||
select: selectElement,
|
||||
settings: {
|
||||
allowDeselect: true,
|
||||
showSearch: false,
|
||||
placeholderText: 'Alle'
|
||||
}
|
||||
});
|
||||
|
||||
const applyFilter = function (selectedTag) {
|
||||
const activeTag = selectedTag || '';
|
||||
|
||||
if (!activeTag) {
|
||||
items.forEach(function (item) {
|
||||
item.style.removeProperty('display');
|
||||
});
|
||||
|
||||
if (resetButton) {
|
||||
resetButton.style.display = 'none';
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
items.forEach(function (item) {
|
||||
const itemTags = (item.getAttribute('data-tags') || '').split(',').filter(Boolean);
|
||||
item.style.display = itemTags.includes(activeTag) ? '' : 'none';
|
||||
});
|
||||
|
||||
if (resetButton) {
|
||||
resetButton.style.display = activeTag ? '' : 'none';
|
||||
}
|
||||
};
|
||||
|
||||
selectElement.addEventListener('change', function () {
|
||||
applyFilter(selectElement.value || '');
|
||||
});
|
||||
|
||||
if (resetButton) {
|
||||
resetButton.addEventListener('click', function () {
|
||||
slim.setSelected('');
|
||||
applyFilter('');
|
||||
});
|
||||
}
|
||||
|
||||
if (selectElement.value) {
|
||||
applyFilter(selectElement.value);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user