Ver Fonte

[search] Set max width for slider to 250px

Enrico Berti há 11 anos atrás
pai
commit
e66a598

+ 0 - 1
desktop/core/static/css/bootstrap-slider.css

@@ -17,7 +17,6 @@
 */
 
 .slider {
-  display: inline-block;
   vertical-align: middle;
   position: relative;
   margin-top: 35px;

+ 131 - 133
desktop/core/static/js/bootstrap-slider.js

@@ -25,16 +25,14 @@
 
   var Slider = function (element, options) {
     var el = this.element = $(element).hide();
-    var origWidth = $(element)[0].style.width;
-
     var updateSlider = false;
     var parent = this.element.parent();
 
-
-    if (parent.hasClass('slider') === true) {
+    if (parent.hasClass("slider") === true) {
       updateSlider = true;
       this.picker = parent;
-    } else {
+    }
+    else {
       this.picker = $('<div class="slider">' +
         '<div class="slider-track">' +
         '<div class="slider-selection"></div>' +
@@ -52,59 +50,59 @@
         .append(this.element);
     }
 
-    this.id = this.element.data('slider-id') || options.id;
+    this.id = this.element.data("slider-id") || options.id;
     if (this.id) {
       this.picker[0].id = this.id;
     }
 
-    if (('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch) {
+    if (("ontouchstart" in window) || window.DocumentTouch && document instanceof window.DocumentTouch) {
       this.touchCapable = true;
     }
 
-    var tooltip = this.element.data('slider-tooltip') || options.tooltip;
+    var tooltip = this.element.data("slider-tooltip") || options.tooltip;
 
-    this.tooltip = this.picker.find('#tooltip');
-    this.tooltipInner = this.tooltip.find('input.tooltip-inner');
+    this.tooltip = this.picker.find("#tooltip");
+    this.tooltipInner = this.tooltip.find("input.tooltip-inner");
 
-    this.tooltip_start = this.picker.find('#tooltip_start');
-    this.tooltipInner_start = this.tooltip_start.find('input.tooltip-inner');
+    this.tooltip_start = this.picker.find("#tooltip_start");
+    this.tooltipInner_start = this.tooltip_start.find("input.tooltip-inner");
 
-    this.tooltip_end = this.picker.find('#tooltip_end');
-    this.tooltipInner_end = this.tooltip_end.find('input.tooltip-inner');
+    this.tooltip_end = this.picker.find("#tooltip_end");
+    this.tooltipInner_end = this.tooltip_end.find("input.tooltip-inner");
 
-    this.tooltip_min = this.picker.find('#tooltip_min');
-    this.tooltipInner_min = this.tooltip_min.find('input.tooltip-inner');
+    this.tooltip_min = this.picker.find("#tooltip_min");
+    this.tooltipInner_min = this.tooltip_min.find("input.tooltip-inner");
 
-    this.tooltip_max = this.picker.find('#tooltip_max');
-    this.tooltipInner_max = this.tooltip_max.find('input.tooltip-inner');
+    this.tooltip_max = this.picker.find("#tooltip_max");
+    this.tooltipInner_max = this.tooltip_max.find("input.tooltip-inner");
 
-    this.tooltip_step = this.picker.find('#tooltip_step');
-    this.tooltipInner_step = this.tooltip_step.find('input.tooltip-inner');
+    this.tooltip_step = this.picker.find("#tooltip_step");
+    this.tooltipInner_step = this.tooltip_step.find("input.tooltip-inner");
 
     if (updateSlider === true) {
       // Reset classes
-      this.picker.removeClass('slider-horizontal');
-      this.picker.removeClass('slider-vertical');
-      this.tooltip.removeClass('hide');
-      this.tooltip_start.removeClass('hide');
-      this.tooltip_end.removeClass('hide');
-      this.tooltip_min.removeClass('hide');
-      this.tooltip_max.removeClass('hide');
-      this.tooltip_step.removeClass('hide');
+      this.picker.removeClass("slider-horizontal");
+      this.picker.removeClass("slider-vertical");
+      this.tooltip.removeClass("hide");
+      this.tooltip_start.removeClass("hide");
+      this.tooltip_end.removeClass("hide");
+      this.tooltip_min.removeClass("hide");
+      this.tooltip_max.removeClass("hide");
+      this.tooltip_step.removeClass("hide");
     }
 
     this.picker
-      .addClass('slider-horizontal')
-    this.picker.width(this.element.parents(".card-widget").innerWidth() - 30);
-    this.stylePos = 'left';
-    this.mousePos = 'pageX';
-    this.sizePos = 'offsetWidth';
-    this.tooltip.addClass('top')[0].style.top = -this.tooltip.outerHeight() - 14 + 'px';
-    this.tooltip_start.addClass('top')[0].style.top = '-30px';
-    this.tooltip_end.addClass('top')[0].style.top = '-30px';
-    this.tooltip_min.addClass('top')[0].style.top = '18px';
-    this.tooltip_max.addClass('top')[0].style.top = '18px';
-    this.tooltip_step.addClass('top')[0].style.top = '18px';
+      .addClass("slider-horizontal")
+    this.picker.width(Math.min(this.element.parents(".card-widget").innerWidth() - 30, 250));
+    this.stylePos = "left";
+    this.mousePos = "pageX";
+    this.sizePos = "offsetWidth";
+    this.tooltip.addClass("top")[0].style.top = -this.tooltip.outerHeight() - 14 + "px";
+    this.tooltip_start.addClass("top")[0].style.top = "-30px";
+    this.tooltip_end.addClass("top")[0].style.top = "-30px";
+    this.tooltip_min.addClass("top")[0].style.top = "18px";
+    this.tooltip_max.addClass("top")[0].style.top = "18px";
+    this.tooltip_step.addClass("top")[0].style.top = "18px";
 
     this.tooltipInner_start.on({
       blur: $.proxy(this.blur, this, 0),
@@ -138,21 +136,21 @@
 
 
     var self = this;
-    $.each(['min',
-      'max',
-      'step',
-      'precision',
-      'value',
-      'start',
-      'end',
-      'reversed',
-      'handle'
+    $.each(["min",
+      "max",
+      "step",
+      "precision",
+      "value",
+      "start",
+      "end",
+      "reversed",
+      "handle"
     ], function (i, attr) {
-      if (typeof el.data('slider-' + attr) !== 'undefined') {
-        self[attr] = el.data('slider-' + attr);
-      } else if (typeof options[attr] !== 'undefined') {
+      if (typeof el.data("slider-" + attr) !== "undefined") {
+        self[attr] = el.data("slider-" + attr);
+      } else if (typeof options[attr] !== "undefined") {
         self[attr] = options[attr];
-      } else if (typeof el.prop(attr) !== 'undefined') {
+      } else if (typeof el.prop(attr) !== "undefined") {
         self[attr] = el.prop(attr);
       } else {
         self[attr] = 0; // to prevent empty string issues in calculations in IE
@@ -163,34 +161,34 @@
     this.range = true;
 
 
-    this.selection = this.element.data('slider-selection') || options.selection;
-    this.selectionEl = this.picker.find('.slider-selection');
-    if (this.selection === 'none') {
-      this.selectionEl.addClass('hide');
+    this.selection = this.element.data("slider-selection") || options.selection;
+    this.selectionEl = this.picker.find(".slider-selection");
+    if (this.selection === "none") {
+      this.selectionEl.addClass("hide");
     }
 
     this.selectionElStyle = this.selectionEl[0].style;
 
-    this.handle1 = this.picker.find('.slider-handle:first');
+    this.handle1 = this.picker.find(".slider-handle:first");
     this.handle1Stype = this.handle1[0].style;
 
-    this.handle2 = this.picker.find('.slider-handle:last');
+    this.handle2 = this.picker.find(".slider-handle:last");
     this.handle2Stype = this.handle2[0].style;
 
     if (updateSlider === true) {
       // Reset classes
-      this.handle1.removeClass('round triangle');
-      this.handle2.removeClass('round triangle hide');
+      this.handle1.removeClass("round triangle");
+      this.handle2.removeClass("round triangle hide");
     }
 
     switch (this.handle) {
-      case 'round':
-        this.handle1.addClass('round');
-        this.handle2.addClass('round');
+      case "round":
+        this.handle1.addClass("round");
+        this.handle2.addClass("round");
         break;
-      case 'triangle':
-        this.handle1.addClass('triangle');
-        this.handle2.addClass('triangle');
+      case "triangle":
+        this.handle1.addClass("triangle");
+        this.handle2.addClass("triangle");
         break;
     }
 
@@ -221,11 +219,11 @@
       mousedown: $.proxy(this.mousedown, this)
     });
 
-    if (tooltip === 'hide') {
-      this.tooltip.addClass('hide');
-      this.tooltip_start.addClass('hide');
-      this.tooltip_end.addClass('hide');
-    } else if (tooltip === 'always') {
+    if (tooltip === "hide") {
+      this.tooltip.addClass("hide");
+      this.tooltip_start.addClass("hide");
+      this.tooltip_end.addClass("hide");
+    } else if (tooltip === "always") {
       this.showTooltip();
       this.alwaysShowTooltip = true;
     } else {
@@ -244,13 +242,13 @@
     }
 
     this.enabled = options.enabled &&
-      (this.element.data('slider-enabled') === undefined || this.element.data('slider-enabled') === true);
+      (this.element.data("slider-enabled") === undefined || this.element.data("slider-enabled") === true);
     if (this.enabled) {
       this.enable();
     } else {
       this.disable();
     }
-    this.natural_arrow_keys = this.element.data('slider-natural_arrow_keys') || options.natural_arrow_keys;
+    this.natural_arrow_keys = this.element.data("slider-natural_arrow_keys") || options.natural_arrow_keys;
     this.layout();
 
     var _self = this;
@@ -271,13 +269,13 @@
 
     showTooltip: function () {
       if (this.tooltip_split === false) {
-        this.tooltip.addClass('in');
+        this.tooltip.addClass("in");
       } else {
-        this.tooltip_start.addClass('in');
-        this.tooltip_end.addClass('in');
-        this.tooltip_min.addClass('in');
-        this.tooltip_max.addClass('in');
-        this.tooltip_step.addClass('in');
+        this.tooltip_start.addClass("in");
+        this.tooltip_end.addClass("in");
+        this.tooltip_min.addClass("in");
+        this.tooltip_max.addClass("in");
+        this.tooltip_step.addClass("in");
       }
 
       this.over = true;
@@ -285,12 +283,12 @@
 
     hideTooltip: function () {
       if (this.inDrag === false && this.alwaysShowTooltip !== true) {
-        this.tooltip.removeClass('in');
-        this.tooltip_start.removeClass('in');
-        this.tooltip_end.removeClass('in');
-        this.tooltip_min.removeClass('in');
-        this.tooltip_max.removeClass('in');
-        this.tooltip_step.removeClass('in');
+        this.tooltip.removeClass("in");
+        this.tooltip_start.removeClass("in");
+        this.tooltip_end.removeClass("in");
+        this.tooltip_min.removeClass("in");
+        this.tooltip_max.removeClass("in");
+        this.tooltip_step.removeClass("in");
       }
       this.over = false;
     },
@@ -298,7 +296,7 @@
     layout: function () {
       var positionPercentages;
 
-      this.picker.width(this.element.parents(".card-widget").innerWidth() - 30);
+      this.picker.width(Math.min(this.element.parents(".card-widget").innerWidth() - 30, 250));
       this.size = this.picker[0][this.sizePos];
 
       if (this.reversed) {
@@ -307,11 +305,11 @@
         positionPercentages = [ this.percentage[0], this.percentage[1] ];
       }
 
-      this.handle1Stype[this.stylePos] = positionPercentages[0] + '%';
-      this.handle2Stype[this.stylePos] = positionPercentages[1] + '%';
+      this.handle1Stype[this.stylePos] = positionPercentages[0] + "%";
+      this.handle2Stype[this.stylePos] = positionPercentages[1] + "%";
 
-      this.selectionElStyle.left = Math.min(positionPercentages[0], positionPercentages[1]) + '%';
-      this.selectionElStyle.width = Math.abs(positionPercentages[0] - positionPercentages[1]) + '%';
+      this.selectionElStyle.left = Math.min(positionPercentages[0], positionPercentages[1]) + "%";
+      this.selectionElStyle.width = Math.abs(positionPercentages[0] - positionPercentages[1]) + "%";
 
       this.tooltip_min.addClass("bottom");
       this.tooltip_max.addClass("bottom");
@@ -321,7 +319,7 @@
         this.tooltipInner.val(
           this.formatter(this.value[0]) + this.tooltip_separator + this.formatter(this.value[1])
         );
-        this.tooltip[0].style[this.stylePos] = this.size * (positionPercentages[0] + (positionPercentages[1] - positionPercentages[0]) / 2) / 100 - (this.tooltip.outerWidth() / 2) + 'px';
+        this.tooltip[0].style[this.stylePos] = this.size * (positionPercentages[0] + (positionPercentages[1] - positionPercentages[0]) / 2) / 100 - (this.tooltip.outerWidth() / 2) + "px";
 
         this.tooltipInner_start.val(
           this.formatter(this.value[0])
@@ -340,18 +338,18 @@
           this.formatter(this.step)
         );
 
-        this.tooltip_start[0].style[this.stylePos] = this.size * ( (positionPercentages[0]) / 100) - (this.tooltip_start.outerWidth() / 2) + 'px';
-        this.tooltip_end[0].style[this.stylePos] = this.size * ( (positionPercentages[1]) / 100) - (this.tooltip_end.outerWidth() / 2) + 'px';
+        this.tooltip_start[0].style[this.stylePos] = this.size * ( (positionPercentages[0]) / 100) - (this.tooltip_start.outerWidth() / 2) + "px";
+        this.tooltip_end[0].style[this.stylePos] = this.size * ( (positionPercentages[1]) / 100) - (this.tooltip_end.outerWidth() / 2) + "px";
 
-        this.tooltip_min[0].style[this.stylePos] = -(this.tooltip_min.outerWidth() / 2) + 'px';
-        this.tooltip_max[0].style[this.stylePos] = this.size - (this.tooltip_max.outerWidth() / 2) + 'px';
-        this.tooltip_step[0].style[this.stylePos] = this.size/2 - (this.tooltip_max.outerWidth() / 2) + 'px';
+        this.tooltip_min[0].style[this.stylePos] = -(this.tooltip_min.outerWidth() / 2) + "px";
+        this.tooltip_max[0].style[this.stylePos] = this.size - (this.tooltip_max.outerWidth() / 2) + "px";
+        this.tooltip_step[0].style[this.stylePos] = this.size/2 - (this.tooltip_max.outerWidth() / 2) + "px";
 
       } else {
         this.tooltipInner.val(
           this.formatter(this.value[0])
         );
-        this.tooltip[0].style[this.stylePos] = this.size * positionPercentages[0] / 100 - (this.tooltip.outerWidth() / 2) + 'px';
+        this.tooltip[0].style[this.stylePos] = this.size * positionPercentages[0] / 100 - (this.tooltip.outerWidth() / 2) + "px";
       }
     },
 
@@ -378,7 +376,7 @@
         return false;
       }
       // Touch: Get the original event:
-      if (this.touchCapable && ev.type === 'touchstart') {
+      if (this.touchCapable && ev.type === "touchstart") {
         ev = ev.originalEvent;
       }
 
@@ -424,11 +422,11 @@
       this.inDrag = true;
       var val = this.calculateValue();
       this.element.trigger({
-        type: 'slideStart',
+        type: "slideStart",
         value: val
       })
-        .data('value', val)
-        .prop('value', val);
+        .data("value", val)
+        .prop("value", val);
       this.setAdditionalValues();
       this.setValue(val);
       return true;
@@ -487,22 +485,22 @@
       var val = this.calculateValue();
 
       this.element.trigger({
-        type: 'slideStart',
+        type: "slideStart",
         value: val
       })
-        .data('value', val)
-        .prop('value', val);
+        .data("value", val)
+        .prop("value", val);
 
       this.setAdditionalValues();
       this.setValue(val, true);
 
       this.element
         .trigger({
-          type: 'slideStop',
+          type: "slideStop",
           value: val
         })
-        .data('value', val)
-        .prop('value', val);
+        .data("value", val)
+        .prop("value", val);
       return false;
     },
 
@@ -511,7 +509,7 @@
         return false;
       }
       // Touch: Get the original event:
-      if (this.touchCapable && ev.type === 'touchmove') {
+      if (this.touchCapable && ev.type === "touchmove") {
         ev = ev.originalEvent;
       }
 
@@ -562,10 +560,10 @@
       var val = this.calculateValue();
       this.layout();
       this.element
-        .data('value', val)
-        .prop('value', val)
+        .data("value", val)
+        .prop("value", val)
         .trigger({
-          type: 'slideStop',
+          type: "slideStop",
           value: val
         });
       return false;
@@ -620,7 +618,7 @@
     },
 
     getPercentage: function (ev) {
-      if (this.touchCapable && (ev.type === 'touchstart' || ev.type === 'touchmove')) {
+      if (this.touchCapable && (ev.type === "touchstart" || ev.type === "touchmove")) {
         ev = ev.touches[0];
       }
       var percentage = (ev[this.mousePos] - this.offset[this.stylePos]) * 100 / this.size;
@@ -658,8 +656,8 @@
       } else {
         this.value = this.applyPrecision(this.value);
         this.value = [ Math.max(this.min, Math.min(this.max, this.value))];
-        this.handle2.addClass('hide');
-        if (this.selection === 'after') {
+        this.handle2.addClass("hide");
+        if (this.selection === "after") {
           this.value[1] = this.max;
         } else {
           this.value[1] = this.min;
@@ -684,7 +682,7 @@
         var slideEventValue = this.range ? this.value : this.value[0];
         this.element
           .trigger({
-            'type': 'slide',
+            'type': "slide",
             'value': slideEventValue,
             'min': this.min,
             'max': this.max,
@@ -692,17 +690,17 @@
             'end': this.end,
             'step': this.step
           })
-          .data('value', this.value)
-          .prop('value', this.value);
+          .data("value", this.value)
+          .prop("value", this.value);
       }
     },
 
     validateInputValue: function (val) {
-      if (typeof val === 'number') {
+      if (typeof val === "number") {
         return val;
       } else if (val instanceof Array) {
         $.each(val, function (i, input) {
-          if (typeof input !== 'number') {
+          if (typeof input !== "number") {
             throw new Error(ErrorMsgs.formatInvalidInputErrorMsg(input));
           }
         });
@@ -717,23 +715,23 @@
       this.handle2.off();
       this.element.off().show().insertBefore(this.picker);
       this.picker.off().remove();
-      $(this.element).removeData('slider');
+      $(this.element).removeData("slider");
     },
 
     disable: function () {
       this.enabled = false;
       this.handle1.removeAttr("tabindex");
       this.handle2.removeAttr("tabindex");
-      this.picker.addClass('slider-disabled');
-      this.element.trigger('slideDisabled');
+      this.picker.addClass("slider-disabled");
+      this.element.trigger("slideDisabled");
     },
 
     enable: function () {
       this.enabled = true;
       this.handle1.attr("tabindex", 0);
       this.handle2.attr("tabindex", 0);
-      this.picker.removeClass('slider-disabled');
-      this.element.trigger('slideEnabled');
+      this.picker.removeClass("slider-disabled");
+      this.element.trigger("slideEnabled");
     },
 
     toggle: function () {
@@ -772,7 +770,7 @@
   };
 
   $.fn.slider = function (option) {
-    if (typeof option === 'string' && option !== 'refresh') {
+    if (typeof option === "string" && option !== "refresh") {
       var args = Array.prototype.slice.call(arguments, 1);
       return invokePublicMethod.call(this, option, args);
     } else {
@@ -796,7 +794,7 @@
   }
 
   function retrieveSliderObjectFromElement(element) {
-    var sliderObject = $(element).data('slider');
+    var sliderObject = $(element).data("slider");
     if (sliderObject && sliderObject instanceof Slider) {
       return sliderObject;
     } else {
@@ -808,8 +806,8 @@
     var $this = $(this);
     $this.each(function () {
       var $this = $(this),
-        slider = $this.data('slider'),
-        options = typeof opts === 'object' && opts;
+        slider = $this.data("slider"),
+        options = typeof opts === "object" && opts;
 
       // If slider already exists, use its attributes
       // as options so slider refreshes properly
@@ -821,7 +819,7 @@
         });
       }
 
-      $this.data('slider', (new Slider(this, $.extend({}, $.fn.slider.defaults, options))));
+      $this.data("slider", (new Slider(this, $.extend({}, $.fn.slider.defaults, options))));
     });
     return $this;
   }
@@ -833,12 +831,12 @@
     precision: 0,
     value: 5,
     range: false,
-    selection: 'before',
-    tooltip: 'show',
-    tooltip_separator: ':',
+    selection: "before",
+    tooltip: "show",
+    tooltip_separator: ":",
     tooltip_split: false,
     natural_arrow_keys: false,
-    handle: 'round',
+    handle: "round",
     reversed: false,
     enabled: true,
     formatter: function (value) {