Show not-blank rows column action, refs #981

This commit is contained in:
Simon Willison 2020-09-30 16:43:34 -07:00
commit 64127a4593
2 changed files with 22 additions and 1 deletions

View file

@ -418,6 +418,7 @@ button.button-as-link {
display: block; display: block;
padding: 4px 8px 2px 8px; padding: 4px 8px 2px 8px;
color: #222; color: #222;
white-space: nowrap;
} }
.dropdown-menu a:hover { .dropdown-menu a:hover {
background-color: #eee; background-color: #eee;

View file

@ -4,6 +4,7 @@ var DROPDOWN_HTML = `<div class="dropdown-menu">
<li><a class="dropdown-sort-asc" href="#">Sort ascending</a></li> <li><a class="dropdown-sort-asc" href="#">Sort ascending</a></li>
<li><a class="dropdown-sort-desc" href="#">Sort descending</a></li> <li><a class="dropdown-sort-desc" href="#">Sort descending</a></li>
<li><a class="dropdown-facet" href="#">Facet by this</a></li> <li><a class="dropdown-facet" href="#">Facet by this</a></li>
<li><a class="dropdown-not-blank" href="#">Show not-blank rows</a></li>
</ul> </ul>
</div>`; </div>`;
@ -41,6 +42,11 @@ var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" heig
params.append('_facet', column); params.append('_facet', column);
return paramsToUrl(params); return paramsToUrl(params);
} }
function notBlankUrl(column) {
var params = getParams();
params.set(`${column}__notblank`, '1');
return paramsToUrl(params);
}
function isFacetedBy(column) { function isFacetedBy(column) {
return getParams().getAll('_facet').includes(column); return getParams().getAll('_facet').includes(column);
} }
@ -69,6 +75,7 @@ var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" heig
var sort = menu.querySelector('a.dropdown-sort-asc'); var sort = menu.querySelector('a.dropdown-sort-asc');
var sortDesc = menu.querySelector('a.dropdown-sort-desc'); var sortDesc = menu.querySelector('a.dropdown-sort-desc');
var facetItem = menu.querySelector('a.dropdown-facet'); var facetItem = menu.querySelector('a.dropdown-facet');
var notBlank = menu.querySelector('a.dropdown-not-blank');
if (params.get('_sort') == column) { if (params.get('_sort') == column) {
sort.style.display = 'none'; sort.style.display = 'none';
} else { } else {
@ -89,10 +96,23 @@ var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" heig
facetItem.style.display = 'block'; facetItem.style.display = 'block';
facetItem.setAttribute('href', facetUrl(column)); facetItem.setAttribute('href', facetUrl(column));
} }
/* Show notBlank option if not selected AND at least one visible blank value */
var tdsForThisColumn = Array.from(
th.closest('table').querySelectorAll('td.' + th.className)
);
if (
params.get(`${column}__notblank`) != '1' &&
tdsForThisColumn.filter(el => el.innerText.trim() == '').length
) {
notBlank.style.display = 'block';
notBlank.setAttribute('href', notBlankUrl(column));
} else {
notBlank.style.display = 'none';
}
menu.style.position = 'absolute'; menu.style.position = 'absolute';
menu.style.top = (menuTop + 6) + 'px'; menu.style.top = (menuTop + 6) + 'px';
menu.style.left = menuLeft + 'px'; menu.style.left = menuLeft + 'px';
menu.style.display = 'block'; menu.style.display = 'inline-flex';
} }
var svg = document.createElement('div'); var svg = document.createElement('div');
svg.innerHTML = DROPDOWN_ICON_SVG; svg.innerHTML = DROPDOWN_ICON_SVG;