![JAR search and dependency download from the Maven repository](/logo.png)
META-INF.resources.primefaces-extensions.analogclock.analogclock.js Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of primefaces-extensions Show documentation
Show all versions of primefaces-extensions Show documentation
PrimeFaces Extensions Project for Maven.
/**
* Primefaces Extension AnalogClock Widget
*
* @author f.strazzullo
*/
PrimeFacesExt.widget.AnalogClock = PrimeFaces.widget.BaseWidget.extend({
init: function (cfg) {
this._super(cfg);
this.startTime = cfg.time && cfg.mode !== 'client' ? moment(cfg.time) : moment();
this.sync = !(cfg.colorTheme || cfg.themeObject);
this.colorTheme = cfg.colorTheme || 'aristo';
this.themeObject = cfg.themeObject ? JSON.parse(cfg.themeObject) : PrimeFacesExt.widget.AnalogClock.colorThemes[this.colorTheme];
if (!this.themeObject) {
this.themeObject = PrimeFacesExt.widget.AnalogClock.defaultColorTheme;
}
this.interval = setInterval((function (self) {
return function () {
self.update();
}
})(this), 1000);
var that = this;
if (this.sync) {
$(document)
.on(
"PrimeFacesExt.themeChanged",
function (event, theme) {
that.colorTheme = theme;
that.themeObject = PrimeFaces.widget.AnalogClock.colorThemes[that.colorTheme];
that.update();
console.log("changed in " + theme);
});
}
this.draw();
},
reloadDimensions: function(){
var width = _.isFinite(this.cfg.width) ? this.cfg.width : this.jq.width();
this.dimensions = new PrimeFacesExt.widget.AnalogClock.Dimensions(width);
},
draw: function () {
this.reloadDimensions();
this.canvas = Raphael(this.id, this.dimensions.size,this.dimensions.size);
this.clock = this.canvas.circle(this.dimensions.half,this.dimensions.half, this.dimensions.clock_width);
this.draw_hour_signs();
this.draw_hands();
this.pin = this.canvas.circle(this.dimensions.half,this.dimensions.half, this.dimensions.pin_width);
this.update();
},
draw_hour_signs: function () {
this.hour_sign = [];
for (i = 0; i < 12; i++) {
(function (i,that){
var start_x = that.dimensions.half + Math.round(that.dimensions.hour_sign_min_size * Math.cos(30 * i * Math.PI / 180));
var start_y = that.dimensions.half + Math.round(that.dimensions.hour_sign_min_size * Math.sin(30 * i * Math.PI / 180));
var end_x = that.dimensions.half + Math.round(that.dimensions.hour_sign_max_size * Math.cos(30 * i * Math.PI / 180));
var end_y = that.dimensions.half + Math.round(that.dimensions.hour_sign_max_size * Math.sin(30 * i * Math.PI / 180));
that.hour_sign.push(that.canvas.path("M" + start_x + " " + start_y + "L" + end_x + " " + end_y));
})(i,this);
}
},
draw_hands: function () {
this.hour_hand = this.canvas.path("M" + this.dimensions.half + " " + this.dimensions.half + "L" + this.dimensions.half + " " + this.dimensions.hour_hand_start_position);
this.minute_hand = this.canvas.path("M" + this.dimensions.half + " " + this.dimensions.half + "L" + this.dimensions.half + " " + this.dimensions.minute_hand_start_position);
this.second_hand = this.canvas.path("M" + this.dimensions.half + " " + this.dimensions.half + "L" + this.dimensions.half + " " + this.dimensions.second_hand_start_position);
},
update: function () {
var now = this.startTime;
this.hour_hand.rotate(30 * now.hours() + (this.startTime.minutes() / 2.5),this.dimensions.half, this.dimensions.half);
this.minute_hand.rotate(6 * this.startTime.minutes(),this.dimensions.half, this.dimensions.half);
this.second_hand.rotate(6 * this.startTime.seconds(),this.dimensions.half, this.dimensions.half);
this.clock.attr({
"fill": this.themeObject.face,
"stroke": this.themeObject.border,
"stroke-width": "5"
});
for (var i=0; i
© 2015 - 2025 Weber Informatics LLC | Privacy Policy