日志展示

展示日志信息

This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://update.greasyfork.org/scripts/20844/133182/%E6%97%A5%E5%BF%97%E5%B1%95%E7%A4%BA.js

function Logger () {
    this.container = document.createElement('div');

    this.container.style.cssText = [
        'display: flex',
        'flex-flow: column-reverse nowrap',
        'position: fixed',
        'left: 2em',
        'bottom: 2em',
        'margin-top: 5px'
    ].join(';');
    document.body.appendChild(this.container);
}

Logger.prototype.createLogItem = function () {
    var el = document.createElement('div');

    el.style.minWidth = '20em';
    el.style.padding = '1em 2em';
    el.style.borderRadius = '9px';
    el.style.marginBottom = '60px';
    el.style.marginTop = '10px';
    el.style.opacity = 0;
    el.style.transition = 'margin-bottom 1s, opacity .7s, margin-left .5s';

    setTimeout(function () {
        el.style.opacity = 1;
        el.style.marginBottom = '0px';
    }, 20);
    return el;
};

Logger.prototype.stick = function (text) {
    var el = this.createLogItem();
    el.style.backgroundColor = '#5cb75c';

    var textBlock = document.createTextNode(text);
    el.appendChild(textBlock);
    this.container.appendChild(el);

    return el;
};

Logger.prototype.show = function (text) {
    var el = this.stick(text);
    setTimeout(function (self) {
        self.remove(el);
    }, 5000, this);
};

Logger.prototype.remove = function (el) {
    el.style.marginLeft = '-60px';
    el.style.opacity = 0;
    setTimeout(function () {
        if (el && el.parentNode) {
            el.parentNode.removeChild(el);
        }
    }, 700);
};