riotで書いたやっつけtoast

すごく横着な(特にタイムアウト)toast

忘れないうちに書いておく。

貼り付け方

<div riot-tag="kl-notifier" id="notifier" name="notifier"></div>
<script>
        var notifier = null;
        riot.compile(function() {
            notifier = riot.mount("#notifier", "kl-notifier")[0];

呼び方

if(notifier) notifier.trigger('notify',{key:"xxxx",message:"message"});

中身

kl-notifier.tag

<kl-notifier>
    <div class="notifier">
        <div class={notify:true,notifyhide:(state==0 || state>=8)} each={notifies} >
            {message}
        </div>
    </div>

    <script>
        this.menumode = "menu";
        this.notifies = [];
        this.timer = null;
        this.on('mount', function(e) {
            
            this.notifies = [
            ];
            this.update();
        });
        this.on('notify',function(e){
            var added = false;
            if(e.key){
                for(var k in this.notifies){
                    if(this.notifies[k].key && this.notifies[k].key==e.key){
                        this.notifies[k].message = e.message;
                        this.notifies[k].state = 1;
                        added = true;
                        break;
                    }
                }
            }
            if(!added){
                this.notifies.push({
                    message:e.message,
                    state:0,
                    key:e.key
                });
            } 
            if(this.timer) {
                clearTimeout(this.timer);
                this.timer = null;
            }
            this.update();
        });
        this.on('updated', function(e) {
            //更新に備えておく
            var _this = this;
            if(_this.notifies.length!=0) this.timer = setTimeout(function(e){
                var n = [];
                for(var k in _this.notifies){
                    if(_this.notifies[k].state <= 9) {
                        _this.notifies[k].state++;
                        n.push(_this.notifies[k]);
                    }
                }
                _this.notifies = n;
                _this.update();
            },700);
        });
    </script>
</kl-notifier>

スタイルはテーマに合わせてお好きに。

.notifier {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  padding: 5px;
  width: 90%;
  margin-top: 15px;
  z-index: 120;
}
.notify {
  margin: 10px;
  padding: 5px;
  background-color: #4db6ac;
  color: white;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  border: 1px solid #71c5bd;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  font-size: 16px;
}
.notifyhide {
  opacity: 0;
  height: 0;
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  overflow: hidden;
}