You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
128 lines
4.3 KiB
128 lines
4.3 KiB
{% extends "base.html" %}
|
|
|
|
{% block body_class %}catalogue{% endblock %}
|
|
|
|
{% block body %}
|
|
|
|
<header class="controls">
|
|
<label>figfont</label>
|
|
<details>
|
|
<summary>mini</summary>
|
|
<div>
|
|
{% for type, type_data in collection.items()%}
|
|
<details>
|
|
<summary>{{type}} <span>{{type_data['ascii']}}</span></summary>
|
|
<div class="collection">
|
|
{% for database in databases.keys() %}
|
|
{% set fonts = type_data['fonts']|selectattr('database', 'equalto', database) %}
|
|
{% for f in fonts %}
|
|
<div value="{{f['figfont']}}" class="{{f['database']}} figfont">{{f['name']}}</div>
|
|
{% endfor %}
|
|
{% endfor %}
|
|
</div>
|
|
</details>
|
|
{% endfor %}
|
|
</div>
|
|
</details>
|
|
|
|
<label>input</label>
|
|
<input class="get-input" id="text-input" type="text" value="{{params['text']}}" data-name="t" data-frame="svg-iframe"/>
|
|
|
|
<label for="upper-checkbox">uppercase</label>
|
|
<input id="upper-checkbox" type="checkbox"/>
|
|
|
|
<hr>
|
|
|
|
<button id="button-svg">generate</button>
|
|
|
|
<label>weight</label>
|
|
<input class="get-input" type="range" min="1" max="8" value="{{params['weight']}}" data-name="w" data-frame="svg-iframe"/>
|
|
|
|
<label class="fix-label" for="fix-checkbox"
|
|
title="custom regex to try to map unrecognized character to ones that are processed by svgbob">
|
|
autofix</label>
|
|
<input id="fix-checkbox" type="checkbox"
|
|
class="body-class-check" value="check-fix" checked/>
|
|
|
|
<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="get-input"
|
|
class="body-class-check" value="check-text" data-name="c" data-frame="svg-iframe" checked/>
|
|
|
|
</header>
|
|
|
|
<div class="font catalogue" id="main">
|
|
<iframe class="f-double" id="svg-iframe" src="/writing/{{ 'db/default/stroke/mini.flf'.split('/') | join('_') }}">
|
|
</iframe>
|
|
</div>
|
|
|
|
<script>
|
|
let button_svg = document.getElementById('button-svg');
|
|
let svg_iframe = document.getElementById('svg-iframe');
|
|
let pad_iframe = document.getElementById('pad-iframe');
|
|
|
|
let new_url = new URL(svg_iframe.src);
|
|
|
|
function updateGET(frame, param, value){
|
|
// object from GET parameters
|
|
let [base_src, params_src] = frame.src.split("?");
|
|
let params = new URLSearchParams(params_src);
|
|
// update param
|
|
params.set(param, value);
|
|
// reconstituate URL
|
|
let new_src = base_src + "?" + params.toString();
|
|
// set and refresh
|
|
frame.src = new_src;
|
|
}
|
|
|
|
// --- svg generation button
|
|
button_svg.addEventListener('click', function(){
|
|
svg_iframe.src = new_url;
|
|
document.getElementById('main').classList.add("reload");
|
|
});
|
|
|
|
// --- get-input but on the pad and checkbox but on the pad
|
|
let inputs = document.getElementsByClassName('get-input');
|
|
|
|
for(let input of inputs){
|
|
input.addEventListener('change', function(){
|
|
let frame = document.getElementById(input.dataset.frame);
|
|
const url = new URL(frame.src);
|
|
|
|
if(input.type == 'checkbox'){
|
|
url.searchParams.set(input.dataset.name, input.checked);
|
|
}
|
|
else{
|
|
url.searchParams.set(input.dataset.name, input.value);
|
|
}
|
|
new_url = url;
|
|
});
|
|
}
|
|
|
|
let upper_checkbox = document.getElementById('upper-checkbox');
|
|
let text_input = document.getElementById('text-input');
|
|
upper_checkbox.addEventListener('change', function(){
|
|
if(upper_checkbox.checked){
|
|
text_input.value = text_input.value.toUpperCase();
|
|
let frame = document.getElementById("svg-iframe");
|
|
const url = new URL(frame.src);
|
|
url.searchParams.set(text_input.dataset.name, text_input.value);
|
|
new_url = url;
|
|
}
|
|
else{
|
|
text_input.value = text_input.value.toLowerCase();
|
|
let frame = document.getElementById("svg-iframe");
|
|
const url = new URL(frame.src);
|
|
url.searchParams.set(text_input.dataset.name, text_input.value);
|
|
new_url = url;
|
|
}
|
|
})
|
|
|
|
svg_iframe.addEventListener("load", function() {
|
|
document.getElementById('main').classList.remove("reload");
|
|
});
|
|
</script>
|
|
|
|
{% endblock %}
|
|
|
|
|