fomantic-ui 2.9.4-beta.1 → 2.9.4-beta.100

package/src/definitions/modules/slider.js

@@ -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)) {
@@ -1267,7 +1358,9 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
+                        module.performance.timer = setTimeout(function () {
+                            module.performance.display();
+                        }, 500);
                     },
                     display: function () {
                         var
@@ -1380,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: {
@@ -1402,6 +1496,7 @@
         preventCrossover: true,
         fireOnInit: false,
         interpretLabel: false,
+        letters: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
 
         // the decimal place to round to if step is undefined
         decimalPlaces: 2,
@@ -1419,6 +1514,8 @@
             vertical: 'vertical',
             range: 'range',
             smooth: 'smooth',
+            label: 'label',
+            active: 'active',
         },
 
         keys: {
@@ -1431,6 +1528,7 @@
         },
 
         restrictedLabels: [],
+        highlightRange: false,
         showThumbTooltip: false,
         tooltipConfig: {
             position: 'top center',

package/src/definitions/modules/slider.less

@@ -17,16 +17,23 @@
 
 @import (multiple) "../../theme.config";
 
-.ui.slider:not(.vertical):not(.checkbox) {
+@notVertical: if(@variationSliderVertical, e(":not(.vertical)"));
+@notDisabled: if(@variationSliderDisabled, e(":not(.disabled)"));
+@notBottom: if(@variationSliderBottomAligned, e(":not(.bottom)"));
+@notRight: if(@variationSliderRightAligned, e(":not(.right)"));
+
+@notCheckbox: if(@variationCheckboxSlider, e(":not(.checkbox)"));
+
+.ui.slider@{notVertical}@{notCheckbox} {
     width: 100%;
     padding: @padding;
 }
 
-.ui.slider:not(.checkbox) {
+.ui.slider@{notCheckbox} {
     position: relative;
 }
 
-.ui.slider:not(.checkbox):focus {
+.ui.slider@{notCheckbox}:focus {
     outline: 0;
 }
 
@@ -35,7 +42,7 @@
     z-index: 2;
 }
 
-.ui.slider:not(.vertical) .inner {
+.ui.slider@{notVertical} .inner {
     height: @height;
 }
 
@@ -49,7 +56,7 @@
     background-color: @trackColor;
 }
 
-.ui.slider:not(.vertical) .inner .track {
+.ui.slider@{notVertical} .inner .track {
     width: 100%;
     height: @trackHeight;
     top: @trackPositionTop;
@@ -62,7 +69,7 @@
     background-color: @trackFillColor;
 }
 
-.ui.slider:not(.vertical) .inner .track-fill {
+.ui.slider@{notVertical} .inner .track-fill {
     height: @trackFillHeight;
     top: @trackPositionTop;
     left: 0;
@@ -80,12 +87,12 @@
     transition: @thumbTransition;
 }
 
-.ui.slider:not(.disabled) .inner .thumb:hover {
+.ui.slider@{notDisabled} .inner .thumb:hover {
     cursor: @thumbHoverPointer;
     background: @thumbHoverBackground;
 }
 
-.ui.slider:not(.disabled):focus .inner .thumb {
+.ui.slider@{notDisabled}:focus .inner .thumb {
     background: @thumbHoverBackground;
 }
 
@@ -98,7 +105,7 @@
          Disabled
     --------------- */
 
-    .ui.disabled.slider:not(.checkbox) {
+    .ui.disabled.slider@{notCheckbox} {
         opacity: @disabledOpactiy;
     }
 
@@ -121,7 +128,7 @@
         right: 0;
     }
 
-    .ui.reversed.slider:not(.vertical) .inner .thumb {
+    .ui.reversed.slider@{notVertical} .inner .thumb {
         left: auto;
         right: 0;
     }
@@ -198,21 +205,24 @@
         right: 0;
     }
 
-    .ui.labeled.slider:not(.vertical) > .labels {
+    .ui.labeled.slider@{notVertical} > .labels {
         transform: translateY(-50%);
     }
 
     .ui.labeled.slider > .labels .label {
         display: inline-flex;
-        padding: @labelPadding;
         position: absolute;
         transform: translate(-50%, -100%);
         white-space: nowrap;
+        &:not(.ui) {
+            padding: @labelPadding;
+        }
     }
-
-    .ui.bottom.aligned.labeled.slider > .labels .label {
-        bottom: 0;
-        transform: translate(-50%, 100%);
+    & when (@variationSliderBottomAligned) {
+        .ui.bottom.aligned.labeled.slider > .labels .label {
+            bottom: 0;
+            transform: translate(-50%, 100%);
+        }
     }
     & when (@variationSliderTicked) {
         .ui.labeled.ticked.slider > .labels .label::after {
@@ -224,13 +234,39 @@
             top: 100%;
             left: 50%;
         }
-        .ui.bottom.aligned.labeled.ticked.slider > .labels .label::after {
-            top: auto;
-            bottom: 100%;
+        & when (@variationSliderBottomAligned) {
+            .ui.bottom.aligned.labeled.ticked.slider > .labels .label::after {
+                top: auto;
+                bottom: 100%;
+            }
+            & when (@variationSliderUiLabel) {
+                .ui.labeled.slider.bottom.aligned .labels .ui.label {
+                    margin-bottom: -@uiLabelMargin;
+                }
+                .ui.labeled.ticked.slider.bottom.aligned .labels .ui.label::after {
+                    margin-bottom: @uiLabelMargin;
+                }
+            }
         }
         .ui.labeled.ticked.slider > .labels .halftick.label::after {
             height: (@labelHeight / 2);
         }
+        & when (@variationSliderInverted) {
+            .ui.inverted.labeled.ticked.slider > .labels .label::after {
+                background: @invertedLabelColor;
+            }
+        }
+    }
+    & when (@variationSliderUiLabel) {
+        .ui.labeled.slider@{notVertical}@{notBottom} .labels .ui.label {
+            margin-top: -@uiLabelMargin;
+        }
+        .ui.labeled.ticked.slider@{notVertical}@{notBottom} .labels .ui.label::after {
+            margin-top: @uiLabelMargin;
+        }
+        .ui.labeled.ticked.slider@{notVertical} > .labels .ui.label::after {
+            height: @uiLabelTickHeight;
+        }
     }
 
     & when (@variationSliderVertical) {
@@ -259,6 +295,9 @@
             width: (@labelHeight / 2);
             height: @labelWidth;
         }
+        .ui.labeled.vertical.slider@{notRight} > .labels .halftick.label::after {
+            margin-left: @verticalTickDistance;
+        }
 
         & when (@variationSliderReversed) {
             /* Vertical Reversed Labels */
@@ -266,6 +305,39 @@
                 transform: translate(-100%, 50%);
             }
         }
+        & when (@variationSliderUiLabel) {
+            .ui.labeled.ticked.vertical.slider@{notRight} > .labels .ui.label::after {
+                margin-left: @verticalUiLabelMargin;
+            }
+        }
+        & when (@variationSliderRightAligned) {
+            .ui.labeled.vertical.right.aligned.slider > .labels {
+                transform: translateX(50%);
+                left: e(%("calc(100%% + %d)", @verticalTickDistance));
+            }
+            .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: @verticalTickDistance;
+            }
+            & when (@variationSliderReversed) {
+                .ui.labeled.vertical.reversed.right.aligned.slider > .labels .label {
+                    transform: translate(100%, 50%);
+                }
+            }
+            & when (@variationSliderUiLabel) {
+                .ui.labeled.ticked.vertical.right.aligned.slider > .labels .ui.label::after {
+                    margin-right: @verticalUiLabelMargin;
+                }
+            }
+        }
     }
 }
 
@@ -278,8 +350,8 @@
     transition: @hoverOpacityTransition;
 }
 
-.ui.hover.slider:not(.disabled):hover .inner .thumb,
-.ui.hover.slider:not(.disabled):focus .inner .thumb {
+.ui.hover.slider@{notDisabled}:hover .inner .thumb,
+.ui.hover.slider@{notDisabled}:focus .inner .thumb {
     opacity: @hoverVarHoverOpacity;
 }
 
@@ -296,6 +368,26 @@
         background-color: @transparentWhite;
     }
 }
+& when (@variationSliderHighlight) {
+    .ui.labeled.slider > .active.labels .label {
+        transition: @highlightTransition;
+    }
+    & when (@variationSliderTicked) {
+        .ui.labeled.ticked.slider > .active.labels .active.label::after {
+            background: @trackFillColor;
+        }
+        & when (@variationSliderInverted) {
+            .ui.inverted.labeled.ticked.slider > .active.labels .active.label::after {
+                background: @invertedTrackFillColor;
+            }
+        }
+    }
+
+    .ui.labeled.ticked.slider > .active.labels .active.label::after,
+    .ui.labeled.slider > .active.labels .label:not(.active) {
+        opacity: @highlightOpacity;
+    }
+}
 
 /* --------------
      Colors
@@ -338,6 +430,16 @@
                 }
             }
         }
+        & when (@variationSliderHighlight) and (@variationSliderTicked) {
+            .ui.@{color}.labeled.ticked.slider > .active.labels .active.label::after {
+                background-color: @c;
+            }
+            & when (@variationSliderInverted) {
+                .ui.@{color}.inverted.labeled.ticked.slider > .active.labels .active.label::after {
+                    background-color: @l;
+                }
+            }
+        }
 
     });
 }
@@ -386,20 +488,20 @@
             height: @@h;
             width: @@h;
         }
-        .ui.slider.@{value}:not(.vertical) .inner {
+        .ui.slider.@{value}@{notVertical} .inner {
             height: @@h;
         }
-        .ui.slider.@{value}:not(.vertical) .inner .track,
-        .ui.slider.@{value}:not(.vertical) .inner .track-fill {
+        .ui.slider.@{value}@{notVertical} .inner .track,
+        .ui.slider.@{value}@{notVertical} .inner .track-fill {
             height: @@th;
             top: @@tp;
         }
         & when (@variationSliderLabeled) {
-            .ui.@{value}.labeled.slider:not(.vertical) > .labels,
-            .ui.@{value}.labeled.slider:not(.vertical) > .labels .label::after {
+            .ui.@{value}.labeled.slider@{notVertical} > .labels,
+            .ui.@{value}.labeled.slider@{notVertical} > .labels .label::after {
                 height: @@lh;
             }
-            .ui.@{value}.labeled.slider:not(.vertical) > .labels .halftick.label::after {
+            .ui.@{value}.labeled.slider@{notVertical} > .labels .halftick.label::after {
                 height: (@@lh / 2);
             }
         }

package/src/definitions/modules/sticky.js

@@ -746,7 +746,9 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 0);
+                        module.performance.timer = setTimeout(function () {
+                            module.performance.display();
+                        }, 0);
                     },
                     display: function () {
                         var

package/src/definitions/modules/tab.js

@@ -788,7 +788,9 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
+                        module.performance.timer = setTimeout(function () {
+                            module.performance.display();
+                        }, 500);
                     },
                     display: function () {
                         var