mirror of
https://github.com/eitchtee/WYGIWYH.git
synced 2026-03-23 09:51:21 +01:00
fix: slow down when page is loaded
This commit is contained in:
@@ -5,8 +5,6 @@
|
||||
|
||||
{% include 'includes/scripts/hyperscript/init_tom_select.html' %}
|
||||
{% include 'includes/scripts/hyperscript/init_date_picker.html' %}
|
||||
{% include 'includes/scripts/hyperscript/hide_amount.html' %}
|
||||
{% include 'includes/scripts/hyperscript/tooltip.html' %}
|
||||
{% include 'includes/scripts/hyperscript/htmx_error_handler.html' %}
|
||||
{% include 'includes/scripts/hyperscript/sounds.html' %}
|
||||
{% include 'includes/scripts/hyperscript/swal.html' %}
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
<script type="text/hyperscript">
|
||||
behavior hide_amounts
|
||||
on load or htmx:afterSwap if body include #settings-hide-amounts
|
||||
set elements to <.amount/> in me
|
||||
for el in elements
|
||||
set el.textContent to '•••••••••••'
|
||||
end
|
||||
end
|
||||
|
||||
on load or htmx:afterSwap if body do not include #settings-hide-amounts
|
||||
set elements to <.amount/> in me
|
||||
for el in elements
|
||||
set el.textContent to el.dataset.originalValue
|
||||
set el.innerHTML to `<span>${el.dataset.originalSign}</span><span>${el.dataset.originalPrefix}</span><span>${el.dataset.originalAmount}</span><span>${el.dataset.originalSuffix}</span>`
|
||||
end
|
||||
end
|
||||
|
||||
on click[target matches .amount or target.parentNode matches .amount] if I include #settings-hide-amounts
|
||||
if event.target matches .amount
|
||||
set el to event.target
|
||||
else
|
||||
set el to event.target.parentNode
|
||||
end
|
||||
|
||||
if el do not matches .revealed
|
||||
then set el.innerHTML to `<span>${el.dataset.originalSign}</span><span>${el.dataset.originalPrefix}</span><span>${el.dataset.originalAmount}</span><span>${el.dataset.originalSuffix}</span>`
|
||||
else
|
||||
set el.textContent to '•••••••••••' end
|
||||
then toggle .revealed on el
|
||||
end
|
||||
end
|
||||
</script>
|
||||
@@ -1,13 +0,0 @@
|
||||
{#<script type="text/hyperscript">#}
|
||||
{#init#}
|
||||
{# call initiateTooltips()#}
|
||||
{#end#}
|
||||
{##}
|
||||
{#on htmx:afterSettle#}
|
||||
{# call initiateTooltips()#}
|
||||
{#end#}
|
||||
{# #}
|
||||
{#on tooltips#}
|
||||
{# call initiateTooltips()#}
|
||||
{#end#}
|
||||
{#</script>#}
|
||||
@@ -23,7 +23,7 @@
|
||||
{% block extra_js_head %}{% endblock %}
|
||||
</head>
|
||||
<body class="font-mono">
|
||||
<div _="install hide_amounts install htmx_error_handler
|
||||
<div _="install htmx_error_handler
|
||||
{% block body_hyperscript %}{% endblock %}"
|
||||
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
|
||||
{% include 'includes/mobile_navbar.html' %}
|
||||
|
||||
35
frontend/src/js/hide_amounts.js
Normal file
35
frontend/src/js/hide_amounts.js
Normal file
@@ -0,0 +1,35 @@
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
function updateAmountsVisibility() {
|
||||
const amounts = document.querySelectorAll('.amount');
|
||||
const shouldHideAmounts = document.querySelector('#settings-hide-amounts');
|
||||
|
||||
amounts.forEach(el => {
|
||||
if (shouldHideAmounts) {
|
||||
if (!el.classList.contains('revealed')) {
|
||||
el.textContent = '•••••••••••';
|
||||
}
|
||||
} else {
|
||||
el.innerHTML = `<span>${el.dataset.originalSign}</span><span>${el.dataset.originalPrefix}</span><span>${el.dataset.originalAmount}</span><span>${el.dataset.originalSuffix}</span>`;
|
||||
el.classList.remove('revealed');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateAmountsVisibility();
|
||||
|
||||
document.body.addEventListener('htmx:afterSwap', updateAmountsVisibility);
|
||||
|
||||
document.body.addEventListener('click', function (event) {
|
||||
const amountElement = event.target.closest('.amount');
|
||||
const shouldHideAmounts = document.querySelector('#settings-hide-amounts');
|
||||
|
||||
if (amountElement && shouldHideAmounts) {
|
||||
if (amountElement.classList.contains('revealed')) {
|
||||
amountElement.textContent = '•••••••••••';
|
||||
} else {
|
||||
amountElement.innerHTML = `<span>${amountElement.dataset.originalSign}</span><span>${amountElement.dataset.originalPrefix}</span><span>${amountElement.dataset.originalAmount}</span><span>${amountElement.dataset.originalSuffix}</span>`;
|
||||
}
|
||||
amountElement.classList.toggle('revealed');
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -3,7 +3,6 @@ import './_htmx.js';
|
||||
import Alpine from "alpinejs";
|
||||
import mask from '@alpinejs/mask';
|
||||
import collapse from '@alpinejs/collapse'
|
||||
import Autosize from '@marcreichel/alpine-autosize';
|
||||
import { create, all } from 'mathjs';
|
||||
|
||||
window.Alpine = Alpine;
|
||||
@@ -14,7 +13,6 @@ window.math = create(all, {
|
||||
|
||||
Alpine.plugin(mask);
|
||||
Alpine.plugin(collapse);
|
||||
Alpine.plugin(Autosize);
|
||||
Alpine.start();
|
||||
|
||||
_hyperscript.browserInit();
|
||||
|
||||
@@ -9,3 +9,4 @@ import './js/autosize.js';
|
||||
import './js/sweetalert2.js';
|
||||
import './js/style.js';
|
||||
import './js/_utils.js';
|
||||
import './js/hide_amounts.js';
|
||||
|
||||
Reference in New Issue
Block a user