mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-22 07:53:39 +01:00
Implement widget countdown timer
This commit is contained in:
Hadi Nategh
parent
7ed677dd3e
commit
65b24440a0
111
api/js/etemplate/et2_widget_countdown.js
Normal file
111
api/js/etemplate/et2_widget_countdown.js
Normal file
@ -0,0 +1,111 @@
|
||||
"use strict";
|
||||
/**
|
||||
* EGroupware eTemplate2 - Countdown timer widget
|
||||
*
|
||||
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
|
||||
* @package etemplate
|
||||
* @subpackage api
|
||||
* @link http://www.egroupware.org
|
||||
* @author Hadi Nategh
|
||||
*/
|
||||
var __extends = (this && this.__extends) || (function () {
|
||||
var extendStatics = function (d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
};
|
||||
return function (d, b) {
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
};
|
||||
})();
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
/*egw:uses
|
||||
/vendor/bower-asset/jquery/dist/jquery.js;
|
||||
et2_core_baseWidget;
|
||||
*/
|
||||
require("./et2_core_common");
|
||||
var et2_core_inheritance_1 = require("./et2_core_inheritance");
|
||||
var et2_core_widget_1 = require("./et2_core_widget");
|
||||
var et2_core_baseWidget_1 = require("./et2_core_baseWidget");
|
||||
/**
|
||||
* Class which implements the "countdown" XET-Tag
|
||||
*/
|
||||
var et2_countdown = /** @class */ (function (_super) {
|
||||
__extends(et2_countdown, _super);
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
function et2_countdown(_parent, _attrs, _child) {
|
||||
var _this =
|
||||
// Call the inherited constructor
|
||||
_super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_countdown._attributes, _child || {})) || this;
|
||||
_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);
|
||||
// create a date widget
|
||||
_this.time = et2_core_widget_1.et2_createWidget('date-time', {});
|
||||
_this.setDOMNode(_this.container[0]);
|
||||
return _this;
|
||||
}
|
||||
et2_countdown.prototype.set_time = function (_time) {
|
||||
if (_time == "")
|
||||
return;
|
||||
this.time.set_value(_time);
|
||||
var self = this;
|
||||
this.timer = setInterval(function () {
|
||||
if (self._updateTimer() <= 0)
|
||||
clearInterval(this.timer);
|
||||
}, 1000);
|
||||
};
|
||||
et2_countdown.prototype._updateTimer = function () {
|
||||
var tempDate = new Date();
|
||||
var now = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate(), tempDate.getHours(), tempDate.getMinutes() - tempDate.getTimezoneOffset(), tempDate.getSeconds());
|
||||
var time = new Date(this.time.getValue());
|
||||
var distance = time.getTime() - now.getTime();
|
||||
if (distance < 0)
|
||||
return 0;
|
||||
this.days.text(Math.floor(distance / (1000 * 60 * 60 * 24)) + this._getIndicator("days"));
|
||||
this.hours.text(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) + this._getIndicator("hours"));
|
||||
this.minutes.text(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)) + this._getIndicator("minutes"));
|
||||
this.seconds.text(Math.floor((distance % (1000 * 60)) / 1000) + this._getIndicator("seconds"));
|
||||
return distance;
|
||||
};
|
||||
et2_countdown.prototype._getIndicator = function (_v) {
|
||||
return this.options.format == 's' ? egw.lang(_v).substr(0, 1) : egw.lang(_v);
|
||||
};
|
||||
et2_countdown._attributes = {
|
||||
time: {
|
||||
name: "time",
|
||||
type: "any",
|
||||
default: "",
|
||||
description: ""
|
||||
},
|
||||
format: {
|
||||
name: "display format",
|
||||
type: "string",
|
||||
default: "s",
|
||||
description: "Defines display format; s (Initial letter) or l (Complete word) display, default is s."
|
||||
}
|
||||
};
|
||||
return et2_countdown;
|
||||
}(et2_core_baseWidget_1.et2_baseWidget));
|
||||
exports.et2_countdown = et2_countdown;
|
||||
et2_core_widget_1.et2_register_widget(et2_countdown, ["countdown"]);
|
||||
//# sourceMappingURL=et2_widget_countdown.js.map
|
||||
114
api/js/etemplate/et2_widget_countdown.ts
Normal file
114
api/js/etemplate/et2_widget_countdown.ts
Normal file
@ -0,0 +1,114 @@
|
||||
/**
|
||||
* EGroupware eTemplate2 - Countdown timer widget
|
||||
*
|
||||
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
|
||||
* @package etemplate
|
||||
* @subpackage api
|
||||
* @link http://www.egroupware.org
|
||||
* @author Hadi Nategh
|
||||
*/
|
||||
|
||||
/*egw:uses
|
||||
/vendor/bower-asset/jquery/dist/jquery.js;
|
||||
et2_core_baseWidget;
|
||||
*/
|
||||
|
||||
import './et2_core_common';
|
||||
import {ClassWithAttributes} from "./et2_core_inheritance";
|
||||
import {et2_createWidget, et2_register_widget, WidgetConfig} from "./et2_core_widget";
|
||||
import {et2_date} from "./et2_widget_date";
|
||||
import {et2_baseWidget} from "./et2_core_baseWidget";
|
||||
|
||||
/**
|
||||
* Class which implements the "countdown" XET-Tag
|
||||
*/
|
||||
export class et2_countdown extends et2_baseWidget {
|
||||
static readonly _attributes: any = {
|
||||
time: {
|
||||
name: "time",
|
||||
type: "any",
|
||||
default: "",
|
||||
description: ""
|
||||
},
|
||||
format: {
|
||||
name: "display format",
|
||||
type: "string",
|
||||
default: "s", // s or l
|
||||
description: "Defines display format; s (Initial letter) or l (Complete word) display, default is s."
|
||||
}
|
||||
};
|
||||
|
||||
private time : et2_date;
|
||||
|
||||
private timer = null;
|
||||
private container : JQuery = null;
|
||||
private days : JQuery = null;
|
||||
private hours : JQuery = null;
|
||||
private minutes : JQuery = null;
|
||||
private seconds : JQuery = null;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(_parent, _attrs?: WidgetConfig, _child?: object) {
|
||||
// Call the inherited constructor
|
||||
super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_countdown._attributes, _child || {}));
|
||||
|
||||
// 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);
|
||||
// create a date widget
|
||||
this.time = <et2_date> et2_createWidget('date-time', {});
|
||||
this.setDOMNode(this.container[0]);
|
||||
}
|
||||
|
||||
public set_time(_time)
|
||||
{
|
||||
if (_time == "") return;
|
||||
this.time.set_value(_time);
|
||||
let self = this;
|
||||
this.timer = setInterval(function(){
|
||||
if (self._updateTimer() <= 0) clearInterval(this.timer);
|
||||
}, 1000);
|
||||
|
||||
}
|
||||
|
||||
private _updateTimer()
|
||||
{
|
||||
let tempDate = new Date();
|
||||
let now = new Date(
|
||||
tempDate.getFullYear(),
|
||||
tempDate.getMonth(),
|
||||
tempDate.getDate(),
|
||||
tempDate.getHours(),
|
||||
tempDate.getMinutes()-tempDate.getTimezoneOffset(),
|
||||
tempDate.getSeconds()
|
||||
);
|
||||
|
||||
let time = new Date (this.time.getValue());
|
||||
let distance = time.getTime() - now.getTime();
|
||||
|
||||
if (distance < 0) return 0;
|
||||
|
||||
this.days.text(Math.floor(distance / (1000 * 60 * 60 * 24))+this._getIndicator("days"));
|
||||
this.hours.text(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))+this._getIndicator("hours"));
|
||||
this.minutes.text(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))+this._getIndicator("minutes"));
|
||||
this.seconds.text(Math.floor((distance % (1000 * 60)) / 1000)+this._getIndicator("seconds"));
|
||||
|
||||
return distance;
|
||||
}
|
||||
|
||||
private _getIndicator(_v)
|
||||
{
|
||||
return this.options.format == 's' ? egw.lang(_v).substr(0,1) : egw.lang(_v);
|
||||
}
|
||||
}
|
||||
et2_register_widget(et2_countdown, ["countdown"]);
|
||||
@ -58,7 +58,7 @@
|
||||
et2_widget_barcode;
|
||||
et2_widget_itempicker;
|
||||
et2_widget_script;
|
||||
|
||||
et2_widget_countdown;
|
||||
et2_extension_nextmatch;
|
||||
et2_extension_customfields;
|
||||
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
et2_widget_barcode;
|
||||
et2_widget_itempicker;
|
||||
et2_widget_script;
|
||||
|
||||
et2_widget_countdown;
|
||||
et2_extension_nextmatch;
|
||||
et2_extension_customfields;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user