tools.cobbled-paths/templates/draw.html

{% extends "base.html" %}

{% block body_class %}draw{% endblock %}

{% block body %}

  <header class="controls">
    <label>etherpad</label>
    <input class="get-input" type="text" value="{{params['pad']}}" data-name="p"/>
    <button>go</button>

    <hr>

    <button onClick="window.location.reload();">generate</button>

    <label>weight</label>
    <input class="get-input" type="range" min="1" max="8" value="{{params['weight']}}" data-name="w"/>

    <label  class="text-label" for="text-checkbox"
            title="display the remaining text in the svg output in red">
            output text</label>
    <input  id="text-checkbox" type="checkbox" 
            class="body-class-check" value="check-text" checked/>

    <script>
        let inputs = document.getElementsByClassName('get-input');
        for(let input of inputs){
            input.addEventListener('input', function(){
                const url = new URL(window.location.href);
                url.searchParams.set(input.dataset.name, input.value);
                window.history.replaceState(null, null, url);
            });
        }
    </script>

    <script>
        function toggle_class(classname, val){
            if(val){
                document.body.classList.add(classname);
            }
            else{
                document.body.classList.remove(classname);
            }
        }
        let body_class_checkboxes = document.getElementsByClassName("body-class-check");
        for(let checkbox of body_class_checkboxes){
            let classname = checkbox.value;
            checkbox.addEventListener('input', function(){
                toggle_class(classname, checkbox.checked);
            });
            toggle_class(classname, checkbox.checked);
        }
    </script>
  </header>

  <div class="font">
    <iframe class="f-ascii" src="{{params['pad-full']}}">
    </iframe>
    <div class="f-svg"></div>
    <aside class="right">
      <button>> SVG</button>
      <button>> HPGL</button>
    </aside>
  </div>

{% endblock %}