active_frontend 12.2.0 → 12.3.0

data/vendor/assets/javascripts/_modal.js

@@ -5,10 +5,15 @@
   // ======================
 
   var Modal = function (element, options) {
-    this.options   = options
-    this.$element  = $(element)
-    this.$backdrop =
-    this.isShown   = null
+    this.options             = options
+    this.$body               = $(document.body)
+    this.$element            = $(element)
+    this.$dialog             = this.$element.find('.modal-dialog')
+    this.$backdrop           = null
+    this.isShown             = null
+    this.originalBodyPad     = null
+    this.scrollbarWidth      = 0
+    this.ignoreBackdropClick = false
 
     if (this.options.remote) {
       this.$element
@@ -19,6 +24,11 @@
     }
   }
 
+  Modal.VERSION  = '3.3.6'
+
+  Modal.TRANSITION_DURATION = 300
+  Modal.BACKDROP_TRANSITION_DURATION = 150
+
   Modal.DEFAULTS = {
     backdrop: true,
     keyboard: true,
@@ -26,7 +36,7 @@
   }
 
   Modal.prototype.toggle = function (_relatedTarget) {
-    return this[!this.isShown ? 'show' : 'hide'](_relatedTarget)
+    return this.isShown ? this.hide() : this.show(_relatedTarget)
   }
 
   Modal.prototype.show = function (_relatedTarget) {
@@ -39,40 +49,51 @@
 
     this.isShown = true
 
+    this.checkScrollbar()
+    this.setScrollbar()
+    this.$body.addClass('modal-open')
+
     this.escape()
+    this.resize()
 
     this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
 
+    this.$dialog.on('mousedown.dismiss.bs.modal', function () {
+      that.$element.one('mouseup.dismiss.bs.modal', function (e) {
+        if ($(e.target).is(that.$element)) that.ignoreBackdropClick = true
+      })
+    })
+
     this.backdrop(function () {
       var transition = $.support.transition && that.$element.hasClass('fade')
 
       if (!that.$element.parent().length) {
-        that.$element.appendTo(document.body) // don't move modals dom position
+        that.$element.appendTo(that.$body) // don't move modals dom position
       }
 
       that.$element
         .show()
         .scrollTop(0)
 
+      that.adjustDialog()
+
       if (transition) {
         that.$element[0].offsetWidth // force reflow
       }
 
-      that.$element
-        .addClass('in')
-        .attr('aria-hidden', false)
+      that.$element.addClass('in')
 
       that.enforceFocus()
 
       var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
 
       transition ?
-        that.$element.find('.modal-dialog') // wait for modal to slide in
-          .one($.support.transition.end, function () {
-            that.$element.focus().trigger(e)
+        that.$dialog // wait for modal to slide in
+          .one('bsTransitionEnd', function () {
+            that.$element.trigger('focus').trigger(e)
           })
-          .emulateTransitionEnd(300) :
-        that.$element.focus().trigger(e)
+          .emulateTransitionEnd(Modal.TRANSITION_DURATION) :
+        that.$element.trigger('focus').trigger(e)
     })
   }
 
@@ -88,18 +109,21 @@
     this.isShown = false
 
     this.escape()
+    this.resize()
 
     $(document).off('focusin.bs.modal')
 
     this.$element
       .removeClass('in')
-      .attr('aria-hidden', true)
       .off('click.dismiss.bs.modal')
+      .off('mouseup.dismiss.bs.modal')
+
+    this.$dialog.off('mousedown.dismiss.bs.modal')
 
     $.support.transition && this.$element.hasClass('fade') ?
       this.$element
-        .one($.support.transition.end, $.proxy(this.hideModal, this))
-        .emulateTransitionEnd(300) :
+        .one('bsTransitionEnd', $.proxy(this.hideModal, this))
+        .emulateTransitionEnd(Modal.TRANSITION_DURATION) :
       this.hideModal()
   }
 
@@ -108,18 +132,26 @@
       .off('focusin.bs.modal') // guard against infinite focus loop
       .on('focusin.bs.modal', $.proxy(function (e) {
         if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
-          this.$element.focus()
+          this.$element.trigger('focus')
         }
       }, this))
   }
 
   Modal.prototype.escape = function () {
     if (this.isShown && this.options.keyboard) {
-      this.$element.on('keyup.dismiss.bs.modal', $.proxy(function (e) {
+      this.$element.on('keydown.dismiss.bs.modal', $.proxy(function (e) {
         e.which == 27 && this.hide()
       }, this))
     } else if (!this.isShown) {
-      this.$element.off('keyup.dismiss.bs.modal')
+      this.$element.off('keydown.dismiss.bs.modal')
+    }
+  }
+
+  Modal.prototype.resize = function () {
+    if (this.isShown) {
+      $(window).on('resize.bs.modal', $.proxy(this.handleUpdate, this))
+    } else {
+      $(window).off('resize.bs.modal')
     }
   }
 
@@ -127,7 +159,9 @@
     var that = this
     this.$element.hide()
     this.backdrop(function () {
-      that.removeBackdrop()
+      that.$body.removeClass('modal-open')
+      that.resetAdjustments()
+      that.resetScrollbar()
       that.$element.trigger('hidden.bs.modal')
     })
   }
@@ -138,19 +172,25 @@
   }
 
   Modal.prototype.backdrop = function (callback) {
+    var that = this
     var animate = this.$element.hasClass('fade') ? 'fade' : ''
 
     if (this.isShown && this.options.backdrop) {
       var doAnimate = $.support.transition && animate
 
-      this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
-        .appendTo(document.body)
+      this.$backdrop = $(document.createElement('div'))
+        .addClass('modal-backdrop ' + animate)
+        .appendTo(this.$body)
 
       this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) {
+        if (this.ignoreBackdropClick) {
+          this.ignoreBackdropClick = false
+          return
+        }
         if (e.target !== e.currentTarget) return
         this.options.backdrop == 'static'
-          ? this.$element[0].focus.call(this.$element[0])
-          : this.hide.call(this)
+          ? this.$element[0].focus()
+          : this.hide()
       }, this))
 
       if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
