From 9176ee0120c74cad1f77eb8757b91811357d16f9 Mon Sep 17 00:00:00 2001
From: Catouse <catouse@gmail.com>
Date: Mon, 22 Aug 2016 16:20:51 +0800
Subject: [PATCH]  * improve messager UI:  * support custom actions;  * support
 custom CSS class;

---
 src/js/messager.js             | 73 +++++++++++++++++++++++++++++-----
 src/less/modules/messager.less | 17 +++++---
 2 files changed, 74 insertions(+), 16 deletions(-)

diff --git a/src/js/messager.js b/src/js/messager.js
index 0db99147c..965b31fb9 100644
--- a/src/js/messager.js
+++ b/src/js/messager.js
@@ -6,11 +6,11 @@
  * ======================================================================== */
 
 
-(function($, window) {
+(function($, window, undefined) {
     'use strict';
 
     var id = 0;
-    var template = '<div class="messager messager-{type} {placement}" id="messager{id}" style="display:none"><div class="messager-content"></div><div class="messager-actions"><button type="button" class="close action">&times;</button></div></div>';
+    var template = '<div class="messager messager-{type} {placement}" id="messager{id}" style="display:none"><div class="messager-actions"></div><div class="messager-content"></div></div>';
     var defaultOptions = {
         type: 'default',
         placement: 'top',
@@ -19,6 +19,10 @@
         // clear: false,
         icon: null,
         close: true,
+        // actions: [{icon, name, action, title}],
+        // contentClass: null,
+        // cssClass: null,
+        // onAction: function,
         fade: true,
         scale: true
     };
@@ -31,16 +35,63 @@
         that.message = (options.icon ? '<i class="icon-' + options.icon + ' icon"></i> ' : '') + message;
 
         that.$ = $(template.format(options)).toggleClass('fade', options.fade).toggleClass('scale', options.scale).attr('id', 'messager-' + that.id);
-        if(!options.close) {
-            that.$.find('.close').remove();
-        } else {
-            that.$.on('click', '.close', function() {
-                that.hide();
+
+        if(options.cssClass) that.$.addClass(options.cssClass);
+
+        var hasCloseAction = false;
+        var $actions = that.$.find('.messager-actions');
+        var appendAction = function(action) {
+            var $btn = $('<button type="button" class="action action-' + action.name + '"/>');
+            if(action.name === 'close') $btn.addClass('close');
+            if(action.html !== undefined) {
+                $btn.html(action.html);
+            }
+            if(action.icon !== undefined) {
+                $btn.append('<i class="action-icon icon-' + action.icon + '"/>');
+            }
+            if(action.text !== undefined) {
+                $btn.append('<span class="action-text">' + action.text + '</span>');
+            }
+            if(action.tooltip !== undefined) {
+                $btn.attr('title', action.tooltip).tooltip();
+            }
+            $btn.data('action', action);
+            $actions.append($btn);
+        };
+        if(options.actions) {
+            $.each(options.actions, function(idx, action) {
+                if(action.name === undefined) action.name = idx;
+                if(action.name == 'close') hasCloseAction = true;
+                appendAction(action);
             });
         }
+        if(!hasCloseAction && options.close) {
+            appendAction({name: 'close', html: '&times;'});
+        }
 
-        that.$.find('.messager-content').html(that.message);
+        that.$.on('click', '.action', function(e) {
+            var action = $(this).data('action'), result;
+            if(options.onAction) {
+                result = options.onAction.call(this, action.name, action, that);
+                if(result === false) return;
+            }
+            if($.isFunction(action.action)) {
+                result = action.action.call(this, that);
+                if(result === false) return;
+            }
+            that.hide();
+            e.stopPropagation();
+        });
+
+        that.$.on('click', function(e) {
+            if(options.onAction) {
+                result = options.onAction.call(this, 'content', null, that);
+                if(result === true) that.hide();
+            }
+        });
 
+        var $content = that.$.find('.messager-content').html(that.message);
+        if(options.contentClass) $content.addClass(options.cssClass);
 
         that.$.data('zui.messager', that);
     };
@@ -70,11 +121,11 @@
         that.$.appendTo(options.parent).show();
 
         if(options.placement === 'top' || options.placement === 'bottom' || options.placement === 'center') {
-            that.$.css('left', ($(window).width() - that.$.width() - 50) / 2);
+            that.$.css('left', ($(window).width() - that.$.width()) / 2);
         }
 
         if(options.placement === 'left' || options.placement === 'right' || options.placement === 'center') {
-            that.$.css('top', ($(window).height() - that.$.height() - 50) / 2);
+            that.$.css('top', ($(window).height() - that.$.height()) / 2);
         }
 
         that.$.addClass('in');
@@ -172,5 +223,5 @@
             }
         }
     });
-}(jQuery, window));
+}(jQuery, window, undefined));
 
diff --git a/src/less/modules/messager.less b/src/less/modules/messager.less
index 67c9f3ab1..b89edf13d 100644
--- a/src/less/modules/messager.less
+++ b/src/less/modules/messager.less
@@ -14,9 +14,9 @@
   background-color: @color-dark;
   background-color: rgba(0, 0, 0, 0.8);
   border-radius: @messager-radius;
-  padding-right: 50px;
   max-width: 80%;
   z-index: 99999;
+  &:extend(.clearfix all);
 
   &.top {
     top: 20px;
@@ -49,6 +49,7 @@
 
 .messager-content {
   padding: 10px 20px;
+  float: left;
 
   > [class^='icon-'] {
      display: inline-block;
@@ -57,18 +58,21 @@
 }
 
 .messager-actions {
-  position: absolute;
-  right: 15px;
-  top: 8px;
+  float: right;
 
   > .action {
     color: #fafafa;
-    color: rgba(255, 255, 255, 0.6);
+    color: rgba(255,255,255,.6);
     background: none;
     border: none;
     text-shadow: none;
+    min-width: 40px;
+    padding: 0 12px;
+    height: 40px;
+    text-align: center;
 
     &.close {
+      padding-bottom: 5px;
       opacity: 1;
       font-size: 20px;
       font-weight: normal;
@@ -76,8 +80,11 @@
 
     &:hover {
       color: #fff;
+      background: rgba(0,0,0,.1);
     }
   }
+
+  .action-icon + .action-text {margin-left: 8px;}
 }
 
 .messager-primary {
-- 
GitLab