All Downloads are FREE. Search and download functionalities are using the official Maven repository.

META-INF.resources.primefaces-extensions.analogclock.analogclock.js Maven / Gradle / Ivy

There is a newer version: 15.0.0-RC1
Show newest version
/**
 * 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