egroupware_official/api/js/etemplate/et2_widget_countdown.js

/**
 * EGroupware eTemplate2 - Countdown timer widget
 *
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @package etemplate
 * @subpackage api
 * @link https://www.egroupware.org
 * @author Hadi Nategh
 */
/*egw:uses
    /vendor/bower-asset/jquery/dist/jquery.js;
    et2_core_baseWidget;
*/
import { et2_no_init } from "./et2_core_common";
import { ClassWithAttributes } from "./et2_core_inheritance";
import { et2_register_widget } from "./et2_core_widget";
import { et2_valueWidget } from "./et2_core_valueWidget";
import { egw } from "../jsapi/egw_global";
/**
 * Class which implements the "countdown" XET-Tag
 *
 * Value for countdown is an integer duration in seconds or a server-side to a duration converted expiry datetime.
 *
 * The duration has the benefit, that it does not depend on the correct set time and timezone of the browser / computer of the user.
 */
export class et2_countdown extends et2_valueWidget {
    /**
     * Constructor
     */
    constructor(_parent, _attrs, _child) {
        // Call the inherited constructor
        super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_countdown._attributes, _child || {}));
        this.timer = null;
        this.container = null;
        this.days = null;
        this.hours = null;
        this.minutes = null;
        this.seconds = null;
        // Build countdown dom container
        this.container = jQuery(document.createElement("div"))
            .addClass("et2_countdown");
        this.days = jQuery(document.createElement("span"))
            .addClass("et2_countdown_days").appendTo(this.container);
        this.hours = jQuery(document.createElement("span"))
            .addClass("et2_countdown_hours").appendTo(this.container);
        this.minutes = jQuery(document.createElement("span"))
            .addClass("et2_countdown_minutes").appendTo(this.container);
        this.seconds = jQuery(document.createElement("span"))
            .addClass("et2_countdown_seconds").appendTo(this.container);
        this.setDOMNode(this.container[0]);
    }
    set_value(_time) {
        if (isNaN(_time))
            return;
        super.set_value(_time);
        this.time = new Date();
        this.time.setSeconds(this.time.getSeconds() + parseInt(_time));
        let self = this;
        this.timer = setInterval(function () {
            if (self._updateTimer() <= 0) {
                clearInterval(self.timer);
                if (typeof self.onFinish == "function")
                    self.onFinish();
            }
        }, 1000);
    }
    _updateTimer() {
        let now = new Date();
        let distance = this.time.getTime() - now.getTime();
        if (distance < 0)
            return 0;
        if (this.options.alarm > 0 && this.options.alarm == distance / 1000 && typeof this.onAlarm == 'function') {
            this.onAlarm();
        }
        let values = {
            days: Math.floor(distance / (1000 * 60 * 60 * 24)),
            hours: Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
            minutes: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)),
            secounds: Math.floor((distance % (1000 * 60)) / 1000)
        };
        this.days.text(values.days + this._getIndicator("days"));
        this.hours.text(values.hours + this._getIndicator("hours"));
        this.minutes.text(values.minutes + this._getIndicator("minutes"));
        this.seconds.text(values.secounds + this._getIndicator("seconds"));
        if (this.options.hideEmpties) {
            if (values.days == 0) {
                this.days.hide();
                if (values.hours == 0) {
                    this.hours.hide();
                    if (values.minutes == 0) {
                        this.minutes.hide();
                        if (values.secounds == 0)
                            this.seconds.hide();
                    }
                }
            }
        }
        if (this.options.precision) {
            const units = ['days', 'hours', 'minutes', 'seconds'];
            for (let u = 0; u < 4; ++u) {
                if (values[units[u]]) {
                    for (let n = u + this.options.precision; n < 4; n++) {
                        this[units[n]].hide();
                    }
                    break;
                }
                else {
                    this[units[u]].hide();
                }
            }
        }
        return distance;
    }
    _getIndicator(_v) {
        return this.options.format == 's' ? egw.lang(_v).substr(0, 1) : egw.lang(_v);
    }
}
et2_countdown._attributes = {
    format: {
        name: "display format",
        type: "string",
        default: "s",
        description: "Defines display format; s (Initial letter) or l (Complete word) display, default is s."
    },
    onFinish: {
        name: "on finish countdown",
        type: "js",
        default: et2_no_init,
        description: "Callback function to call when the countdown is finished."
    },
    hideEmpties: {
        name: "hide empties",
        type: "string",
        default: true,
        description: "Only displays none empty values."
    },
    precision: {
        name: "how many counters to show",
        type: "integer",
        default: 0,
        description: "Limit number of counters, eg. 2 does not show minutes and seconds, if days are displayed"
    },
    alarm: {
        name: "alarm",
        type: "any",
        default: "",
        description: "Defines an alarm set before the countdown is finished, it should be in seconds"
    },
    onAlarm: {
        name: "alarm callback",
        type: "js",
        default: "",
        description: "Defines a callback to gets called at alarm - timer. This only will work if there's an alarm set."
    }
};
et2_register_widget(et2_countdown, ["countdown"]);
//# sourceMappingURL=et2_widget_countdown.js.map