@@ -161,31 +201,84 @@
 
       doAnimate ?
         this.$backdrop
-          .one($.support.transition.end, callback)
-          .emulateTransitionEnd(150) :
+          .one('bsTransitionEnd', callback)
+          .emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) :
         callback()
 
     } else if (!this.isShown && this.$backdrop) {
       this.$backdrop.removeClass('in')
 
+      var callbackRemove = function () {
+        that.removeBackdrop()
+        callback && callback()
+      }
       $.support.transition && this.$element.hasClass('fade') ?
         this.$backdrop
-          .one($.support.transition.end, callback)
-          .emulateTransitionEnd(150) :
-        callback()
+          .one('bsTransitionEnd', callbackRemove)
+          .emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) :
+        callbackRemove()
 
     } else if (callback) {
       callback()
     }
   }
 
+  // these following methods are used to handle overflowing modals
+
+  Modal.prototype.handleUpdate = function () {
+    this.adjustDialog()
+  }
+
+  Modal.prototype.adjustDialog = function () {
+    var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight
+
+    this.$element.css({
+      paddingLeft:  !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
+      paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
+    })
+  }
+
+  Modal.prototype.resetAdjustments = function () {
+    this.$element.css({
+      paddingLeft: '',
+      paddingRight: ''
+    })
+  }
+
+  Modal.prototype.checkScrollbar = function () {
+    var fullWindowWidth = window.innerWidth
+    if (!fullWindowWidth) { // workaround for missing window.innerWidth in IE8
+      var documentElementRect = document.documentElement.getBoundingClientRect()
+      fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left)
+    }
+    this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth
+    this.scrollbarWidth = this.measureScrollbar()
+  }
+
+  Modal.prototype.setScrollbar = function () {
+    var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
+    this.originalBodyPad = document.body.style.paddingRight || ''
+    if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
+  }
+
+  Modal.prototype.resetScrollbar = function () {
+    this.$body.css('padding-right', this.originalBodyPad)
+  }
+
+  Modal.prototype.measureScrollbar = function () { // thx walsh
+    var scrollDiv = document.createElement('div')
+    scrollDiv.className = 'modal-scrollbar-measure'
+    this.$body.append(scrollDiv)
+    var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth
+    this.$body[0].removeChild(scrollDiv)
+    return scrollbarWidth
+  }
+
 
   // MODAL PLUGIN DEFINITION
   // =======================
 
