FusRoDah061/toast.html

## toast.html
<!DOCTYPE html>
<html>
  <head>
    <title>Android Toast</title>

  </head>

  <body>

    <script>

      (function(){
        var Toast = function(){

        var toastCss = ".toast--hide,.toast--show{animation-duration:.4s;animation-timing-function:linear;animation-fill-mode:forwards}.toast{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);background-color:rgba(0,0,0,.7);color:#fff;padding:0 20px;font-size:11pt;border-radius:35px;font-family:Roboto,sans-serif;z-index:9999;box-shadow:0 7px 15px 0 #dcdcdc}.toast--show{animation-name:fadeIn}.toast--hide{animation-name:fadeOut}@keyframes fadeIn{from{opacity:0;display:none}to{opacity:1;display:block}}@keyframes fadeOut{from{opacity:1;display:block}to{opacity:0;display:none}}";
        var toastHtml = "<div id='js-toast' class='toast toast--hide'> <p>#text#</p> </div>";
        var duration = 1000;
        var isOnDom = false;

        this.makeText = function(text, dur){
          if(!isOnDom){
            document.getElementsByTagName('head')[0].innerHTML += "<style>" + toastCss + "</style>";
            document.getElementsByTagName('body')[0].innerHTML += toastHtml.replace("#text#", text);
            isOnDom = true;
          }

          duration = dur;

          return this;
        }

        this.show = function(){
          var toast = document.getElementById('js-toast');

          toast.classList.remove("toast--hide");
          toast.classList.add("toast--show");

          setTimeout(function(){
            toast.classList.remove("toast--show");
            toast.classList.add("toast--hide");
          }, duration);
        }

        }

        window.toast = new Toast();
      })();

      //Usage
      (function(){
        setTimeout(function(){
          toast.makeText("Teste do Toast", 4000).show();
        }, 2000)
      })();


    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Android Toast</title>

	</head>

	<body>

	<script>

	(function(){
	var Toast = function(){

	var toastCss = ".toast--hide,.toast--show{animation-duration:.4s;animation-timing-function:linear;animation-fill-mode:forwards}.toast{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);background-color:rgba(0,0,0,.7);color:#fff;padding:0 20px;font-size:11pt;border-radius:35px;font-family:Roboto,sans-serif;z-index:9999;box-shadow:0 7px 15px 0 #dcdcdc}.toast--show{animation-name:fadeIn}.toast--hide{animation-name:fadeOut}@keyframes fadeIn{from{opacity:0;display:none}to{opacity:1;display:block}}@keyframes fadeOut{from{opacity:1;display:block}to{opacity:0;display:none}}";
	var toastHtml = "<div id='js-toast' class='toast toast--hide'> <p>#text#</p> </div>";
	var duration = 1000;
	var isOnDom = false;

	this.makeText = function(text, dur){
	if(!isOnDom){
	document.getElementsByTagName('head')[0].innerHTML += "<style>" + toastCss + "</style>";
	document.getElementsByTagName('body')[0].innerHTML += toastHtml.replace("#text#", text);
	isOnDom = true;
	}

	duration = dur;

	return this;
	}

	this.show = function(){
	var toast = document.getElementById('js-toast');

	toast.classList.remove("toast--hide");
	toast.classList.add("toast--show");

	setTimeout(function(){
	toast.classList.remove("toast--show");
	toast.classList.add("toast--hide");
	}, duration);
	}

	}

	window.toast = new Toast();
	})();

	//Usage
	(function(){
	setTimeout(function(){
	toast.makeText("Teste do Toast", 4000).show();
	}, 2000)
	})();


	</script>
	</body>
	</html>