feat(toast): horizontal variant and dynamic content support

This PR adds

- the horizontal variant
- dynamic setting of title, message, icon or image to a toast template create out of an existing DOM node
- makes the close duration time configurable just as it is possible for show/hide duration
to the toast module.

Author: lubber-de

src/definitions/modules/toast.js

@@ -144,15 +144,15 @@ $.fn.toast = function(parameters) {
         create: {
           container: function() {
             module.verbose('Creating container');
-            $context.append($('<div/>',{class: settings.position + ' ' + className.container}));
+            $context.append($('<div/>',{class: settings.position + ' ' + className.container + ' ' +(settings.horizontal ? className.horizontal : '')}));
           },
           toast: function() {
             $toastBox = $('<div/>', {class: className.box});
+            var iconClass = module.get.iconClass();
             if (!isToastComponent) {
               module.verbose('Creating toast');
               $toast = $('<div/>');
               var $content = $('<div/>', {class: className.content});
-              var iconClass = module.get.iconClass();
               if (iconClass !== '') {
                 $toast.append($('<i/>', {class: iconClass + ' ' + className.icon}));
               }
@@ -170,7 +170,7 @@ $.fn.toast = function(parameters) {
                 }));
               }
 
-              $content.append($('<div/>', {html: module.helpers.escape(settings.message, settings.preserveHTML)}));
+              $content.append($('<div/>', {class: className.message, html: module.helpers.escape(settings.message, settings.preserveHTML)}));
 
               $toast
                 .addClass(settings.class + ' ' + className.toast)
@@ -189,6 +189,18 @@ $.fn.toast = function(parameters) {
               $toast = settings.cloneModule ? $module.clone().removeAttr('id') : $module;
               $close = $toast.find('> i'+module.helpers.toClass(className.close));
               settings.closeIcon = ($close.length > 0);
+              if (iconClass !== '') {
+                $toast.find(selector.icon).attr('class',iconClass + ' ' + className.icon);
+              }
+              if (settings.showImage) {
+                $toast.find(selector.image).attr('src',settings.showImage);
+              }
+              if (settings.title !== '') {
+                $toast.find(selector.title).html(module.helpers.escape(settings.title, settings.preserveHTML));
+              }
+              if (settings.message !== '') {
+                $toast.find(selector.message).html(module.helpers.escape(settings.message, settings.preserveHTML));
+              }
             }
             if ($toast.hasClass(className.compact)) {
               settings.compact = true;
@@ -391,7 +403,7 @@ $.fn.toast = function(parameters) {
                       if(settings.transition.closeEasing !== ''){
                           if($toastBox) {
                             $toastBox.css('opacity', 0);
-                            $toastBox.wrap('<div/>').parent().slideUp(500, settings.transition.closeEasing, function () {
+                            $toastBox.wrap('<div/>').parent().hide(settings.transition.closeDuration, settings.transition.closeEasing, function () {
                               if ($toastBox) {
                                 $toastBox.parent().remove();
                                 callback.call($toastBox);
@@ -431,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).length > 0);
+            return ($context.find(module.helpers.toClass(settings.position) + selector.container + (settings.horizontal ? module.helpers.toClass(className.horizontal) : '')).length > 0);
           },
           toast: function(){
             return !!module.get.toast();
@@ -750,6 +762,7 @@ $.fn.toast.settings = {
   context        : 'body',
 
   position       : 'top right',
+  horizontal     : false,
   class          : 'neutral',
   classProgress  : false,
   classActions   : false,
@@ -780,7 +793,8 @@ $.fn.toast.settings = {
     showDuration : 500,
     hideMethod   : 'scale',
     hideDuration : 500,
-    closeEasing  : 'easeOutCubic'  //Set to empty string to stack the closed toast area immediately (old behaviour)
+    closeEasing  : 'easeOutCubic',  //Set to empty string to stack the closed toast area immediately (old behaviour)
+    closeDuration: 500
   },
 
   error: {
@@ -798,13 +812,15 @@ $.fn.toast.settings = {
     visible      : 'visible',
     content      : 'content',
     title        : 'ui header',
+    message      : 'message',
     actions      : 'actions',
     extraContent : 'extra content',
     button       : 'ui button',
     buttons      : 'ui buttons',
     close        : 'close icon',
     image        : 'ui image',
     vertical     : 'vertical',
+    horizontal   : 'horizontal',
     attached     : 'attached',
     inverted     : 'inverted',
     compact      : 'compact',
@@ -828,6 +844,10 @@ $.fn.toast.settings = {
     container    : '.ui.toast-container',
     box          : '.toast-box',
     toast        : '.ui.toast',
+    title        : '.header',
+    message      : '.message:not(.ui)',
+    image        : '> img.image, > .image > img',
+    icon         : '> i.icon',
     input        : 'input:not([type="hidden"]), textarea, select, button, .ui.button, ui.dropdown',
     approve      : '.actions .positive, .actions .approve, .actions .ok',
     deny         : '.actions .negative, .actions .deny, .actions .cancel'

src/definitions/modules/toast.less

@@ -64,6 +64,13 @@
   .toast-box {
     display: table !important;
   }
+  &.horizontal when (@variationToastHorizontal) {
+    display: flex;
+    flex-direction: row;
+    & .toast-box {
+      margin-right: @toastBoxMarginRight;
+    }
+  }
   & .toast-box {
     margin-bottom: @toastBoxMarginBottom;
     border-radius: @defaultBorderRadius;

src/themes/default/globals/variation.variables

@@ -529,6 +529,7 @@
 @variationToastWarning: true;
 @variationToastSuccess: true;
 @variationToastError: true;
+@variationToastHorizontal: true;
 @variationToastFloating: true;
 @variationToastProgress: true;
 @variationToastIcon: true;

src/themes/default/modules/toast.variables

@@ -12,6 +12,7 @@
 @toastMarginBottom: -0.01em;
 @toastLeftRightMargin: 1px;
 @toastBoxMarginBottom: 0.5em;
+@toastBoxMarginRight: @toastBoxMarginBottom;
 @toastMarginProgress: -0.2em;
 @toastMargin: 0 -@toastLeftRightMargin @toastMarginBottom;
 @toastTextColor: @invertedTextColor;