Add UI for Invert text filter

This commit is contained in:
Owen Stephens 2017-11-14 13:51:42 +00:00
parent 88f6e1b8d1
commit ae6e8bed86
3 changed files with 52 additions and 11 deletions

View File

@ -146,7 +146,7 @@ ListFacet.prototype._initializeUI = function() {
var facet_id = this._div.attr("id");
this._div.empty().show().html(
'<div class="facet-title">' +
'<div class="facet-title" bind="facetTitle">' +
'<div class="grid-layout layout-tightest layout-full"><table><tr>' +
'<td width="1%"><a href="javascript:{}" title="'+$.i18n._('core-facets')["remove-facet"]+'" class="facet-title-remove" bind="removeButton">&nbsp;</a></td>' +
'<td>' +
@ -259,9 +259,11 @@ ListFacet.prototype._update = function(resetScroll) {
var invert = this._config.invert;
if (invert) {
this._elmts.facetTitle.addClass("facet-title-inverted");
this._elmts.bodyInnerDiv.addClass("facet-mode-inverted");
this._elmts.invertButton.addClass("facet-mode-inverted");
} else {
this._elmts.facetTitle.removeClass("facet-title-inverted");
this._elmts.bodyInnerDiv.removeClass("facet-mode-inverted");
this._elmts.invertButton.removeClass("facet-mode-inverted");
}

View File

@ -34,12 +34,17 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
function TextSearchFacet(div, config, options) {
this._div = div;
this._config = config;
if (!("invert" in this._config)) {
this._config.invert = false;
}
this._options = options;
this._query = config.query || null;
this._timerID = null;
this._initializeUI();
this._update();
}
TextSearchFacet.reconstruct = function(div, uiState) {
@ -70,6 +75,7 @@ TextSearchFacet.prototype.getJSON = function() {
columnName: this._config.columnName,
mode: this._config.mode,
caseSensitive: this._config.caseSensitive,
invert: this._config.invert,
query: this._query
};
return o;
@ -82,11 +88,13 @@ TextSearchFacet.prototype.hasSelection = function() {
TextSearchFacet.prototype._initializeUI = function() {
var self = this;
this._div.empty().show().html(
'<div class="facet-title">' +
'<div class="facet-title" bind="facetTitle">' +
'<div class="grid-layout layout-tightest layout-full"><table><tr>' +
'<td width="1%"><a href="javascript:{}" title="'+$.i18n._('core-facets')["remove-facet"]+'" class="facet-title-remove" bind="removeButton">&nbsp;</a></td>' +
'<td>' +
'<span>' + this._config.name + '</span>' +
'<a href="javascript:{}" class="facet-choice-link" bind="resetButton">'+$.i18n._('core-facets')["reset"]+'</a>' +
'<a href="javascript:{}" class="facet-choice-link" bind="invertButton">'+$.i18n._('core-facets')["invert"]+'</a>' +
'<span bind="titleSpan"></span>' +
'</td>' +
'</tr></table></div>' +
'</div>' +
@ -99,24 +107,27 @@ TextSearchFacet.prototype._initializeUI = function() {
'</table></div></div>'
);
var elmts = DOM.bind(this._div);
this._elmts = DOM.bind(this._div);
this._elmts.titleSpan.text(this._config.name);
if (this._config.caseSensitive) {
elmts.caseSensitiveCheckbox.attr("checked", "true");
this._elmts.caseSensitiveCheckbox.attr("checked", "true");
}
if (this._config.mode == "regex") {
elmts.regexCheckbox.attr("checked", "true");
this._elmts.regexCheckbox.attr("checked", "true");
}
elmts.removeButton.click(function() { self._remove(); });
this._elmts.removeButton.click(function() { self._remove(); });
this._elmts.resetButton.click(function() { self._reset(); });
this._elmts.invertButton.click(function() { self._invert(); });
elmts.caseSensitiveCheckbox.bind("change", function() {
this._elmts.caseSensitiveCheckbox.bind("change", function() {
self._config.caseSensitive = this.checked;
if (self._query !== null && self._query.length > 0) {
self._scheduleUpdate();
}
});
elmts.regexCheckbox.bind("change", function() {
this._elmts.regexCheckbox.bind("change", function() {
self._config.mode = this.checked ? "regex" : "text";
if (self._query !== null && self._query.length > 0) {
self._scheduleUpdate();
@ -124,10 +135,10 @@ TextSearchFacet.prototype._initializeUI = function() {
});
if (this._query) {
elmts.input[0].value = this._query;
this._elmts.input[0].value = this._query;
}
elmts.input.bind("keyup change input",function(evt) {
this._elmts.input.bind("keyup change input",function(evt) {
// Ignore non-character keyup changes
if(evt.type === "keyup" && (this.value === self._query || this.value === '' && !self._query)) {
return;
@ -139,6 +150,7 @@ TextSearchFacet.prototype._initializeUI = function() {
};
TextSearchFacet.prototype.updateState = function(data) {
this._update();
};
TextSearchFacet.prototype.render = function() {
@ -147,6 +159,17 @@ TextSearchFacet.prototype.render = function() {
TextSearchFacet.prototype._reset = function() {
this._query = null;
this._elmts.input.val([]);
this._elmts.caseSensitiveCheckbox.prop("checked", false);
this._elmts.regexCheckbox.prop("checked", false);
this._config.invert = false;
this._updateRest();
};
TextSearchFacet.prototype._invert = function() {
this._config.invert = !this._config.invert;
this._updateRest();
};
@ -158,6 +181,17 @@ TextSearchFacet.prototype._remove = function() {
this._options = null;
};
TextSearchFacet.prototype._update = function () {
var invert = this._config.invert;
if (invert) {
this._elmts.facetTitle.addClass("facet-title-inverted");
this._elmts.invertButton.addClass("facet-mode-inverted");
} else {
this._elmts.facetTitle.removeClass("facet-title-inverted");
this._elmts.invertButton.removeClass("facet-mode-inverted");
}
}
TextSearchFacet.prototype._scheduleUpdate = function() {
if (!this._timerID) {
var self = this;

View File

@ -57,6 +57,11 @@ li.facet-container {
}
.facet-title-inverted {
background: #ffa500;
border-bottom: 1px solid #ffc04d;
}
a.facet-title-remove {
display: block;
width: 12px;