Fix mortgage color
This commit is contained in:
parent
29f12e6067
commit
aadeb7d343
@ -1,51 +1,50 @@
|
||||
(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
|
||||
( function ( $ ) {
|
||||
'use strict';
|
||||
$( document ).ready( function ( $ ) {
|
||||
if ( typeof opalestate_mortgage !== 'undefined' ) {
|
||||
var currency = opalestate_mortgage.currency;
|
||||
|
||||
$('.opalestate-mortgage-form input').change(function (e) {
|
||||
e.preventDefault()
|
||||
var $el = $(this),
|
||||
$widget = $el.closest('.opalestate-mortgage-widget-wrap')
|
||||
$( '.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 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 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)
|
||||
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
|
||||
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:' + opalestate_mortgage.deposit_color +'; stroke-dashoffset: -' + price_percent + ';animation-delay: 0.25s\'>' +
|
||||
'</circle>' +
|
||||
'</svg>'
|
||||
);
|
||||
} );
|
||||
}
|
||||
|
||||
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)
|
||||
} );
|
||||
} )( jQuery );
|
||||
|
@ -16,12 +16,13 @@ $currency = opalestate_currency_symbol();
|
||||
wp_enqueue_script( 'opalestate-mortgage-calculator', OPALESTATE_PLUGIN_URL . 'assets/js/mortgage.js', [ 'jquery' ], OPALESTATE_VERSION, true );
|
||||
wp_enqueue_style( 'opalestate-mortgage-calculator', OPALESTATE_PLUGIN_URL . 'assets/mortgage.css', [], OPALESTATE_VERSION );
|
||||
|
||||
$deposit_color = apply_filters( 'opalestate_deposit_color', '#2f73e9' );
|
||||
|
||||
wp_localize_script( 'opalestate-scripts', 'opalestate_mortgage',
|
||||
[
|
||||
'ajax_url' => admin_url( 'admin-ajax.php' ),
|
||||
'currency' => esc_attr__( $currency ),
|
||||
'loan_amount_text' => esc_html__( 'Loan Amount', 'opalestate-pro' ),
|
||||
'your_payment_text' => esc_html__( 'Your payment', 'opalestate-pro' ),
|
||||
'deposit_color' => $deposit_color,
|
||||
]
|
||||
);
|
||||
|
||||
@ -47,8 +48,6 @@ $total = $deposit_start + ( $monthly * $number_of_payments_month );
|
||||
$price_percent = $loan_amount / $total * 100;
|
||||
$deposit_percent = $deposit_start / $total * 100;
|
||||
|
||||
$deposit_color = apply_filters( 'opalestate_deposit_color', '#2f73e9' );
|
||||
|
||||
$data_sale_price = [
|
||||
'id' => 'sale_price',
|
||||
'decimals' => opalestate_get_price_decimals(),
|
||||
@ -112,7 +111,8 @@ if ( opalestate_options( 'currency_position', 'before' ) == 'before' ) {
|
||||
<svg viewBox="0 0 64 64" class="pie">
|
||||
<circle r="25%" cx="50%" cy="50%" style="stroke-dasharray: <?php echo esc_attr( $price_percent ); ?> 100">
|
||||
</circle>
|
||||
<circle r="25%" cx="50%" cy="50%" style="stroke-dasharray: <?php echo esc_attr( $deposit_percent ); ?> 100; stroke: <?php echo esc_attr( $deposit_color ); ?>; stroke-dashoffset:
|
||||
<circle r="25%" cx="50%" cy="50%"
|
||||
style="stroke-dasharray: <?php echo esc_attr( $deposit_percent ); ?> 100; stroke: <?php echo esc_attr( $deposit_color ); ?>; stroke-dashoffset:
|
||||
-<?php echo esc_attr( $price_percent ); ?>; animation-delay: 0.25s">
|
||||
</circle>
|
||||
</svg>
|
||||
|
Loading…
Reference in New Issue
Block a user