WebDev/Opal-Estate-Pro
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix mortgage color

Browse Source
This commit is contained in:
Hoang Huu 2019-09-11 17:05:01 +07:00
parent 29f12e6067
commit aadeb7d343
2 changed files with 49 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
assets/js/mortgage.js
View File

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

10
templates/parts/mortgage-calculator.php
View File

@ -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_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 ); 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', wp_localize_script( 'opalestate-scripts', 'opalestate_mortgage',
[ [
'ajax_url' => admin_url( 'admin-ajax.php' ), 'ajax_url' => admin_url( 'admin-ajax.php' ),
'currency' => esc_attr__( $currency ), 'currency' => esc_attr__( $currency ),
'loan_amount_text' => esc_html__( 'Loan Amount', 'opalestate-pro' ), 'deposit_color' => $deposit_color,
'your_payment_text' => esc_html__( 'Your payment', 'opalestate-pro' ),
] ]
); );
@ -47,8 +48,6 @@ $total = $deposit_start + ( $monthly * $number_of_payments_month );
$price_percent = $loan_amount / $total * 100; $price_percent = $loan_amount / $total * 100;
$deposit_percent = $deposit_start / $total * 100; $deposit_percent = $deposit_start / $total * 100;
$deposit_color = apply_filters( 'opalestate_deposit_color', '#2f73e9' );
$data_sale_price = [ $data_sale_price = [
'id' => 'sale_price', 'id' => 'sale_price',
'decimals' => opalestate_get_price_decimals(), 'decimals' => opalestate_get_price_decimals(),
@ -112,7 +111,8 @@ if ( opalestate_options( 'currency_position', 'before' ) == 'before' ) {
<svg viewBox="0 0 64 64" class="pie"> <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 r="25%" cx="50%" cy="50%" style="stroke-dasharray: <?php echo esc_attr( $price_percent ); ?> 100">
</circle> </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"> -<?php echo esc_attr( $price_percent ); ?>; animation-delay: 0.25s">
</circle> </circle>
</svg> </svg>