fix(toast): support context setting properly

The context setting was not working properly. While all generated HTML was correctly positioned inside the DOM tree, the toast were still being displayed relative to the body, as they were always being displayed fixed. When choosing a different context, such toasts need to be displayed absolute instead. i also fixed a bug which was creating/searching the same container multiple times
fomantic · Apr 30, 2022 · 3e24a3d · 3e24a3d
1 parent 2e4bd56
commit 3e24a3d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/definitions/modules/toast.js b/src/definitions/modules/toast.js
@@ -151,7 +151,7 @@ $.fn.toast = function(parameters) {
         create: {
           container: function() {
             module.verbose('Creating container');
-            $context.append($('<div/>',{class: settings.position + ' ' + className.container + ' ' +(settings.horizontal ? className.horizontal : '')}));
+            $context.append($('<div/>',{class: settings.position + ' ' + className.container + ' ' +(settings.horizontal ? className.horizontal : '') + ' ' + (settings.context && settings.context !== 'body' ? className.absolute : '')}));
           },
           id: function() {
             id = (Math.random().toString(16) + '000000000').slice(2, 10);
@@ -457,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) : ':not('+module.helpers.toClass(className.horizontal)+')')).length > 0);
+            return module.get.containers().length > 0;
           },
           toast: function(){
             return !!module.get.toast();
@@ -474,8 +474,11 @@ $.fn.toast = function(parameters) {
           id: function() {
             return id;
           },
+          containers: function() {
+            return $context.children(module.helpers.toClass(settings.position) + selector.container + (settings.horizontal ? module.helpers.toClass(className.horizontal) : ':not('+module.helpers.toClass(className.horizontal)+')') + (settings.context && settings.context !== 'body' ? module.helpers.toClass(className.absolute) : ':not('+module.helpers.toClass(className.absolute)+')'));
+          },
           container: function() {
-            return ($context.find(module.helpers.toClass(settings.position) + selector.container + (settings.horizontal ? module.helpers.toClass(className.horizontal) : ':not('+module.helpers.toClass(className.horizontal)+')'))[0]);
+            return module.get.containers()[0];
           },
           toastBox: function() {
             return $toastBox || null;
@@ -538,7 +541,7 @@ $.fn.toast = function(parameters) {
         helpers: {
           toClass: function(selector) {
             var
-              classes = selector.split(' '),
+              classes = selector.trim().split(/\s+/),
               result = ''
             ;
 
@@ -828,6 +831,7 @@ $.fn.toast.settings = {
 
   className      : {
     container    : 'ui toast-container',
+    absolute     : 'absolute',
     box          : 'floating toast-box',
     progress     : 'ui attached active progress',
     toast        : 'ui toast',

diff --git a/src/definitions/modules/toast.less b/src/definitions/modules/toast.less
@@ -25,6 +25,9 @@
 .ui.toast-container {
     position: fixed;
     z-index: 9999;
+  &.absolute {
+    position: absolute;
+  }
   &.ui.attached when (@variationToastAttached) {
     width: 100%;
     left: 0;