mirrors/btcpayserver
1
0
Fork 0
mirror of https://github.com/btcpayserver/btcpayserver.git synced 2025-01-19 05:33:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

Do not rely on element's id for payment button (#3339)

Browse Source 
* Do not rely on element's id for payment button

* Update BTCPayServer/Views/UIStores/PayButton.cshtml

Co-authored-by: d11n <mail@dennisreimann.de>

* Update BTCPayServer/Views/UIStores/PayButton.cshtml

Co-authored-by: d11n <mail@dennisreimann.de>

* Update BTCPayServer/Views/UIStores/PayButton.cshtml

Co-authored-by: d11n <mail@dennisreimann.de>

* Update BTCPayServer/Views/UIStores/PayButton.cshtml

Co-authored-by: d11n <mail@dennisreimann.de>

Co-authored-by: d11n <mail@dennisreimann.de>
This commit is contained in:
Nicolas Dorier 2022-01-24 20:05:22 +09:00 committed by GitHub
parent 7a66d0feda
commit 28dbf10a31
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
BTCPayServer/Views/UIStores/PayButton.cshtml
View File

@ -41,7 +41,8 @@
<template id="template-price-buttons" csp-allow>
function handlePlusMinus(event) {
event.preventDefault();
const el = document.querySelector('#btcpay-input-price');
const root = event.target.closest('.btcpay-form');
const el = root.querySelector('.btcpay-input-price');
const step = parseInt(event.target.dataset.step) || 1;
const min = parseInt(event.target.dataset.min) || 1;
const max = parseInt(event.target.dataset.max);
@ -57,8 +58,9 @@
<template id="template-price-input" csp-allow>
function handlePriceInput(event) {
event.preventDefault();
const root = event.target.closest('.btcpay-form');
const price = parseInt(event.target.dataset.price);
if (isNaN(event.target.value)) document.querySelector('#btcpay-input-price').value = price;
if (isNaN(event.target.value)) root.querySelector('.btcpay-input-price').value = price;
const min = parseInt(event.target.getAttribute('min')) || 1;
const max = parseInt(event.target.getAttribute('max'));
if (event.target.value < min) {
@ -71,7 +73,8 @@
<template id="template-price-slider" csp-allow>
function handleSliderChange(event) {
event.preventDefault();
const el = document.querySelector('#btcpay-input-price');
const root = event.target.closest('.btcpay-form');
const el = root.querySelector('.btcpay-input-price');
const price = parseInt(el.value);
const min = parseInt(event.target.getAttribute('min')) || 1;
const max = parseInt(event.target.getAttribute('max'));
@ -80,11 +83,11 @@
} else if (price > max) {
el.value = max;
}
document.querySelector('#btcpay-input-range').value = el.value;
root.querySelector('.btcpay-input-range').value = el.value;
}
function handleSliderInput(event) {
document.querySelector('#btcpay-input-price').value = document.querySelector('#btcpay-input-range').value;
event.target.closest('.btcpay-form').querySelector('.btcpay-input-price').value = event.target.value;
}
</template>
@ -431,7 +434,11 @@
.btcpay-form select:hover {
border-color: #ccc;
}
#btcpay-input-price {
.btcpay-form option {
color: #000;
background: rgba(0,0,0,.1);
}
.btcpay-input-price {
-moz-appearance: textfield;
border: none;
box-shadow: none;
@ -443,8 +450,8 @@
background: #fff;
}
#btcpay-input-price::-webkit-outer-spin-button,
#btcpay-input-price::-webkit-inner-spin-button {
.btcpay-input-price::-webkit-outer-spin-button,
.btcpay-input-price::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

4
BTCPayServer/wwwroot/paybutton/paybutton.js
View File

@ -204,12 +204,12 @@ function addPlusMinusButton(type, step, min, max) {
function addInputPrice(name, price, widthInput, min = 0, max = 'none', step = 'any', onChange = null) {
if (!price) price = min
return ` <input id="btcpay-input-price" type="number" name="${esc(name)}" min="${min}" max="${max}" step="${step}" value="${price}" data-price="${price}" style="width:${widthInput};" oninput="handlePriceInput(event);return false"${onChange ? ` onchange="${onChange}"` : ''} />\n`;
return ` <input class="btcpay-input-price" type="number" name="${esc(name)}" min="${min}" max="${max}" step="${step}" value="${price}" data-price="${price}" style="width:${widthInput};" oninput="handlePriceInput(event);return false"${onChange ? ` onchange="${onChange}"` : ''} />\n`;
}
function addSlider(price, min, max, step, width) {
if (!price) price = min
return ` <input id="btcpay-input-range" type="range" class="btcpay-input-range" min="${min}" max="${max}" step="${step}" value="${price}" style="width:${width};margin-bottom:15px;" oninput="handleSliderInput(event);return false" />\n`;
return ` <input type="range" class="btcpay-input-range" min="${min}" max="${max}" step="${step}" value="${price}" style="width:${width};margin-bottom:15px;" oninput="handleSliderInput(event);return false" />\n`;
}
function addSelectCurrency(currency) {