Added range dragging to range sliders

nova/static/js/dragslider.js

@@ -0,0 +1,122 @@
+(function( $, undefined ) {
+
+$.widget("ui.dragslider", $.ui.slider, {
+
+    options: $.extend({},$.ui.slider.prototype.options,{rangeDrag:true}),
+
+    _create: function() {
+        $.ui.slider.prototype._create.apply(this,arguments);
+        this._rangeCapture = false;
+    },
+
+    _createRange: function( event ) {
+        $.ui.slider.prototype._createRange.apply(this,arguments);
+        var o = this.options;
+        if ( o.range && o.rangeDrag) {
+            this.dragIcon = $("<i>").appendTo(this.range);
+            this.range.css({
+                    "text-align":"center",
+                    "font-size":"1.5em",
+                    "overflow": "hidden"
+                });
+            this.dragIcon.css({
+                "color": "#aaa",
+                "pointer-events":"none"
+            });
+            if (o.orientation === "horizontal") {
+                this._addClass(this.dragIcon, "fa fa-ellipsis-h");
+                this.dragIcon.css({
+                    "position":"relative",
+                    "top":"-11px"
+                });
+            } else {
+                this._addClass(this.dragIcon, "fa fa-ellipsis-v");
+                this.range.css({"display": "table"});
+                this.dragIcon.css({
+                    "display": "table-cell",
+                    "vertical-align":"middle"
+                });
+            }
+        }
+    },
+
+    _mouseCapture: function( event ) {
+        var o = this.options;
+
+        if ( o.disabled ) return false;
+
+        if(event.target == this.range.get(0) && o.rangeDrag && o.range) {
+            this._rangeCapture = true;
+            this._rangeStart = null;
+        }
+        else {
+            this._rangeCapture = false;
+        }
+
+        $.ui.slider.prototype._mouseCapture.apply(this,arguments);
+
+        if(this._rangeCapture == true) {
+            this.handles.removeClass("ui-state-active").blur();
+        }
+
+        return true;
+    },
+
+    _mouseStop: function( event ) {
+        this._rangeStart = null;
+        return $.ui.slider.prototype._mouseStop.apply(this,arguments);
+    },
+
+    _slide: function( event, index, newVal ) {
+        if(!this._rangeCapture) {
+          return $.ui.slider.prototype._slide.apply(this,arguments);
+        }
+
+        if(this._rangeStart == null) {
+          this._rangeStart = newVal;
+        }
+
+        var oldValueLeft = Number(this.options.values[0]),
+            oldValueRight = Number(this.options.values[1]),
+            slideDistance = newVal - this._rangeStart,
+            newValueLeft = oldValueLeft + slideDistance,
+            newValueRight = oldValueRight + slideDistance,
+            allowed;
+
+        if ( this.options.values && this.options.values.length ) {
+            if(newValueRight > this._valueMax() && slideDistance > 0) {
+                slideDistance -= (newValueRight-this._valueMax());
+                newValueLeft = oldValueLeft + slideDistance;
+                newValueRight = oldValueRight + slideDistance;
+            }
+
+            if(newValueLeft < this._valueMin()) {
+                slideDistance += (this._valueMin()-newValueLeft);
+                newValueLeft = oldValueLeft + slideDistance;
+                newValueRight = oldValueRight + slideDistance;
+            }
+
+            if ( slideDistance != 0 ) {
+                newValues = this.values();
+                newValues[ 0 ] = newValueLeft;
+                newValues[ 1 ] = newValueRight;
+
+                allowed = this._trigger( "slide", event, {
+                    handle: this.handles[ index ],
+                    value: slideDistance,
+                    values: newValues
+                });
+
+                if ( allowed !== false ) {
+                    this.values( 0, newValueLeft, true );
+                    this.values( 1, newValueRight, true );
+                }
+                this._rangeStart = newVal;
+            }
+        }
+    },
+
+
+});
+
+})(jQuery);

nova/templates/dataset/wave.html

@@ -49,6 +49,7 @@
   <script src="{{ url_for('static', filename='js/wave/ejs.js') }}"></script>
   <script src="{{ url_for('static', filename='js/wave/volumeRaycaster.js') }}"></script>
   <script src="{{ url_for('static', filename='js/wave/stats.min.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/dragslider.js') }}"></script>
   <script>
         var collection_name = '{{ collection }}';
         var dataset_name = '{{ dataset.name }}';
@@ -114,8 +115,9 @@
                     $("#gray-threshold-max-input").val($max);
                 }
             });
