Skip to content

Commit 9470c6f

Browse files
author
Gypsophila
committed
fix: render of input element
1 parent f3da21b commit 9470c6f

10 files changed

Lines changed: 146 additions & 93 deletions

File tree

‎README.md‎

Lines changed: 7 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ npm install mixpayjs
2323
In browser:
2424

2525
```html
26-
<link href="/path/to/mixpay.css" rel="stylesheet" />
27-
<script src="/path/to/mixpay.js"></script>
26+
<link href="https://cdn.jsdelivr.net/npm/mixpayjs/dist/mixpay.min.css" rel="stylesheet" />
27+
<script src="https://cdn.jsdelivr.net/npm/mixpayjs/dist/mixpay.min.js""></script>
2828
```
2929
3030
#### Syntax
@@ -75,7 +75,6 @@ mixpay.pay({
7575
quoteAmount: '',
7676
paymentAssetId: '',
7777
note: '',
78-
isChain: true,
7978
});
8079
```
8180
@@ -115,36 +114,17 @@ mixpay.pay({
115114
- note
116115
- traceId
117116
117+
### show()
118+
### hide()
119+
120+
show/hide the modal, if `isModal` is `true`
121+
118122
## Global Methods
119123
120124
### newUUID()
121125
122126
create a random UUID for `clientId` and `traceId`
123127
124-
### getQuoteAssets()
125-
126-
Get quote assets support cryptocurrency and fiat currency. See the [Quote Assets](https://developers.mixpay.me/docs/api/assets/quote-assets) section in guide.
127-
128-
### getPaymentAssets()
129-
130-
Get payment assets only support cryptocurrency. See the [Payment Assets](https://developers.mixpay.me/docs/api/assets/payment-assets) section in guide.
131-
132-
### getSettlementAssets()
133-
134-
Get settlement assets support cryptocurrency and fiat currency. See the [Settlement Assets](https://developers.mixpay.me/docs/api/assets/settlement-assets) section in guide.
135-
136-
### createPayment(options)
137-
138-
Create a payment. See the [Accepting Payments](https://developers.mixpay.me/docs/api/payments/accepting-payments) section and the [On-chain Payments](https://developers.mixpay.me/docs/api/payments/onchain-payments) section in guide.
139-
140-
### getPaymentDetail(traceId)
141-
142-
The details of the payment. See the [Payments Results](https://developers.mixpay.me/docs/api/payments/payments-results) section in guide.
143-
144-
### getEstPaymentAmount(options)
145-
146-
Get the estimated price and the estimated amount of the transaction. See the [Payments Estimated](https://developers.mixpay.me/docs/api/payments/payments-estimated) section in guide.
147-
148128
## Resources
149129
150130
* [Documentation API](https://developers.mixpay.me/docs/api-overview)

‎dist/mixpay.common.js‎

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
/*!
22
* mixpayjs v1.1.0
3-
* https://MixPayHQ.github.io/mixpayjs
3+
* https://mixpay.me
44
*
55
* Copyright 2022 gypsophila@mathunion.xyz
66
* Released under the MIT license
77
*
8-
* Date: 2022-06-29T02:21:04.018Z
8+
* Date: 2022-06-30T01:37:04.390Z
99
*/
1010

1111
'use strict';
@@ -2197,6 +2197,7 @@ var CONFIG = {
21972197
var OPTIONS_DEFAULT = {
21982198
isModal: true,
21992199
hasMask: true,
2200+
fontSize: 14,
22002201
onReady: null,
22012202
onPaymentCreate: null,
22022203
onPaymentSuccess: null,
@@ -2808,10 +2809,19 @@ MixPay.prototype = {
28082809
render: function render() {
28092810
var _this$options = this.options,
28102811
isModal = _this$options.isModal,
2811-
hasMask = _this$options.hasMask;
2812+
hasMask = _this$options.hasMask,
2813+
fontSize = _this$options.fontSize;
28122814
var $wrapper = this.$wrapper;
28132815
var $element = document.createElement('div');
2816+
2817+
var _fontSize = parseFloat(fontSize);
2818+
2819+
if (Number.isNaN(_fontSize)) {
2820+
_fontSize = 14;
2821+
}
2822+
28142823
$element.classList.add(NAMESPACE);
2824+
setStyle($element, 'font-size', _fontSize + 'px');
28152825

28162826
if (isModal) {
28172827
toggleClass($element, 'is-modal');
@@ -2905,8 +2915,7 @@ MixPay.prototype = {
29052915
var $field = query(that.$element, t("field[data-page=checkout-".concat(isChain ? 'chain' : 'mixin', "]")));
29062916
var $btns = query($field, t('btn-group'));
29072917
setStyle($btns, 'visibility', 'hidden');
2908-
that.$apis.getPaymentResult(clientId, traceId) // eslint-disable-next-line consistent-return
2909-
.then(function (result) {
2918+
that.$apis.getPaymentResult(clientId, traceId).then(function (result) {
29102919
var r = result.data;
29112920
that.result.status = r.status;
29122921
that.result.payableAmount = r.payableAmount;
@@ -3415,15 +3424,17 @@ MixPay.prototype = {
34153424
activeField = fields[activeIndex];
34163425

34173426
if (payAssetId) {
3418-
toggleClass(q('dropdown__toggle'), 'disabled');
3427+
q('dropdown__toggle').classList.add('disabled'); // toggleClass(q('dropdown__toggle'), 'disabled');
3428+
} else {
3429+
q('dropdown__toggle').classList.remove('disabled');
34193430
}
34203431

34213432
setHTML(q('dropdown__selected'), "<img src=\"".concat(qIcon, "\" /><span>").concat(qSymbol, "</span>"));
34223433
setHTML(q('dropdown__menu'), quoteAssets.map(function (item) {
34233434
return "<li data-id=\"".concat(item.assetId, "\"><img src=\"").concat(item.iconUrl, "\" /><span>").concat(item.symbol, "</span></li>");
34243435
}).join(''));
34253436
var qInput = q('input-item__input');
3426-
qInput.setAttribute('value', quoteAmount);
3437+
qInput.value = quoteAmount;
34273438
qInput.setAttribute('placeholder', "".concat(minQuoteAmount, " - ").concat(maxQuoteAmount));
34283439
setText(q('input-item__right'), qSymbol);
34293440
setHTML(q('filed__error'), '');
@@ -3438,7 +3449,7 @@ MixPay.prototype = {
34383449
return "<li data-id=\"".concat(item.assetId, "\"><img src=\"").concat(item.iconUrl, "\" /><span>").concat(item.symbol, "</span><em>").concat(item.network, "</em></li>");
34393450
}).join(''));
34403451
var pInput = queryAll(activeField, 'input')[paymentMethod === 'chain' ? 1 : 0];
3441-
pInput.setAttribute('checked', true);
3452+
pInput.checked = true;
34423453
setStyle(q('btn-inline'), 'display', payAssetId && payAmount > 0 ? 'none' : 'inline-flex');
34433454
break;
34443455

@@ -3544,13 +3555,17 @@ MixPay.prototype = {
35443555
});
35453556
},
35463557
show: function show() {
3547-
this.isShow = true;
3548-
setStyle(this.$element, 'display', 'block');
3558+
if (this.options.isModal && !this.isShow) {
3559+
this.isShow = true;
3560+
setStyle(this.$element, 'display', 'block');
3561+
}
35493562
},
35503563
hide: function hide() {
3551-
this.isShow = false;
3552-
setStyle(this.$element, 'display', 'none');
3553-
dispatchEvent(this.$element, EVENT_MODAL_CLOSE);
3564+
if (this.options.isModal && this.isShow) {
3565+
this.isShow = false;
3566+
setStyle(this.$element, 'display', 'none');
3567+
dispatchEvent(this.$element, EVENT_MODAL_CLOSE);
3568+
}
35543569
},
35553570
pay: function pay(options) {
35563571
var _this9 = this;

‎dist/mixpay.esm.js‎

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
/*!
22
* mixpayjs v1.1.0
3-
* https://MixPayHQ.github.io/mixpayjs
3+
* https://mixpay.me
44
*
55
* Copyright 2022 gypsophila@mathunion.xyz
66
* Released under the MIT license
77
*
8-
* Date: 2022-06-29T02:21:04.018Z
8+
* Date: 2022-06-30T01:37:04.390Z
99
*/
1010

1111
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -2195,6 +2195,7 @@ var CONFIG = {
21952195
var OPTIONS_DEFAULT = {
21962196
isModal: true,
21972197
hasMask: true,
2198+
fontSize: 14,
21982199
onReady: null,
21992200
onPaymentCreate: null,
22002201
onPaymentSuccess: null,
@@ -2806,10 +2807,19 @@ MixPay.prototype = {
28062807
render: function render() {
28072808
var _this$options = this.options,
28082809
isModal = _this$options.isModal,
2809-
hasMask = _this$options.hasMask;
2810+
hasMask = _this$options.hasMask,
2811+
fontSize = _this$options.fontSize;
28102812
var $wrapper = this.$wrapper;
28112813
var $element = document.createElement('div');
2814+
2815+
var _fontSize = parseFloat(fontSize);
2816+
2817+
if (Number.isNaN(_fontSize)) {
2818+
_fontSize = 14;
2819+
}
2820+
28122821
$element.classList.add(NAMESPACE);
2822+
setStyle($element, 'font-size', _fontSize + 'px');
28132823

28142824
if (isModal) {
28152825
toggleClass($element, 'is-modal');
@@ -2903,8 +2913,7 @@ MixPay.prototype = {
29032913
var $field = query(that.$element, t("field[data-page=checkout-".concat(isChain ? 'chain' : 'mixin', "]")));
29042914
var $btns = query($field, t('btn-group'));
29052915
setStyle($btns, 'visibility', 'hidden');
2906-
that.$apis.getPaymentResult(clientId, traceId) // eslint-disable-next-line consistent-return
2907-
.then(function (result) {
2916+
that.$apis.getPaymentResult(clientId, traceId).then(function (result) {
29082917
var r = result.data;
29092918
that.result.status = r.status;
29102919
that.result.payableAmount = r.payableAmount;
@@ -3413,15 +3422,17 @@ MixPay.prototype = {
34133422
activeField = fields[activeIndex];
34143423

34153424
if (payAssetId) {
3416-
toggleClass(q('dropdown__toggle'), 'disabled');
3425+
q('dropdown__toggle').classList.add('disabled'); // toggleClass(q('dropdown__toggle'), 'disabled');
3426+
} else {
3427+
q('dropdown__toggle').classList.remove('disabled');
34173428
}
34183429

34193430
setHTML(q('dropdown__selected'), "<img src=\"".concat(qIcon, "\" /><span>").concat(qSymbol, "</span>"));
34203431
setHTML(q('dropdown__menu'), quoteAssets.map(function (item) {
34213432
return "<li data-id=\"".concat(item.assetId, "\"><img src=\"").concat(item.iconUrl, "\" /><span>").concat(item.symbol, "</span></li>");
34223433
}).join(''));
34233434
var qInput = q('input-item__input');
3424-
qInput.setAttribute('value', quoteAmount);
3435+
qInput.value = quoteAmount;
34253436
qInput.setAttribute('placeholder', "".concat(minQuoteAmount, " - ").concat(maxQuoteAmount));
34263437
setText(q('input-item__right'), qSymbol);
34273438
setHTML(q('filed__error'), '');
@@ -3436,7 +3447,7 @@ MixPay.prototype = {
34363447
return "<li data-id=\"".concat(item.assetId, "\"><img src=\"").concat(item.iconUrl, "\" /><span>").concat(item.symbol, "</span><em>").concat(item.network, "</em></li>");
34373448
}).join(''));
34383449
var pInput = queryAll(activeField, 'input')[paymentMethod === 'chain' ? 1 : 0];
3439-
pInput.setAttribute('checked', true);
3450+
pInput.checked = true;
34403451
setStyle(q('btn-inline'), 'display', payAssetId && payAmount > 0 ? 'none' : 'inline-flex');
34413452
break;
34423453

@@ -3542,13 +3553,17 @@ MixPay.prototype = {
35423553
});
35433554
},
35443555
show: function show() {
3545-
this.isShow = true;
3546-
setStyle(this.$element, 'display', 'block');
3556+
if (this.options.isModal && !this.isShow) {
3557+
this.isShow = true;
3558+
setStyle(this.$element, 'display', 'block');
3559+
}
35473560
},
35483561
hide: function hide() {
3549-
this.isShow = false;
3550-
setStyle(this.$element, 'display', 'none');
3551-
dispatchEvent(this.$element, EVENT_MODAL_CLOSE);
3562+
if (this.options.isModal && this.isShow) {
3563+
this.isShow = false;
3564+
setStyle(this.$element, 'display', 'none');
3565+
dispatchEvent(this.$element, EVENT_MODAL_CLOSE);
3566+
}
35523567
},
35533568
pay: function pay(options) {
35543569
var _this9 = this;

‎dist/mixpay.js‎

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
/*!
22
* mixpayjs v1.1.0
3-
* https://MixPayHQ.github.io/mixpayjs
3+
* https://mixpay.me
44
*
55
* Copyright 2022 gypsophila@mathunion.xyz
66
* Released under the MIT license
77
*
8-
* Date: 2022-06-29T02:21:04.018Z
8+
* Date: 2022-06-30T01:37:04.390Z
99
*/
1010

1111
(function (global, factory) {
@@ -2201,6 +2201,7 @@
22012201
var OPTIONS_DEFAULT = {
22022202
isModal: true,
22032203
hasMask: true,
2204+
fontSize: 14,
22042205
onReady: null,
22052206
onPaymentCreate: null,
22062207
onPaymentSuccess: null,
@@ -2812,10 +2813,19 @@
28122813
render: function render() {
28132814
var _this$options = this.options,
28142815
isModal = _this$options.isModal,
2815-
hasMask = _this$options.hasMask;
2816+
hasMask = _this$options.hasMask,
2817+
fontSize = _this$options.fontSize;
28162818
var $wrapper = this.$wrapper;
28172819
var $element = document.createElement('div');
2820+
2821+
var _fontSize = parseFloat(fontSize);
2822+
2823+
if (Number.isNaN(_fontSize)) {
2824+
_fontSize = 14;
2825+
}
2826+
28182827
$element.classList.add(NAMESPACE);
2828+
setStyle($element, 'font-size', _fontSize + 'px');
28192829

28202830
if (isModal) {
28212831
toggleClass($element, 'is-modal');
@@ -2909,8 +2919,7 @@
29092919
var $field = query(that.$element, t("field[data-page=checkout-".concat(isChain ? 'chain' : 'mixin', "]")));
29102920
var $btns = query($field, t('btn-group'));
29112921
setStyle($btns, 'visibility', 'hidden');
2912-
that.$apis.getPaymentResult(clientId, traceId) // eslint-disable-next-line consistent-return
2913-
.then(function (result) {
2922+
that.$apis.getPaymentResult(clientId, traceId).then(function (result) {
29142923
var r = result.data;
29152924
that.result.status = r.status;
29162925
that.result.payableAmount = r.payableAmount;
@@ -3419,15 +3428,17 @@
34193428
activeField = fields[activeIndex];
34203429

34213430
if (payAssetId) {
3422-
toggleClass(q('dropdown__toggle'), 'disabled');
3431+
q('dropdown__toggle').classList.add('disabled'); // toggleClass(q('dropdown__toggle'), 'disabled');
3432+
} else {
3433+
q('dropdown__toggle').classList.remove('disabled');
34233434
}
34243435

34253436
setHTML(q('dropdown__selected'), "<img src=\"".concat(qIcon, "\" /><span>").concat(qSymbol, "</span>"));
34263437
setHTML(q('dropdown__menu'), quoteAssets.map(function (item) {
34273438
return "<li data-id=\"".concat(item.assetId, "\"><img src=\"").concat(item.iconUrl, "\" /><span>").concat(item.symbol, "</span></li>");
34283439
}).join(''));
34293440
var qInput = q('input-item__input');
3430-
qInput.setAttribute('value', quoteAmount);
3441+
qInput.value = quoteAmount;
34313442
qInput.setAttribute('placeholder', "".concat(minQuoteAmount, " - ").concat(maxQuoteAmount));
34323443
setText(q('input-item__right'), qSymbol);
34333444
setHTML(q('filed__error'), '');
@@ -3442,7 +3453,7 @@
34423453
return "<li data-id=\"".concat(item.assetId, "\"><img src=\"").concat(item.iconUrl, "\" /><span>").concat(item.symbol, "</span><em>").concat(item.network, "</em></li>");
34433454
}).join(''));
34443455
var pInput = queryAll(activeField, 'input')[paymentMethod === 'chain' ? 1 : 0];
3445-
pInput.setAttribute('checked', true);
3456+
pInput.checked = true;
34463457
setStyle(q('btn-inline'), 'display', payAssetId && payAmount > 0 ? 'none' : 'inline-flex');
34473458
break;
34483459

@@ -3548,13 +3559,17 @@
35483559
});
35493560
},
35503561
show: function show() {
3551-
this.isShow = true;
3552-
setStyle(this.$element, 'display', 'block');
3562+
if (this.options.isModal && !this.isShow) {
3563+
this.isShow = true;
3564+
setStyle(this.$element, 'display', 'block');
3565+
}
35533566
},
35543567
hide: function hide() {
3555-
this.isShow = false;
3556-
setStyle(this.$element, 'display', 'none');
3557-
dispatchEvent(this.$element, EVENT_MODAL_CLOSE);
3568+
if (this.options.isModal && this.isShow) {
3569+
this.isShow = false;
3570+
setStyle(this.$element, 'display', 'none');
3571+
dispatchEvent(this.$element, EVENT_MODAL_CLOSE);
3572+
}
35583573
},
35593574
pay: function pay(options) {
35603575
var _this9 = this;

‎dist/mixpay.min.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/js/main.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ window.onload = function () {
2525
settlementMethod: 'mixin',
2626
clientId: clientId,
2727
expireSeconds: 180,
28+
fontSize: 16,
2829
remark: 'this is a demo.',
2930

3031
onReady: function () {

0 commit comments

Comments
 (0)