WYGIWYH/app/templates/includes/tools/calculator.html

{% load formats %}
<div class="hidden w-[60vw] lg:w-[30vw] xl:w-[20vw] fixed shadow rounded-3xl bg-base-300 border-base-100 border border-solid text-center align-middle z-[2000] touch-none 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 end -- this prevents bootstrap's static offcanvas from hijacking the focus from the input when open end

          on show or keyup[code is 'KeyC' and altKey is true] from body
            if my.classList.contains('hidden')
              remove .{'hidden'} from me
              measure my width, height
              set xoff to (window.innerWidth/2) - (width/2)
              set yoff to (window.innerHeight/2) - (height)
              add { left: ${xoff}px; top: ${yoff}px; }
              add .scale-in-center to me then wait for animationend then remove .scale-in-center from me
              then call #calculator-input.focus()
            else
              add .scale-out-center to me then wait for animationend then remove .scale-out-center from me
              add .{'hidden'} to me
            end
          end

          on pointerdown(screenX, screenY)
            if event.target.closest('#calculator-handle')
              halt the event
              measure my x, y, width, height
              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
                -- Calculate new position
                 set newX to screenX - xoff
                 set newY to screenY - yoff
                 -- Constrain to viewport
                 set newX to Math.max(5, Math.min(newX, window.innerWidth - (width + 10)))
                 set newY to Math.max(20, Math.min(newY, window.innerHeight - (height + 5)))
                 add { left: ${newX}px; top: ${newY}px; transform: none }
              end
            end
          end">

      <div id="calculator-handle"
           class="absolute bg-secondary text-secondary-content rounded-t-lg cursor-move flex items-center justify-center top-[-20px] left-[6px] w-[2em] h-[20px]">
        <i class="fa-solid fa-grip"></i>
      </div>

      <input type="search"
             class="input w-full"
             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).toNumber()
                if result exists and result is a Number
                  js(result)
                    return result.toLocaleString(undefined, {minimumFractionDigits: 0, maximumFractionDigits: 40})
                  end
                  then set localizedResult to it
                  set #calculator-result.innerText to localizedResult
                  then remove .{'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 .{'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 .{'hidden'} to #calculator-result-container
                then remove .swing-out-top-bck from #calculator-result-container
              end"
             placeholder="2 + 2">
      <div class="hidden" id="calculator-result-container">
        <div class="flex flex-row py-3 px-5 justify-between">
          <div class="text-subtle">=</div>
          <div id="calculator-result" class="select-all"></div>
        </div>
      </div>
      <div class="btn btn-error btn-circle absolute cursor-pointer top-0 left-full start-100 -translate-x-1/2 -translate-y-1/2 p-0 flex items-center justify-center w-5 h-5"
            _="on click trigger show on #calculator">
        <i class="fa-solid fa-xmark flex items-center justify-center w-full h-full content-center text-xs"></i>
      </div>
    </div>