-  var old = $.fn.modal
-
-  $.fn.modal = function (option, _relatedTarget) {
+  function Plugin(option, _relatedTarget) {
     return this.each(function () {
       var $this   = $(this)
       var data    = $this.data('bs.modal')
@@ -197,6 +290,9 @@
     })
   }
 
+  var old = $.fn.modal
+
+  $.fn.modal             = Plugin
   $.fn.modal.Constructor = Modal
 
 
@@ -215,20 +311,18 @@
   $(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
     var $this   = $(this)
     var href    = $this.attr('href')
-    var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
+    var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7
     var option  = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
 
     if ($this.is('a')) e.preventDefault()
 
-    $target
-      .modal(option, this)
-      .one('hide', function () {
-        $this.is(':visible') && $this.focus()
+    $target.one('show.bs.modal', function (showEvent) {
+      if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown
+      $target.one('hidden.bs.modal', function () {
+        $this.is(':visible') && $this.trigger('focus')
       })
+    })
+    Plugin.call($target, option, this)
   })
 
-  $(document)
-    .on('show.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') })
-    .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') })
-
 }(jQuery);

data/vendor/assets/javascripts/_popover.js

@@ -10,7 +10,7 @@
 
   if (!$.fn.tooltip) throw new Error('Popover requires tooltip.js')
 
-  Popover.VERSION  = '3.3.2'
+  Popover.VERSION  = '3.3.6'
 
   Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
     placement: 'right',
@@ -66,11 +66,6 @@
     return (this.$arrow = this.$arrow || this.tip().find('.arrow'))
   }
 
-  Popover.prototype.tip = function () {
-    if (!this.$tip) this.$tip = $(this.options.template)
-    return this.$tip
-  }
-
 
   // POPOVER PLUGIN DEFINITION
   // =========================
@@ -81,7 +76,7 @@
       var data    = $this.data('bs.popover')
       var options = typeof option == 'object' && option
 
-      if (!data && option == 'destroy') return
+      if (!data && /destroy|hide/.test(option)) return
       if (!data) $this.data('bs.popover', (data = new Popover(this, options)))
       if (typeof option == 'string') data[option]()
     })

data/vendor/assets/javascripts/_scrollspy.js

@@ -5,10 +5,8 @@
   // ==========================
 
   function ScrollSpy(element, options) {
-    var process  = $.proxy(this.process, this)
-
-    this.$body          = $('body')
-    this.$scrollElement = $(element).is('body') ? $(window) : $(element)
+    this.$body          = $(document.body)
+    this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)
     this.options        = $.extend({}, ScrollSpy.DEFAULTS, options)
     this.selector       = (this.options.target || '') + ' .nav li > a'
     this.offsets        = []
@@ -16,12 +14,12 @@
     this.activeTarget   = null
     this.scrollHeight   = 0
 
-    this.$scrollElement.on('scroll.bs.scrollspy', process)
+    this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))
     this.refresh()
     this.process()
   }
 
