Skip to content

Instantly share code, notes, and snippets.

@norfish

norfish/toast.js

Created January 25, 2018 11:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save norfish/a4fcd7c5e75ac71e61a38a0eebd3abe9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save norfish/a4fcd7c5e75ac71e61a38a0eebd3abe9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. norfish created this gist Jan 25, 2018.
    139 changes: 139 additions & 0 deletions toast.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,139 @@
    /**
    * @desc: Toast
    * @authors: yongxiang.li
    * @date: 2016-08-10 18:49:05
    *
    * Toast('message')
    */

    // TODO 增加位置自定义

    const Toast = function toast(message, options) {
    options = getOptions(options);
    this.delayTime = options.delay;
    this.position = POSITION[options.position];
    this.$wrap = [];
    this.init();
    };

    const docBody = document.body;
    const POSITION = {
    TOP: {
    top: '20%',
    },
    MIDDLE: {
    top: '50%',
    },
    BOTTOM: {
    top: '80%',
    },
    };

    Toast.prototype = {
    constructor: Toast,

    init() {
    const wrap = document.querySelector('.js-tips-wrap_common_toast');
    if (wrap.length) {
    this.$wrap = wrap;
    return;
    }
    this.$wrap = document.createElement('div');
    this.$wrap.classList.add(
    'hide js-tips-wrap_common_toast tips-wrap_common_toast'
    );
    docBody.appendChild(this.$wrap);
    },

    template: '<div class="toast-wrap"><p class="toast">{{message}}</p></div>',

    _getTemplate() {
    if (this.template) {
    return this.template;
    }

    this.template =
    '<div class="toast-wrap"><p class="toast">{{message}}</p></div>';
    },

    animationend(wrap, animateName, cb) {
    wrap.one(
    'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
    function wrapone() {
    $(this).removeClass(animateName + ' animated');
    }
    );
    },

    show(message) {
    let template = this._getTemplate();
    let _html = template.replace(/{{message}}/g, message);
    let wrap = this.$wrap;
    const self = this;
    if (!wrap.length) {
    return;
    }

    wrap
    .html(_html)
    .removeClass('hide')
    .find('.toast-wrap')
    .addClass('bounceIn animated');

    wrap
    .find('.toast-wrap')
    .one(
    'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
    function() {
    $(this).removeClass('bounceIn animated');
    self.delayHide();
    }
    );
    },

    delayHide() {
    setTimeout(() => {
    this.doHide();
    }, this.delayTime);
    },

    doHide() {
    var wrap = this.$wrap;

    wrap
    .find('.toast-wrap')
    .one(
    'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
    function() {
    wrap.html('').addClass('hide');
    }
    );

    wrap.find('.toast-wrap').addClass('bounceOut animated');
    },
    };

    function getDefaultOpts() {
    return {
    delay: 1000,
    };
    }

    function getOptions(options) {
    options = options || {};
    return $.extend(getDefaultOpts(), options);
    }

    function startToast(message, conf) {
    var toast = new Toast(conf);
    toast.show(message);
    }

    startToast.create = function(conf) {
    return new Toast(conf);
    };

    // add Toast to globle namespace
    window.Toast = startToast;

    module.exports = startToast;