-            $("#slider-X").slider ({
+            $("#slider-X").dragslider ({
                 range: true,
+                rangeDrag: true,
                 min: 0,
                 max: 100,
                 values: [0, 100],
@@ -128,8 +130,9 @@
                     $("#x-max-input").val($max);
                 }
             });
-            $("#slider-Y").slider ({
+            $("#slider-Y").dragslider ({
                 range: true,
+                rangeDrag: true,
                 min: 0,
                 max: 100,
                 values: [0, 100],
@@ -142,11 +145,12 @@
                     $("#y-max-input").val($max);
                 }
             });
-            $("#slider-Z").slider ({
+            $("#slider-Z").dragslider ({
                 range: true,
+                rangeDrag: true,
                 min: 0,
                 max: 100,
-                values: [0, 100],
+                values: [0, 100]
                 slide: function( event, ui ) {
                     $min = ui.values[0];
                     $max = ui.values[1];
@@ -165,43 +169,59 @@
             $("#z-min-input").val(0);
             $("#z-max-input").val(100);
             $("#gray-threshold-min-input").change(function() {
-                $values = [$(this).val(), $("#slider-gray-threshold" ).slider("option", "values")[1]];
+                $max = $("#slider-gray-threshold" ).slider("option", "values")[1];
+                $(this).val($(this).val() < $max ?$(this).val():$max);
+                $values = [$(this).val(), $max];
                 $("#slider-gray-threshold").slider("option", "values", $values);
                 rcl2.setGrayMinValue($(this).val()/255);
             });
             $("#gray-threshold-max-input").change(function() {
-                $values = [$("#slider-gray-threshold" ).slider("option", "values")[0], $(this).val()];
+                $min = $("#slider-gray-threshold" ).slider("option", "values")[0];
+                $(this).val($(this).val() > $min ?$(this).val():$min);
+                $values = [$min, $(this).val()];
                 $("#slider-gray-threshold").slider("option", "values", $values);
                 rcl2.setGrayMaxValue($(this).val()/255);
             });
             $("#x-min-input").change(function() {
-                $values = [$(this).val(), $("#slider-X" ).slider("option", "values")[1]];
-                $("#slider-X").slider("option", "values", $values);
+                $max = $("#slider-X" ).dragslider("option", "values")[1];
+                $(this).val($(this).val() < $max ?$(this).val():$max);
+                $values = [$(this).val(), $max];
+                $("#slider-X").dragslider("option", "values", $values);
                 rcl2.setGeometryMinX($(this).val()/100);
             });
             $("#x-max-input").change(function() {
-                $values = [$("#slider-X" ).slider("option", "values")[0], $(this).val()];
-                $("#slider-X").slider("option", "values", $values);
+                $min = $("#slider-X" ).dragslider("option", "values")[0];
+                $(this).val($(this).val() > $min ?$(this).val():$min);
+                $values = [$min, $(this).val()];
+                $("#slider-X").dragslider("option", "values", $values);
                 rcl2.setGeometryMaxX($(this).val()/100);
             });
             $("#y-min-input").change(function() {
-                $values = [$(this).val(), $("#slider-Y" ).slider("option", "values")[1]];
-                $("#slider-Y").slider("option", "values", $values);
+                $max = $("#slider-Y" ).dragslider("option", "values")[1];
+                $(this).val($(this).val() < $max ?$(this).val():$max);
+                $values = [$(this).val(), $max];
+                $("#slider-Y").dragslider("option", "values", $values);
                 rcl2.setGeometryMinY($(this).val()/100);
             });
             $("#y-max-input").change(function() {
-                $values = [$("#slider-Y" ).slider("option", "values")[0], $(this).val()];
-                $("#slider-Y").slider("option", "values", $values);
+                $min = $("#slider-Y" ).dragslider("option", "values")[0];
+                $(this).val($(this).val() > $min ?$(this).val():$min);
+                $values = [$min, $(this).val()];
+                $("#slider-Y").dragslider("option", "values", $values);
                 rcl2.setGeometryMaxY($(this).val()/100);
             });
             $("#z-min-input").change(function() {
-                $values = [$(this).val(), $("#slider-Z" ).slider("option", "values")[1]];
-                $("#slider-Z").slider("option", "values", $values);
+                $max = $("#slider-Z" ).dragslider("option", "values")[1];
+                $(this).val($(this).val() < $max ?$(this).val():$max);
+                $values = [$(this).val(), $max];
+                $("#slider-Z").dragslider("option", "values", $values);
                 rcl2.setGeometryMinZ($(this).val()/100);
             });
             $("#z-max-input").change(function() {
-                $values = [$("#slider-Z" ).slider("option", "values")[0], $(this).val()];
-                $("#slider-Z").slider("option", "values", $values);
+                $min = $("#slider-Z" ).dragslider("option", "values")[0];
+                $(this).val($(this).val() > $min ?$(this).val():$min);
+                $values = [$min, $(this).val()];
+                $("#slider-Z").dragslider("option", "values", $values);
                 rcl2.setGeometryMaxZ($(this).val()/100);
             });
          });