fomantic-ui 2.9.0-beta.8 → 2.9.0-beta.80

package/src/definitions/modules/modal.js

@@ -66,7 +66,8 @@ $.fn.modal = function(parameters) {
 
         $module         = $(this),
         $context        = $(settings.context),
-        $close          = $module.find(selector.close),
+        $closeIcon      = $module.find(selector.closeIcon),
+        $inputs,
 
         $allModals,
         $otherModals,
@@ -92,6 +93,7 @@ $.fn.modal = function(parameters) {
       module  = {
 
         initialize: function() {
+          module.create.id();
           if(!$module.hasClass('modal')) {
             module.create.modal();
             if(!$.isFunction(settings.onHidden)) {
@@ -116,15 +118,17 @@ $.fn.modal = function(parameters) {
               $actions.empty();
             }
             settings.actions.forEach(function (el) {
-              var icon = el[fields.icon] ? '<i class="' + module.helpers.deQuote(el[fields.icon]) + ' icon"></i>' : '',
+              var icon = el[fields.icon] ? '<i '+(el[fields.text] ? 'aria-hidden="true"' : '')+' class="' + module.helpers.deQuote(el[fields.icon]) + ' icon"></i>' : '',
                   text = module.helpers.escape(el[fields.text] || '', settings.preserveHTML),
                   cls = module.helpers.deQuote(el[fields.class] || ''),
                   click = el[fields.click] && $.isFunction(el[fields.click]) ? el[fields.click] : function () {};
               $actions.append($('<button/>', {
                 html: icon + text,
+                'aria-label': $('<div>'+(el[fields.text] || el[fields.icon] || '')+'</div>').text(),
                 class: className.button + ' ' + cls,
                 click: function () {
-                  if (click.call(element, $module) === false) {
+                  var button = $(this);
+                  if (button.is(selector.approve) || button.is(selector.deny) || click.call(element, $module) === false) {
                     return;
                   }
                   module.hide();
@@ -135,7 +139,6 @@ $.fn.modal = function(parameters) {
           module.cache = {};
           module.verbose('Initializing dimmer', $context);
 
-          module.create.id();
           module.create.dimmer();
 
           if ( settings.allowMultiple ) {
@@ -145,11 +148,9 @@ $.fn.modal = function(parameters) {
             $module.addClass('top aligned');
           }
           module.refreshModals();
-
+          module.refreshInputs();
           module.bind.events();
-          if(settings.observeChanges) {
-            module.observeChanges();
-          }
+          module.observeChanges();
           module.instantiate();
           if(settings.autoShow){
             module.show();
@@ -166,16 +167,20 @@ $.fn.modal = function(parameters) {
 
         create: {
           modal: function() {
-            $module = $('<div/>', {class: className.modal});
+            $module = $('<div/>', {class: className.modal, role: 'dialog', 'aria-modal': true});
             if (settings.closeIcon) {
-              $close = $('<i/>', {class: className.close})
-              $module.append($close);
+              $closeIcon = $('<i/>', {class: className.close, role: 'button', tabindex: 0, 'aria-label': settings.text.close})
+              $module.append($closeIcon);
             }
             if (settings.title !== '') {
-              $('<div/>', {class: className.title}).appendTo($module);
+              var titleId = '_' + module.get.id() + 'title';
+              $module.attr('aria-labelledby', titleId);
+              $('<div/>', {class: className.title, id: titleId}).appendTo($module);
             }
             if (settings.content !== '') {
-              $('<div/>', {class: className.content}).appendTo($module);
+              var descId = '_' + module.get.id() + 'desc';
+              $module.attr('aria-describedby', descId);
+              $('<div/>', {class: className.content, id: descId}).appendTo($module);
             }
             if (module.has.configActions()) {
               $('<div/>', {class: className.actions}).appendTo($module);
@@ -228,15 +233,21 @@ $.fn.modal = function(parameters) {
           ;
           $window.off(elementEventNamespace);
           $dimmer.off(elementEventNamespace);
-          $close.off(eventNamespace);
+          $closeIcon.off(elementEventNamespace);
+          if($inputs) {
+            $inputs.off(elementEventNamespace);
+          }
           $context.dimmer('destroy');
         },
 
         observeChanges: function() {
           if('MutationObserver' in window) {
             observer = new MutationObserver(function(mutations) {
-              module.debug('DOM tree modified, refreshing');
-              module.refresh();
+              if(settings.observeChanges) {
+                module.debug('DOM tree modified, refreshing');
+                module.refresh();
+              }
+              module.refreshInputs();
             });
             observer.observe(element, {
               childList : true,
@@ -261,6 +272,23 @@ $.fn.modal = function(parameters) {
           $allModals   = $otherModals.add($module);
         },
 
+        refreshInputs: function(){
+          if($inputs){
+            $inputs
+              .off('keydown' + elementEventNamespace)
+            ;
+          }
+          $inputs    = $module.find('[tabindex], :input').filter(':visible').filter(function() {
+            return $(this).closest('.disabled').length === 0;
+          });
+          $inputs.first()
+              .on('keydown' + elementEventNamespace, module.event.inputKeyDown.first)
+          ;
+          $inputs.last()
+              .on('keydown' + elementEventNamespace, module.event.inputKeyDown.last)
+          ;
+        },
+
         attachEvents: function(selector, event) {
           var
             $toggle = $(selector)
@@ -289,6 +317,9 @@ $.fn.modal = function(parameters) {
               .on('click' + eventNamespace, selector.approve, module.event.approve)
               .on('click' + eventNamespace, selector.deny, module.event.deny)
             ;
+            $closeIcon
+                .on('keyup' + elementEventNamespace, module.event.closeKeyUp)
+            ;
             $window
               .on('resize' + elementEventNamespace, module.event.resize)
             ;
@@ -307,7 +338,7 @@ $.fn.modal = function(parameters) {
 
         get: {
           id: function() {
-            return (Math.random().toString(16) + '000000000').substr(2, 8);
+            return id;
           },
           element: function() {
             return $module;
@@ -346,10 +377,38 @@ $.fn.modal = function(parameters) {
           close: function() {
             module.hide();
           },
+          closeKeyUp: function(event){
+            var
+              keyCode   = event.which
+            ;
+            if ((keyCode === settings.keys.enter || keyCode === settings.keys.space) && $module.hasClass(className.front)) {
+              module.hide();
+            }
+          },
+          inputKeyDown: {
+            first: function(event) {
+              var
+                  keyCode = event.which
+              ;
+              if (keyCode === settings.keys.tab && event.shiftKey) {
+                $inputs.last().focus();
+                event.preventDefault();
+              }
+            },
+            last: function(event) {
+              var
+                  keyCode = event.which
+              ;
+              if (keyCode === settings.keys.tab && !event.shiftKey) {
+                $inputs.first().focus();
+                event.preventDefault();
+              }
+            }
+          },
           mousedown: function(event) {
             var
               $target   = $(event.target),
-              isRtl = module.is.rtl();
+              isRtl = module.is.rtl()
             ;
             initialMouseDownInModal = ($target.closest(selector.modal).length > 0);
             if(initialMouseDownInModal) {
@@ -397,10 +456,9 @@ $.fn.modal = function(parameters) {
           },
           keyboard: function(event) {
             var
-              keyCode   = event.which,
-              escapeKey = 27
+              keyCode   = event.which
             ;
-            if(keyCode == escapeKey) {
+            if(keyCode === settings.keys.escape) {
               if(settings.closable) {
                 module.debug('Escape key pressed hiding modal');
                 if ( $module.hasClass(className.front) ) {
@@ -715,7 +773,7 @@ $.fn.modal = function(parameters) {
               $module
                   .off('mousedown' + elementEventNamespace)
               ;
-            }           
+            }
             $dimmer
               .off('mousedown' + elementEventNamespace)
             ;
@@ -900,13 +958,10 @@ $.fn.modal = function(parameters) {
         set: {
           autofocus: function() {
             var
-              $inputs    = $module.find('[tabindex], :input').filter(':visible').filter(function() {
-                return $(this).closest('.disabled').length === 0;
-              }),
               $autofocus = $inputs.filter('[autofocus]'),
               $input     = ($autofocus.length > 0)
                 ? $autofocus.first()
-                : $inputs.first()
+                : ($inputs.length > 1 ? $inputs.filter(':not(i.close)') : $inputs).first()
             ;
             if($input.length > 0) {
               $input.focus();
@@ -988,7 +1043,7 @@ $.fn.modal = function(parameters) {
                       ? $(document).scrollTop() + settings.padding
                       : $(document).scrollTop() + (module.cache.contextHeight - module.cache.height - settings.padding),
                   marginLeft: -(module.cache.width / 2)
-                }) 
+                })
               ;
             } else {
               $module
@@ -997,7 +1052,7 @@ $.fn.modal = function(parameters) {
                     ? -(module.cache.height / 2)
                     : settings.padding / 2,
                   marginLeft: -(module.cache.width / 2)
-                }) 
+                })
               ;
             }
             module.verbose('Setting modal offset for legacy mode');
@@ -1323,11 +1378,19 @@ $.fn.modal.settings = {
   // called after deny selector match
   onDeny     : function(){ return true; },
 
+  keys : {
+    space      : 32,
+    enter      : 13,
+    escape     : 27,
+    tab        :  9,
+  },
+
   selector    : {
     title    : '> .header',
     content  : '> .content',
     actions  : '> .actions',
     close    : '> .close',
+    closeIcon: '> .close',
     approve  : '.actions .positive, .actions .approve, .actions .ok',
     deny     : '.actions .negative, .actions .deny, .actions .cancel',
     modal    : '.ui.modal',
@@ -1363,7 +1426,8 @@ $.fn.modal.settings = {
   },
   text: {
     ok    : 'Ok',
-    cancel: 'Cancel'
+    cancel: 'Cancel',
+    close : 'Close'
   }
 };
 

package/src/definitions/modules/modal.less

@@ -80,8 +80,10 @@
   height: @closeHitbox;
   padding: @closePadding;
 }
+.ui.modal > .close:focus,
 .ui.modal > .close:hover {
   opacity: 1;
+  outline: none;
 }
 
 /*--------------

package/src/definitions/modules/popup.less

@@ -337,7 +337,6 @@
           left: 50%;
           margin-left: @tooltipArrowHorizontalOffset;
           margin-top: -@arrowOffset;
-          transform-origin: center top;
         }
       }
       & when (@variationPopupLeft) {
@@ -448,6 +447,11 @@
       }
     }
     & when (@variationPopupCenter) {
+      & when (@variationPopupBottom) {
+        [data-position="bottom center"][data-tooltip]:before {
+          transform-origin: center top;
+        }
+      }
       & when (@variationPopupLeft) {
         [data-position="left center"][data-tooltip]:before {
           transform-origin: top center;

package/src/definitions/modules/progress.js

@@ -93,7 +93,7 @@ $.fn.progress = function(parameters) {
            *
            * @param min A minimum value within multiple values
            * @param total A total amount of multiple values
-           * @returns {number} A precison. Could be 1, 10, 100, ... 1e+10.
+           * @returns {number} A precision. Could be 1, 10, 100, ... 1e+10.
            */
           derivePrecision: function(min, total) {
             var precisionPower = 0
@@ -991,7 +991,7 @@ $.fn.progress.settings = {
     nonNumeric      : 'Progress value is non numeric',
     tooHigh         : 'Value specified is above 100%',
     tooLow          : 'Value specified is below 0%',
-    sumExceedsTotal : 'Sum of multple values exceed total',
+    sumExceedsTotal : 'Sum of multiple values exceed total',
   },
 
   regExp: {

package/src/definitions/modules/rating.less

@@ -69,13 +69,20 @@
   color: @activeColor;
 }
 
-/* Partially Active Icon */
-.ui.rating .icon.partial.active {
-  background: linear-gradient(to right, @activeColor 0% var(--full), @inactiveColor var(--full) 100%);
-  background-clip: text;
-  color: transparent;
-}
+& when (@variationRatingPartial) {
+  /* Partially Active Icon */
+  .ui.rating .icon.partial.active {
+    background: linear-gradient(to right, @activeColor 0% var(--full), @inactiveColor var(--full) 100%);
+  }
 
+  /* central override for colors */
+  .ui.ui.rating .icon.partial.active {
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    text-shadow: none;
+  }
+}
 /* Selected Icon */
 .ui.rating .icon.selected,
 .ui.rating .icon.selected.active,
@@ -116,12 +123,11 @@ each(@colors, {
     -webkit-text-stroke: unset;
     background-clip: unset;
   }
-  .ui.@{color}.rating .icon.partial.active {
-    background: linear-gradient(to right, @l 0% var(--full), @inactiveColor var(--full) 100%);
-    text-shadow: none;
-    -webkit-text-stroke: @c 0.78px;
-    background-clip: text;
-    color: transparent;
+  & when (@variationRatingPartial) {
+    .ui.@{color}.rating .icon.partial.active {
+      background: linear-gradient(to right, @l 0% var(--full), @inactiveColor var(--full) 100%);
+      -webkit-text-stroke: @c 0.78px;
+    }
   }
 })
 

package/src/definitions/modules/search.less

@@ -437,16 +437,20 @@
     .ui.search.short > .results {
       max-height: @scrollingMobileMaxResultsHeight;
     }
-    .ui.search[class*="very short"] > .results {
-      max-height: @scrollingMobileMaxResultsHeight * 0.75;
+    & when (@variationSearchVeryShort) {
+      .ui.search[class*="very short"] > .results {
+        max-height: @scrollingMobileMaxResultsHeight * 0.75;
+      }
     }
   }
   & when (@variationSearchLong) {
     .ui.search.long > .results {
       max-height: @scrollingMobileMaxResultsHeight * 2;
     }
-    .ui.search[class*="very long"] > .results {
-      max-height: @scrollingMobileMaxResultsHeight * 3;
+    & when (@variationSearchVeryLong) {
+      .ui.search[class*="very long"] > .results {
+        max-height: @scrollingMobileMaxResultsHeight * 3;
+      }
     }
   }
 }
@@ -455,16 +459,20 @@
     .ui.search.short > .results {
       max-height: @scrollingTabletMaxResultsHeight;
     }
-    .ui.search[class*="very short"] > .results {
-      max-height: @scrollingTabletMaxResultsHeight * 0.75;
+    & when (@variationSearchVeryShort) {
+      .ui.search[class*="very short"] > .results {
+        max-height: @scrollingTabletMaxResultsHeight * 0.75;
+      }
     }
   }
   & when (@variationSearchLong) {
     .ui.search.long > .results {
       max-height: @scrollingTabletMaxResultsHeight * 2;
     }
-    .ui.search[class*="very long"] > .results {
-      max-height: @scrollingTabletMaxResultsHeight * 3;
+    & when (@variationSearchVeryLong) {
+      .ui.search[class*="very long"] > .results {
+        max-height: @scrollingTabletMaxResultsHeight * 3;
+      }
     }
   }
 }
@@ -473,16 +481,20 @@
     .ui.search.short > .results {
       max-height: @scrollingComputerMaxResultsHeight;
     }
-    .ui.search[class*="very short"] > .results {
-      max-height: @scrollingComputerMaxResultsHeight * 0.75;
+    & when (@variationSearchVeryShort) {
+      .ui.search[class*="very short"] > .results {
+        max-height: @scrollingComputerMaxResultsHeight * 0.75;
+      }
     }
   }
   & when (@variationSearchLong) {
     .ui.search.long > .results {
       max-height: @scrollingComputerMaxResultsHeight * 2;
     }
-    .ui.search[class*="very long"] > .results {
-      max-height: @scrollingComputerMaxResultsHeight * 3;
+    & when (@variationSearchVeryLong) {
+      .ui.search[class*="very long"] > .results {
+        max-height: @scrollingComputerMaxResultsHeight * 3;
+      }
     }
   }
 }
@@ -491,16 +503,20 @@
     .ui.search.short > .results {
       max-height: @scrollingWidescreenMaxResultsHeight;
     }
-    .ui.search[class*="very short"] > .results {
-      max-height: @scrollingWidescreenMaxResultsHeight * 0.75;
+    & when (@variationSearchVeryShort) {
+      .ui.search[class*="very short"] > .results {
+        max-height: @scrollingWidescreenMaxResultsHeight * 0.75;
+      }
     }
   }
   & when (@variationSearchLong) {
     .ui.search.long > .results {
       max-height: @scrollingWidescreenMaxResultsHeight * 2;
     }
-    .ui.search[class*="very long"] > .results {
-      max-height: @scrollingWidescreenMaxResultsHeight * 3;
+    & when (@variationSearchVeryLong) {
+      .ui.search[class*="very long"] > .results {
+        max-height: @scrollingWidescreenMaxResultsHeight * 3;
+      }
     }
   }
 }

package/src/definitions/modules/sidebar.less

@@ -281,9 +281,11 @@ body.pushable > .pusher {
       width: @thinWidth;
     }
 
-    .ui[class*="very thin"].left.sidebar,
-    .ui[class*="very thin"].right.sidebar {
-      width: @veryThinWidth;
+    & when (@variationSidebarVeryThin) {
+      .ui[class*="very thin"].left.sidebar,
+      .ui[class*="very thin"].right.sidebar {
+        width: @veryThinWidth;
+      }
     }
   }
 
@@ -298,9 +300,11 @@ body.pushable > .pusher {
       width: @wideWidth;
     }
 
-    .ui[class*="very wide"].left.sidebar,
-    .ui[class*="very wide"].right.sidebar {
-      width: @veryWideWidth;
+    & when (@variationSidebarVeryWide) {
+      .ui[class*="very wide"].left.sidebar,
+      .ui[class*="very wide"].right.sidebar {
+        width: @veryWideWidth;
+      }
     }
   }
 
@@ -312,9 +316,11 @@ body.pushable > .pusher {
         transform: translate3d(@thinWidth, 0, 0);
       }
 
-      .ui.visible[class*="very thin"].left.sidebar ~ .fixed,
-      .ui.visible[class*="very thin"].left.sidebar ~ .pusher {
-        transform: translate3d(@veryThinWidth, 0, 0);
+      & when (@variationSidebarVeryThin) {
+        .ui.visible[class*="very thin"].left.sidebar ~ .fixed,
+        .ui.visible[class*="very thin"].left.sidebar ~ .pusher {
+          transform: translate3d(@veryThinWidth, 0, 0);
+        }
       }
     }
 
@@ -324,9 +330,11 @@ body.pushable > .pusher {
         transform: translate3d(@wideWidth, 0, 0);
       }
 
-      .ui.visible[class*="very wide"].left.sidebar ~ .fixed,
-      .ui.visible[class*="very wide"].left.sidebar ~ .pusher {
-        transform: translate3d(@veryWideWidth, 0, 0);
+      & when (@variationSidebarVeryWide) {
+        .ui.visible[class*="very wide"].left.sidebar ~ .fixed,
+        .ui.visible[class*="very wide"].left.sidebar ~ .pusher {
+          transform: translate3d(@veryWideWidth, 0, 0);
+        }
       }
     }
   }
@@ -339,9 +347,11 @@ body.pushable > .pusher {
         transform: translate3d(-@thinWidth, 0, 0);
       }
 
-      .ui.visible[class*="very thin"].right.sidebar ~ .fixed,
-      .ui.visible[class*="very thin"].right.sidebar ~ .pusher {
-        transform: translate3d(-@veryThinWidth, 0, 0);
+      & when (@variationSidebarVeryThin) {
+        .ui.visible[class*="very thin"].right.sidebar ~ .fixed,
+        .ui.visible[class*="very thin"].right.sidebar ~ .pusher {
+          transform: translate3d(-@veryThinWidth, 0, 0);
+        }
       }
     }
 
@@ -351,9 +361,11 @@ body.pushable > .pusher {
         transform: translate3d(-@wideWidth, 0, 0);
       }
 
-      .ui.visible[class*="very wide"].right.sidebar ~ .fixed,
-      .ui.visible[class*="very wide"].right.sidebar ~ .pusher {
-        transform: translate3d(-@veryWideWidth, 0, 0);
+      & when (@variationSidebarVeryWide) {
+        .ui.visible[class*="very wide"].right.sidebar ~ .fixed,
+        .ui.visible[class*="very wide"].right.sidebar ~ .pusher {
+          transform: translate3d(-@veryWideWidth, 0, 0);
+        }
       }
     }
   }

package/src/definitions/modules/sticky.js

@@ -938,7 +938,7 @@ $.fn.sticky.settings = {
 
   error         : {
     container      : 'Sticky element must be inside a relative container',
-    visible        : 'Element is hidden, you must call refresh after element becomes visible. Use silent setting to surpress this warning in production.',
+    visible        : 'Element is hidden, you must call refresh after element becomes visible. Use silent setting to suppress this warning in production.',
     method         : 'The method you called is not defined.',
     invalidContext : 'Context specified does not exist',
     elementSize    : 'Sticky element is larger than its container, cannot create sticky.'

package/src/definitions/modules/toast.js

@@ -443,7 +443,7 @@ $.fn.toast = function(parameters) {
         has: {
           container: function() {
             module.verbose('Determining if there is already a container');
-            return ($context.find(module.helpers.toClass(settings.position) + selector.container + (settings.horizontal ? module.helpers.toClass(className.horizontal) : '')).length > 0);
+            return ($context.find(module.helpers.toClass(settings.position) + selector.container + (settings.horizontal ? module.helpers.toClass(className.horizontal) : ':not('+module.helpers.toClass(className.horizontal)+')')).length > 0);
           },
           toast: function(){
             return !!module.get.toast();
@@ -458,7 +458,7 @@ $.fn.toast = function(parameters) {
 
         get: {
           container: function() {
-            return ($context.find(module.helpers.toClass(settings.position) + selector.container)[0]);
+            return ($context.find(module.helpers.toClass(settings.position) + selector.container + (settings.horizontal ? module.helpers.toClass(className.horizontal) : ':not('+module.helpers.toClass(className.horizontal)+')'))[0]);
           },
           toastBox: function() {
             return $toastBox || null;

package/src/definitions/modules/toast.less

@@ -103,6 +103,11 @@
       bottom: @toastContainerDistance;
     }
   }
+  &.centered when (@variationToastCentered) {
+    transform: translate(-50%, -50%);
+    top: 50%;
+    left: 50%;
+  }
   & .visible.toast-box,
   .animating.toast-box,
   .toast-box {

package/src/definitions/modules/transition.js

@@ -1097,7 +1097,7 @@ $.fn.transition.settings = {
 
   // possible errors
   error: {
-    noAnimation : 'Element is no longer attached to DOM. Unable to animate.  Use silent setting to surpress this warning in production.',
+    noAnimation : 'Element is no longer attached to DOM. Unable to animate.  Use silent setting to suppress this warning in production.',
     repeated    : 'That animation is already occurring, cancelling repeated animation',
     method      : 'The method you called is not defined',
     support     : 'This browser does not support CSS animations'