diff --git a/src/js/messager.js b/src/js/messager.js index 965b31fb9051958658ed0a7711eff72b5991f8e1..858f7e44fe14ccb1a251a318f8a2613acb7950ef 100644 --- a/src/js/messager.js +++ b/src/js/messager.js @@ -10,7 +10,7 @@ 'use strict'; var id = 0; - var template = ''; + var template = '
'; var defaultOptions = { type: 'default', placement: 'top', @@ -26,7 +26,7 @@ fade: true, scale: true }; - var lastMessager; + var all = {}; var Messager = function(message, options) { var that = this; @@ -100,14 +100,6 @@ var that = this, options = this.options; - if(lastMessager) { - if(lastMessager.id == that.id) { - that.$.removeClass('in'); - } else if(lastMessager.isShow) { - lastMessager.hide(); - } - } - if(that.hiding) { clearTimeout(that.hiding); that.hiding = null; @@ -118,14 +110,18 @@ that.$.find('.messager-content').html(that.message); } - that.$.appendTo(options.parent).show(); + if(that.isShow) return; - if(options.placement === 'top' || options.placement === 'bottom' || options.placement === 'center') { - that.$.css('left', ($(window).width() - that.$.width()) / 2); + var placement = options.placement; + var $parent = $(options.parent); + var $holder = $parent.children('.messagers-holder.' + placement); + if(!$holder.length) { + $holder = $('
').attr('class', 'messagers-holder ' + placement).appendTo($parent); } - - if(options.placement === 'left' || options.placement === 'right' || options.placement === 'center') { - that.$.css('top', ($(window).height() - that.$.height()) / 2); + $holder.append(that.$); + if(placement === 'center') { + var offset = $(window).height() - $holder.height(); + $holder.css('top', Math.max(-offset, offset/2)); } that.$.addClass('in'); @@ -137,7 +133,6 @@ } that.isShow = true; - lastMessager = that; }; Messager.prototype.hide = function() { @@ -145,7 +140,9 @@ if(that.$.hasClass('in')) { that.$.removeClass('in'); setTimeout(function() { + var $parent = that.$.parent(); that.$.remove(); + if(!$parent.children().length) $parent.remove(); }, 200); } diff --git a/src/less/modules/messager.less b/src/less/modules/messager.less index b89edf13d4a508822e21f1480ead79a35febc2b4..53358e984e115445e47043b22d793ae09a5d855d 100644 --- a/src/less/modules/messager.less +++ b/src/less/modules/messager.less @@ -9,47 +9,19 @@ // Messager style for module messager.js .messager { - position: fixed; + display: table; color: @color-light; background-color: @color-dark; background-color: rgba(0, 0, 0, 0.8); border-radius: @messager-radius; - max-width: 80%; - z-index: 99999; - &:extend(.clearfix all); - - &.top { - top: 20px; - } - - &.top-left { - top: 20px; - left: 20px; - } - - &.top-right { - top: 20px; - right: 20px; - } - - &.bottom { - bottom: 20px; - } - - &.bottom-left { - bottom: 20px; - left: 20px; - } - - &.bottom-right { - bottom: 20px; - right: 20px; - } + margin: 10px; + pointer-events: auto; } .messager-content { - padding: 10px 20px; - float: left; + padding: 10px 15px; + display: table-cell; + vertical-align: top; > [class^='icon-'] { display: inline-block; @@ -58,7 +30,8 @@ } .messager-actions { - float: right; + display: table-cell; + vertical-align: top; > .action { color: #fafafa; @@ -87,6 +60,61 @@ .action-icon + .action-text {margin-left: 8px;} } +.messagers-holder { + z-index: 99999; + position: fixed; + padding: 10px; + pointer-events: none; + .transition-fast(top); + + &.top { + top: 0; + + } + + &.top-left { + top: 0; + left: 0; + } + + &.top-right { + top: 0; + right: 0; + } + + &.bottom { + bottom: 0; + } + + &.bottom-left { + bottom: 0; + left: 0; + } + + &.bottom-right { + bottom: 0; + right: 0; + } + + &.top-right, + &.bottom-right { + .messager { margin-left: auto; } + } + + &.center { + top: 0; + } + + &.top, + &.bottom, + &.center { + left: 0; + right: 0; + + .messager { margin: 10px auto; } + } +} + .messager-primary { background-color: @state-primary-inverse-bg; }