https://www.slowfood.de/++resource++slwf.website/js/membership-amount.js?v=3.25.0

1"use strict";
2
3class Role {
4
5    static get roleName() {
6        return {
7            SINGLE: 'single',
8            FAMILY: 'family',
9            JUNIOR: 'junior',
10            STUDENT: 'student'
11        }
12    }
13
14    constructor(roleData) {
15        this.base = roleData['base'];
16        this.median = roleData['median'];
17        this.max = roleData['max'];
18    }
19}
20
21class Percent {
22    constructor() {
23        this.$percent = $('.percent');
24        this.$percentLine = $('.percent-line span');
25        this.$total = $('.total-amount span');
26    }
27
28    setPercent(value, role) {
29        if (value > 0) {
30            let percent = Math.min(value / (role.median - role.base), 1) * 50 +
31                Math.max(Math.min((value + role.base - role.median) / (role.max - role.median), 1), 0) * 50;
32
33            this.$percent.text(`${Math.ceil(percent)}%`);
34            this.$percent.css('color', '#ffcc00');
35            this.$percentLine.css('width', `${percent}%`);
36        }
37        else {
38            value = 0;
39            this.$percent.text(`0 %`);
40            this.$percent.css('color', '#999');
41            this.$percentLine.css('width', `0%`);
42        }
43        this.$total.text(value + role.base);
44    }
45}
46
47class Amount {
48
49    constructor($amount) {
50        this.$amount = $amount;
51        this.roles = this.parsingRoleData($amount.attr('roles_data'));
52        this.percent = new Percent(this.roles);
53        this.select = {};
54        this.selectRole = {};
55        this.initEvents();
56    }
57
58    get value() {
59        return Number(this.$amount.val())
60    }
61
62    set value(value) {
63        this.$amount.val(value);
64    }
65
66    parsingRoleData(data) {
67        let dataJson = JSON.parse(data);
68        let parsingData = {};
69        parsingData[Role.roleName.SINGLE] = new Role(dataJson[Role.roleName.SINGLE]);
70        parsingData[Role.roleName.FAMILY] = new Role(dataJson[Role.roleName.FAMILY]);
71        parsingData[Role.roleName.JUNIOR] = new Role(dataJson[Role.roleName.JUNIOR]);
72        parsingData[Role.roleName.STUDENT] = new Role(dataJson[Role.roleName.STUDENT]);
73        return parsingData;
74    }
75
76    changeRole(role) {
77        let roleData = this.roles[role];
78        this.selectRole = roleData;
79        this.percent.setPercent(this.value, roleData);
80        if (role == Role.roleName.FAMILY) {
81            $('.family_membership').show();
82        }
83        else {
84            $('.family_membership').hide();
85        }
86        if (role == Role.roleName.STUDENT) {
87            $('.student_membership').show();
88        }
89        else {
90            $('.student_membership').hide();
91        }
92    }
93
94    initEvents() {
95
96        this.$amount.on('keyup', () => {
97            let value = this.value;
98            this.percent.setPercent(value, this.selectRole)
99        });
100    }
101}
102
103$(function () {
104
105    let $amount = $('.amount');
106    if($amount.length > 0) {
107      let amount = new Amount($amount);
108
109      let $listItems = $('.as').siblings('ul').children('li');
110      $listItems.click(function () {
111          let role = $(this).attr('rel');
112          amount.changeRole(role);
113      });
114
115      let role = $('#as').val();
116      amount.changeRole(role);
117
118    }
119});