fomantic-ui 2.9.0-beta.99 → 2.9.1-beta.0

package/src/definitions/modules/popup.js

@@ -62,11 +62,11 @@ $.fn.popup = function(parameters) {
         moduleNamespace    = 'module-' + namespace,
 
         $module            = $(this),
-        $context           = $(settings.context),
-        $scrollContext     = $(settings.scrollContext),
-        $boundary          = $(settings.boundary),
+        $context           = [window,document].indexOf(settings.context) < 0 ? $document.find(settings.context) : $(settings.context),
+        $scrollContext     = [window,document].indexOf(settings.scrollContext) < 0 ? $document.find(settings.scrollContext) : $(settings.scrollContext),
+        $boundary          = [window,document].indexOf(settings.boundary) < 0 ? $document.find(settings.boundary) : $(settings.boundary),
         $target            = (settings.target)
-          ? $(settings.target)
+          ? ([window,document].indexOf(settings.target) < 0 ? $document.find(settings.target) : $(settings.target))
           : $module,
 
         $popup,
@@ -122,7 +122,7 @@ $.fn.popup = function(parameters) {
 
         refresh: function() {
           if(settings.popup) {
-            $popup = $(settings.popup).eq(0);
+            $popup = $document.find(settings.popup).eq(0);
           }
           else {
             if(settings.inline) {
@@ -287,7 +287,7 @@ $.fn.popup = function(parameters) {
             settings.onCreate.call($popup, element);
           }
           else if(settings.popup) {
-            $(settings.popup).data(metadata.activator, $module);
+            $document.find(settings.popup).data(metadata.activator, $module);
             module.verbose('Used popup specified in settings');
             module.refresh();
             if(settings.hoverable) {
@@ -309,7 +309,7 @@ $.fn.popup = function(parameters) {
         },
 
         createID: function() {
-          id = (Math.random().toString(16) + '000000000').substr(2, 8);
+          id = (Math.random().toString(16) + '000000000').slice(2, 10);
           elementNamespace = '.' + id;
           module.verbose('Creating unique id for element', id);
         },
@@ -368,7 +368,7 @@ $.fn.popup = function(parameters) {
         },
 
         hideAll: function() {
-          $(selector.popup)
+          $document.find(selector.popup)
             .filter('.' + className.popupVisible)
             .each(function() {
               $(this)
@@ -438,6 +438,7 @@ $.fn.popup = function(parameters) {
                   queue      : false,
                   debug      : settings.debug,
                   verbose    : settings.verbose,
+                  silent     : settings.silent,
                   duration   : settings.transition.showDuration || settings.duration,
                   onComplete : function() {
                     module.bind.close();
@@ -462,6 +463,7 @@ $.fn.popup = function(parameters) {
                   duration   : settings.transition.hideDuration || settings.duration,
                   debug      : settings.debug,
                   verbose    : settings.verbose,
+                  silent     : settings.silent,
                   onComplete : function() {
                     module.reset();
                     callback.call($popup, element);
@@ -557,7 +559,7 @@ $.fn.popup = function(parameters) {
             };
 
             // if popup offset context is not same as target, then adjust calculations
-            if($popupOffsetParent.get(0) !== $offsetParent.get(0)) {
+            if($popupOffsetParent[0] !== $offsetParent[0]) {
               var
                 popupOffset        = $popupOffsetParent.offset()
               ;
@@ -1085,10 +1087,7 @@ $.fn.popup = function(parameters) {
         is: {
           closable: function() {
             if(settings.closable == 'auto') {
-              if(settings.on == 'hover') {
-                return false;
-              }
-              return true;
+              return settings.on != 'hover';
             }
             return settings.closable;
           },
@@ -1103,12 +1102,7 @@ $.fn.popup = function(parameters) {
                 offstage.push(direction);
               }
             });
-            if(offstage.length > 0) {
-              return true;
-            }
-            else {
-              return false;
-            }
+            return offstage.length > 0;
           },
           svg: function(element) {
             return module.supports.svg() && (element instanceof SVGGraphicsElement);
@@ -1135,7 +1129,7 @@ $.fn.popup = function(parameters) {
             return !module.is.visible();
           },
           rtl: function () {
-            return $module.attr('dir') === 'rtl' || $module.css('direction') === 'rtl';
+            return $module.attr('dir') === 'rtl' || $module.css('direction') === 'rtl' || $body.attr('dir') === 'rtl' || $body.css('direction') === 'rtl' || $context.attr('dir') === 'rtl' || $context.css('direction') === 'rtl';
           }
         },
 
@@ -1262,7 +1256,7 @@ $.fn.popup = function(parameters) {
             response
           ;
           passedArguments = passedArguments || queryArguments;
-          context         = element         || context;
+          context         = context         || element;
           if(typeof query == 'string' && object !== undefined) {
             query    = query.split(/[\. ]/);
             maxDepth = query.length - 1;
@@ -1511,7 +1505,7 @@ $.fn.popup.settings = {
         }
       ;
       if(shouldEscape.test(string)) {
-        string = string.replace(/&(?![a-z0-9#]{1,6};)/, "&amp;");
+        string = string.replace(/&(?![a-z0-9#]{1,12};)/gi, "&amp;");
         return string.replace(badChars, escapedChar);
       }
       return string;

package/src/definitions/modules/popup.less

@@ -58,7 +58,7 @@
   padding-top: @headerDistance;
 }
 
-.ui.popup:before {
+.ui.popup::before {
   position: absolute;
   content: '';
   width: @arrowSize;
@@ -86,7 +86,7 @@
   }
 
   /* Arrow */
-  [data-tooltip]:before {
+  [data-tooltip]::before {
     pointer-events: none;
     position: absolute;
     content: '';
@@ -102,7 +102,7 @@
   }
 
   /* Popup */
-  [data-tooltip]:after {
+  [data-tooltip]::after {
     pointer-events: none;
     content: attr(data-tooltip);
     position: absolute;
@@ -129,7 +129,7 @@
   }
 
   /* Default Position (Top Center) */
-  [data-tooltip]:not([data-position]):before {
+  [data-tooltip]:not([data-position])::before {
     top: auto;
     right: auto;
     bottom: 100%;
@@ -138,7 +138,7 @@
     margin-left: @tooltipArrowHorizontalOffset;
     margin-bottom: -@tooltipArrowVerticalOffset;
   }
-  [data-tooltip]:not([data-position]):after {
+  [data-tooltip]:not([data-position])::after {
     left: 50%;
     transform: translateX(-50%);
     bottom: 100%;
@@ -146,8 +146,8 @@
   }
 
   /* Animation */
-  [data-tooltip]:before,
-  [data-tooltip]:after {
+  [data-tooltip]::before,
+  [data-tooltip]::after {
     pointer-events: none;
     visibility: hidden;
     opacity: 0;
@@ -156,67 +156,67 @@
             opacity @tooltipDuration @tooltipEasing
     ;
   }
-  [data-tooltip]:before {
+  [data-tooltip]::before {
     transform: rotate(45deg) scale(0) !important;
     transform-origin: center top;
   }
-  [data-tooltip]:after {
+  [data-tooltip]::after {
     transform-origin: center bottom;
   }
-  [data-tooltip]:hover:before,
-  [data-tooltip]:hover:after {
+  [data-tooltip]:hover::before,
+  [data-tooltip]:hover::after {
     visibility: visible;
     pointer-events: auto;
     opacity: 1;
   }
-  [data-tooltip]:hover:before {
+  [data-tooltip]:hover::before {
     transform: rotate(45deg) scale(1) !important;
   }
 
   /* Animation Position */
-  [data-tooltip]:after,
-  [data-tooltip][data-position="top center"]:after,
-  [data-tooltip][data-position="bottom center"]:after {
+  [data-tooltip]::after,
+  [data-tooltip][data-position="top center"]::after,
+  [data-tooltip][data-position="bottom center"]::after {
     transform: translateX(-50%) scale(0) !important;
   }
-  [data-tooltip]:hover:after,
-  [data-tooltip][data-position="bottom center"]:hover:after {
+  [data-tooltip]:hover::after,
+  [data-tooltip][data-position="bottom center"]:hover::after {
     transform: translateX(-50%) scale(1) !important;
   }
-  [data-tooltip][data-position="left center"]:after,
-  [data-tooltip][data-position="right center"]:after {
+  [data-tooltip][data-position="left center"]::after,
+  [data-tooltip][data-position="right center"]::after {
     transform: translateY(-50%) scale(0) !important;
   }
-  [data-tooltip][data-position="left center"]:hover:after,
-  [data-tooltip][data-position="right center"]:hover:after {
+  [data-tooltip][data-position="left center"]:hover::after,
+  [data-tooltip][data-position="right center"]:hover::after {
     transform: translateY(-50%) scale(1) !important;
     -moz-transform: translateY(-50%) scale(1.0001) !important;
   }
-  [data-tooltip][data-position="top left"]:after,
-  [data-tooltip][data-position="top right"]:after,
-  [data-tooltip][data-position="bottom left"]:after,
-  [data-tooltip][data-position="bottom right"]:after {
+  [data-tooltip][data-position="top left"]::after,
+  [data-tooltip][data-position="top right"]::after,
+  [data-tooltip][data-position="bottom left"]::after,
+  [data-tooltip][data-position="bottom right"]::after {
     transform: scale(0) !important;
   }
-  [data-tooltip][data-position="top left"]:hover:after,
-  [data-tooltip][data-position="top right"]:hover:after,
-  [data-tooltip][data-position="bottom left"]:hover:after,
-  [data-tooltip][data-position="bottom right"]:hover:after {
+  [data-tooltip][data-position="top left"]:hover::after,
+  [data-tooltip][data-position="top right"]:hover::after,
+  [data-tooltip][data-position="bottom left"]:hover::after,
+  [data-tooltip][data-position="bottom right"]:hover::after {
     transform: scale(1) !important;
   }
   & when (@variationPopupFixed) {
-    [data-tooltip][data-variation~="fixed"]:after {
+    [data-tooltip][data-variation~="fixed"]::after {
       white-space: normal;
       width: @maxWidth;
     }
-    [data-tooltip][data-variation*="wide fixed"]:after {
+    [data-tooltip][data-variation*="wide fixed"]::after {
       width: @wideWidth;
     }
-    [data-tooltip][data-variation*="very wide fixed"]:after {
+    [data-tooltip][data-variation*="very wide fixed"]::after {
       width: @veryWideWidth;
     }
     @media only screen and (max-width: @largestMobileScreen) {
-      [data-tooltip][data-variation~="fixed"]:after {
+      [data-tooltip][data-variation~="fixed"]::after {
         width: @maxWidth;
       }
     }
@@ -227,26 +227,22 @@
     ---------------*/
 
     /* Arrow */
-    [data-tooltip][data-inverted]:before {
+    [data-tooltip][data-inverted]::before {
       box-shadow: none !important;
     }
 
     /* Arrow Position */
-    [data-tooltip][data-inverted]:before {
+    [data-tooltip][data-inverted]::before {
       background: @invertedArrowBottomBackground;
     }
 
     /* Popup  */
-    [data-tooltip][data-inverted]:after {
+    [data-tooltip][data-inverted]::after {
       background: @tooltipInvertedBackground;
       color: @tooltipInvertedColor;
       border: @tooltipInvertedBorder;
       box-shadow: @tooltipInvertedBoxShadow;
     }
-    [data-tooltip][data-inverted]:after .header {
-      background: @tooltipInvertedHeaderBackground;
-      color: @tooltipInvertedHeaderColor;
-    }
   }
 
   & when (@variationPopupPosition) {
@@ -254,12 +250,12 @@
         Position
     ---------------*/
     & when (@variationPopupTop) {
-      [data-position~="top"][data-tooltip]:before {
+      [data-position~="top"][data-tooltip]::before {
         background: @arrowBottomBackground;
       }
       & when (@variationPopupCenter) {
         /* Top Center */
-        [data-position="top center"][data-tooltip]:after {
+        [data-position="top center"][data-tooltip]::after {
           top: auto;
           right: auto;
           left: 50%;
@@ -267,7 +263,7 @@
           transform: translateX(-50%);
           margin-bottom: @tooltipDistanceAway;
         }
-        [data-position="top center"][data-tooltip]:before {
+        [data-position="top center"][data-tooltip]::before {
           top: auto;
           right: auto;
           bottom: 100%;
@@ -279,14 +275,14 @@
       }
       & when (@variationPopupLeft) {
         /* Top Left */
-        [data-position="top left"][data-tooltip]:after {
+        [data-position="top left"][data-tooltip]::after {
           top: auto;
           right: auto;
           left: 0;
           bottom: 100%;
           margin-bottom: @tooltipDistanceAway;
         }
-        [data-position="top left"][data-tooltip]:before {
+        [data-position="top left"][data-tooltip]::before {
           top: auto;
           right: auto;
           bottom: 100%;
@@ -297,14 +293,14 @@
       }
       & when (@variationPopupRight) {
         /* Top Right */
-        [data-position="top right"][data-tooltip]:after {
+        [data-position="top right"][data-tooltip]::after {
           top: auto;
           left: auto;
           right: 0;
           bottom: 100%;
           margin-bottom: @tooltipDistanceAway;
         }
-        [data-position="top right"][data-tooltip]:before {
+        [data-position="top right"][data-tooltip]::before {
           top: auto;
           left: auto;
           bottom: 100%;
@@ -316,13 +312,13 @@
     }
 
     & when (@variationPopupBottom) {
-      [data-position~="bottom"][data-tooltip]:before {
+      [data-position~="bottom"][data-tooltip]::before {
         background: @arrowTopBackground;
         box-shadow: @bottomArrowBoxShadow;
       }
       & when (@variationPopupCenter) {
         /* Bottom Center */
-        [data-position="bottom center"][data-tooltip]:after {
+        [data-position="bottom center"][data-tooltip]::after {
           bottom: auto;
           right: auto;
           left: 50%;
@@ -330,7 +326,7 @@
           transform: translateX(-50%);
           margin-top: @tooltipDistanceAway;
         }
-        [data-position="bottom center"][data-tooltip]:before {
+        [data-position="bottom center"][data-tooltip]::before {
           bottom: auto;
           right: auto;
           top: 100%;
@@ -341,12 +337,12 @@
       }
       & when (@variationPopupLeft) {
         /* Bottom Left */
-        [data-position="bottom left"][data-tooltip]:after {
+        [data-position="bottom left"][data-tooltip]::after {
           left: 0;
           top: 100%;
           margin-top: @tooltipDistanceAway;
         }
-        [data-position="bottom left"][data-tooltip]:before {
+        [data-position="bottom left"][data-tooltip]::before {
           bottom: auto;
           right: auto;
           top: 100%;
@@ -357,12 +353,12 @@
       }
       & when (@variationPopupRight) {
         /* Bottom Right */
-        [data-position="bottom right"][data-tooltip]:after {
+        [data-position="bottom right"][data-tooltip]::after {
           right: 0;
           top: 100%;
           margin-top: @tooltipDistanceAway;
         }
-        [data-position="bottom right"][data-tooltip]:before {
+        [data-position="bottom right"][data-tooltip]::before {
           bottom: auto;
           left: auto;
           top: 100%;
@@ -375,13 +371,13 @@
     & when (@variationPopupCenter) {
       & when (@variationPopupLeft) {
         /* Left Center */
-        [data-position="left center"][data-tooltip]:after {
+        [data-position="left center"][data-tooltip]::after {
           right: 100%;
           top: 50%;
           margin-right: @tooltipDistanceAway;
           transform: translateY(-50%);
         }
-        [data-position="left center"][data-tooltip]:before {
+        [data-position="left center"][data-tooltip]::before {
           right: 100%;
           top: 50%;
           margin-top: @tooltipArrowVerticalOffset;
@@ -392,13 +388,13 @@
       }
       & when (@variationPopupRight) {
         /* Right Center */
-        [data-position="right center"][data-tooltip]:after {
+        [data-position="right center"][data-tooltip]::after {
           left: 100%;
           top: 50%;
           margin-left: @tooltipDistanceAway;
           transform: translateY(-50%);
         }
-        [data-position="right center"][data-tooltip]:before {
+        [data-position="right center"][data-tooltip]::before {
           left: 100%;
           top: 50%;
           margin-top: @tooltipArrowHorizontalOffset;
@@ -412,59 +408,59 @@
     & when (@variationPopupInverted) {
       /* Inverted Arrow Color */
       & when (@variationPopupBottom) {
-        [data-inverted][data-position~="bottom"][data-tooltip]:before {
+        [data-inverted][data-position~="bottom"][data-tooltip]::before {
           background: @invertedArrowTopBackground;
           box-shadow: @bottomArrowBoxShadow;
         }
       }
       & when (@variationPopupCenter) {
         & when (@variationPopupLeft) {
-          [data-inverted][data-position="left center"][data-tooltip]:before {
+          [data-inverted][data-position="left center"][data-tooltip]::before {
             background: @invertedArrowCenterBackground;
             box-shadow: @leftArrowBoxShadow;
           }
         }
         & when (@variationPopupRight) {
-          [data-inverted][data-position="right center"][data-tooltip]:before {
+          [data-inverted][data-position="right center"][data-tooltip]::before {
             background: @invertedArrowCenterBackground;
             box-shadow: @rightArrowBoxShadow;
           }
         }
       }
       & when (@variationPopupTop) {
-        [data-inverted][data-position~="top"][data-tooltip]:before {
+        [data-inverted][data-position~="top"][data-tooltip]::before {
           background: @invertedArrowBottomBackground;
         }
       }
     }
 
     & when (@variationPopupBottom) {
-      [data-position~="bottom"][data-tooltip]:before {
+      [data-position~="bottom"][data-tooltip]::before {
         transform-origin: center bottom;
       }
-      [data-position~="bottom"][data-tooltip]:after {
+      [data-position~="bottom"][data-tooltip]::after {
         transform-origin: center top;
       }
     }
     & when (@variationPopupCenter) {
       & when (@variationPopupBottom) {
-        [data-position="bottom center"][data-tooltip]:before {
+        [data-position="bottom center"][data-tooltip]::before {
           transform-origin: center top;
         }
       }
       & when (@variationPopupLeft) {
-        [data-position="left center"][data-tooltip]:before {
+        [data-position="left center"][data-tooltip]::before {
           transform-origin: top center;
         }
-        [data-position="left center"][data-tooltip]:after {
+        [data-position="left center"][data-tooltip]::after {
           transform-origin: right center;
         }
       }
       & when (@variationPopupRight) {
-        [data-position="right center"][data-tooltip]:before {
+        [data-position="right center"][data-tooltip]::before {
           transform-origin: right center;
         }
-        [data-position="right center"][data-tooltip]:after {
+        [data-position="right center"][data-tooltip]::after {
           transform-origin: left center;
         }
       }
@@ -475,7 +471,7 @@
     /*--------------
         Basic
     ---------------*/
-    [data-tooltip][data-variation~="basic"]:before {
+    [data-tooltip][data-variation~="basic"]::before {
       display: none;
     }
   }
@@ -553,7 +549,7 @@
   ---------------*/
 
   /*--- Below ---*/
-  .ui.bottom.center.popup:before {
+  .ui.bottom.center.popup::before {
     margin-left: @arrowOffset;
     top: @arrowOffset;
     left: 50%;
@@ -566,7 +562,7 @@
     margin-left: @boxArrowOffset;
   }
   /*rtl:rename*/
-  .ui.bottom.left.popup:before {
+  .ui.bottom.left.popup::before {
     top: @arrowOffset;
     left: @arrowDistanceFromEdge;
     right: auto;
@@ -579,7 +575,7 @@
     margin-right: @boxArrowOffset;
   }
   /*rtl:rename*/
-  .ui.bottom.right.popup:before {
+  .ui.bottom.right.popup::before {
     top: @arrowOffset;
     right: @arrowDistanceFromEdge;
     bottom: auto;
@@ -592,7 +588,7 @@
 & when (@variationPopupTop) {
   /*--- Above ---*/
   & when (@variationPopupCenter) {
-    .ui.top.center.popup:before {
+    .ui.top.center.popup::before {
       top: auto;
       right: auto;
       bottom: @arrowOffset;
@@ -605,7 +601,7 @@
       margin-left: @boxArrowOffset;
     }
     /*rtl:rename*/
-    .ui.top.left.popup:before {
+    .ui.top.left.popup::before {
       bottom: @arrowOffset;
       left: @arrowDistanceFromEdge;
       top: auto;
@@ -618,7 +614,7 @@
       margin-right: @boxArrowOffset;
     }
     /*rtl:rename*/
-    .ui.top.right.popup:before {
+    .ui.top.right.popup::before {
       bottom: @arrowOffset;
       right: @arrowDistanceFromEdge;
       top: auto;
@@ -632,7 +628,7 @@
   /*--- Left Center ---*/
   /*rtl:rename*/
   & when (@variationPopupLeft) {
-    .ui.left.center.popup:before {
+    .ui.left.center.popup::before {
       top: 50%;
       right: @arrowOffset;
       bottom: auto;
@@ -644,7 +640,7 @@
   & when (@variationPopupRight) {
     /*--- Right Center  ---*/
     /*rtl:rename*/
-    .ui.right.center.popup:before {
+    .ui.right.center.popup::before {
       top: 50%;
       left: @arrowOffset;
       bottom: auto;
@@ -654,8 +650,8 @@
     }
   }
   & when (@variationPopupLeft) or (@variationPopupRight) {
-    .ui.right.center.popup:before,
-    .ui.left.center.popup:before {
+    .ui.right.center.popup::before,
+    .ui.left.center.popup::before {
       background: @arrowCenterBackground;
     }
   }
@@ -663,13 +659,13 @@
 
 & when (@variationPopupBottom) {
   /* Arrow Color By Location */
-  .ui.bottom.popup:before {
+  .ui.bottom.popup::before {
     background: @arrowTopBackground;
   }
 }
 
 & when (@variationPopupTop) {
-  .ui.top.popup:before {
+  .ui.top.popup::before {
     background: @arrowBottomBackground;
   }
 }
@@ -677,18 +673,18 @@
 & when (@variationPopupInverted) {
   & when (@variationPopupBottom) {
     /* Inverted Arrow Color */
-    .ui.inverted.bottom.popup:before {
+    .ui.inverted.bottom.popup::before {
       background: @invertedArrowTopBackground;
     }
   }
   & when (@variationPopupCenter) {
-    .ui.inverted.right.center.popup:before,
-    .ui.inverted.left.center.popup:before {
+    .ui.inverted.right.center.popup::before,
+    .ui.inverted.left.center.popup::before {
       background: @invertedArrowCenterBackground;
     }
   }
   & when (@variationPopupTop) {
-    .ui.inverted.top.popup:before {
+    .ui.inverted.top.popup::before {
       background: @invertedArrowBottomBackground;
     }
   }
@@ -736,7 +732,7 @@
        Basic
   ---------------*/
 
-  .ui.basic.popup:before {
+  .ui.basic.popup::before {
     display: none;
   }
 }
@@ -803,7 +799,7 @@
     background-color: @invertedHeaderBackground;
     color: @invertedHeaderColor;
   }
-  .ui.inverted.popup:before {
+  .ui.inverted.popup::before {
     background-color: @invertedArrowColor;
     box-shadow: none !important;
   }
@@ -834,8 +830,8 @@
       font-size: @s;
     }
     & when (@variationPopupTooltip) {
-      [data-tooltip][data-variation~="@{value}"]:before,
-      [data-tooltip][data-variation~="@{value}"]:after {
+      [data-tooltip][data-variation~="@{value}"]::before,
+      [data-tooltip][data-variation~="@{value}"]::after {
         font-size: @s;
       }
     }