-  ScrollSpy.VERSION  = '3.3.2'
+  ScrollSpy.VERSION  = '3.3.6'
 
   ScrollSpy.DEFAULTS = {
     offset: 10
@@ -32,20 +30,19 @@
   }
 
   ScrollSpy.prototype.refresh = function () {
-    var offsetMethod = 'offset'
-    var offsetBase   = 0
+    var that          = this
+    var offsetMethod  = 'offset'
+    var offsetBase    = 0
+
+    this.offsets      = []
+    this.targets      = []
+    this.scrollHeight = this.getScrollHeight()
 
     if (!$.isWindow(this.$scrollElement[0])) {
       offsetMethod = 'position'
       offsetBase   = this.$scrollElement.scrollTop()
     }
 
-    this.offsets = []
-    this.targets = []
-    this.scrollHeight = this.getScrollHeight()
-
-    var self     = this
-
     this.$body
       .find(this.selector)
       .map(function () {
@@ -60,8 +57,8 @@
       })
       .sort(function (a, b) { return a[0] - b[0] })
       .each(function () {
-        self.offsets.push(this[0])
-        self.targets.push(this[1])
+        that.offsets.push(this[0])
+        that.targets.push(this[1])
       })
   }
 
@@ -90,7 +87,7 @@
     for (i = offsets.length; i--;) {
       activeTarget != targets[i]
         && scrollTop >= offsets[i]
-        && (!offsets[i + 1] || scrollTop <= offsets[i + 1])
+        && (offsets[i + 1] === undefined || scrollTop < offsets[i + 1])
         && this.activate(targets[i])
     }
   }
@@ -101,8 +98,8 @@
     this.clear()
 
     var selector = this.selector +
-        '[data-target="' + target + '"],' +
-        this.selector + '[href="' + target + '"]'
+      '[data-target="' + target + '"],' +
+      this.selector + '[href="' + target + '"]'
 
     var active = $(selector)
       .parents('li')

data/vendor/assets/javascripts/_slider.js

