fomantic-ui 2.9.4-beta.82 → 2.9.4-beta.83

package/dist/components/slider.css

@@ -1,5 +1,5 @@
 /*!
- * # Fomantic-UI 2.9.4-beta.82+14bf847 - Slider
+ * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Slider
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -161,11 +161,13 @@
 }
 .ui.labeled.slider > .labels .label {
   display: inline-flex;
-  padding: 0.2em 0;
   position: absolute;
   transform: translate(-50%, -100%);
   white-space: nowrap;
 }
+.ui.labeled.slider > .labels .label:not(.ui) {
+  padding: 0.2em 0;
+}
 .ui.bottom.aligned.labeled.slider > .labels .label {
   bottom: 0;
   transform: translate(-50%, 100%);
@@ -183,9 +185,27 @@
   top: auto;
   bottom: 100%;
 }
+.ui.labeled.slider.bottom.aligned .labels .ui.label {
+  margin-bottom: -0.5em;
+}
+.ui.labeled.ticked.slider.bottom.aligned .labels .ui.label::after {
+  margin-bottom: 0.5em;
+}
 .ui.labeled.ticked.slider > .labels .halftick.label::after {
   height: 0.75em;
 }
+.ui.inverted.labeled.ticked.slider > .labels .label::after {
+  background: #333;
+}
+.ui.labeled.slider:not(.vertical):not(.bottom) .labels .ui.label {
+  margin-top: -0.5em;
+}
+.ui.labeled.ticked.slider:not(.vertical):not(.bottom) .labels .ui.label::after {
+  margin-top: 0.5em;
+}
+.ui.labeled.ticked.slider:not(.vertical) > .labels .ui.label::after {
+  height: 2em;
+}
 
 /* Vertical Labels */
 .ui.labeled.vertical.slider > .labels {
@@ -209,11 +229,38 @@
   width: 0.75em;
   height: 1px;
 }
+.ui.labeled.vertical.slider:not(.right) > .labels .halftick.label::after {
+  margin-left: 0.6em;
+}
 
 /* Vertical Reversed Labels */
 .ui.labeled.vertical.reversed.slider > .labels .label {
   transform: translate(-100%, 50%);
 }
