Merge pull request #2558 from OpenRefine/issue-2553

Implementation of #2553: Implementation of minimize facets

main/webapp/modules/core/langs/translation-en.json

@@ -286,6 +286,7 @@
     "core-dialogs/choose-export-destination": "Please choose the destination for project export",
     "core-dialogs/export-to-local": "OpenRefine project archive to file",
     "core-facets/remove-facet": "Remove this facet",
+    "core-facets/minimize-facet": "Toggle between the minimization and maximization of this facet",
     "core-facets/reset": "reset",
     "core-facets/invert": "invert",
     "core-facets/change": "change",

main/webapp/modules/core/langs/translation-es.json

@@ -310,6 +310,7 @@
     "core-facets/facet-by-count": "Facetas por conteo de opciones",
     "core-facets/linear-plot": "Gráfica lineal",
     "core-facets/rotated-clock": "Girar 45° en dirección de las manecillas de reloj",
+    "core-facets/remove-facet": "Alternar la minimización y la maximización de esta faceta",
     "core-facets/remove-facet": "Quitar esta faceta",
     "core-facets/too-many-choices": "opciones en total, son muchas para mostrar",
     "core-facets/time": "Hora",

main/webapp/modules/core/langs/translation-fr.json

@@ -296,6 +296,7 @@
     "core-facets/reset": "réinitialiser",
     "core-facets/time": "Date",
     "core-facets/remove-facet": "Supprimer cette facette",
+    "core-facets/remove-facet": "Permuter la minimisation ou la maximisation de cette facette",
     "core-facets/non-time": "Non-date",
     "core-facets/linear-plot-abbr": "lin",
     "core-facets/small-dot": "Point de petite taille",

main/webapp/modules/core/scripts/facets/list-facet.js

@@ -44,6 +44,9 @@ function ListFacet(div, config, options, selection) {
   }
 
   this._selection = selection || [];
+
+  this._minimizeState = false;
+
   this._blankChoice = (config.selectBlank) ? { s : true, c : 0 } : null;
   this._errorChoice = (config.selectError) ? { s : true, c : 0 } : null;
 
@@ -148,7 +151,12 @@ ListFacet.prototype._initializeUI = function() {
   this._div.empty().show().html(
     '<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 width="1%">' +
+          '<a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton">&nbsp;</a>' +
+        '</td>' +
+        '<td width="1%">' +
+          '<a href="javascript:{}" title="'+$.i18n('core-facets/minimize-facet')+'" class="facet-title-minimize" bind="minimizeButton">&nbsp;</a>' +
+        '</td>' +
         '<td>' +
           '<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>' +
@@ -180,8 +188,10 @@ ListFacet.prototype._initializeUI = function() {
       }
     });
   });
+  
   this._elmts.expressionDiv.text(this._config.expression).hide().click(function() { self._editExpression(); });
   this._elmts.removeButton.click(function() { self._remove(); });
+  this._elmts.minimizeButton.click(function() { self._minimize(); });
   this._elmts.resetButton.click(function() { self._reset(); });
   this._elmts.invertButton.click(function() { self._invert(); });
 
@@ -674,6 +684,16 @@ ListFacet.prototype._remove = function() {
   this._data = null;
 };
 
+ListFacet.prototype._minimize = function() {
+  if(!this._minimizeState) {
+    this._div.addClass("facet-state-minimize");
+  } else {
+    this._div.removeClass("facet-state-minimize");
+  }
+  
+  this._minimizeState = !this._minimizeState;
+};
+
 ListFacet.prototype._updateRest = function() {
   Refine.update({ engineChanged: true });
 };

main/webapp/modules/core/scripts/facets/range-facet.js

