Toast not working

[athmangude]

I tried using the toast(message, displayLength) function e.g toast('I am a toast!', 4000) in a Meteor app as described in the docs but it just seems not to work. Is there any initialization required that is missing in the docs? Like I just learnt that the waves effect requires some initialization function: Waves.displayEffect(); to run on $(document).ready()

[meteorza]

I have the same problem with Toasts in meteor

[Exegetech]

I think I know why Toast is not working, because toast is using a hoisting function, function toast(a,b,c,d) and hoisted function are considered local to their js file. They should make it global instead.

A quick fix would be to put this entire toast function

function toast(a, b, c, d) {
    function e(a) {
        var b = $("<div class='toast'></div>").addClass(c).html(a);
        return b.hammer({prevent_default: !1}).bind("pan", function(a) {
            var c = a.gesture.deltaX, d = 80;
            b.hasClass("panning") || b.addClass("panning");
            var e = 1 - Math.abs(c / d);
            0 > e && (e = 0), b.velocity({left: c,opacity: e}, {duration: 50,queue: !1,easing: "easeOutQuad"})
        }).bind("panend", function(a) {
            var c = a.gesture.deltaX, e = 80;
            Math.abs(c) > e ? b.velocity({marginTop: "-40px"}, {duration: 375,easing: "easeOutExpo",queue: !1,complete: function() {
                    "function" == typeof d && d(), b.remove()
                }}) : (b.removeClass("panning"), b.velocity({left: 0,opacity: 1}, {duration: 300,easing: "easeOutExpo",queue: !1}))
        }), b
    }
    if (c = c || "", 0 == $("#toast-container").length) {
        var f = $("<div></div>").attr("id", "toast-container");
        $("body").append(f)
    }
    var f = $("#toast-container"), g = e(a);
    f.append(g), g.css({top: parseFloat(g.css("top")) + 35 + "px",opacity: 0}), g.velocity({top: "0px",opacity: 1}, {duration: 300,easing: "easeOutCubic",queue: !1});
    var h = b, i = setInterval(function() {
        0 === g.parent().length && window.clearInterval(i), g.hasClass("panning") || (h -= 100), 0 >= h && (g.velocity({opacity: 0,marginTop: "-40px"}, {duration: 375,easing: "easeOutExpo",queue: !1,complete: function() {
                "function" == typeof d && d(), $(this).remove()
            }}), window.clearInterval(i))
    }, 100)
}

into one of the js file, maybe in lib or client folder, and don't do hoisting, just assign it to a global variable named "toast"

[msolters]

I also could not get Toast to work in Meteor. The method above does not work. However, I solved the problem as follows

1. You'll need HammerJS and VelocityJS to be accessible by the toast methods in your client:

   meteor add chriswessels:hammer
   meteor add velocityjs:velocityjs
   

2. Then, add these methods to your client:

   this.toast = function toast(message, displayLength, className, completeCallback) {
   className = className || "";
   if ($('#toast-container').length == 0) {
       // create notification container
       var container = $('<div></div>')
           .attr('id', 'toast-container');
       $('body').append(container);
   }
   
   // Select and append toast
   var container = $('#toast-container')
   var newToast = createToast(message);
   container.append(newToast);
   
   newToast.css({"top" : parseFloat(newToast.css("top"))+35+"px",
                 "opacity": 0});
   newToast.velocity({"top" : "0px",
                      opacity: 1},
                      {duration: 300,
                      easing: 'easeOutCubic',
                     queue: false});
   
   // Allows timer to be pause while being panned
   var timeLeft = displayLength;
   var counterInterval = setInterval (function(){
     if (newToast.parent().length === 0)
       window.clearInterval(counterInterval);
   
     if (!newToast.hasClass("panning")) {
       timeLeft -= 100;
     }
   
     if (timeLeft <= 0) {
       newToast.velocity({"opacity": 0, marginTop: '-40px'},
                       { duration: 375,
                         easing: 'easeOutExpo',
                         queue: false,
                         complete: function(){
                           if(typeof(completeCallback) === "function")
                             completeCallback();
                           $(this).remove();
                         }
                       }
                      );
       window.clearInterval(counterInterval);
     }
   }, 100);
   
   
   
   function createToast(html) {
       var toast = $("<div class='toast'></div>")
         .addClass(className)
         .html(html);
       // Bind hammer
       toast.hammer({prevent_default:false
             }).bind('pan', function(e) {
   
                 var deltaX = e.gesture.deltaX;
                 var activationDistance = 80;
   
   //                  change toast state
                 if (!toast.hasClass("panning"))
                   toast.addClass("panning");
   
                 var opacityPercent = 1-Math.abs(deltaX / activationDistance);
               if (opacityPercent < 0)
                 opacityPercent = 0;
   
                 toast.velocity({left: deltaX, opacity: opacityPercent }, {duration: 50, queue: false, easing: 'easeOutQuad'});
   
               }).bind('panend', function(e) {
                 var deltaX = e.gesture.deltaX;
                 var activationDistance = 80;
   
                 // If toast dragged past activation point
                 if (Math.abs(deltaX) > activationDistance) {
                   toast.velocity({marginTop: '-40px'},
                                 { duration: 375,
                       easing: 'easeOutExpo',
                       queue: false,
                       complete: function(){
                         if(typeof(completeCallback) === "function")
                           completeCallback();
                         toast.remove()
                       }
                     })
                 } else {
                   toast.removeClass("panning");
                   // Put toast back into original position
                   toast.velocity({left: 0, opacity: 1},
                                 { duration: 300,
                       easing: 'easeOutExpo',
                       queue: false
                     })
                 }
               }).on("click", function(){toast.fadeOut('fast', toast.remove)});
       return toast;
   }
   }
   

   You'll notice I tacked on a .on("click", function(){toast.fadeOut('fast', toast.remove)}); to make the toast fade away when clicked! This seemed to be missing from the original methods.

3. ?????????????

4. Profit

[Dogfalo]

https://github.com/Dogfalo/materialize/issues/734

[msolters]

Well that's certainly less work, but still equally unsatisfying :\

[sicutdeux]

it's also not working using it with jquery and prototype with noconflict, using pradoframework, www.pradosoft.com