feat(popup): loading variant

Added set loading behavior as remove loading already exists and used them (only) internally as well.
This is now also properly displayed with the usual loading spinner supporting slow/fast/double/colors

This might come in handy when someone want to lazy load popups manually

Author: lubber-de

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
@@ -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',

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,13 +831,18 @@
         @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,
             .ui.@{color}.popup {
                 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;
+                    }
+                }
             }
         }
     });

src/themes/default/modules/popup.variables

@@ -109,7 +109,15 @@
        States
 -------------------- */
 
+@loadingOpacity: 0.3;
+@loadingColoredPercent: 30%;
+@loadingPointerEvents: none;
 @loadingZIndex: -1;
+@loaderSize: 2em;
+@loaderLineZIndex: 101;
+
+/* backward compatible just in case */
+@invisibleZIndex: @loadingZIndex;
 
 /* -------------------
        Variations