52 lines
2.1 KiB
JavaScript
52 lines
2.1 KiB
JavaScript
|
(function ($) {
|
||
|
|
'use strict'
|
||
|
|
$(document).ready(function ($) {
|
||
|
|
if (typeof opalestate_mortgage !== 'undefined') {
|
||
|
|
var currency = opalestate_mortgage.currency
|
||
|
|
var loan_amount_text = opalestate_mortgage.loan_amount_text
|
||
|
|
var your_payment_text = opalestate_mortgage.your_payment_text
|
||
|
|
|
||
|
|
$('.opalestate-mortgage-form input').change(function (e) {
|
||
|
|
e.preventDefault()
|
||
|
|
var $el = $(this),
|
||
|
|
$widget = $el.closest('.opalestate-mortgage-widget-wrap')
|
||
|
|
|
||
|
|
var sale_price = $widget.find('input[name="sale_price"]').val()
|
||
|
|
var precent_down = $widget.find('input[name="deposit"]').val()
|
||
|
|
var years = parseInt($widget.find('input[name="years"]').val(), 10)
|
||
|
|
var interest_rate = parseFloat($widget.find('input[name="interest_rate"]').val(), 10) / 100
|
||
|
|
|
||
|
|
var interest_rate_month = interest_rate / 12
|
||
|
|
var number_of_payments_month = years * 12
|
||
|
|
|
||
|
|
var loan_amount = sale_price - precent_down
|
||
|
|
var monthly_payment = parseFloat(
|
||
|
|
(loan_amount * interest_rate_month) / (1 - Math.pow(1 + interest_rate_month, -number_of_payments_month)))
|
||
|
|
.toFixed(2)
|
||
|
|
|
||
|
|
if (monthly_payment === 'NaN') {
|
||
|
|
monthly_payment = 0
|
||
|
|
}
|
||
|
|
|
||
|
|
var total = parseFloat(precent_down) + parseFloat(monthly_payment * number_of_payments_month)
|
||
|
|
var price_percent = loan_amount / total * 100
|
||
|
|
var deposit_percent = precent_down / total * 100
|
||
|
|
|
||
|
|
$widget.find('.opalestate-monthly-value').html(currency + monthly_payment)
|
||
|
|
|
||
|
|
$widget.find('.opalestate-loan-amount-value').html(currency + loan_amount)
|
||
|
|
|
||
|
|
$widget.find('.opalestate-mortgage-chart-svg').html(
|
||
|
|
'<svg viewBox=\'0 0 64 64\' class=\'pie\'>' +
|
||
|
|
'<circle r=\'25%\' cx=\'50%\' cy=\'50%\' style=\'stroke-dasharray: ' + price_percent + ' 100\'>' +
|
||
|
|
'</circle>' +
|
||
|
|
'<circle r=\'25%\' cx=\'50%\' cy=\'50%\' style=\'stroke-dasharray: ' + deposit_percent + ' 100;' +
|
||
|
|
' stroke:#2f73e9; stroke-dashoffset: -' + price_percent + ';animation-delay: 0.25s\'>' +
|
||
|
|
'</circle>' +
|
||
|
|
'</svg>'
|
||
|
|
)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})(jQuery)
|