https://christa-markwalder.ch/uploads/assets/js/petition.js

1/**
2 * Created by dirkhuttig on 25.05.18.
3 */
4
5function PetitionProgressBar(element) {
6    this.element = element;
7    var $this = this;
8}
9
10PetitionProgressBar.prototype.draw = function (type, goal, count, direction, color, trailColor) {
11
12    var width = 4;
13    if (type === 'circle') {
14        width = 11;
15        var line = new ProgressBar.Circle("#" + this.element.attr("id"), this.getOptions(goal, count, direction, color, trailColor, width));
16
17        var progress = count / goal;
18        if (progress > 1)
19            progress = 1;
20        if (direction == 'up') {
21            line.animate(progress);
22        } else {
23            // Animate from right to left (down).
24            line.set(1);
25            line.animate(1 - progress);
26        }
27        // Animate from left to right (down)
28        /*
29         line.set(-1);
30         line.animate(progress-1);
31         */
32    } else {
33        var line = new ProgressBar.Line("#" + this.element.attr("id"), this.getOptions(goal, count, direction, color, trailColor, width));
34
35        var progress = count / goal;
36        if (progress > 1)
37            progress = 1;
38        if (direction == 'up') {
39            line.animate(progress);
40        } else {
41            // Animate from right to left (down).
42            line.set(1);
43            line.animate(1 - progress);
44        }
45        // Animate from left to right (down)
46        /*
47         line.set(-1);
48         line.animate(progress-1);
49         */
50
51    }
52
53};
54
55PetitionProgressBar.prototype.getOptions = function (goal, count, direction, color, trailColor, width) {
56
57    return {
58        //color: color,
59        step: function (state, line) {
60            var value = Math.round(goal * line.value());
61            if (value === 0) {
62                line.setText('');
63            } else {
64                line.setText(value);
65            }
66        },
67        strokeWidth: width,
68        trailWidth: width,
69        trailColor: trailColor,
70        step: function (state, circle, attachment) {
71            circle.path.setAttribute('stroke', color);
72        },
73        easing: 'bounce'
74
75        /*
76         text: {
77         style: {
78         // Text color.
79         // Default: same as stroke color (options.color)
80         color: '#fff',
81         position: 'absolute',
82         left: '0.5em',
83         top: 0,
84         padding: 0,
85         margin: 0,
86         transform: null
87         },
88         autoStyleContainer: false
89         },*/
90
91    };
92}