{% set term = _args.term %}
{% set htmlId = _args.htmlId|default('campussuite-search-term-' ~ token()) %}
<div id="{{ htmlId }}" data-campussuite-search-term>
<input type="hidden" data-sort-value value="{{ term.field }}" />
<input type="hidden" data-sort-direction value="{{ term.direction }}" />
<div class="dropdown action-item">
<a class="btn btn-filter dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
<span>Sort by</span>
<i class="fa fa-chevron-down"></i>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="export">
{% for value,label in term.options['options']|sort %}
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" data-sort-option="{{ value }}"{% if term.field is same as(value) %} style="font-weight: bold;"{% endif %}>{{ label }}</a>
</li>
{% endfor %}
</ul>
</div>
<div class="action-item filter-asc"{% if term.direction is same as('ASC') %} style="display: none;"{% endif %}>
<a class="btn btn-filter filter-icon" href="#">
<i class="fa fa-chevron-up"></i>
</a>
</div>
<div class="action-item filter-des"{% if term.direction is same as('DESC') %} style="display: none;"{% endif %}>
<a class="btn btn-filter filter-icon" href="#">
<i class="fa fa-chevron-down"></i>
</a>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#{{ htmlId }}').on('click', 'a', function (e) {
var $target = $(e.currentTarget),
plugin = $(e.delegateTarget).data('campussuiteSearchTerm');
e.preventDefault();
switch (true) {
case $target.closest('.action-item').hasClass('filter-asc'):
plugin.$element.find('[data-sort-direction]').val('ASC');
$(e.currentTarget).trigger('campussuite.search.submit');
break;
case $target.closest('.action-item').hasClass('filter-des'):
plugin.$element.find('[data-sort-direction]').val('DESC');
$(e.currentTarget).trigger('campussuite.search.submit');
break;
case $target.attr('role') === 'menuitem':
plugin.$element.find('[data-sort-value]').val($target.attr('data-sort-option'));
$(e.currentTarget).trigger('campussuite.search.submit');
break;
}
});
$('#{{ htmlId }}').campussuiteSearchTerm({
_init: function () {
// noop
},
compiler: function () {
var value = this.$element.find('[data-sort-value]').val(),
direction = this.$element.find('[data-sort-direction]').val();
if (value === undefined || value === null || typeof value !== 'string' || value === '') {
return null;
}
if (direction !== 'ASC' && direction !== 'DESC') {
direction = 'ASC';
}
return 'sort:' + value + ':' + direction;
}
});
});
</script>