fomantic-ui 2.9.2-beta.7 → 2.9.2-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.2-beta.7+2015119",
+  "version": "2.9.2-beta.9+f3fb845",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/src/definitions/behaviors/form.js

@@ -888,7 +888,7 @@
                                 .html(settings.templates.prompt(errors))
                             ;
                             if (!promptExists) {
-                                if (settings.transition && module.can.useElement('transition') && $module.transition('is supported')) {
+                                if (settings.transition && module.can.useElement('transition')) {
                                     module.verbose('Displaying error with css transition', settings.transition);
                                     $prompt.transition(settings.transition + ' in', settings.duration);
                                 } else {
@@ -984,7 +984,7 @@
                         ;
                         if (settings.inline && $prompt.is(':visible')) {
                             module.verbose('Removing prompt for field', identifier);
-                            if (settings.transition && module.can.useElement('transition') && $module.transition('is supported')) {
+                            if (settings.transition && module.can.useElement('transition')) {
                                 $prompt.transition(settings.transition + ' out', settings.duration, function () {
                                     $prompt.remove();
                                 });

package/src/definitions/modules/accordion.js

@@ -175,7 +175,7 @@
                         .addClass(className.animating)
                     ;
                     if (settings.animateChildren) {
-                        if ($.fn.transition !== undefined && $module.transition('is supported')) {
+                        if ($.fn.transition !== undefined) {
                             $activeContent
                                 .children()
                                 .transition({
@@ -239,7 +239,7 @@
                             .addClass(className.animating)
                         ;
                         if (settings.animateChildren) {
-                            if ($.fn.transition !== undefined && $module.transition('is supported')) {
+                            if ($.fn.transition !== undefined) {
                                 $activeContent
                                     .children()
                                     .transition({
@@ -308,7 +308,7 @@
                             .stop(true, true)
                         ;
                         if (settings.animateChildren) {
-                            if ($.fn.transition !== undefined && $module.transition('is supported')) {
+                            if ($.fn.transition !== undefined) {
                                 $openContents
                                     .children()
                                     .transition({

package/src/definitions/modules/dimmer.js

@@ -229,7 +229,7 @@
                         callback = isFunction(callback)
                             ? callback
                             : function () {};
-                        if (settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
+                        if (settings.useCSS && $.fn.transition !== undefined) {
                             if (settings.useFlex) {
                                 module.debug('Using flex dimmer');
                                 module.remove.legacy();
@@ -288,7 +288,7 @@
                         callback = isFunction(callback)
                             ? callback
                             : function () {};
-                        if (settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
+                        if (settings.useCSS && $.fn.transition !== undefined) {
                             module.verbose('Hiding dimmer with css');
                             $dimmer
                                 .transition({

package/src/definitions/modules/dropdown.js

@@ -3637,7 +3637,7 @@
                                     displayType: module.get.displayType(),
                                 }).transition('show');
                                 callback.call(element);
-                            } else if (module.can.useElement('transition') && $module.transition('is supported')) {
+                            } else if (module.can.useElement('transition')) {
                                 $currentMenu
                                     .transition({
                                         animation: transition + ' in',
@@ -3679,7 +3679,7 @@
                                     displayType: module.get.displayType(),
                                 }).transition('hide');
                                 callback.call(element);
-                            } else if ($.fn.transition !== undefined && $module.transition('is supported')) {
+                            } else if ($.fn.transition !== undefined) {
                                 $currentMenu
                                     .transition({
                                         animation: transition + ' out',

package/src/definitions/modules/embed.js

@@ -655,7 +655,7 @@
                 return ''
                     + '<iframe src="' + deQuote(src) + '"'
                     + ' width="100%" height="100%"'
-                    + ' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
+                    + ' msallowFullScreen allowFullScreen></iframe>';
             },
             placeholder: function (image, icon) {
                 var

package/src/definitions/modules/flyout.js

@@ -80,8 +80,8 @@
                 elementNamespace,
                 id,
                 observer,
+                observeAttributes = false,
                 currentScroll,
-                transitionEvent,
 
                 module
             ;
@@ -145,8 +145,6 @@
                         });
                     }
 
-                    transitionEvent = module.get.transitionEvent();
-
                     // avoids locking rendering if initialized in onReady
                     if (settings.delaySetup) {
                         requestAnimationFrame(module.setup.layout);
@@ -498,7 +496,7 @@
                             ;
                             mutations.every(function (mutation) {
                                 if (mutation.type === 'attributes') {
-                                    if (mutation.attributeName === 'disabled' || $(mutation.target).find(':input').addBack(':input')) {
+                                    if (observeAttributes && (mutation.attributeName === 'disabled' || $(mutation.target).find(':input').addBack(':input').length > 0)) {
                                         shouldRefreshInputs = true;
                                     }
                                 } else {
@@ -549,13 +547,14 @@
                     if (!settings.dimPage) {
                         return;
                     }
-                    $inputs = $module.find('[tabindex], :input:enabled').filter(':visible').filter(function () {
+                    $inputs = $module.find('a[href], [tabindex], :input:enabled').filter(':visible').filter(function () {
                         return $(this).closest('.disabled').length === 0;
                     });
-                    $module.removeAttr('tabindex');
                     if ($inputs.length === 0) {
                         $inputs = $module;
                         $module.attr('tabindex', -1);
+                    } else {
+                        $module.removeAttr('tabindex');
                     }
                     $inputs.first()
                         .on('keydown' + elementNamespace, module.event.inputKeyDown.first)
@@ -652,6 +651,7 @@
                             }
                         }
                         module.set.dimmerStyles();
+                        module.set.observeAttributes(false);
                         module.pushPage(function () {
                             callback.call(element);
                             settings.onVisible.call(element);
@@ -660,6 +660,7 @@
                             }
                             module.save.focus();
                             module.refreshInputs();
+                            requestAnimationFrame(module.set.observeAttributes);
                         });
                         settings.onChange.call(element);
                     } else {
@@ -680,6 +681,7 @@
                     if (module.is.visible() || module.is.animating()) {
                         module.debug('Hiding flyout', callback);
                         module.refreshFlyouts();
+                        module.set.observeAttributes(false);
                         module.pullPage(function () {
                             callback.call(element);
                             if (isFunction(settings.onHidden)) {
@@ -752,13 +754,13 @@
                     };
                     transitionEnd = function (event) {
                         if (event.target === $module[0]) {
-                            $module.off(transitionEvent + elementNamespace, transitionEnd);
+                            $module.off('transitionend' + elementNamespace, transitionEnd);
                             module.remove.animating();
                             callback.call(element);
                         }
                     };
-                    $module.off(transitionEvent + elementNamespace);
-                    $module.on(transitionEvent + elementNamespace, transitionEnd);
+                    $module.off('transitionend' + elementNamespace);
+                    $module.on('transitionend' + elementNamespace, transitionEnd);
                     requestAnimationFrame(animate);
                     if (settings.dimPage && !module.othersVisible()) {
                         requestAnimationFrame(dim);
@@ -793,7 +795,7 @@
                     };
                     transitionEnd = function (event) {
                         if (event.target === $module[0]) {
-                            $module.off(transitionEvent + elementNamespace, transitionEnd);
+                            $module.off('transitionend' + elementNamespace, transitionEnd);
                             module.remove.animating();
                             module.remove.closing();
                             module.remove.overlay();
@@ -807,8 +809,8 @@
                             callback.call(element);
                         }
                     };
-                    $module.off(transitionEvent + elementNamespace);
-                    $module.on(transitionEvent + elementNamespace, transitionEnd);
+                    $module.off('transitionend' + elementNamespace);
+                    $module.on('transitionend' + elementNamespace, transitionEnd);
                     requestAnimationFrame(animate);
                 },
 
@@ -831,6 +833,9 @@
                 },
 
                 set: {
+                    observeAttributes: function (state) {
+                        observeAttributes = state !== false;
+                    },
                     autofocus: function () {
                         var
                             $autofocus = $inputs.filter('[autofocus]'),
@@ -973,23 +978,6 @@
 
                         return className.left;
                     },
-                    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];
-                            }
-                        }
-                    },
                     id: function () {
                         return id;
                     },

package/src/definitions/modules/modal.js

@@ -82,6 +82,7 @@
                 elementEventNamespace,
                 id,
                 observer,
+                observeAttributes = false,
                 module
             ;
             module = {
@@ -265,7 +266,7 @@
                             ;
                             mutations.every(function (mutation) {
                                 if (mutation.type === 'attributes') {
-                                    if (mutation.attributeName === 'disabled' || $(mutation.target).find(':input').addBack(':input')) {
+                                    if (observeAttributes && (mutation.attributeName === 'disabled' || $(mutation.target).find(':input').addBack(':input').length > 0)) {
                                         shouldRefreshInputs = true;
                                     }
                                 } else {
@@ -324,10 +325,11 @@
                     $inputs = $module.find('a[href], [tabindex], :input:enabled').filter(':visible').filter(function () {
                         return $(this).closest('.disabled').length === 0;
                     });
-                    $module.removeAttr('tabindex');
                     if ($inputs.length === 0) {
                         $inputs = $module;
                         $module.attr('tabindex', -1);
+                    } else {
+                        $module.removeAttr('tabindex');
                     }
                     $inputs.first()
                         .on('keydown' + elementEventNamespace, module.event.inputKeyDown.first)
@@ -604,8 +606,9 @@
                                     $module.detach().appendTo($dimmer);
                                 }
                             }
-                            if (settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
+                            if (settings.transition && $.fn.transition !== undefined) {
                                 module.debug('Showing modal with css animations');
+                                module.set.observeAttributes(false);
                                 $module
                                     .transition({
                                         debug: settings.debug,
@@ -623,6 +626,7 @@
                                             module.save.focus();
                                             module.set.active();
                                             module.refreshInputs();
+                                            requestAnimationFrame(module.set.observeAttributes);
                                             callback();
                                         },
                                     })
@@ -652,8 +656,9 @@
 
                     if (module.is.animating() || module.is.active()) {
                         module.debug('Hiding modal');
-                        if (settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
+                        if (settings.transition && $.fn.transition !== undefined) {
                             module.remove.active();
+                            module.set.observeAttributes(false);
                             $module
                                 .transition({
                                     debug: settings.debug,
@@ -989,9 +994,7 @@
                         return module.cache.isIE;
                     },
                     animating: function () {
-                        return $module.transition('is supported')
-                            ? $module.transition('is animating')
-                            : $module.is(':visible');
+                        return $module.transition('is animating');
                     },
                     scrolling: function () {
                         return $dimmable.hasClass(className.scrolling);
@@ -1034,6 +1037,9 @@
                 },
 
                 set: {
+                    observeAttributes: function (state) {
+                        observeAttributes = state !== false;
+                    },
                     autofocus: function () {
                         var
                             $autofocus = $inputs.filter('[autofocus]'),

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;
@@ -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)