Replace JS toggles with pure CSS using HTML details element for payment settings
This commit is contained in:
parent
b44942a4bc
commit
a647d9798c
2 changed files with 40 additions and 95 deletions
|
|
@ -1687,20 +1687,30 @@ div.message-ribbon {
|
|||
/* ALERT END */
|
||||
|
||||
|
||||
/* hidden control area */
|
||||
.hidden-control {
|
||||
display: none;
|
||||
/* Pure CSS toggle using <details> element */
|
||||
.toggle-summary {
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
color: var(--primary-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#toggle:checked ~ .hidden-control {
|
||||
display: block;
|
||||
.toggle-summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Stripe toggle */
|
||||
#toggle-stripe:checked ~ .hidden-control {
|
||||
display: block;
|
||||
.toggle-summary::marker {
|
||||
display: none;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.api-key-details {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.api-key-fields {
|
||||
margin-top: 10px;
|
||||
}
|
||||
/* hidden control area */
|
||||
|
||||
/* Status and message styling */
|
||||
.status-message {
|
||||
|
|
|
|||
|
|
@ -128,14 +128,10 @@
|
|||
<form method="post" action="/s/{{ request.shop.id }}/settings" onsubmit="submit.disabled = true; return true;">
|
||||
<input type="hidden" name="form_section" value="stripe-settings" />
|
||||
|
||||
<label for="stripe_public_api_key_input">Stripe API Keys</label>
|
||||
<details class="api-key-details">
|
||||
<summary class="toggle-summary">Show Public & Secret Stripe API Keys</summary>
|
||||
|
||||
<br />
|
||||
|
||||
<input type="checkbox" id="toggle-stripe">
|
||||
<label for="toggle-stripe" class="inline-label">Show Public & Secret Stripe API Keys</label>
|
||||
|
||||
<div class="hidden-control">
|
||||
<div class="api-key-fields">
|
||||
|
||||
<br />
|
||||
|
||||
|
|
@ -185,8 +181,7 @@
|
|||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
<br />
|
||||
</details>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
|
@ -209,14 +204,10 @@
|
|||
<form method="post" action="/s/{{ request.shop.id }}/settings" onsubmit="submit.disabled = true; return true;">
|
||||
<input type="hidden" name="form_section" value="paypal-settings" />
|
||||
|
||||
<label for="paypal_client_id_input">PayPal API Keys</label>
|
||||
<details class="api-key-details">
|
||||
<summary class="toggle-summary">Show PayPal Client ID & Secret API Keys</summary>
|
||||
|
||||
<br />
|
||||
|
||||
<input type="checkbox" id="toggle-paypal">
|
||||
<label for="toggle-paypal" class="inline-label">Show PayPal Client ID & Secret API Keys</label>
|
||||
|
||||
<div class="hidden-control">
|
||||
<div class="api-key-fields">
|
||||
|
||||
<br />
|
||||
|
||||
|
|
@ -266,8 +257,7 @@
|
|||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
<br />
|
||||
</details>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
|
@ -290,14 +280,10 @@
|
|||
<form method="post" action="/s/{{ request.shop.id }}/settings" onsubmit="submit.disabled = true; return true;">
|
||||
<input type="hidden" name="form_section" value="adyen-settings" />
|
||||
|
||||
<label for="adyen_api_key_input">Adyen API Keys</label>
|
||||
<details class="api-key-details">
|
||||
<summary class="toggle-summary">Show Adyen API Keys</summary>
|
||||
|
||||
<br />
|
||||
|
||||
<input type="checkbox" id="toggle-adyen">
|
||||
<label for="toggle-adyen" class="inline-label">Show Adyen API Keys</label>
|
||||
|
||||
<div class="hidden-control" id="adyen-controls">
|
||||
<div class="api-key-fields">
|
||||
|
||||
<br />
|
||||
|
||||
|
|
@ -375,8 +361,7 @@
|
|||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
<br />
|
||||
</details>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
|
@ -822,33 +807,23 @@ Existing sales honored for download buy purchasers.
|
|||
|
||||
|
||||
<script>
|
||||
// Use localStorage to remember toggle states across page refreshes
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Crypto wallets toggle (still uses checkbox pattern)
|
||||
const cryptoCheckbox = document.getElementById('show-crypto-wallets');
|
||||
const cryptoWallets = document.getElementById('crypto-wallets');
|
||||
const stripeToggle = document.getElementById('toggle-stripe');
|
||||
const stripeControls = document.querySelector('#toggle-stripe ~ .hidden-control');
|
||||
|
||||
// Restore crypto wallet toggle state from localStorage
|
||||
const cryptoState = localStorage.getItem('show-crypto-wallets') === 'true';
|
||||
cryptoCheckbox.checked = cryptoState;
|
||||
cryptoWallets.style.display = cryptoState ? 'block' : 'none';
|
||||
|
||||
// Restore Stripe toggle state from localStorage
|
||||
if (stripeToggle && stripeControls) {
|
||||
const stripeState = localStorage.getItem('show-stripe-keys') === 'true';
|
||||
stripeToggle.checked = stripeState;
|
||||
stripeControls.style.display = stripeState ? 'block' : 'none';
|
||||
|
||||
if (cryptoCheckbox && cryptoWallets) {
|
||||
const cryptoState = localStorage.getItem('show-crypto-wallets') === 'true';
|
||||
cryptoCheckbox.checked = cryptoState;
|
||||
cryptoWallets.style.display = cryptoState ? 'block' : 'none';
|
||||
}
|
||||
|
||||
|
||||
// Handle shop theme radio buttons for immediate preview
|
||||
const shopThemeRadios = document.querySelectorAll('input[name="default_theme"]');
|
||||
shopThemeRadios.forEach(function(radio) {
|
||||
radio.addEventListener('change', function() {
|
||||
// Apply new theme immediately for preview
|
||||
const newTheme = this.value === '0' ? 'dark' : 'light';
|
||||
document.documentElement.setAttribute('data-theme', newTheme);
|
||||
// Update shop owner's personal preference so they see the same theme
|
||||
localStorage.setItem('theme-preference', newTheme);
|
||||
});
|
||||
});
|
||||
|
|
@ -857,50 +832,10 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
function toggleCryptoWallets() {
|
||||
const checkbox = document.getElementById('show-crypto-wallets');
|
||||
const wallets = document.getElementById('crypto-wallets');
|
||||
|
||||
// Save state to localStorage
|
||||
|
||||
localStorage.setItem('show-crypto-wallets', checkbox.checked);
|
||||
|
||||
if (checkbox.checked) {
|
||||
wallets.style.display = 'block';
|
||||
} else {
|
||||
wallets.style.display = 'none';
|
||||
}
|
||||
wallets.style.display = checkbox.checked ? 'block' : 'none';
|
||||
}
|
||||
|
||||
// Add onchange handler for Stripe toggle to save state
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const stripeToggle = document.getElementById('toggle-stripe');
|
||||
if (stripeToggle) {
|
||||
stripeToggle.addEventListener('change', function() {
|
||||
const stripeControls = document.querySelector('#toggle-stripe ~ .hidden-control');
|
||||
|
||||
// Save state to localStorage
|
||||
localStorage.setItem('show-stripe-keys', this.checked);
|
||||
|
||||
if (stripeControls) {
|
||||
stripeControls.style.display = this.checked ? 'block' : 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Adyen toggle
|
||||
const adyenToggle = document.getElementById('toggle-adyen');
|
||||
const adyenControls = document.getElementById('adyen-controls');
|
||||
|
||||
if (adyenToggle && adyenControls) {
|
||||
// Restore state from localStorage
|
||||
const adyenState = localStorage.getItem('show-adyen-keys') === 'true';
|
||||
adyenToggle.checked = adyenState;
|
||||
adyenControls.style.display = adyenState ? 'block' : 'none';
|
||||
|
||||
adyenToggle.addEventListener('change', function() {
|
||||
// Save state to localStorage
|
||||
localStorage.setItem('show-adyen-keys', this.checked);
|
||||
adyenControls.style.display = this.checked ? 'block' : 'none';
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{%- endblock -%}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue