Permalink
Browse files

Improve styling for nested filters

This change removes redundant field names for nested filters that apply
to the same field.

Signed-off-by: Byron Ruth <b@devel.io>
  • Loading branch information...
1 parent d2f40b7 commit c4dc2b74a696bf0c9f5d68ff2feaa0eb56a2174d @bruth bruth committed Aug 23, 2016
Showing with 76 additions and 21 deletions.
  1. +76 −21 src/js/cilantro/ui/context/filters.js
View
97 src/js/cilantro/ui/context/filters.js
@@ -19,19 +19,74 @@ define([
var lang;
if (c.config.get('styleFilters')) {
- lang = styleLanguage(attrs);
+ var parts = styleLanguage(attrs);
+ lang = [parts.field, parts.operator, parts.value].join(' ');
} else {
lang = attrs.language;
}
toks.push('<li>' + lang + '</li>');
}
else if (attrs.type && attrs.children.length) {
- var subtoks = _.map(attrs.children, function(child) {
- return flattenLanguage(child, null, false);
- });
+ if (c.config.get('styleFilters')) {
+ var currentField,
+ subtoks = [],
+ preds = [];
+
+ _.each(attrs.children, function(child) {
+ var parts = styleLanguage(child);
+
+ // Field is not the same, append to output and reset for the next field.
+ if (child.field !== currentField) {
+ if (preds.length === 1) {
+ subtoks.push('<li>' + preds[0] + '</li>');
+ }
+ else if (preds.length === 2) {
+ subtoks.push('<li>' + preds.join(' <em>' + attrs.type.toUpperCase() + '</em> ') + '</li>');
+ }
+ else if (preds.length > 2) {
+ var last = preds.pop();
+ subtoks.push('<li>' + preds.join(', ') + ', <em>' + attrs.type.toUpperCase() + '</em> ' + last + '</li>');
+ }
+
+ currentField = child.field;
+ preds = [];
+
+ preds.push([
+ parts.field,
+ parts.operator,
+ parts.value
+ ].join(' '));
+ }
+ else {
+ preds.push([
+ parts.operator,
+ parts.value
+ ].join(' '));
+ }
+ });
+
+ // Last iteration.
+ if (preds.length === 1) {
+ subtoks.push('<li>' + preds[0] + '</li>');
+ }
+ else if (preds.length === 2) {
+ subtoks.push('<li>' + preds.join(' <em>' + attrs.type.toUpperCase() + '</em> ') + '</li>');
+ }
+ else if (preds.length > 2) {
+ var last = preds.pop();
+ subtoks.push('<li>' + preds.join(', ') + ', <em>' + attrs.type.toUpperCase() + '</em> ' + last + '</li>');
+ }
+
+ toks.push(subtoks.join('<li><em>' + attrs.type.toUpperCase() + '</em></li>'));
+ }
+ else {
+ var subtoks = _.map(attrs.children, function(child) {
+ return flattenLanguage(child, null, false);
+ });
- toks.push(subtoks.join('<li><em>' + attrs.type.toUpperCase() + '</em></li>'));
+ toks.push(subtoks.join('<li><em>' + attrs.type.toUpperCase() + '</em></li>'));
+ }
}
if (wrap) toks.push('</ul>');
@@ -117,12 +172,11 @@ define([
var styleLanguage = function(attrs) {
var lang = c.config.get('filterOperators');
- var text = [],
- value = attrs.value,
- cleanedValue = attrs.cleanedValue || value,
- operator = attrs.operator,
- fieldName = '';
+ var styled = {},
+ value = attrs.cleanedValue || attrs.value,
+ operator = attrs.operator;
+ var fieldname;
// If the fields have been found, get the fieldName from them. Else
// split the language at the operator to retrive it.
if (c.data.fields.get(attrs.field)) {
@@ -136,12 +190,11 @@ define([
}
// Remove ? and ! from the end of field names
- fieldName = fieldName.replace(/[!?]$/g, '');
-
- text.push('<strong>' + fieldName + '</strong>');
+ styled.field = '<strong>' + fieldName.replace(/[!?]$/g, '') + '</strong>';
if (operator === 'range' || operator === '-range') {
- text.push(lang[operator][0]);
+ styled.operator = lang[operator][0];
+
var val1 = value[0];
var val2 = value[1];
@@ -151,20 +204,22 @@ define([
val2 = numbers.toDelimitedNumber(val2);
}
- text.push('<span class=filter-value>' + val1 + '</span> and ' +
- '<span class=filter-value>' + val2 + '</span>');
+ styled.value = (
+ '<span class=filter-value>' + val1 + '</span> and ' +
+ '<span class=filter-value>' + val2 + '</span>'
+ );
}
else if (operator === 'in' || operator === '-in') {
- text.push(lang[operator][0]);
- text.push(parseValue(cleanedValue, operator));
+ styled.operator = lang[operator][0];
+ styled.value = parseValue(value, operator);
}
// Handles greater than, less than etc.
else {
- text.push(lang[operator][0]);
- text.push(parseValue(cleanedValue, operator));
+ styled.operator = lang[operator][0];
+ styled.value = parseValue(value, operator);
}
- return text.join(' ');
+ return styled;
}
var ContextFilter = Marionette.ItemView.extend({

0 comments on commit c4dc2b7

Please sign in to comment.