浏览代码

HUE-2138 [search] Slider widget UX

Added viewModel update on blur and slideStop
Enrico Berti 11 年之前
父节点
当前提交
19636e0

+ 6 - 3
apps/search/src/search/templates/search.mako

@@ -335,7 +335,7 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
 
     <!-- ko if: type() == 'range' -->
       <!-- ko ifnot: properties.isDate() -->
-        <div class="slider-cnt" data-bind="slider: {start: properties.start, end: properties.end, gap: properties.gap, min: properties.min, max: properties.max}"></div>
+        <div class="slider-cnt" data-bind="slider: {start: properties.min, end: properties.max, gap: properties.gap, min: properties.start, max: properties.end}"></div>
       <!-- /ko -->
       <!-- ko if: properties.isDate() -->
         <div data-bind="daterangepicker: {start: properties.start, end: properties.end, gap: properties.gap, min: properties.min, max: properties.max}"></div>
@@ -1413,7 +1413,7 @@ $(document).ready(function () {
   };
 
   ko.bindingHandlers.slider = {
-    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
+    init: function (element, valueAccessor) {
       var _el = $(element);
       var _options = $.extend(valueAccessor(), {});
       _el.slider({
@@ -1433,8 +1433,11 @@ $(document).ready(function () {
         _options.max(e.end);
         _options.gap(e.step);
       });
+      _el.on("slideStop", function (e) {
+        viewModel.search();
+      });
     },
-    update: function (element, valueAccessor, allBindingsAccessor) {
+    update: function (element, valueAccessor) {
       var _options = $.extend(valueAccessor(), {});
     }
   }

+ 2 - 2
apps/search/static/js/search.ko.js

@@ -256,8 +256,8 @@ var Query = function (vm, query) {
     self.qs.remove(query);
   };
 
-  self.selectedMultiq.subscribe(function () { // To keep below the computeds!
-	vm.search();
+  self.selectedMultiq.subscribe(function () { // To keep below the computed objects!
+	  vm.search();
   });
 
   self.toggleFacet = function (data) {

+ 18 - 3
desktop/core/static/js/bootstrap-slider.js

@@ -44,7 +44,7 @@
         '<div id="tooltip_end" class="tooltip"><div class="tooltip-arrow"></div><input type="text" class="tooltip-inner" /></div>' +
         '<div id="tooltip_min" class="tooltip"><div class="tooltip-arrow"></div><input type="text" class="tooltip-inner" /></div>' +
         '<div id="tooltip_max" class="tooltip"><div class="tooltip-arrow"></div><input type="text" class="tooltip-inner" /></div>' +
-        '<div id="tooltip_step" class="tooltip"><div class="tooltip-arrow"></div><input type="text" class="tooltip-inner" /></div>' +
+        '<div id="tooltip_step" class="tooltip"><input type="text" class="tooltip-inner" style="border-width: 2px!important" /></div>' +
         '</div>')
         .insertBefore(this.element)
         .append(this.element);
@@ -371,7 +371,7 @@
       this.value[0] = this.reverseFormatter(this.tooltipInner_start.val());
       this.value[1] = this.reverseFormatter(this.tooltipInner_end.val());
       this.setAdditionalValues();
-      this.setValue(this.value, true);
+      this.setValue(this.value, true, true);
     },
 
     focus: function (idx, ev) {
@@ -659,7 +659,7 @@
       this.step = this.reverseStepFormatter(this.tooltipInner_step.val());
     },
 
-    setValue: function (val, triggerSlideEvent) {
+    setValue: function (val, triggerSlideEvent, triggerSlideStopEvent) {
       if (!val) {
         val = 0;
       }
@@ -714,6 +714,21 @@
           .data("value", this.value)
           .prop("value", this.value);
       }
+      if (triggerSlideStopEvent === true) {
+        var slideEventValue = this.range ? this.value : this.value[0];
+        this.element
+          .trigger({
+            'type': "slideStop",
+            'value': slideEventValue,
+            'min': this.min,
+            'max': this.max,
+            'start': this.start,
+            'end': this.end,
+            'step': this.step
+          })
+          .data("value", this.value)
+          .prop("value", this.value);
+      }
     },
 
     validateInputValue: function (val) {