simoon/tools.cobbled-paths
1
0
Fork 0
mirror of https://gitlab.constantvzw.org/osp/tools.cobbled-paths.git synced 2024-12-23 13:01:25 +01:00
Code Issues Projects Releases Wiki Activity

chekcbox and weight

Browse Source
This commit is contained in:
Doriane 2024-03-28 10:42:47 +01:00
parent 722f09f0a3
commit 53f6843553
6 changed files with 160 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app.py
View File

@ -165,6 +165,20 @@ def drawing(id):
params = params,
svg = svg)
@app.route("/font.html")
def font():
params = {
'pad': request.args.get('p') or 'default',
'weight': request.args.get('w') or '3',
}
params['pad-full'] = etherpad + prefix + params['pad']
return render_template(
'font.html',
title = title,
params = params)
# _ _
# ___ __ _| |_ __ _| | ___ __ _ _ _ ___
# / __/ _` | __/ _` | |/ _ \ / _` | | | |/ _ \

3
templates/base.html
View File

@ -26,7 +26,8 @@
<ul>
<li><a href="/">index</a></li>
<li><a href="/draw.html">draw</a></li>
<li><a href="/catalogue.html">catalogue</a></li>
<li><a href="/font.html">font</a></li>
<!-- <li><a href="/catalogue.html">catalogue</a></li> -->
</ul>
</nav>

3
templates/catalogue.html
View File

@ -35,9 +35,6 @@
window.history.replaceState(null, null, url);
});
}
</script>
<script>
function toggle_class(classname, val){
if(val){
document.body.classList.add(classname);

25
templates/draw.html
View File

@ -13,14 +13,14 @@
<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"/> -->
<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="text-label" for="text-checkbox"
<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/> -->
<input id="text-checkbox" type="checkbox" class="get-input"
class="body-class-check" value="check-text" data-name="t" data-frame="svg-iframe" checked/>
<script>
function updateGET(frame, param, value){
@ -66,6 +66,21 @@
svg_iframe.contentWindow.location.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);
}
frame.src = url;
});
}
</script>
</header>

26
templates/drawing.html
View File

@ -10,6 +10,17 @@
top: 0.5em;
right: 0.5em;
}
.svgbob text {
font-family: monospace !important;
font-weight: bold !important;
fill: red !important;
}
.svgbob text{
visibility: hidden;
}
body.check-text .svgbob text{
visibility: visible;
}
</style>
</head>
@ -18,7 +29,20 @@
{{ svg|safe }}
<button id="save-svg">> SVG</button>
<!-- <button>> HPGL</button> -->
<script>
function get2bodyclass(){
const url = new URL(window.location.href);
let checked = url.searchParams.get("c");
if(checked == "false"){
document.body.classList.remove("check-text");
}
else{
document.body.classList.add("check-text");
}
}
get2bodyclass();
</script>
<script>
let save_button = document.getElementById('save-svg');

99
templates/font.html Normal file
View File

@ -0,0 +1,99 @@
{% extends "base.html" %}
{% block body_class %}draw{% endblock %}
{% block body %}
<header class="controls">
<label>etherpad</label>
<input id="pad-name" type="text" value="{{params['pad']}}" data-name="p"/>
<button id="button-pad" data-use="pad-name">go</button>
<hr>
<input class="get-input" type="text" value="{{params['text']}}" data-name="t"/>
<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="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="get-input"
class="body-class-check" value="check-text" data-name="c" data-frame="svg-iframe" checked/>
<script>
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;
}
let button_pad = document.getElementById('button-pad');
let button_svg = document.getElementById('button-svg');
// --- pad go button
button_pad.addEventListener('click', function(){
let svg_iframe = document.getElementById('svg-iframe');
let pad_iframe = document.getElementById('pad-iframe');
let input = document.getElementById(button_pad.dataset.use);
let value = input.value;
let param = input.dataset.name;
let pad_src = pad_iframe.src;
pad_src = pad_src.split('-');
pad_src[pad_src.length-1] = value;
pad_src = pad_src.join('-');
pad_iframe.src = pad_src;
let svg_src = svg_iframe.src;
svg_src = svg_src.split('/');
svg_src[svg_src.length-1] = value;
svg_src = svg_src.join('/');
svg_iframe.src = svg_src;
});
// --- svg generation button
button_svg.addEventListener('click', function(){
let svg_iframe = document.getElementById('svg-iframe');
svg_iframe.contentWindow.location.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);
}
frame.src = url;
});
}
</script>
</header>
<div class="font">
<iframe class="f-ascii" id="pad-iframe" src="{{params['pad-full']}}">
</iframe>
<div class="f-svg">
<iframe id="svg-iframe" src="/drawing/{{params['pad']}}">
</iframe>
</div>
</div>
{% endblock %}