mirror of
https://github.com/eitchtee/WYGIWYH.git
synced 2026-03-21 08:59:14 +01:00
130 lines
5.6 KiB
HTML
130 lines
5.6 KiB
HTML
{% load formats %}
|
|
{% load i18n %}
|
|
{% load title %}
|
|
{% load webpack_loader %}
|
|
<!doctype html>
|
|
<html lang="en" data-bs-theme="dark">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>
|
|
{% filter site_title %}
|
|
{% block title %}
|
|
{% endblock title %}
|
|
{% endfilter %}
|
|
</title>
|
|
|
|
{% include 'includes/head/favicons.html' %}
|
|
|
|
{% include 'includes/styles.html' %}
|
|
{% block extra_styles %}{% endblock %}
|
|
|
|
{% include 'includes/scripts.html' %}
|
|
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
|
|
|
|
{% block extra_js_head %}{% endblock %}
|
|
</head>
|
|
<body class="font-monospace">
|
|
<div _="install hide_amounts
|
|
install htmx_error_handler
|
|
{% block body_hyperscript %}{% endblock %}">
|
|
{% include 'includes/navbar.html' %}
|
|
|
|
<div id="content">
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
|
|
{% include 'includes/offcanvas.html' %}
|
|
{% include 'includes/toasts.html' %}
|
|
</div>
|
|
|
|
<div
|
|
class="tw-hidden tw-w-60 position-fixed shadow rounded-3 bg-body tw-border-gray-700 tw-border tw-border-solid tw-text-center tw-align-middle tw-z-[2000] tw-touch-none user-select-none"
|
|
id="calculator"
|
|
hx-preserve
|
|
_="on load
|
|
-- Get localized separators from Django
|
|
set window.decimalSeparator to '{% get_decimal_separator %}'
|
|
set window.thousandSeparator to '{% get_thousand_separator %}'
|
|
set window.argSeparator to ';'
|
|
end
|
|
|
|
on focusin halt the event -- this prevents bootstrap's static offcanvas from hijacking the focus from the input when open end
|
|
|
|
on show if not I.classList.contains('tw-hidden') add { left: 50vw; top: 50vh; transform: translate(-50%, -50%); } then call #calculator-input.focus() end
|
|
|
|
on pointerdown(screenX, screenY)
|
|
if event.target.closest('#calculator-handle')
|
|
log event
|
|
halt the event
|
|
measure my x, y
|
|
set xoff to screenX - x
|
|
set yoff to screenY - y
|
|
repeat until event pointerup from document
|
|
wait for pointermove(screenX, screenY) or
|
|
pointerup(screenX, screenY) from document
|
|
add { left: ${screenX - xoff}px; top: ${screenY - yoff}px; transform: none }
|
|
end
|
|
end
|
|
end">
|
|
|
|
<div id="calculator-handle"
|
|
class="position-absolute bg-secondary rounded-start-2 tw-cursor-move d-flex align-items-center justify-content-center tw-left-[-20px] tw-top-[3px] tw-h-[2em] tw-w-[20px]">
|
|
<i class="fa-solid fa-grip-vertical"></i>
|
|
</div>
|
|
|
|
<input type="search"
|
|
class="form-control"
|
|
id="calculator-input"
|
|
_="on click me.focus()
|
|
on input or search
|
|
js(my)
|
|
return my.value.replace(new RegExp('\\' + window.decimalSeparator + '|\\' + window.argSeparator + '|\\' + window.thousandSeparator, 'g'),
|
|
match => {
|
|
if (match === window.decimalSeparator) return '.';
|
|
if (match === window.argSeparator) return ',';
|
|
return ''; // This will remove the thousandSeparator
|
|
})
|
|
end
|
|
then set expr to it
|
|
then call math.evaluate(expr)
|
|
then log result
|
|
if result exists and result is a Number
|
|
js(result)
|
|
return result.toString().replace(new RegExp(',|\\.', 'g'),
|
|
match => match === '.' ? window.decimalSeparator : window.argSeparator)
|
|
end
|
|
then set localizedResult to it
|
|
set #calculator-result.innerText to localizedResult
|
|
then remove .tw-hidden from #calculator-result-container
|
|
then add .swing-in-top-fwd to #calculator-result-container
|
|
then settle
|
|
then remove .swing-in-top-fwd from #calculator-result-container
|
|
else
|
|
add .swing-out-top-bck to #calculator-result-container
|
|
then settle
|
|
then add .tw-hidden to #calculator-result-container
|
|
then remove .swing-out-top-bck from #calculator-result-container
|
|
end
|
|
catch e
|
|
add .swing-out-top-bck to #calculator-result-container
|
|
then settle
|
|
then add .tw-hidden to #calculator-result-container
|
|
then remove .swing-out-top-bck from #calculator-result-container
|
|
end"
|
|
placeholder="2 + 2">
|
|
<div class="tw-hidden" id="calculator-result-container">
|
|
<div class="d-flex flex-row p-2 justify-content-between">
|
|
<div class="tw-text-gray-400">=</div>
|
|
<div id="calculator-result" class="user-select-all"></div>
|
|
</div>
|
|
</div>
|
|
<div class="position-absolute tw-cursor-pointer top-0 start-100 translate-middle tw-p-0 text-bg-primary border border-light rounded-circle tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5"
|
|
_="on click toggle .tw-hidden on #calculator">
|
|
<i class="fa-solid fa-xmark tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full"></i>
|
|
</div>
|
|
</div>
|
|
{% block extra_js_body %}{% endblock %}
|
|
</body>
|
|
</html>
|