fomantic-ui 2.8.8-beta.99 → 2.9.0-beta.100

package/src/definitions/modules/toast.js

@@ -69,12 +69,14 @@ $.fn.toast = function(parameters) {
         element          = this,
         instance         = isToastComponent ? $module.data(moduleNamespace) : undefined,
 
+        id,
         module
       ;
       module = {
 
         initialize: function() {
           module.verbose('Initializing element');
+          module.create.id();
           if (!module.has.container()) {
             module.create.container();
           }
@@ -124,17 +126,22 @@ $.fn.toast = function(parameters) {
         },
 
         show: function(callback) {
-          callback = callback || function(){};
-          module.debug('Showing toast');
           if(settings.onShow.call($toastBox, element) === false) {
             module.debug('onShow callback returned false, cancelling toast animation');
             return;
           }
+          callback = callback || function(){};
+          module.debug('Showing toast');
           module.animate.show(callback);
         },
 
         close: function(callback) {
+          if(settings.onHide.call($toastBox, element) === false) {
+            module.debug('onHide callback returned false, cancelling toast animation');
+            return;
+          }
           callback = callback || function(){};
+          module.debug('Closing toast');
           module.remove.visible();
           module.unbind.events();
           module.animate.close(callback);
@@ -146,12 +153,16 @@ $.fn.toast = function(parameters) {
             module.verbose('Creating container');
             $context.append($('<div/>',{class: settings.position + ' ' + className.container + ' ' +(settings.horizontal ? className.horizontal : '')}));
           },
+          id: function() {
+            id = (Math.random().toString(16) + '000000000').substr(2, 8);
+            module.verbose('Creating unique id for element', id);
+          },
           toast: function() {
             $toastBox = $('<div/>', {class: className.box});
             var iconClass = module.get.iconClass();
             if (!isToastComponent) {
               module.verbose('Creating toast');
-              $toast = $('<div/>');
+              $toast = $('<div/>', {role: 'alert'});
               var $content = $('<div/>', {class: className.content});
               if (iconClass !== '') {
                 $toast.append($('<i/>', {class: iconClass + ' ' + className.icon}));
@@ -164,13 +175,21 @@ $.fn.toast = function(parameters) {
                 }));
               }
               if (settings.title !== '') {
+                var titleId = '_' + module.get.id() + 'title';
+                $toast.attr('aria-labelledby', titleId);
                 $content.append($('<div/>', {
                   class: className.title,
-                  text: settings.title
+                  id: titleId,
+                  html: module.helpers.escape(settings.title, settings.preserveHTML)
                 }));
               }
-
-              $content.append($('<div/>', {class: className.message, html: module.helpers.escape(settings.message, settings.preserveHTML)}));
+              var descId = '_' + module.get.id() + 'desc';
+              $toast.attr('aria-describedby', descId);
+              $content.append($('<div/>', {
+                class: className.message,
+                id: descId,
+                html: module.helpers.escape(settings.message, settings.preserveHTML)
+              }));
 
               $toast
                 .addClass(settings.class + ' ' + className.toast)
@@ -178,7 +197,7 @@ $.fn.toast = function(parameters) {
               ;
               $toast.css('opacity', settings.opacity);
               if (settings.closeIcon) {
-                $close = $('<i/>', {class: className.close + ' ' + (typeof settings.closeIcon === 'string' ? settings.closeIcon : '')});
+                $close = $('<i/>', {class: className.close + ' ' + (typeof settings.closeIcon === 'string' ? settings.closeIcon : ''), role: 'button', tabindex: 0, 'aria-label': settings.text.close});
                 if($close.hasClass(className.left)) {
                   $toast.prepend($close);
                 } else {
@@ -221,15 +240,17 @@ $.fn.toast = function(parameters) {
                 }
               }
               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.close();
@@ -329,13 +350,12 @@ $.fn.toast = function(parameters) {
         bind: {
           events: function() {
             module.debug('Binding events to toast');
-            if(settings.closeOnClick || settings.closeIcon) {
-              (settings.closeIcon ? $close : $toast)
-                  .on('click' + eventNamespace, module.event.click)
-              ;
+            if(settings.closeIcon) {
+              $close.on('click' + eventNamespace, module.event.close);
             }
+            $toast.on('click' + eventNamespace, module.event.click);
             if($animationObject) {
-              $animationObject.on('animationend' + eventNamespace, module.close);
+              $animationObject.on('animationend' + eventNamespace, module.event.close);
             }
             $toastBox
               .on('click' + eventNamespace, selector.approve, module.event.approve)
@@ -347,11 +367,10 @@ $.fn.toast = function(parameters) {
         unbind: {
           events: function() {
             module.debug('Unbinding events to toast');
-            if(settings.closeOnClick || settings.closeIcon) {
-              (settings.closeIcon ? $close : $toast)
-                  .off('click' + eventNamespace)
-              ;
+            if(settings.closeIcon) {
+              $close.off('click' + eventNamespace);
             }
+            $toast.off('click' + eventNamespace);
             if($animationObject) {
               $animationObject.off('animationend' + eventNamespace);
             }
@@ -383,11 +402,6 @@ $.fn.toast = function(parameters) {
           },
           close: function(callback) {
             callback = $.isFunction(callback) ? callback : function(){};
-            module.debug('Closing toast');
-            if(settings.onHide.call($toastBox, element) === false) {
-              module.debug('onHide callback returned false, cancelling toast animation');
-              return;
-            }
             if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
               $toastBox
                 .transition({
@@ -443,7 +457,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();
@@ -457,8 +471,11 @@ $.fn.toast = function(parameters) {
         },
 
         get: {
+          id: function() {
+            return id;
+          },
           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;
@@ -490,9 +507,15 @@ $.fn.toast = function(parameters) {
         },
 
         event: {
+          close: function(){
+            module.close();
+          },
           click: function(event) {
             if($(event.target).closest('a').length === 0) {
-              settings.onClick.call($toastBox, element);
+              if(settings.onClick.call($toastBox, element) === false || !settings.closeOnClick) {
+                module.verbose('Click callback returned false or close denied by setting cancelling close');
+                return;
+              }
               module.close();
             }
           },
@@ -833,6 +856,10 @@ $.fn.toast.settings = {
     unclickable  : 'unclickable'
   },
 
+  text: {
+    close : 'Close'
+  },
+
   icons          : {
     info         : 'info',
     success      : 'checkmark',

package/src/definitions/modules/toast.less

@@ -25,6 +25,50 @@
 .ui.toast-container {
     position: fixed;
     z-index: 9999;
+  &.ui.attached when (@variationToastAttached) {
+    width: 100%;
+    left: 0;
+    & .vertical.attached when (@variationToastVertical) {
+      border-radius: 0;
+    }
+    &.ui.ui .attached.actions .button when (@variationToastActions) {
+      border-radius: 0;
+    }
+    & .toast-box {
+      margin: 0;
+      width: 100%;
+      border-radius: 0;
+      & > .ui.toast,
+      > .ui.message {
+        margin-left: 0;
+      }
+      & when (@variationToastFloating) {
+        &.floating,
+        &.hoverfloating:hover {
+          border: none;
+        }
+      }
+      & > .vertical > .content when (@variationToastVertical) {
+        flex: 1;
+      }
+      & > * {
+        width: 100%;
+        border-radius: 0;
+        & > .vertical:not(.actions) when (@variationToastVertical) {
+          flex: 1;
+        }
+      }
+      & > .attached.actions when (@variationToastActions) {
+        margin-right: @toastLeftRightMargin;
+      }
+    }
+    &.top when (@variationToastTop) {
+      top: 0;
+    }
+    &.bottom when (@variationToastBottom) {
+      bottom: 0;
+    }
+  }
   &.top when (@variationToastTop) {
     &.right when (@variationToastRight) {
       top: @toastContainerDistance;
@@ -59,6 +103,11 @@
       bottom: @toastContainerDistance;
     }
   }
+  &.centered when (@variationToastCentered) {
+    transform: translate(-50%, -50%);
+    top: 50%;
+    left: 50%;
+  }
   & .visible.toast-box,
   .animating.toast-box,
   .toast-box {
@@ -88,9 +137,11 @@
         border: @toastBoxBorder;
       }
     }
-    &.compact,
-    > .compact {
-      width: @toastWidth;
+    & when (@variationToastCompact) {
+      &.compact,
+      > .compact {
+        width: @toastWidth;
+      }
     }
     & > .ui.toast,
       > .ui.message {
@@ -348,9 +399,6 @@
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
       }
-      & .button:not(:first-child):not(:last-child) {
-        margin-left: -@toastLeftRightMargin;
-      }
     }
     &.message.message.message when (@variationToastMessage) {
       border-top-right-radius: @toastBorderRadius;
@@ -426,8 +474,15 @@
     font-size: @toastIconFontSize;
   }
   &:not(.vertical) {
+    &:not(.centered):not(.center) {
+      & > i.icon:not(.close) when (@variationToastIcon) {
+        position: absolute;
+      }
+      & > .ui.image when (@variationToastImage) {
+        position: absolute;
+      }
+    }
     & > i.icon:not(.close) when (@variationToastIcon) {
-      position: absolute;
       & + .content {
         padding-left: @toastIconContentPadding;
       }
@@ -436,7 +491,6 @@
       padding-left: @toastCloseDistance;
     }
     & > .ui.image when (@variationToastImage) {
-      position: absolute;
       &.avatar + .content {
         padding-left: @toastAvatarImageContentPadding;
         min-height: @toastAvatarImageHeight;
@@ -454,7 +508,7 @@
         min-height: @toastSmallImageHeight;
       }
     }
-    & when (@variationToastImage) or (@variationToastIcon) {
+    &:not(.centered):not(.center) when (@variationToastImage) or (@variationToastIcon) {
       & > .centered.image,
       > .centered.icon {
         transform: translateY(-50%);
@@ -469,6 +523,12 @@
     }
   }
   &.vertical when (@variationToastVertical) {
+    & > .content {
+      flex-grow: 1;
+    }
+    &.attached when (@variationToastAttached){
+      flex-grow: 1;
+    }
     & > .close.icon + .content when (@variationToastClose){
       padding-left: @toastCloseDistanceVertical;
     }
@@ -500,6 +560,29 @@
       border-bottom-right-radius: 0;
     }
   }
+
+  &.ui.ui.ui.image when (@variationToastImage) {
+    padding: 0;
+    & > .content {
+      padding-top: @inputVerticalPadding;
+      padding-bottom: @inputVerticalPadding;
+      padding-right: @inputHorizontalPadding;
+    }
+    & > .actions when (@variationToastActions) {
+      margin: 0;
+    }
+    & > .ui.image {
+      border-top-left-radius: @defaultBorderRadius;
+      border-bottom-left-radius: @defaultBorderRadius;
+      &.mini {
+        min-width: @toastImageMiniImageAdjustment;
+        & + .content {
+          min-height: @toastImageMiniImageAdjustment;
+          padding-left: @toastImageMiniImagePadding;
+        }
+      }
+    }
+  }
 }
 
 
@@ -516,27 +599,58 @@
     margin-right: auto;
 }
 
-/*--------------
-     Colors
--------------- */
+& when (@variationToastCentered) {
+  .ui.ui.toast-container .toast-box .centered.toast,
+  .ui.ui.toast-container .toast-box .center.aligned.toast {
+    text-align: center;
+    display: flex;
+    justify-content: center;
 
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-  @l: @colors[@@color][light];
+    & > .content,
+    & > .ui.image,
+    & > i.icon:not(.close) {
+      align-self: center;
+    }
+  }
 
-  .ui.@{color}.toast {
-    background-color: @c;
-    color: @toastTextColor;
+  .ui.toast-container .toast-box .toast .centered.content,
+  .ui.toast-container .toast-box .toast .center.aligned.content {
+    text-align: center;
   }
-  & when (@variationToastInverted) {
-    .ui.inverted.@{color}.toast,
-    .ui.toast-container .toast-box > .inverted.@{color}.attached.progress .bar {
-      background-color: @l;
-      color: @toastInvertedTextColor;
+
+  .ui.toast-container .toast-box .centered.actions,
+  .ui.toast-container .toast-box .center.aligned.actions {
+    text-align: center;
+
+    &:not(.attached) > .button:not(.fluid) {
+      margin-left: @toastActionCenteredMargin;
+      margin-right: @toastActionCenteredMargin;
     }
   }
-})
+}
+
+/*--------------
+     Colors
+-------------- */
+& when not (@variationToastColors = false) {
+  each(@variationToastColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    @l: @colors[@@color][light];
+
+    .ui.@{color}.toast {
+      background-color: @c;
+      color: @toastTextColor;
+    }
+    & when (@variationToastInverted) {
+      .ui.inverted.@{color}.toast,
+      .ui.toast-container .toast-box > .inverted.@{color}.attached.progress .bar {
+        background-color: @l;
+        color: @toastInvertedTextColor;
+      }
+    }
+  })
+}
 
 & when (@variationToastInverted) {
   .ui.inverted.toast {

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'