@@ -36,6 +36,8 @@ function RangeFacet(div, config, options) {
   this._config = config;
   this._options = options;
 
+  this._minimizeState = false;
+
   this._from = ("from" in this._config) ? this._config.from : null;
   this._to = ("to" in this._config) ? this._config.to : null;
 
@@ -132,7 +134,12 @@ RangeFacet.prototype._initializeUI = function() {
   .html(
     '<div class="facet-title" bind="headerDiv">' +
       '<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 width="1%">' +
+          '<a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton">&nbsp;</a>' +
+        '</td>' +
+        '<td width="1%">' +
+          '<a href="javascript:{}" title="'+$.i18n('core-facets/minimize-facet')+'" class="facet-title-minimize" bind="minimizeButton">&nbsp;</a>' +
+        '</td>' +
         '<td>' +
           '<a href="javascript:{}" class="facet-choice-link" bind="resetButton">'+$.i18n('core-facets/reset')+'</a>' +
           '<a href="javascript:{}" class="facet-choice-link" bind="changeButton">'+$.i18n('core-facets/change')+'</a>' +
@@ -168,9 +175,9 @@ RangeFacet.prototype._initializeUI = function() {
     self.reset();
     self._updateRest();
   });
-  this._elmts.removeButton.click(function() {
-    self._remove();
-  });
+  
+  this._elmts.removeButton.click(function() { self._remove(); });
+  this._elmts.minimizeButton.click(function() { self._minimize(); });
 
   this._histogram = new HistogramWidget(this._elmts.histogramDiv, { binColors: [ "#bbccff", "#88aaee" ] });
   this._sliderWidget = new SliderWidget(this._elmts.sliderWidgetDiv);
@@ -368,6 +375,16 @@ RangeFacet.prototype._remove = function() {
   this._data = null;
 };
 
+RangeFacet.prototype._minimize = function() {
+  if(!this._minimizeState) {
+    this._div.addClass("facet-state-minimize");
+  } else {
+    this._div.removeClass("facet-state-minimize");
+  }
+  
+  this._minimizeState = !this._minimizeState;
+};
+
 RangeFacet.prototype._updateRest = function() {
   Refine.update({ engineChanged: true });
 };

main/webapp/modules/core/scripts/facets/scatterplot-facet.js

@@ -36,6 +36,8 @@ function ScatterplotFacet(div, config, options) {
   this._config = config;
   this._options = options;
 
+  this._minimizeState = false;
+
   this._error = false;
   this._initializedUI = false;
 }
@@ -93,7 +95,12 @@ ScatterplotFacet.prototype._initializeUI = function() {
   this._div.empty().show().html(
     '<div class="facet-title">' +
       '<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 width="1%">' +
+          '<a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton">&nbsp;</a>' +
+        '</td>' +
+        '<td width="1%">' +
+          '<a href="javascript:{}" title="'+$.i18n('core-facets/minimize-facet')+'" class="facet-title-minimize" bind="minimizeButton">&nbsp;</a>' +
+        '</td>' +
         '<td>' +
           '<a href="javascript:{}" class="facet-choice-link" bind="resetButton">'+$.i18n('core-facets/reset')+'</a>' +
           '<span bind="titleSpan"></span>' +
@@ -138,6 +145,8 @@ ScatterplotFacet.prototype._initializeUI = function() {
 
   this._elmts.titleSpan.text(this._config.name);
   this._elmts.removeButton.click(function() { self._remove(); });
+  this._elmts.minimizeButton.click(function() { self._minimize(); });
+  
   this._elmts.resetButton.click(function() {
     self.reset();
     self._updateRest();
@@ -351,6 +360,16 @@ ScatterplotFacet.prototype._remove = function() {
   this._config = null;
 };
 
+ScatterplotFacet.prototype._minimize = function() {
+  if(!this._minimizeState) {
+    this._div.addClass("facet-state-minimize");
+  } else {
+    this._div.removeClass("facet-state-minimize");
+  }
+  
+  this._minimizeState = !this._minimizeState;
+};
+
 ScatterplotFacet.prototype._updateRest = function() {
   Refine.update({ engineChanged: true });
 };

main/webapp/modules/core/scripts/facets/text-search-facet.js

@@ -40,6 +40,8 @@ function TextSearchFacet(div, config, options) {
 
   this._options = options;
 
+  this._minimizeState = false;
+
   this._query = config.query || null;
   this._timerID = null;
 
@@ -91,7 +93,12 @@ TextSearchFacet.prototype._initializeUI = function() {
   this._div.empty().show().html(
     '<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 width="1%">' +
+          '<a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton">&nbsp;</a>' +
+        '</td>' +
+        '<td width="1%">' +
+          '<a href="javascript:{}" title="'+$.i18n('core-facets/minimize-facet')+'" class="facet-title-minimize" bind="minimizeButton">&nbsp;</a>' +
+        '</td>' +
         '<td>' +
           '<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>' +
@@ -107,7 +114,7 @@ TextSearchFacet.prototype._initializeUI = function() {
         '<td width="1%"><input type="checkbox" bind="regexCheckbox" id="regexCheckbox'+counter+'" /></td>' +
         '<td><label for="regexCheckbox'+counter+'">'+$.i18n('core-facets/regular-exp')+'</label></td>' +
       '</tr>' +
-      '</table></div></div>'
+    '</table></div>'
   );
 
   this._elmts = DOM.bind(this._div);
@@ -121,6 +128,7 @@ TextSearchFacet.prototype._initializeUI = function() {
   }
 
   this._elmts.removeButton.click(function() { self._remove(); });
+  this._elmts.minimizeButton.click(function() { self._minimize(); });
   this._elmts.resetButton.click(function() { self._reset(); });
   this._elmts.invertButton.click(function() { self._invert(); });
 
@@ -186,6 +194,16 @@ TextSearchFacet.prototype._remove = function() {
   this._options = null;
 };
 
+TextSearchFacet.prototype._minimize = function() {
+  if(!this._minimizeState) {
+    this._div.addClass("facet-state-minimize");
+  } else {
+    this._div.removeClass("facet-state-minimize");
+  }
+  
+  this._minimizeState = !this._minimizeState;
+};
+
 TextSearchFacet.prototype._update = function () {
   var invert = this._config.invert;
   if (invert) {

main/webapp/modules/core/scripts/facets/timerange-facet.js

@@ -36,6 +36,8 @@ function TimeRangeFacet(div, config, options) {
   this._config = config;
   this._options = options;
 
+  this._minimizeState = false;
+
   this._from = ("from" in this._config) ? this._config.from : null;
   this._to = ("to" in this._config) ? this._config.to : null;
   this._step = ("step" in this._config) ? this._config.step : null;
@@ -133,7 +135,12 @@ TimeRangeFacet.prototype._initializeUI = function() {
   .html(
     '<div class="facet-title" bind="headerDiv">' +
       '<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 width="1%">' +
+          '<a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton">&nbsp;</a>' +
+        '</td>' +
+        '<td width="1%">' +
+          '<a href="javascript:{}" title="'+$.i18n('core-facets/minimize-facet')+'" class="facet-title-minimize" bind="minimizeButton">&nbsp;</a>' +
+        '</td>' +
         '<td>' +
           '<a href="javascript:{}" class="facet-choice-link" bind="resetButton">'+$.i18n('core-facets/reset')+'</a>' +
           '<a href="javascript:{}" class="facet-choice-link" bind="changeButton">'+$.i18n('core-facets/change')+'</a>' +
@@ -169,9 +176,9 @@ TimeRangeFacet.prototype._initializeUI = function() {
     self.reset();
     self._updateRest();
   });
-  this._elmts.removeButton.click(function() {
-    self._remove();
-  });
+  
+  this._elmts.removeButton.click(function() { self._remove(); });
+  this._elmts.minimizeButton.click(function() { self._minimize(); });
 
   this._histogram = new HistogramWidget(this._elmts.histogramDiv, { binColors: [ "#ccccff", "#6666ff" ] });
   this._sliderWidget = new SliderWidget(this._elmts.sliderWidgetDiv);
@@ -320,9 +327,11 @@ TimeRangeFacet.prototype.updateState = function(data) {
     case "min":
       this._from = Math.max(data.from, this._config.min);
       break;
+      
     case "max":
       this._to = Math.min(data.to, this._config.max);
       break;
+      
     default:
       this._from = Math.max(data.from, this._config.min);
       if ("to" in data) {
@@ -396,6 +405,16 @@ TimeRangeFacet.prototype._remove = function() {
   this._data = null;
 };
 
+TimeRangeFacet.prototype._minimize = function() {
+  if(!this._minimizeState) {
+    this._div.addClass("facet-state-minimize");
+  } else {
+    this._div.removeClass("facet-state-minimize");
+  }
+  
+  this._minimizeState = !this._minimizeState;
+};
+
 TimeRangeFacet.prototype._updateRest = function() {
   Refine.update({ engineChanged: true });
 };

main/webapp/modules/core/styles/project/facets.less

@@ -77,6 +77,34 @@ a.facet-title-remove:hover {
   background-position: -12px 0px;
   }
 
+li.facet-state-minimize {
+  height: 22px;
+  overflow: hidden;
+}
+
+a.facet-title-minimize {
+  display: block;
+  width: 12px;
+  height: 12px;
+  margin: 2px 0 0 0;
+  text-decoration: none;
+  background-image: url(../../images/minimize-map.png);
+  background-repeat: no-repeat;
+  background-position: -0px 0px;
+  }
+
+a.facet-title-minimize:hover {
+  background-position: -12px 0px;
+  }
+
+li.facet-state-minimize a.facet-title-minimize {
+  background-position: -24px 0px;
+  }
+
+li.facet-state-minimize a.facet-title-minimize:hover {
+  background-position: -36px 0px;
+  }
+
 .facet-expression {
   padding: 3px 5px;
   font-family: monospace;