From 5f45860a1ab207ba6425aefd41a7ea41f021730c Mon Sep 17 00:00:00 2001
From: strong <strong.barnaul@gmail.com>
Date: Sun, 10 Jul 2016 23:16:53 +0700
Subject: [PATCH] fix fade

---
 AlertAsset.php   |  5 -----
 FlashMessage.php | 10 ++++++++--
 web/alert.css    | 22 ++++++++++++++++++----
 web/alert.js     | 24 ++++++++++++++++--------
 4 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/AlertAsset.php b/AlertAsset.php
index 657cf83..cee4055 100644
--- a/AlertAsset.php
+++ b/AlertAsset.php
@@ -18,9 +18,4 @@ class AlertAsset extends AssetBundle
     public $js = [
         'alert.js',
     ];
-
-    public $depends = [
-        'yii\web\JqueryAsset',
-        'yii\bootstrap\BootstrapAsset',
-    ];
 }
diff --git a/FlashMessage.php b/FlashMessage.php
index 20624ca..5795dd6 100644
--- a/FlashMessage.php
+++ b/FlashMessage.php
@@ -2,14 +2,20 @@
 
 namespace stronglab\alert;
 
+use yii\helpers\Html;
+
 class FlashMessage extends \yii\base\Widget
 {
+    public $fade = true;
+
     public function init()
     {
+        $call = [];
         $view = $this->getView();
         AlertAsset::register($view);
-        if (Yii::$app->session->getAllFlashes()) {
-            $this->registerJs('showMessage("' . implode('<br/>', Yii::$app->session->getAllFlashes()) . '")');
+        foreach (\Yii::$app->session->getAllFlashes() as $key => $message) {
+            $call[] = 'showMessage("' . Html::encode($message) . '", "flash-alert-' . $key . '", ' . (int)$this->fade . ');';
         }
+        $view->registerJs(implode("\n", $call));
     }
 }
diff --git a/web/alert.css b/web/alert.css
index 2de256a..6b34fa4 100644
--- a/web/alert.css
+++ b/web/alert.css
@@ -1,13 +1,27 @@
 .flash-modal {
     position: fixed;
-    top: 20px;
     right: 30px;
     z-index: 9999;
     display: none;
-    width: 350px;
     padding: 30px;
     text-align: center;
     border-radius: 4px;
-    border: 1px #9acfea solid;
-    font-size: 1.1em;
+}
+
+.flash-alert-info {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+    color: #31708f;
+}
+
+.flash-alert-error {
+    background-color: #ff5b51;
+    border-color: #ff50a5;
+    color: #FFF;
+}
+
+.flash-alert-success {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+    color: #3c763d;
 }
\ No newline at end of file
diff --git a/web/alert.js b/web/alert.js
index 2eceb82..7926ae5 100644
--- a/web/alert.js
+++ b/web/alert.js
@@ -1,18 +1,25 @@
-$(".flash-modal").bind("contextmenu", function (e) {
+$(document).on("contextmenu", ".flash-modal", function (e) {
     e.preventDefault();
     $(this).fadeOut(420);
 });
 
-function showMessage(message, fade, type) {
+function showMessage(message, type, fade) {
     fade = typeof fade !== "undefined" ? fade : 1;
-    type = typeof type !== "undefined" ? type : "alert-info";
-    var obj = $(".flash-modal");
+    type = typeof type !== "undefined" ? type : "flash-alert-info";
+    var style;
+    var top = 20 + $(".flash-modal").length * 100;
+    style = "top: " + top + "px";
+    var obj = $('<div>', {
+        'class': 'flash-modal',
+        'style': style
+    });
+    obj.appendTo('body');
     obj.html("<b>" + message + "</b>");
     obj.addClass(type);
     obj.stop().animate({opacity: "100"});
     obj.show();
     if (fade) {
-        messageBoxFadeOut();
+        messageBoxFadeOut(obj);
         obj.mouseover(
             function () {
                 if ($(this).is(":animated")) {
@@ -20,13 +27,14 @@ function showMessage(message, fade, type) {
                 }
             }
         );
-        obj.mouseleave(messageBoxFadeOut);
+        obj.mouseleave(function () {
+            messageBoxFadeOut(obj);
+        });
 
     }
 }
 
-function messageBoxFadeOut() {
-    var obj = $(".flash-modal");
+function messageBoxFadeOut(obj) {
     obj.fadeOut(7000, function () {
         obj.removeClass("alert-danger alert-success alert-info");
     });