@@ -1,4 +1,4 @@
-(function(root, factory) {
+(function(factory) {
   if(typeof define === "function" && define.amd) {
     define(["jquery"], factory);
   }
@@ -12,10 +12,10 @@
     }
     module.exports = factory(jQuery);
   }
-  else {
-    root.Slider = factory(root.jQuery);
+  else if(window) {
+    window.Slider = factory(window.jQuery);
   }
-}(this, function($) {
+}(function($) {
   // Reference to Slider constructor
   var Slider;
 
@@ -174,25 +174,26 @@
       linear: {
         toValue: function(percentage) {
           var rawValue = percentage/100 * (this.options.max - this.options.min);
+          var shouldAdjustWithBase = true;
           if (this.options.ticks_positions.length > 0) {
             var minv, maxv, minp, maxp = 0;
-            for (var i = 0; i < this.options.ticks_positions.length; i++) {
+            for (var i = 1; i < this.options.ticks_positions.length; i++) {
               if (percentage <= this.options.ticks_positions[i]) {
-                minv = (i > 0) ? this.options.ticks[i-1] : 0;
-                minp = (i > 0) ? this.options.ticks_positions[i-1] : 0;
+                minv = this.options.ticks[i-1];
+                minp = this.options.ticks_positions[i-1];
                 maxv = this.options.ticks[i];
                 maxp = this.options.ticks_positions[i];
 
                 break;
               }
             }
-            if (i > 0) {
-              var partialPercentage = (percentage - minp) / (maxp - minp);
-              rawValue = minv + partialPercentage * (maxv - minv);
-            }
+            var partialPercentage = (percentage - minp) / (maxp - minp);
+            rawValue = minv + partialPercentage * (maxv - minv);
+            shouldAdjustWithBase = false;
           }
 
-          var value = this.options.min + Math.round(rawValue / this.options.step) * this.options.step;
+          var adjustment = shouldAdjustWithBase ? this.options.min : 0;
+          var value = adjustment + Math.round(rawValue / this.options.step) * this.options.step;
           if (value < this.options.min) {
             return this.options.min;
           } else if (value > this.options.max) {
@@ -282,8 +283,8 @@
         offset: null,
         size: null,
         percentage: null,
-        inDrag: null,
-        over: null
+        inDrag: false,
+        over: false
       };
 
 
@@ -383,14 +384,33 @@
 
         sliderMinHandle = document.createElement("div");
         sliderMinHandle.className = "slider-handle min-slider-handle";
+        sliderMinHandle.setAttribute('role', 'slider');
+        sliderMinHandle.setAttribute('aria-valuemin', this.options.min);
+        sliderMinHandle.setAttribute('aria-valuemax', this.options.max);
 
         sliderMaxHandle = document.createElement("div");
         sliderMaxHandle.className = "slider-handle max-slider-handle";
+        sliderMaxHandle.setAttribute('role', 'slider');
+        sliderMaxHandle.setAttribute('aria-valuemin', this.options.min);
+        sliderMaxHandle.setAttribute('aria-valuemax', this.options.max);
 
         sliderTrack.appendChild(sliderTrackLow);
         sliderTrack.appendChild(sliderTrackSelection);
         sliderTrack.appendChild(sliderTrackHigh);
 
+        /* Add aria-labelledby to handle's */
+        var isLabelledbyArray = Array.isArray(this.options.labelledby);
+        if (isLabelledbyArray && this.options.labelledby[0]) {
+          sliderMinHandle.setAttribute('aria-labelledby', this.options.labelledby[0]);
+        }
+        if (isLabelledbyArray && this.options.labelledby[1]) {
+          sliderMaxHandle.setAttribute('aria-labelledby', this.options.labelledby[1]);
+        }
+        if (!isLabelledbyArray && this.options.labelledby) {
+          sliderMinHandle.setAttribute('aria-labelledby', this.options.labelledby);
+          sliderMaxHandle.setAttribute('aria-labelledby', this.options.labelledby);
+        }
+
         /* Create ticks */
         this.ticks = [];
         if (Array.isArray(this.options.ticks) && this.options.ticks.length > 0) {
@@ -415,8 +435,10 @@
 
           for (i = 0; i < this.options.ticks_labels.length; i++) {
             var label = document.createElement('div');
+            var noTickPositionsSpecified = this.options.ticks_positions.length === 0;
+            var tickLabelsIndex = (this.options.reversed && noTickPositionsSpecified) ? (this.options.ticks_labels.length - (i + 1)) : i;
             label.className = 'slider-tick-label';
-            label.innerHTML = this.options.ticks_labels[i];
+            label.innerHTML = this.options.ticks_labels[tickLabelsIndex];
 
             this.tickLabels.push(label);
             this.tickLabelContainer.appendChild(label);
@@ -439,14 +461,17 @@
         /* Create tooltip elements */
         var sliderTooltip = document.createElement("div");
         sliderTooltip.className = "tooltip tooltip-main";
+        sliderTooltip.setAttribute('role', 'presentation');
         createAndAppendTooltipSubElements(sliderTooltip);
 
         var sliderTooltipMin = document.createElement("div");
         sliderTooltipMin.className = "tooltip tooltip-min";
+        sliderTooltipMin.setAttribute('role', 'presentation');
         createAndAppendTooltipSubElements(sliderTooltipMin);
 
         var sliderTooltipMax = document.createElement("div");
         sliderTooltipMax.className = "tooltip tooltip-max";
+        sliderTooltipMax.setAttribute('role', 'presentation');
         createAndAppendTooltipSubElements(sliderTooltipMax);
 
 
@@ -619,6 +644,10 @@
       }
       this.sliderElem.addEventListener("mousedown", this.mousedown, false);
 
+      // Bind window handlers
+      this.resize = this._resize.bind(this);
+      window.addEventListener("resize", this.resize, false);
+
 
       // Bind tooltip-related handlers
       if(this.options.tooltip === 'hide') {
@@ -649,6 +678,7 @@
       } else {
         this.disable();
       }
+
     }
 
 
@@ -695,7 +725,8 @@
         ticks_snap_bounds: 0,
         scale: 'linear',
         focus: false,
-        tooltip_position: null
+        tooltip_position: null,
+        labelledby: null
       },
 
       getElement: function() {
@@ -824,14 +855,14 @@
         return this;
       },
 
-            off: function(evt, callback) {
-                if($) {
-                    this.$element.off(evt, callback);
-                    this.$sliderElem.off(evt, callback);
-                } else {
-                    this._unbindNonQueryEventHandler(evt, callback);
-                }
-            },
+      off: function(evt, callback) {
+          if($) {
+              this.$element.off(evt, callback);
+              this.$sliderElem.off(evt, callback);
+          } else {
+              this._unbindNonQueryEventHandler(evt, callback);
+          }
+      },
 
       getAttribute: function(attribute) {
         if(attribute) {
@@ -872,21 +903,31 @@
 
       ********************************/
       _removeSliderEventHandlers: function() {
-        // Remove event listeners from handle1
+        // Remove keydown event listeners
         this.handle1.removeEventListener("keydown", this.handle1Keydown, false);
-        this.handle1.removeEventListener("focus", this.showTooltip, false);
-        this.handle1.removeEventListener("blur", this.hideTooltip, false);
-
-        // Remove event listeners from handle2
         this.handle2.removeEventListener("keydown", this.handle2Keydown, false);
-        this.handle2.removeEventListener("focus", this.handle2Keydown, false);
-        this.handle2.removeEventListener("blur", this.handle2Keydown, false);
+
+        if (this.showTooltip) {
+          this.handle1.removeEventListener("focus", this.showTooltip, false);
+          this.handle2.removeEventListener("focus", this.showTooltip, false);
+        }
+        if (this.hideTooltip) {
+          this.handle1.removeEventListener("blur", this.hideTooltip, false);
+          this.handle2.removeEventListener("blur", this.hideTooltip, false);
+        }
 
         // Remove event listeners from sliderElem
-        this.sliderElem.removeEventListener("mouseenter", this.showTooltip, false);
-        this.sliderElem.removeEventListener("mouseleave", this.hideTooltip, false);
+        if (this.showTooltip) {
+          this.sliderElem.removeEventListener("mouseenter", this.showTooltip, false);
+        }
+        if (this.hideTooltip) {
+          this.sliderElem.removeEventListener("mouseleave", this.hideTooltip, false);
+        }
         this.sliderElem.removeEventListener("touchstart", this.mousedown, false);
         this.sliderElem.removeEventListener("mousedown", this.mousedown, false);
+
+        // Remove window event listener
+        window.removeEventListener("resize", this.resize, false);
       },
       _bindNonQueryEventHandler: function(evt, callback) {
         if(this.eventToCallbackMap[evt] === undefined) {
@@ -894,17 +935,17 @@
         }
         this.eventToCallbackMap[evt].push(callback);
       },
-            _unbindNonQueryEventHandler: function(evt, callback) {
-                var callbacks = this.eventToCallbackMap[evt];
-                if(callbacks !== undefined) {
-                    for (var i = 0; i < callbacks.length; i++) {
-                        if (callbacks[i] === callback) {
-                            callbacks.splice(i, 1);
-                            break;
-                        }
-                    }
-                }
-            },
+      _unbindNonQueryEventHandler: function(evt, callback) {
+          var callbacks = this.eventToCallbackMap[evt];
+          if(callbacks !== undefined) {
+              for (var i = 0; i < callbacks.length; i++) {
+                  if (callbacks[i] === callback) {
+                      callbacks.splice(i, 1);
+                      break;
+                  }
+              }
+          }
+      },
       _cleanUpEventCallbacksMap: function() {
         var eventNames = Object.keys(this.eventToCallbackMap);
         for(var i = 0; i < eventNames.length; i++) {
@@ -943,12 +984,13 @@
         }
 
         this.handle1.style[this.stylePos] = positionPercentages[0]+'%';
+        this.handle1.setAttribute('aria-valuenow', this._state.value[0]);
+
         this.handle2.style[this.stylePos] = positionPercentages[1]+'%';
+        this.handle2.setAttribute('aria-valuenow', this._state.value[1]);
 
         /* Position ticks and labels */
         if (Array.isArray(this.options.ticks) && this.options.ticks.length > 0) {
-          var maxTickValue = Math.max.apply(Math, this.options.ticks);
-          var minTickValue = Math.min.apply(Math, this.options.ticks);
 
           var styleSize = this.options.orientation === 'vertical' ? 'height' : 'width';
           var styleMargin = this.options.orientation === 'vertical' ? 'marginTop' : 'marginLeft';
@@ -957,7 +999,10 @@
           if (this.tickLabelContainer) {
             var extraMargin = 0;
             if (this.options.ticks_positions.length === 0) {
-              this.tickLabelContainer.style[styleMargin] = -labelSize/2 + 'px';
+              if (this.options.orientation !== 'vertical') {
+                this.tickLabelContainer.style[styleMargin] = -labelSize/2 + 'px';
+              }
+
               extraMargin = this.tickLabelContainer.offsetHeight;
             } else {
               /* Chidren are position absolute, calculate height by finding the max offsetHeight of a child */
@@ -973,8 +1018,11 @@
           }
           for (var i = 0; i < this.options.ticks.length; i++) {
 
-            var percentage = this.options.ticks_positions[i] ||
-              100 * (this.options.ticks[i] - minTickValue) / (maxTickValue - minTickValue);
+            var percentage = this.options.ticks_positions[i] || this._toPercentage(this.options.ticks[i]);
+
+            if (this.options.reversed) {
+              percentage = 100 - percentage;
+            }
 
             this.ticks[i].style[this.stylePos] = percentage + '%';
 
@@ -993,49 +1041,18 @@
             if (this.tickLabels[i]) {
               this.tickLabels[i].style[styleSize] = labelSize + 'px';
 
-              if (this.options.ticks_positions[i] !== undefined) {
+              if (this.options.orientation !== 'vertical' && this.options.ticks_positions[i] !== undefined) {
                 this.tickLabels[i].style.position = 'absolute';
-                this.tickLabels[i].style[this.stylePos] = this.options.ticks_positions[i] + '%';
+                this.tickLabels[i].style[this.stylePos] = percentage + '%';
                 this.tickLabels[i].style[styleMargin] = -labelSize/2 + 'px';
+              } else if (this.options.orientation === 'vertical') {
+                this.tickLabels[i].style['marginLeft'] =  this.sliderElem.offsetWidth + 'px';
+                this.tickLabelContainer.style['marginTop'] = this.sliderElem.offsetWidth / 2 * -1 + 'px';
               }
             }
           }
         }
 
-        if (this.options.orientation === 'vertical') {
-          this.trackLow.style.top = '0';
-          this.trackLow.style.height = Math.min(positionPercentages[0], positionPercentages[1]) +'%';
-
-          this.trackSelection.style.top = Math.min(positionPercentages[0], positionPercentages[1]) +'%';
-          this.trackSelection.style.height = Math.abs(positionPercentages[0] - positionPercentages[1]) +'%';
-
-          this.trackHigh.style.bottom = '0';
-          this.trackHigh.style.height = (100 - Math.min(positionPercentages[0], positionPercentages[1]) - Math.abs(positionPercentages[0] - positionPercentages[1])) +'%';
-        }
-        else {
-          this.trackLow.style.left = '0';
-          this.trackLow.style.width = Math.min(positionPercentages[0], positionPercentages[1]) +'%';
-
-          this.trackSelection.style.left = Math.min(positionPercentages[0], positionPercentages[1]) +'%';
-          this.trackSelection.style.width = Math.abs(positionPercentages[0] - positionPercentages[1]) +'%';
-
-          this.trackHigh.style.right = '0';
-          this.trackHigh.style.width = (100 - Math.min(positionPercentages[0], positionPercentages[1]) - Math.abs(positionPercentages[0] - positionPercentages[1])) +'%';
-
-              var offset_min = this.tooltip_min.getBoundingClientRect();
-              var offset_max = this.tooltip_max.getBoundingClientRect();
-
-              if (offset_min.right > offset_max.left) {
-                  this._removeClass(this.tooltip_max, 'top');
-                  this._addClass(this.tooltip_max, 'bottom');
-                  this.tooltip_max.style.top = 18 + 'px';
-              } else {
-                  this._removeClass(this.tooltip_max, 'bottom');
-                  this._addClass(this.tooltip_max, 'top');
-                  this.tooltip_max.style.top = this.tooltip_min.style.top;
-              }
-        }
-
         var formattedTooltipVal;
 
         if (this.options.range) {
@@ -1087,6 +1104,60 @@
             this._css(this.tooltip, 'margin-left', -this.tooltip.offsetWidth / 2 + 'px');
           }
         }
+
+        if (this.options.orientation === 'vertical') {
+          this.trackLow.style.top = '0';
+          this.trackLow.style.height = Math.min(positionPercentages[0], positionPercentages[1]) +'%';
+
+          this.trackSelection.style.top = Math.min(positionPercentages[0], positionPercentages[1]) +'%';
+          this.trackSelection.style.height = Math.abs(positionPercentages[0] - positionPercentages[1]) +'%';
+
+          this.trackHigh.style.bottom = '0';
+          this.trackHigh.style.height = (100 - Math.min(positionPercentages[0], positionPercentages[1]) - Math.abs(positionPercentages[0] - positionPercentages[1])) +'%';
+        }
+        else {
+          this.trackLow.style.left = '0';
+          this.trackLow.style.width = Math.min(positionPercentages[0], positionPercentages[1]) +'%';
+
+          this.trackSelection.style.left = Math.min(positionPercentages[0], positionPercentages[1]) +'%';
+          this.trackSelection.style.width = Math.abs(positionPercentages[0] - positionPercentages[1]) +'%';
+
+          this.trackHigh.style.right = '0';
+          this.trackHigh.style.width = (100 - Math.min(positionPercentages[0], positionPercentages[1]) - Math.abs(positionPercentages[0] - positionPercentages[1])) +'%';
+
+              var offset_min = this.tooltip_min.getBoundingClientRect();
+              var offset_max = this.tooltip_max.getBoundingClientRect();
+
+              if (this.options.tooltip_position === 'bottom') {
+                if (offset_min.right > offset_max.left) {
+                  this._removeClass(this.tooltip_max, 'bottom');
+                  this._addClass(this.tooltip_max, 'top');
+                  this.tooltip_max.style.top = '';
+                            this.tooltip_max.style.bottom = 22 + 'px';
+                        } else {
+                            this._removeClass(this.tooltip_max, 'top');
+                            this._addClass(this.tooltip_max, 'bottom');
+                            this.tooltip_max.style.top = this.tooltip_min.style.top;
+                            this.tooltip_max.style.bottom = '';
+                }
+              } else {
+                if (offset_min.right > offset_max.left) {
+                    this._removeClass(this.tooltip_max, 'top');
+                    this._addClass(this.tooltip_max, 'bottom');
+                    this.tooltip_max.style.top = 18 + 'px';
+                } else {
+                    this._removeClass(this.tooltip_max, 'bottom');
+                    this._addClass(this.tooltip_max, 'top');
+                    this.tooltip_max.style.top = this.tooltip_min.style.top;
+                }
+              }
+        }
+      },
+      _resize: function (ev) {
+        /*jshint unused:false*/
+        this._state.offset = this._offset(this.sliderElem);
+        this._state.size = this.sliderElem[this.sizePos];
+        this._layout();
       },
       _removeProperty: function(element, prop) {
         if (element.style.removeProperty) {