+.ui.labeled.ticked.vertical.slider:not(.right) > .labels .ui.label::after {
+  margin-left: 0.3em;
+}
+.ui.labeled.vertical.right.aligned.slider > .labels {
+  transform: translateX(50%);
+  left: calc(100% + 0.6em);
+}
+.ui.labeled.vertical.right.aligned.slider > .labels .label {
+  transform: translate(100%, -50%);
+  right: 100%;
+}
+.ui.labeled.vertical.right.aligned.slider > .labels .label::after {
+  right: 100%;
+  left: auto;
+}
+.ui.labeled.vertical.right.aligned.slider > .labels .halftick.label::after {
+  margin-right: 0.6em;
+}
+.ui.labeled.vertical.reversed.right.aligned.slider > .labels .label {
+  transform: translate(100%, 50%);
+}
+.ui.labeled.ticked.vertical.right.aligned.slider > .labels .ui.label::after {
+  margin-right: 0.3em;
+}
 
 /* --------------
     Hover
@@ -236,6 +283,19 @@
 .ui.inverted.slider .inner .track {
   background-color: rgba(255, 255, 255, 0.08);
 }
+.ui.labeled.slider > .active.labels .label {
+  transition: all 0.2s ease;
+}
+.ui.labeled.ticked.slider > .active.labels .active.label::after {
+  background: #1b1c1d;
+}
+.ui.inverted.labeled.ticked.slider > .active.labels .active.label::after {
+  background: #545454;
+}
+.ui.labeled.ticked.slider > .active.labels .active.label::after,
+.ui.labeled.slider > .active.labels .label:not(.active) {
+  opacity: 0.6;
+}
 
 /* --------------
      Colors
@@ -266,6 +326,12 @@
 .ui.primary.inverted.slider.basic:focus .inner .thumb {
   background-color: #21b8ff;
 }
+.ui.primary.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #2185d0;
+}
+.ui.primary.inverted.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #54c8ff;
+}
 
 /* Standard */
 .ui.secondary.slider .inner .track-fill {
@@ -292,6 +358,12 @@
 .ui.secondary.inverted.slider.basic:focus .inner .thumb {
   background-color: #6e6e6e;
 }
+.ui.secondary.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #1b1c1d;
+}
+.ui.secondary.inverted.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #545454;
+}
 
 /* Standard */
 .ui.red.slider .inner .track-fill {
@@ -318,6 +390,12 @@
 .ui.red.inverted.slider.basic:focus .inner .thumb {
   background-color: #ff392b;
 }
+.ui.red.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #db2828;
+}
+.ui.red.inverted.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #ff695e;
+}
 
 /* Standard */
 .ui.orange.slider .inner .track-fill {
@@ -344,6 +422,12 @@
 .ui.orange.inverted.slider.basic:focus .inner .thumb {
   background-color: #e76b00;
 }
+.ui.orange.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #f2711c;
+}
+.ui.orange.inverted.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #ff851b;
+}
 
 /* Standard */
 .ui.yellow.slider .inner .track-fill {
@@ -370,6 +454,12 @@
 .ui.yellow.inverted.slider.basic:focus .inner .thumb {
   background-color: #ebcd00;
 }
+.ui.yellow.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #fbbd08;
+}
+.ui.yellow.inverted.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #ffe21f;
+}
 
 /* Standard */
 .ui.olive.slider .inner .track-fill {
@@ -396,6 +486,12 @@
 .ui.olive.inverted.slider.basic:focus .inner .thumb {
   background-color: #d2e745;
 }
+.ui.olive.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #b5cc18;
+}
+.ui.olive.inverted.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #d9e778;
+}
 
 /* Standard */
 .ui.green.slider .inner .track-fill {
@@ -422,6 +518,12 @@
 .ui.green.inverted.slider.basic:focus .inner .thumb {
   background-color: #1ea92e;
 }
+.ui.green.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #21ba45;
+}
+.ui.green.inverted.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #2ecc40;
+}
 
 /* Standard */
 .ui.teal.slider .inner .track-fill {
@@ -448,6 +550,12 @@
 .ui.teal.inverted.slider.basic:focus .inner .thumb {
   background-color: #3affff;
 }
+.ui.teal.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #00b5ad;
+}
+.ui.teal.inverted.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #6dffff;
+}
 
 /* Standard */
 .ui.blue.slider .inner .track-fill {
@@ -474,6 +582,12 @@
 .ui.blue.inverted.slider.basic:focus .inner .thumb {
   background-color: #21b8ff;
 }
+.ui.blue.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #2185d0;
+}
+.ui.blue.inverted.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #54c8ff;
+}
 
 /* Standard */
 .ui.violet.slider .inner .track-fill {
@@ -500,6 +614,12 @@
 .ui.violet.inverted.slider.basic:focus .inner .thumb {
   background-color: #745aff;
 }
+.ui.violet.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #6435c9;
+}
+.ui.violet.inverted.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #a291fb;
+}
 
 /* Standard */
 .ui.purple.slider .inner .track-fill {
@@ -526,6 +646,12 @@
 .ui.purple.inverted.slider.basic:focus .inner .thumb {
   background-color: #cf40ff;
 }
+.ui.purple.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #a333c8;
+}
+.ui.purple.inverted.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #dc73ff;
+}
 
 /* Standard */
 .ui.pink.slider .inner .track-fill {
@@ -552,6 +678,12 @@
 .ui.pink.inverted.slider.basic:focus .inner .thumb {
   background-color: #ff5bd1;
 }
+.ui.pink.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #e03997;
+}
+.ui.pink.inverted.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #ff8edf;
+}
 
 /* Standard */
 .ui.brown.slider .inner .track-fill {
@@ -578,6 +710,12 @@
 .ui.brown.inverted.slider.basic:focus .inner .thumb {
   background-color: #b0620f;
 }
+.ui.brown.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #a5673f;
+}
+.ui.brown.inverted.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #d67c1c;
+}
 
 /* Standard */
 .ui.grey.slider .inner .track-fill {
@@ -604,6 +742,12 @@
 .ui.grey.inverted.slider.basic:focus .inner .thumb {
   background-color: #c2c4c5;
 }
+.ui.grey.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #767676;
+}
+.ui.grey.inverted.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #dcddde;
+}
 
 /* Standard */
 .ui.black.slider .inner .track-fill {
@@ -630,6 +774,12 @@
 .ui.black.inverted.slider.basic:focus .inner .thumb {
   background-color: #000000;
 }
+.ui.black.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #1b1c1d;
+}
+.ui.black.inverted.labeled.ticked.slider > .active.labels .active.label::after {
+  background-color: #545454;
+}
 
 /* --------------
          Basic

package/dist/components/slider.js

@@ -1,5 +1,5 @@
 /*!
- * # Fomantic-UI 2.9.4-beta.82+14bf847 - Slider
+ * # Fomantic-UI 2.9.4-beta.83+9b313a5 - Slider
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -32,8 +32,6 @@
             methodInvoked  = typeof query === 'string',
             queryArguments = [].slice.call(arguments, 1),
 
-            alphabet       = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
-
             SINGLE_STEP     = 1,
             BIG_STEP        = 2,
             NO_STEP         = 0,
@@ -82,7 +80,6 @@
                 position,
                 secondPos,
                 offset,
-                precision,
                 gapRatio = 1,
                 previousValue,
 
@@ -125,6 +122,7 @@
                     clearInterval(instance.interval);
                     module.unbind.events();
                     module.unbind.slidingEvents();
+                    delete module.cache;
                     $module.removeData(moduleNamespace);
                     instance = undefined;
                 },
@@ -141,7 +139,7 @@
                                 + '<div class="thumb"></div>'
                                 + '</div>');
                         }
-                        precision = module.get.precision();
+                        module.clear.cache();
                         $thumb = $module.find('.thumb:not(.second)');
                         if (settings.showThumbTooltip) {
                             $thumb
@@ -175,8 +173,14 @@
                                 module.setup.autoLabel();
                             }
 
+                            if (settings.highlightRange) {
+                                $labels.addClass(className.active);
+                            }
+
                             if (settings.showLabelTicks) {
                                 $module.addClass(className.ticked);
+                            } else if ($module.hasClass(className.ticked)) {
+                                settings.showLabelTicks = 'always';
                             }
                         }
                     },
@@ -211,14 +215,20 @@
                         } else {
                             $labels = $module.append('<ul class="auto labels"></ul>').find('.labels');
                         }
-                        for (var i = 0, len = module.get.numLabels(); i <= len; i++) {
+                        var step = module.get.step(),
+                            precision = module.get.precision(),
+                            len = module.get.numLabels(),
+                            ignoreLabels = len - (settings.autoAdjustLabels !== 'fixed' ? 0 : module.get.max().toString().length + 4)
+                        ;
+                        for (var i = 0; i <= len; i++) {
                             var
-                                labelText = module.get.label(i),
+                                stepValue =  Math.round(((i * (step === 0 ? 1 : step)) + module.get.min()) * precision) / precision,
+                                labelText = module.get.label(i, stepValue),
                                 showLabel = settings.restrictedLabels.length === 0 || settings.restrictedLabels.indexOf(labelText) >= 0,
                                 $label = labelText !== '' && (showLabel || settings.showLabelTicks === 'always')
-                                    ? (!(i % module.get.gapRatio())
-                                        ? $('<li class="label">' + (showLabel ? labelText : '') + '</li>')
-                                        : $('<li class="halftick label"></li>'))
+                                    ? ((!(i % module.get.gapRatio()) && i < ignoreLabels) || i === len
+                                        ? $('<li/>', { class: className.label, 'data-value': stepValue, html: showLabel ? labelText : '' })
+                                        : $('<li/>', { class: 'halftick label', 'data-value': stepValue }))
                                     : null,
                                 ratio  = i / len
                             ;
@@ -489,6 +499,12 @@
                     },
                 },
 
+                clear: {
+                    cache: function () {
+                        module.cache = {};
+                    },
+                },
+
                 resync: function () {
                     module.verbose('Resyncing thumb position based on value');
                     if (module.is.range()) {
@@ -538,6 +554,25 @@
                 },
 
                 is: {
+                    prime: function (n) {
+                        if (module.cache['prime' + n] === undefined) {
+                            var p = true;
+                            for (var i = 2, s = Math.sqrt(n); i <= s; i++) {
+                                if (n % i === 0) {
+                                    p = false;
+
+                                    break;
+                                }
+                            }
+                            if (p) {
+                                p = n > 1;
+                            }
+
+                            module.cache['prime' + n] = p;
+                        }
+
+                        return module.cache['prime' + n];
+                    },
                     range: function () {
                         var isRange = $module.hasClass(className.range);
                         if (!isRange && (settings.minRange || settings.maxRange)) {
@@ -652,62 +687,87 @@
                         return margin || '0px';
                     },
                     precision: function () {
-                        var
-                            decimalPlaces,
-                            step = module.get.step()
-                        ;
-                        if (step !== 0) {
-                            var split = String(step).split('.');
-                            decimalPlaces = split.length === 2 ? split[1].length : 0;
-                        } else {
-                            decimalPlaces = settings.decimalPlaces;
+                        if (module.cache.precision === undefined) {
+                            var
+                                decimalPlaces,
+                                step = module.get.step()
+                            ;
+                            if (step !== 0) {
+                                var split = String(step).split('.');
+                                decimalPlaces = split.length === 2 ? split[1].length : 0;
+                            } else {
+                                decimalPlaces = settings.decimalPlaces;
+                            }
+                            var precision = Math.pow(10, decimalPlaces);
+                            module.debug('Precision determined', precision);
+                            module.cache.precision = precision;
                         }
-                        var precision = Math.pow(10, decimalPlaces);
-                        module.debug('Precision determined', precision);
 
-                        return precision;
+                        return module.cache.precision;
                     },
                     min: function () {
                         return settings.min;
                     },
                     max: function () {
-                        var
-                            step = module.get.step(),
-                            min = module.get.min(),
-                            precision = module.get.precision(),
-                            quotient = step === 0 ? 0 : Math.floor(Math.round(((settings.max - min) / step) * precision) / precision),
-                            remainder = step === 0 ? 0 : (settings.max - min) % step
-                        ;
+                        if (module.cache.max === undefined) {
+                            var
+                                step = module.get.step(),
+                                min = module.get.min(),
+                                precision = module.get.precision(),
+                                quotient = step === 0 ? 0 : Math.floor(Math.round(((settings.max - min) / step) * precision) / precision),
+                                remainder = step === 0 ? 0 : (settings.max - min) % step
+                            ;
+                            if (remainder > 0) {
+                                module.debug('Max value not divisible by given step. Increasing max value.', settings.max, step);
+                            }
+                            module.cache.max = remainder === 0 ? settings.max : min + quotient * step;
+                        }
 
-                        return remainder === 0 ? settings.max : min + quotient * step;
+                        return module.cache.max;
                     },
                     step: function () {
                         return settings.step;
                     },
                     numLabels: function () {
-                        var step = module.get.step(),
-                            precision = module.get.precision(),
-                            value = Math.round(((module.get.max() - module.get.min()) / (step === 0 ? 1 : step)) * precision) / precision;
-                        module.debug('Determined that there should be ' + value + ' labels');
+                        if (module.cache.numLabels === undefined) {
+                            var step = module.get.step(),
+                                precision = module.get.precision(),
+                                value = Math.round(((module.get.max() - module.get.min()) / (step === 0 ? 1 : step)) * precision) / precision;
+                            module.debug('Determined that there should be ' + value + ' labels');
+                            module.cache.numLabels = value;
+                        }
 
-                        return value;
+                        return module.cache.numLabels;
                     },
                     labelType: function () {
                         return settings.labelType;
                     },
-                    label: function (value) {
-                        if (interpretLabel) {
-                            return interpretLabel(value);
+                    label: function (value, stepValue) {
+                        if (isFunction(interpretLabel)) {
+                            return interpretLabel(value, stepValue, module);
                         }
 
                         switch (settings.labelType) {
                             case settings.labelTypes.number: {
-                                var step = module.get.step();
-
-                                return Math.round(((value * (step === 0 ? 1 : step)) + module.get.min()) * precision) / precision;
+                                return stepValue;
                             }
                             case settings.labelTypes.letter: {
-                                return alphabet[value % 26];
+                                if (value < 0 || module.get.precision() > 1) {
+                                    module.error(error.invalidLetterNumber, value);
+
+                                    return value;
+                                }
+                                var letterLabel = '',
+                                    letters = Array.isArray(settings.letters) ? settings.letters : String(settings.letters).split(''),
+                                    lettersLen = letters.length
+                                ;
+
+                                while (stepValue >= 0) {
+                                    letterLabel = letters[stepValue % lettersLen] + letterLabel;
+                                    stepValue = Math.floor(stepValue / lettersLen) - 1;
+                                }
+
+                                return letterLabel;
                             }
                             default: {
                                 return value;
@@ -717,6 +777,9 @@
                     value: function () {
                         return value;
                     },
+                    settings: function () {
+                        return settings;
+                    },
                     currentThumbValue: function () {
                         return $currThumb !== undefined && $currThumb.hasClass('second') ? module.secondThumbVal : module.thumbVal;
                     },
@@ -761,6 +824,7 @@
                         if (settings.autoAdjustLabels) {
                             var
                                 numLabels = module.get.numLabels(),
+                                primePlus = module.is.prime(numLabels) ? 1 : 0,
                                 trackLength = module.get.trackLength(),
                                 gapCounter = 1
                             ;
@@ -770,7 +834,7 @@
                             // and apply only if the modulo of the operation is an odd number.
                             if (trackLength > 0) {
                                 while ((trackLength / numLabels) * gapCounter < settings.labelDistance) {
-                                    if (!(numLabels % gapCounter)) {
+                                    if (!((numLabels + primePlus) % gapCounter) || settings.autoAdjustLabels === 'fixed') {
                                         gapRatio = gapCounter;
                                     }
                                     gapCounter += 1;
@@ -908,6 +972,7 @@
                     },
                     value: function (position) {
                         var
+                            precision = module.get.precision(),
                             startPos = module.is.reversed() ? module.get.trackEndPos() : module.get.trackStartPos(),
                             endPos = module.is.reversed() ? module.get.trackStartPos() : module.get.trackEndPos(),
                             ratio = (position - startPos) / (endPos - startPos),
@@ -976,6 +1041,30 @@
                 },
 
                 set: {
+                    active: function (thumbVal, secondThumbVal) {
+                        if (settings.highlightRange) {
+                            if (secondThumbVal < thumbVal) {
+                                var tempVal = secondThumbVal;
+                                secondThumbVal = thumbVal;
+                                thumbVal = tempVal;
+                            }
+                            var $children = $labels.find('.label');
+                            $children.each(function (index) {
+                                var
+                                    $child = $(this),
+                                    attrValue = $child.attr('data-value')
+                                ;
+                                if (attrValue) {
+                                    attrValue = parseInt(attrValue, 10);
+                                    if (attrValue >= thumbVal && attrValue <= secondThumbVal) {
+                                        $child.addClass(className.active);
+                                    } else {
+                                        $child.removeClass(className.active);
+                                    }
+                                }
+                            });
+                        }
+                    },
                     value: function (newValue, fireChange) {
                         fireChange = fireChange !== false;
                         var toReset = previousValue === undefined;
@@ -1103,6 +1192,7 @@
                             position = newPos;
                             thumbVal = newValue;
                         }
+                        module.set.active(thumbVal, secondThumbVal);
                         var
                             trackPosValue,
                             thumbPosValue,
@@ -1210,6 +1300,7 @@
                     } else {
                         return settings[name];
                     }
+                    module.clear.cache();
                 },
                 internal: function (name, value) {
                     if ($.isPlainObject(name)) {
@@ -1382,6 +1473,7 @@
             method: 'The method you called is not defined.',
             notrange: 'This slider is not a range slider',
             invalidRanges: 'Invalid range settings (start/end/minRange/maxRange)',
+            invalidLetterNumber: 'Negative values or decimal places for labelType: "letter" are not supported',
         },
 
         metadata: {
@@ -1404,6 +1496,7 @@
         preventCrossover: true,
         fireOnInit: false,
         interpretLabel: false,
+        letters: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
 
         // the decimal place to round to if step is undefined
         decimalPlaces: 2,
@@ -1421,6 +1514,8 @@
             vertical: 'vertical',
             range: 'range',
             smooth: 'smooth',
+            label: 'label',
+            active: 'active',
         },
 
         keys: {
@@ -1433,6 +1528,7 @@
         },
 
         restrictedLabels: [],
+        highlightRange: false,
         showThumbTooltip: false,
         tooltipConfig: {
             position: 'top center',