From 56ec1591c56d257cb2e02aabf4a3878838a9ee75 Mon Sep 17 00:00:00 2001
From: Gareth Daunton <gdaunton@gmail.com>
Date: Sat, 16 Jul 2016 14:44:56 -0400
Subject: [PATCH] Added vertical variation

---
 src/definitions/modules/range.js           | 141 +++++++++++-------
 src/definitions/modules/range.less         | 161 ++++++++++++++++++---
 src/themes/default/modules/range.variables |   3 +
 3 files changed, 234 insertions(+), 71 deletions(-)

diff --git a/src/definitions/modules/range.js b/src/definitions/modules/range.js
index 689b09051..08ac21170 100644
--- a/src/definitions/modules/range.js
+++ b/src/definitions/modules/range.js
@@ -68,7 +68,7 @@ $.fn.range = function(parameters) {
 
         initialize: function() {
           module.debug('Initializing range slider', settings);
-          isTouch = module.get.isTouch();
+          isTouch = module.is.touch();
           module.setup.layout();
           if(!module.is.disabled())
             module.bind.events();
@@ -133,8 +133,15 @@ $.fn.range = function(parameters) {
               else
                 $labels = $module.append('<ul class="auto labels"></ul>').find('.labels');
               for(var i = 0; i <= module.get.numLabels(); i++) {
-                var $label = $('<li class="label">' + module.get.label(i+1) + '</li>');
-                $label.css(module.is.reversed() ? 'right' : 'left', module.determine.positionFromValue((i+1) * module.get.step()));
+                var
+                  $label = $('<li class="label">' + module.get.label(i+1) + '</li>'),
+                  position = module.is.vertical()
+                            ?
+                            module.is.reversed() ? 'bottom' : 'top'
+                            :
+                            module.is.reversed() ? 'right' : 'left'
+                ;
+                $label.css(position, module.determine.positionFromValue((i+1) * module.get.step()));
                 $labels.append($label);
               }
             }
@@ -151,7 +158,7 @@ $.fn.range = function(parameters) {
               module.event.down(event);
             });
             $module.on('mousedown' + eventNamespace, module.event.down);
-            if(module.get.isTouch()) {
+            if(module.is.touch()) {
               $module.find('.track, .thumb, .inner').on('touchstart' + eventNamespace, function(event) {
                 event.stopImmediatePropagation();
                 event.preventDefault();
@@ -162,7 +169,7 @@ $.fn.range = function(parameters) {
             }
           },
           documentEvents: function() {
-            if(module.get.isTouch()) {
+            if(module.is.touch()) {
               $(document).on('touchmove' + eventNamespace, module.event.move);
               $(document).on('touchend' + eventNamespace, module.event.up);
             }
@@ -181,7 +188,7 @@ $.fn.range = function(parameters) {
             $module.off('touchstart' + eventNamespace);
           },
           documentEvents: function() {
-            if(module.get.isTouch()) {
+            if(module.is.touch()) {
               $(document).off('touchmove' + eventNamespace);
               $(document).off('touchend' + eventNamespace);
             }
@@ -201,20 +208,20 @@ $.fn.range = function(parameters) {
           move: function(event, originalEvent) {
             event.preventDefault();
             var
-              pageX = module.determine.eventXPos(event, originalEvent),
-              newPos = module.determine.pos(pageX)
+              eventPos = module.determine.eventPos(event, originalEvent),
+              newPos = module.determine.pos(eventPos)
             ;
-            if (pageX >= module.get.trackOffset() && pageX <= module.get.trackOffset() + module.get.trackWidth()) {
+            if (eventPos >= module.get.trackOffset() && eventPos <= module.get.trackOffset() + module.get.trackLength()) {
               module.set.valueBasedPosition(newPos);
             }
           },
           up: function(event, originalEvent) {
             event.preventDefault();
             var
-              pageX = module.determine.eventXPos(event, originalEvent),
-              newPos = module.determine.pos(pageX)
+              eventPos = module.determine.eventPos(event, originalEvent),
+              newPos = module.determine.pos(eventPos)
             ;
-            if(pageX >= module.get.trackOffset() && pageX <= module.get.trackOffset() + module.get.trackWidth()) {
+            if(eventPos >= module.get.trackOffset() && eventPos <= module.get.trackOffset() + module.get.trackLength()) {
               module.set.valueMoveToValueBasedPosition(newPos);
             }
             module.unbind.documentEvents();
@@ -230,32 +237,48 @@ $.fn.range = function(parameters) {
           },
           reversed: function() {
             return $module.hasClass(settings.className.reversed);
-          }
-        },
-
-        get: {
-          isTouch: function () {
-           try {
+          },
+          vertical: function() {
+            return $module.hasClass(settings.className.vertical);
+          },
+          touch: function () {
+            try {
              document.createEvent('TouchEvent');
              return true;
-           } catch (e) {
+            } catch (e) {
              return false;
-           }
-         },
+            }
+          },
+        },
+
+        get: {
+
           trackOffset: function() {
-            return $track.offset().left;
+            if (module.is.vertical()) {
+              return $track.offset().top;
+            } else {
+              return $track.offset().left;
+            }
           },
-          trackWidth: function() {
-            return $track.width();
+          trackLength: function() {
+            if (module.is.vertical()) {
+              return $track.height();
+            } else {
+              return $track.width();
+            }
           },
           trackLeft: function() {
-            return $track.position().left;
+            if (module.is.vertical()) {
+              return $track.position().top;
+            } else {
+              return $track.position().left;
+            }
           },
           trackStartPos: function() {
-            return module.is.reversed() ? module.get.trackLeft() + module.get.trackWidth() : module.get.trackLeft();
+            return module.is.reversed() ? module.get.trackLeft() + module.get.trackLength() : module.get.trackLeft();
           },
           trackEndPos: function() {
-            return module.is.reversed() ? module.get.trackLeft() : module.get.trackLeft() + module.get.trackWidth();
+            return module.is.reversed() ? module.get.trackLeft() : module.get.trackLeft() + module.get.trackLength();
           },
           precision: function() {
             var
@@ -304,12 +327,13 @@ $.fn.range = function(parameters) {
               default:
                 return value;
             }
-          }
-        },
-
-        determine: {
-          pos: function(pagePos) {
-            return module.is.reversed() ? module.get.trackStartPos() - pagePos + module.get.trackOffset() : pagePos - module.get.trackOffset() - module.get.trackStartPos();
+          },
+          trackPos: function() {
+            if(module.is.vertical()) {
+              return module.is.reversed() ? module.get.trackLength() - ($trackFill.position().top + $trackFill.height()) : $trackFill.position().top;
+            } else {
+              return module.is.reversed() ? module.get.trackLength() - ($trackFill.position().left + $trackFill.width()) : $trackFill.position().left;
+            }
           },
           value: function(position) {
             var
@@ -328,31 +352,41 @@ $.fn.range = function(parameters) {
             difference = Math.round(difference * precision) / precision;
             module.verbose('Cutting off additional decimal places')
             return difference - module.get.min();
+          }
+        },
+
+        determine: {
+          pos: function(pagePos) {
+            return module.is.reversed() ? module.get.trackStartPos() - pagePos + module.get.trackOffset() : pagePos - module.get.trackOffset() - module.get.trackStartPos();
           },
           positionFromValue: function(value) {
             var
               min = module.get.min(),
               max = module.get.max(),
-              trackWidth = module.get.trackWidth(),
+              trackLength = module.get.trackLength(),
               ratio = (value - min) / (max - min),
-              trackPos = module.is.reversed() ? trackWidth - ($trackFill.position().left + $trackFill.width()) : $trackFill.position().left,
-              position = Math.round(ratio * trackWidth) + trackPos
+              trackPos = module.get.trackPos(),
+              position = Math.round(ratio * trackLength) + trackPos
             ;
             module.verbose('Determined position: ' + position + ' from value: ' + value);
             return position;
           },
           positionFromRatio: function(ratio) {
             var
-              trackWidth = module.get.trackWidth(),
-              trackPos = module.is.reversed() ? trackWidth - ($trackFill.position().left + $trackFill.width()) : $trackFill.position().left,
+              trackLength = module.get.trackLength(),
+              trackPos = module.get.trackPos(),
               step = module.get.step(),
-              position = Math.round(ratio * trackWidth) + trackPos,
+              position = Math.round(ratio * trackLength) + trackPos,
               adjustedPos = (step == 0) ? position : Math.round(position / step) * step
             ;
             return adjustedPos;
           },
-          eventXPos: function(event, originalEvent) {
-            return isTouch ? originalEvent.originalEvent.touches[0].pageX : (typeof event.pageX != 'undefined') ? event.pageX : originalEvent.pageX
+          eventPos: function(event, originalEvent) {
+            if (module.is.vertical()) {
+              return isTouch ? originalEvent.originalEvent.touches[0].pageY : (typeof event.pageY != 'undefined') ? event.pageY : originalEvent.pageY;
+            } else {
+              return isTouch ? originalEvent.originalEvent.touches[0].pageX : (typeof event.pageX != 'undefined') ? event.pageX : originalEvent.pageX;
+            }
           },
         },
 
@@ -365,11 +399,19 @@ $.fn.range = function(parameters) {
             module.debug('Setting range value to ' + newValue);
           },
           position: function(value) {
-            if (module.is.reversed())
-              $thumb.css({right: String(value - offset) + 'px'});
-            else
-              $thumb.css({left: String(value - offset) + 'px'});
-            $trackFill.css({width: String(value) + 'px'});
+            if (module.is.vertical()) {
+              if (module.is.reversed())
+                $thumb.css({bottom: String(value - offset) + 'px'});
+              else
+                $thumb.css({top: String(value - offset) + 'px'});
+              $trackFill.css({height: String(value) + 'px'});
+            } else {
+              if (module.is.reversed())
+                $thumb.css({right: String(value - offset) + 'px'});
+              else
+                $thumb.css({left: String(value - offset) + 'px'});
+              $trackFill.css({width: String(value) + 'px'});
+            }
             module.position = value;
             module.debug('Setting range position to ' + value);
           },
@@ -392,7 +434,7 @@ $.fn.range = function(parameters) {
           },
           valueMoveToValueBasedPosition: function(position) {
             var
-              value = module.determine.value(position),
+              value = module.get.value(position),
               min = module.get.min(),
               max = module.get.max(),
               pos
@@ -408,7 +450,7 @@ $.fn.range = function(parameters) {
           },
           valueBasedPosition: function(position) {
             var
-              value = module.determine.value(position),
+              value = module.get.value(position),
               min = module.get.min(),
               max = module.get.max()
             ;
@@ -680,7 +722,8 @@ $.fn.range.settings = {
   className     : {
     reversed : 'reversed',
     disabled : 'disabled',
-    labeled  : 'labeled'
+    labeled  : 'labeled',
+    vertical : 'vertical'
   },
 
   labelTypes    : {
diff --git a/src/definitions/modules/range.less b/src/definitions/modules/range.less
index 85e523833..efc2238d8 100644
--- a/src/definitions/modules/range.less
+++ b/src/definitions/modules/range.less
@@ -7,46 +7,58 @@
 
  @import (multiple) '../../theme.config';
 
-.ui.range {
+.ui.range:not(.vertical) {
   width: 100%;
   padding: @padding;
+}
+
+.ui.range {
   position: relative;
 }
 
 .ui.range .inner {
-  height: @height;
   position: relative;
   z-index: 2;
 }
 
+.ui.range:not(.vertical) .inner {
+  height: @height;
+}
+
 .ui.range .inner:hover {
   cursor: @hoverPointer;
 }
 
 .ui.range .inner .track {
   position: absolute;
+  border-radius: @trackBorderRadius;
+  background-color: @trackColor;
+}
+
+.ui.range:not(.vertical) .inner .track {
   width: 100%;
   height: @trackHeight;
-  border-radius: @trackBorderRadius;
   top: @trackPositionTop;
   left: 0;
-  background-color: @trackColor;
 }
 
 .ui.range .inner .track-fill {
   position: absolute;
+  border-radius: @trackFillBorderRadius;
+  background-color: @trackFillColor;
+}
+
+.ui.range:not(.vertical) .inner .track-fill {
   width: 0;
   height: @trackFillHeight;
-  border-radius: @trackFillBorderRadius;
   top: @trackPositionTop;
   left: 0;
-  background-color: @trackFillColor;
 }
 
 .ui.range .inner .thumb {
   position: absolute;
-  top: 0;
   left: 0;
+  top: 0;
   height: @thumbHeight;
   width: @thumbHeight;
   background: @thumbBackground;
@@ -104,6 +116,45 @@
            Variations
 *******************************/
 
+/*--------------
+    Vertical
+---------------*/
+
+.ui.range.vertical {
+  height: 100%;
+  padding: @verticalPadding;
+}
+
+.ui.range.vertical .inner {
+  width: @height;
+  height: 100%;
+}
+
+.ui.range.vertical .inner .track {
+  height: 100%;
+  width: @trackHeight;
+  left: @trackPositionTop;
+  top: 0;
+}
+
+.ui.range.vertical .inner .track-fill {
+  height: 0;
+  width: @trackFillHeight;
+  left: @trackPositionTop;
+  top: 0;
+}
+
+/* Vertical Reversed */
+.ui.range.vertical.reversed .inner .thumb {
+  top: auto;
+  bottom: 0;
+}
+
+.ui.range.vertical.reversed .inner .track-fill {
+  top: auto;
+  bottom: 0;
+}
+
 /*--------------
     Labeled
 ---------------*/
@@ -115,6 +166,9 @@
   padding: 0;
   position: absolute;
   top: 50%;
+}
+
+.ui.labeled.range:not(.vertical) > .labels {
   transform: translateY(-50%);
 }
 
@@ -134,6 +188,27 @@
   left: 50%;
 }
 
+/* Vertical Labels */
+
+.ui.labeled.vertical.range > .labels {
+  width: @labelHeight;
+  height: 100%;
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+}
+
+.ui.labeled.vertical.range > .labels .label {
+  transform: translate(-100%, -@labelWidth);
+}
+
+.ui.labeled.vertical.range > .labels .label:after {
+  width: @labelHeight;
+  height: @labelWidth;
+  left: 100%;
+  top: 50%;
+}
+
 /*--------------
     Hover
 ---------------*/
@@ -510,53 +585,95 @@
   height: @smallHeight;
   width: @smallHeight;
 }
-.ui.range.small .inner {
+.ui.range.small:not(.vertical) .inner {
   height: @smallHeight;
 }
-.ui.range.small .inner .track,
-.ui.range.small .inner .track-fill {
+.ui.range.small:not(.vertical) .inner .track,
+.ui.range.small:not(.vertical) .inner .track-fill {
   height: @smallTrackHeight;
   top: @trackPositionTopSmall;
 }
-.ui.small.labeled.range > .labels,
-.ui.small.labeled.range > .labels .label:after {
+.ui.small.labeled.range:not(.vertical) > .labels,
+.ui.small.labeled.range:not(.vertical) > .labels .label:after {
   height: @smallLabelHeight;
 }
 
+/* Small Vertical */
+.ui.range.small.vertical .inner {
+  width: @smallHeight;
+}
+.ui.range.small.vertical .inner .track,
+.ui.range.small.vertical .inner .track-fill {
+  width: @smallTrackHeight;
+  left: @trackPositionTopSmall;
+}
+.ui.small.labeled.range.vertical > .labels,
+.ui.small.labeled.range.vertical > .labels .label:after {
+  width: @smallLabelHeight;
+}
+
 /* Large */
 .ui.range.large .inner .thumb {
   height: @largeHeight;
   width: @largeHeight;
 }
-.ui.range.large .inner {
+.ui.range.large:not(.vertical) .inner {
   height: @largeHeight;
 }
-.ui.range.large .inner .track,
-.ui.range.large .inner .track-fill {
+.ui.range.large:not(.vertical) .inner .track,
+.ui.range.large:not(.vertical) .inner .track-fill {
   height: @largeTrackHeight;
   top: @trackPositionTopLarge;
 }
-.ui.large.labeled.range > .labels,
-.ui.large.labeled.range > .labels .label:after {
+.ui.large.labeled.range:not(.vertical) > .labels,
+.ui.large.labeled.range:not(.vertical) > .labels .label:after {
   height: @largeLabelHeight;
 }
 
+/* Large Vertical */
+.ui.range.large.vertical .inner {
+  width: @largeHeight;
+}
+.ui.range.large.vertical .inner .track,
+.ui.range.large.vertical .inner .track-fill {
+  width: @largeTrackHeight;
+  left: @trackPositionTopLarge;
+}
+.ui.large.labeled.range.vertical > .labels,
+.ui.large.labeled.range.vertical > .labels .label:after {
+  width: @largeLabelHeight;
+}
+
 /* Big */
 .ui.range.big .inner .thumb {
   height: @bigHeight;
   width: @bigHeight;
 }
-.ui.range.big .inner {
+.ui.range.big:not(.vertical) .inner {
   height: @bigHeight;
 }
-.ui.range.big .inner .track,
-.ui.range.big .inner .track-fill {
+.ui.range.big:not(.vertical) .inner .track,
+.ui.range.big:not(.vertical) .inner .track-fill {
   height: @bigTrackHeight;
   top: @trackPositionTopBig;
 }
-.ui.big.labeled.range > .labels,
-.ui.big.labeled.range > .labels .label:after {
+.ui.big.labeled.range:not(.vertical) > .labels,
+.ui.big.labeled.range:not(.vertical) > .labels .label:after {
   height: @bigLabelHeight;
 }
 
+/* Big Vertical */
+.ui.range.big.vertical .inner {
+  width: @bigHeight;
+}
+.ui.range.big.vertical .inner .track,
+.ui.range.big.vertical .inner .track-fill {
+  width: @bigTrackHeight;
+  left: @trackPositionTopBig;
+}
+.ui.big.labeled.range.vertical > .labels,
+.ui.big.labeled.range.vertical > .labels .label:after {
+  width: @bigLabelHeight;
+}
+
 .loadUIOverrides();
diff --git a/src/themes/default/modules/range.variables b/src/themes/default/modules/range.variables
index 42ed53b7c..a5f7ead50 100644
--- a/src/themes/default/modules/range.variables
+++ b/src/themes/default/modules/range.variables
@@ -49,6 +49,9 @@
       Variations
 --------------------*/
 
+/* Vertical */
+@verticalPadding    : .5em 1em;
+
 /* Labeled */
 @labelHeight  : @height;
 @labelWidth   : 1px;