fomantic-ui 2.9.2-beta.1 → 2.9.2-beta.10

package/src/definitions/modules/popup.js

@@ -125,9 +125,9 @@
                         }
                     }
                     if (settings.popup) {
-                        $popup.addClass(className.loading);
+                        module.set.invisible();
                         $offsetParent = module.get.offsetParent();
-                        $popup.removeClass(className.loading);
+                        module.remove.invisible();
                         if (settings.movePopup && module.has.popup() && module.get.offsetParent($popup)[0] !== $offsetParent[0]) {
                             module.debug('Moving popup to the same offset parent as target');
                             $popup
@@ -414,7 +414,7 @@
                 animate: {
                     show: function (callback) {
                         callback = isFunction(callback) ? callback : function () {};
-                        if (settings.transition && module.can.useElement('transition') && $module.transition('is supported')) {
+                        if (settings.transition && module.can.useElement('transition')) {
                             module.set.visible();
                             $popup
                                 .transition({
@@ -436,7 +436,7 @@
                     hide: function (callback) {
                         callback = isFunction(callback) ? callback : function () {};
                         module.debug('Hiding pop-up');
-                        if (settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
+                        if (settings.transition && $.fn.transition !== undefined) {
                             $popup
                                 .transition({
                                     animation: (settings.transition.hideMethod || settings.transition) + ' out',
@@ -901,8 +901,8 @@
                             .css(positioning)
                             .removeClass(className.position)
                             .addClass(position)
-                            .addClass(className.loading)
                         ;
+                        module.set.invisible();
 
                         popupOffset = module.get.popupOffset();
 
@@ -926,7 +926,7 @@
                                 module.debug('Popup could not find a position to display', $popup);
                                 module.error(error.cannotPlace, element);
                                 module.remove.attempts();
-                                module.remove.loading();
+                                module.remove.invisible();
                                 module.reset();
                                 settings.onUnplaceable.call($popup, element);
 
@@ -935,7 +935,7 @@
                         }
                         module.debug('Position is on stage', position);
                         module.remove.attempts();
-                        module.remove.loading();
+                        module.remove.invisible();
                         if (settings.setFluidWidth && module.is.fluid()) {
                             module.set.fluidWidth(calculations);
                         }
@@ -949,6 +949,14 @@
                         $popup.css('width', calculations.container.width);
                     },
 
+                    loading: function () {
+                        $popup.addClass(className.loading);
+                    },
+
+                    invisible: function () {
+                        $popup.addClass(className.invisible);
+                    },
+
                     variation: function (variation) {
                         variation = variation || module.get.variation();
                         if (variation && module.has.popup()) {
@@ -966,6 +974,9 @@
                     loading: function () {
                         $popup.removeClass(className.loading);
                     },
+                    invisible: function () {
+                        $popup.removeClass(className.invisible);
+                    },
                     variation: function (variation) {
                         variation = variation || module.get.variation();
                         if (variation) {
@@ -1475,6 +1486,7 @@
             basic: 'basic',
             animating: 'animating',
             dropdown: 'dropdown',
+            invisible: 'invisible',
             fluid: 'fluid',
             loading: 'loading',
             popup: 'ui popup',

package/src/definitions/modules/popup.less

@@ -704,12 +704,36 @@
 *******************************/
 & when (@variationPopupLoading) {
     .ui.loading.popup {
-        display: block;
-        visibility: hidden;
-        z-index: @loadingZIndex;
+        cursor: default;
+        pointer-events: @loadingPointerEvents;
+        user-select: none;
+        & * {
+            opacity: @loadingOpacity;
+        }
+        &::after {
+            position: absolute;
+            content: "";
+            top: 50%;
+            left: 50%;
+            margin: @loaderMargin;
+            width: @loaderSize;
+            height: @loaderSize;
+            animation: loader @loaderSpeed infinite linear;
+            border: @loaderLineWidth solid @loaderLineColor;
+            border-radius: @circularRadius;
+            box-shadow: 0 0 0 1px transparent;
+            visibility: visible;
+            z-index: @loaderLineZIndex;
+        }
     }
 }
 
+.ui.invisible.popup {
+    display: block;
+    visibility: hidden !important;
+    z-index: @invisibleZIndex;
+}
+
 .ui.animating.popup,
 .ui.visible.popup {
     display: block;
@@ -793,7 +817,7 @@
         box-shadow: @invertedBoxShadow;
     }
     .ui.inverted.popup .header {
-        background-color: @invertedHeaderBackground;
+        background: @invertedHeaderBackground;
         color: @invertedHeaderColor;
     }
     .ui.inverted.popup::before {
@@ -807,6 +831,8 @@
         @color: @value;
         @c: @colors[@@color][color];
         @l: @colors[@@color][light];
+        @cl: lighten(@c, @loadingColoredPercent);
+        @ll: darken(@l, @loadingColoredPercent);
 
         & when not (@variationPopupTooltip) {
             .ui.ui.ui.@{color}.popup::before,
@@ -814,6 +840,9 @@
                 background: @c;
                 color: @white;
                 border: none;
+                .loading& when (@variationPopupLoading) {
+                    background: @cl;
+                }
             }
             .ui.ui.ui.@{color}.popup::before {
                 box-shadow: none;
@@ -823,6 +852,9 @@
                 .ui.inverted.@{color}.popup {
                     background: @l;
                     color: @black;
+                    .loading& when (@variationPopupLoading) {
+                        background: @ll;
+                    }
                 }
             }
         }
@@ -835,6 +867,12 @@
                 color: @white;
                 border: none;
             }
+            & when (@variationPopupLoading) {
+                .ui.ui.ui.@{color}.loading.popup::before,
+                .ui.@{color}.loading.popup {
+                    background: @cl;
+                }
+            }
             .ui.ui.ui.@{color}.popup::before,
             [data-tooltip][data-variation~="@{color}"]::before {
                 box-shadow: none;
@@ -847,6 +885,12 @@
                     background: @l;
                     color: @black;
                 }
+                & when (@variationPopupLoading) {
+                    .ui.ui.ui.inverted.@{color}.loading.popup::before,
+                    .ui.inverted.@{color}.loading.popup {
+                        background: @ll;
+                    }
+                }
             }
         }
     });

package/src/definitions/modules/progress.js

@@ -59,7 +59,6 @@
                 instance        = $module.data(moduleNamespace),
 
                 animating = false,
-                transitionEnd,
                 module
             ;
             module = {
@@ -115,7 +114,6 @@
 
                 initialize: function () {
                     module.set.duration();
-                    module.set.transitionEvent();
                     module.debug(element);
 
                     module.read.metadata();
@@ -195,17 +193,14 @@
 
                 bind: {
                     transitionEnd: function (callback) {
-                        var
-                            transitionEnd = module.get.transitionEnd()
-                        ;
                         $bars
-                            .one(transitionEnd + eventNamespace, function (event) {
+                            .one('transitionend' + eventNamespace, function (event) {
                                 clearTimeout(module.failSafeTimer);
                                 callback.call(this, event);
                             })
                         ;
                         module.failSafeTimer = setTimeout(function () {
-                            $bars.triggerHandler(transitionEnd);
+                            $bars.triggerHandler('transitionend');
                         }, settings.duration + settings.failSafeDelay);
                         module.verbose('Adding fail safe timer', module.timer);
                     },
@@ -330,24 +325,6 @@
                             : value;
                     },
 
-                    transitionEnd: function () {
-                        var
-                            element     = document.createElement('element'),
-                            transitions = {
-                                transition: 'transitionend',
-                                OTransition: 'oTransitionEnd',
-                                MozTransition: 'transitionend',
-                                WebkitTransition: 'webkitTransitionEnd',
-                            },
-                            transition
-                        ;
-                        for (transition in transitions) {
-                            if (element.style[transition] !== undefined) {
-                                return transitions[transition];
-                            }
-                        }
-                    },
-
                     // gets current displayed percentage (if animating values this is the intermediary value)
                     displayPercent: function (index) {
                         var
@@ -687,9 +664,6 @@
                             settings.onError.call(element, module.value, module.total);
                         });
                     },
-                    transitionEvent: function () {
-                        transitionEnd = module.get.transitionEnd();
-                    },
                     total: function (totalValue) {
                         module.total = totalValue;
                     },

package/src/definitions/modules/search.js

@@ -408,7 +408,7 @@
                         return module.is.focused() && !module.is.visible() && !module.is.empty();
                     },
                     transition: function () {
-                        return settings.transition && $.fn.transition !== undefined && $module.transition('is supported');
+                        return settings.transition && $.fn.transition !== undefined;
                     },
                 },
 

package/src/definitions/modules/shape.js

@@ -116,33 +116,29 @@
                         module.set.active();
                     };
                     settings.onBeforeChange.call($nextSide[0]);
-                    if (module.get.transitionEvent()) {
-                        module.verbose('Starting CSS animation');
+                    module.verbose('Starting CSS animation');
+                    $module
+                        .addClass(className.animating)
+                    ;
+                    $sides
+                        .css(propertyObject)
+                        .one('transitionend', callback)
+                    ;
+                    module.set.duration(settings.duration);
+                    requestAnimationFrame(function () {
                         $module
                             .addClass(className.animating)
                         ;
-                        $sides
-                            .css(propertyObject)
-                            .one(module.get.transitionEvent(), callback)
+                        $activeSide
+                            .addClass(className.hidden)
                         ;
-                        module.set.duration(settings.duration);
-                        requestAnimationFrame(function () {
-                            $module
-                                .addClass(className.animating)
-                            ;
-                            $activeSide
-                                .addClass(className.hidden)
-                            ;
-                        });
-                    } else {
-                        callback();
-                    }
+                    });
                 },
 
                 queue: function (method) {
                     module.debug('Queueing animation of', method);
                     $sides
-                        .one(module.get.transitionEvent(), function () {
+                        .one('transitionend', function () {
                             module.debug('Executing queued animation');
                             setTimeout(function () {
                                 $module.shape(method);
@@ -412,24 +408,6 @@
                         },
                     },
 
-                    transitionEvent: function () {
-                        var
-                            element     = document.createElement('element'),
-                            transitions = {
-                                transition: 'transitionend',
-                                OTransition: 'oTransitionEnd',
-                                MozTransition: 'transitionend',
-                                WebkitTransition: 'webkitTransitionEnd',
-                            },
-                            transition
-                        ;
-                        for (transition in transitions) {
-                            if (element.style[transition] !== undefined) {
-                                return transitions[transition];
-                            }
-                        }
-                    },
-
                     nextSide: function () {
                         return $activeSide.next(selector.side).length > 0
                             ? $activeSide.next(selector.side)

package/src/definitions/modules/sidebar.js

@@ -69,7 +69,6 @@
                 elementNamespace,
                 id,
                 currentScroll,
-                transitionEvent,
                 initialBodyMargin = '',
                 tempBodyMargin = '',
                 hadScrollbar = false,
@@ -84,8 +83,6 @@
 
                     module.create.id();
 
-                    transitionEvent = module.get.transitionEvent();
-
                     // avoids locking rendering if initialized in onReady
                     if (settings.delaySetup) {
                         requestAnimationFrame(module.setup.layout);
@@ -492,13 +489,13 @@
                     };
                     transitionEnd = function (event) {
                         if (event.target === $transition[0]) {
-                            $transition.off(transitionEvent + elementNamespace, transitionEnd);
+                            $transition.off('transitionend' + elementNamespace, transitionEnd);
                             module.remove.animating();
                             callback.call(element);
                         }
                     };
-                    $transition.off(transitionEvent + elementNamespace);
-                    $transition.on(transitionEvent + elementNamespace, transitionEnd);
+                    $transition.off('transitionend' + elementNamespace);
+                    $transition.on('transitionend' + elementNamespace, transitionEnd);
                     requestAnimationFrame(animate);
                     if (settings.dimPage && !module.othersVisible()) {
                         requestAnimationFrame(dim);
@@ -532,7 +529,7 @@
                     };
                     transitionEnd = function (event) {
                         if (event.target === $transition[0]) {
-                            $transition.off(transitionEvent + elementNamespace, transitionEnd);
+                            $transition.off('transitionend' + elementNamespace, transitionEnd);
                             module.remove.animating();
                             module.remove.closing();
                             module.remove.transition();
@@ -546,8 +543,8 @@
                             callback.call(element);
                         }
                     };
-                    $transition.off(transitionEvent + elementNamespace);
-                    $transition.on(transitionEvent + elementNamespace, transitionEnd);
+                    $transition.off('transitionend' + elementNamespace);
+                    $transition.on('transitionend' + elementNamespace, transitionEnd);
                     requestAnimationFrame(animate);
                 },
 
@@ -722,23 +719,6 @@
 
                         return transition;
                     },
-                    transitionEvent: function () {
-                        var
-                            element     = document.createElement('element'),
-                            transitions = {
-                                transition: 'transitionend',
-                                OTransition: 'oTransitionEnd',
-                                MozTransition: 'transitionend',
-                                WebkitTransition: 'webkitTransitionEnd',
-                            },
-                            transition
-                        ;
-                        for (transition in transitions) {
-                            if (element.style[transition] !== undefined) {
-                                return transitions[transition];
-                            }
-                        }
-                    },
                 },
                 has: {
                     scrollbar: function () {

package/src/definitions/modules/toast.js

@@ -397,7 +397,7 @@
                 animate: {
                     show: function (callback) {
                         callback = isFunction(callback) ? callback : function () {};
-                        if (settings.transition && module.can.useElement('transition') && $module.transition('is supported')) {
+                        if (settings.transition && module.can.useElement('transition')) {
                             module.set.visible();
                             $toastBox
                                 .transition({
@@ -417,7 +417,7 @@
                     },
                     close: function (callback) {
                         callback = isFunction(callback) ? callback : function () {};
-                        if (settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
+                        if (settings.transition && $.fn.transition !== undefined) {
                             $toastBox
                                 .transition({
                                     animation: settings.transition.hideMethod + ' out',

package/src/definitions/modules/transition.js

@@ -46,7 +46,6 @@
                 error,
                 className,
                 metadata,
-                animationEnd,
 
                 moduleNamespace,
                 eventNamespace,
@@ -69,9 +68,6 @@
                     moduleNamespace = 'module-' + settings.namespace;
                     instance = $module.data(moduleNamespace) || module;
 
-                    // get vendor specific events
-                    animationEnd = module.get.animationEndEvent();
-
                     if (methodInvoked) {
                         methodInvoked = module.invoke(query);
                     }
@@ -152,11 +148,7 @@
 
                 animate: function (overrideSettings) {
                     settings = overrideSettings || settings;
-                    if (!module.is.supported()) {
-                        module.error(error.support);
 
-                        return false;
-                    }
                     module.debug('Preparing animation', settings.animation);
                     if (module.is.animating()) {
                         if (settings.queue) {
@@ -195,7 +187,7 @@
                     module.debug('Queueing animation of', animation);
                     module.queuing = true;
                     $module
-                        .one(animationEnd + '.queue' + eventNamespace, function () {
+                        .one('animationend.queue' + eventNamespace, function () {
                             module.queuing = false;
                             module.repaint();
                             module.animate.apply(this, settings);
@@ -216,7 +208,7 @@
                             module.restore.conditions();
                             module.hide();
                         } else if (module.is.inward()) {
-                            module.verbose('Animation is outward, showing element');
+                            module.verbose('Animation is inward, showing element');
                             module.restore.conditions();
                             module.show();
                         } else {
@@ -375,7 +367,7 @@
                         module.debug('Starting tween', animationClass);
                         $module
                             .addClass(animationClass)
-                            .one(animationEnd + '.complete' + eventNamespace, module.complete)
+                            .one('animationend.complete' + eventNamespace, module.complete)
                         ;
                         if (settings.useFailSafe) {
                             module.add.failSafe();
@@ -424,7 +416,7 @@
                             duration = module.get.duration()
                         ;
                         module.timer = setTimeout(function () {
-                            $module.triggerHandler(animationEnd);
+                            $module.triggerHandler('animationend');
                         }, duration + settings.failSafeDelay);
                         module.verbose('Adding fail safe timer', module.timer);
                     },
@@ -612,45 +604,6 @@
                     transitionExists: function (animation) {
                         return $.fn.transition.exists[animation];
                     },
-                    animationStartEvent: function () {
-                        var
-                            element     = document.createElement('div'),
-                            animations  = {
-                                animation: 'animationstart',
-                                OAnimation: 'oAnimationStart',
-                                MozAnimation: 'mozAnimationStart',
-                                WebkitAnimation: 'webkitAnimationStart',
-                            },
-                            animation
-                        ;
-                        for (animation in animations) {
-                            if (element.style[animation] !== undefined) {
-                                return animations[animation];
-                            }
-                        }
-
-                        return false;
-                    },
-                    animationEndEvent: function () {
-                        var
-                            element     = document.createElement('div'),
-                            animations  = {
-                                animation: 'animationend',
-                                OAnimation: 'oAnimationEnd',
-                                MozAnimation: 'mozAnimationEnd',
-                                WebkitAnimation: 'webkitAnimationEnd',
-                            },
-                            animation
-                        ;
-                        for (animation in animations) {
-                            if (element.style[animation] !== undefined) {
-                                return animations[animation];
-                            }
-                        }
-
-                        return false;
-                    },
-
                 },
 
                 can: {
@@ -750,7 +703,8 @@
                         return $module.css('visibility') === 'hidden';
                     },
                     supported: function () {
-                        return animationEnd !== false;
+                        // keep method for backward compatibility until 2.10.0
+                        return true;
                     },
                 },
 
@@ -801,13 +755,13 @@
 
                 stop: function () {
                     module.debug('Stopping current animation');
-                    $module.triggerHandler(animationEnd);
+                    $module.triggerHandler('animationend');
                 },
 
                 stopAll: function () {
                     module.debug('Stopping all animation');
                     module.remove.queueCallback();
-                    $module.triggerHandler(animationEnd);
+                    $module.triggerHandler('animationend');
                 },
 
                 clear: {
@@ -945,8 +899,7 @@
                         $.each(query, function (depth, value) {
                             var camelCaseValue = depth !== maxDepth
                                 ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
-                                : query
-                            ;
+                                : query;
                             if ($.isPlainObject(object[camelCaseValue]) && (depth !== maxDepth)) {
                                 object = object[camelCaseValue];
                             } else if (object[camelCaseValue] !== undefined) {
@@ -960,8 +913,6 @@
 
                                 return false;
                             } else {
-                                module.error(error.method, query);
-
                                 return false;
                             }
                         });
@@ -1077,8 +1028,6 @@
         // possible errors
         error: {
             noAnimation: 'Element is no longer attached to DOM. Unable to animate.  Use silent setting to suppress this warning in production.',
-            method: 'The method you called is not defined',
-            support: 'This browser does not support CSS animations',
         },
 
     };

package/src/theme.less

@@ -16,14 +16,10 @@
 @import "@{themesFolder}/default/globals/site.variables";
 
 /* Packaged site.variables */
-& when not (@site = "default") {
-    @import (optional) "@{themesFolder}/@{site}/globals/site.variables";
-}
+@import (optional) "@{themesFolder}/@{site}/globals/site.variables";
 
 /* Component's site.variables */
-& when not (@theme = "default") {
-    @import (optional) "@{themesFolder}/@{theme}/globals/site.variables";
-}
+@import (optional) "@{themesFolder}/@{theme}/globals/site.variables";
 
 /* Site theme site.variables */
 @import (optional) "@{siteFolder}/globals/site.variables";
@@ -49,14 +45,10 @@
 @import "@{themesFolder}/default/globals/colors.less";
 
 /* Packaged colors.less */
-& when not (@site = "default") {
-    @import (optional) "@{themesFolder}/@{site}/globals/colors.less";
-}
+@import (optional) "@{themesFolder}/@{site}/globals/colors.less";
 
 /* Packaged Theme */
-& when not (@theme = "default") {
-    @import (optional) "@{themesFolder}/@{theme}/globals/colors.less";
-}
+@import (optional) "@{themesFolder}/@{theme}/globals/colors.less";
 
 /* Site Theme */
 @import (optional) "@{siteFolder}/globals/colors.less";

package/src/themes/default/collections/menu.variables

@@ -428,9 +428,7 @@
 @attachedWidth: e(%("calc(100%% + %d)", -@attachedHorizontalOffset * 2));
 @attachedBoxShadow: none;
 @attachedBorder: @borderWidth solid @solidBorderColor;
-@attachedBottomBoxShadow:
-    @boxShadow,
-    @attachedBoxShadow;
+@attachedBottomBoxShadow: @attachedBoxShadow;
 
 /* Resize large sizes */
 @mini: @11px;

package/src/themes/default/collections/table.variables

@@ -166,9 +166,7 @@
 @attachedWidth: e(%("calc(100%% + %d)", -@attachedHorizontalOffset * 2));
 @attachedBoxShadow: none;
 @attachedBorder: @borderWidth solid @solidBorderColor;
-@attachedBottomBoxShadow:
-    @boxShadow,
-    @attachedBoxShadow;
+@attachedBottomBoxShadow: @attachedBoxShadow;
 
 /* Striped */
 @stripedBackground: rgba(0, 0, 50, 0.02);

package/src/themes/default/elements/segment.variables

@@ -104,9 +104,7 @@
 @attachedWidth: e(%("calc(100%% + %d)", -@attachedHorizontalOffset * 2));
 @attachedBoxShadow: none;
 @attachedBorder: @borderWidth solid @solidBorderColor;
-@attachedBottomBoxShadow:
-    @boxShadow,
-    @attachedBoxShadow;
+@attachedBottomBoxShadow: @bottomShadow;
 
 /* Inverted */
 @invertedBackground: @black;