Skip to content

Commit

Permalink
fix(wsgi): optimize extra js and css and fix copied button
Browse files Browse the repository at this point in the history
  • Loading branch information
@pleasantone
pleasantone committed Jul 14, 2024
1 parent 6439175 commit 5439c59
Show file tree
Hide file tree
Showing 3 changed files with 164 additions and 154 deletions.
54 changes: 4 additions & 50 deletions src/gpxtable/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,8 @@
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.min.css" crossorigin="anonymous">
<style>
pre[class*="language-"] {
position: relative;
margin: 5px 0 ;
padding: 1.75rem 0 1.75rem 1rem;
}

pre[class*="language-"] button{
position: absolute;
top: 5px;
right: 5px;
}
</style>
{% block extrahead -%}
{%- endblock %}
</head>

<body>
Expand Down Expand Up @@ -77,47 +65,13 @@
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/prism.min.js"></script>
<script>
// bootstrap-style tooltips
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>
<script>
// code copy buttons -- where there is a pre/code block, add a copy button
const copyButtonLabel = "Copy Code";

// use a class selector if available
let blocks = document.querySelectorAll("pre");

blocks.forEach((block) => {
// only add button if browser supports Clipboard API
if (navigator.clipboard) {
let button = document.createElement("button");

button.innerText = copyButtonLabel;
block.appendChild(button);

button.addEventListener("click", async () => {
await copyCode(block);
});
}
});

async function copyCode(block, button) {
let code = block.querySelector("code");
let text = code.innerText;

await navigator.clipboard.writeText(text);

// visual feedback that task is completed
button.innerText = "Code Copied";

setTimeout(() => {
button.innerText = copyButtonLabel;
}, 700);
}
</script>
{% block extrabody -%}
{%- endblock %}
</body>

</html>
91 changes: 73 additions & 18 deletions src/gpxtable/templates/results.html
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,79 @@
{% extends 'base.html' %}

{% block content %}
<div class="row g-3">
<div class="col-lg">
<h1>{% block title %} GPXTable Results {% endblock %}</h1>

{% if format == "html" %}
<div class="border m-3">
{{ output | safe }}
</div>
{% elif format == "markdown" %}
<pre class="border m-3"><code class="language-markdown">
{{- output | safe -}}
</code></pre>
{% else %}
<pre><code class="language-html">
{{- output | safe -}}
</code></pre>
{% endif %}
<div class="row g-3">
<div class="col-lg">
<h1>{% block title %} GPXTable Results {% endblock %}</h1>

{% if format == "html" %}
<div class="border m-3">
{{ output | safe }}
</div>
{% elif format == "markdown" %}
<pre class="border m-3"><code class="language-markdown">
{{- output | safe -}}
</code></pre>
{% else %}
<pre><code class="language-html">
{{- output | safe -}}
</code></pre>
{% endif %}
</div>
</div>
</div>
{% endblock %}
{% block extrahead %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.min.css" crossorigin="anonymous">
<style>
pre[class*="language-"] {
position: relative;
margin: 5px 0 ;
padding: 1.75rem 0 1.75rem 1rem;
}

pre[class*="language-"] button{
position: absolute;
top: 5px;
right: 5px;
}
</style>
{% endblock %}
{% block extrabody %}
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/prism.min.js" crossorigin="anonymous"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// code copy buttons -- where there is a pre/code block, add a copy button
const copyButtonLabel = "Copy";

// use a class selector if available
let blocks = document.querySelectorAll("pre");

blocks.forEach((block) => {
// only add button if browser supports Clipboard API
if (navigator.clipboard) {
let button = document.createElement("button");

button.innerText = copyButtonLabel;
block.appendChild(button);

button.addEventListener("click", async () => {
await copyCode(block, button);
});
}
});

async function copyCode(block, button) {
let code = block.querySelector("code");
let text = code.innerText;

await navigator.clipboard.writeText(text);

// visual feedback that task is completed
button.innerText = "Copied";

setTimeout(() => {
button.innerText = copyButtonLabel;
}, 700);
}
});
</script>
{% endblock %}
173 changes: 87 additions & 86 deletions src/gpxtable/templates/upload.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,96 +2,97 @@

{% block content %}
<div class="row g-3">
<div class="col-lg-6">
<h1>{% block title %} GPX Upload {% endblock %}</h1>
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-primary" role="alert">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
<form class="my-2" id="gpx_upload" method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
<div class="row border my-3 p-2">
<div class="input-group my-3">
<label class="input-group-text" for="gpxFile">GPX file</label>
<input class="form-control" type="file" id="gpxFile" name="file">
</div>
<div class="mb-3">
or
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="gpxUrl">URL to GPX file</label>
<input class="form-control" type="url" id="gpxUrl" name="url">
</div>
</div>

<div class="input-group my-3">
<label class="input-group-text" for="departure" data-bs-toggle="tooltip" title="Override or specify daily departure time">Departing&nbsp;<i class="bi bi-info-circle"></i></label>
<input class="form-control" type="datetime-local" id="departure" name="departure">
</div>

<div class="input-group my-3">
<label class="input-group-text" for="speed" data-bs-toggle="tooltip" title="Override travel speed">Speed&nbsp;<i class="bi bi-info-circle"></i></label>
<input class="form-control" type="text" id="speed" name="speed" pattern="[\d\.]*" inputmode="numeric" size="3"
aria-describedby="speedHelp">
</div>

<div class="input-group my-3">
<label class="input-group-text" for="tz" data-bs-toggle="tooltip" title="Local time zone">Timezone&nbsp;<i class="bi bi-info-circle"></i></label>
<input class="form-control" type="text" id="tz" name="tz" aria-describedby="tzHelp" default="">
</div>

<div class="input-group my-3">
<label class="input-group-text" for="output">Output format</label>
<select class="form-control" id="output" name="output">
<option value="markdown" selected>Markdown</option>
<option value="html">HTML</option>
<option value="htmlcode">HTML cut-and-paste</option>
</select>
</div>

<div class="my-3">
<div class="form-check form-switch">
<label class="form-check-label" for="metric">Use Metric Units</label>
<input class="form-check-input" type="checkbox" name="metric" id="metric">
</div>

<div class="form-check form-switch">
<label class="form-check-label" for="coordinates">Display Lat/Long</label>
<input class="form-check-input" type="checkbox" id="coordinates" name="coordinates">
</div>

<div class="form-check form-switch">
<label class="form-check-label" for="ignore_times">Ignore GPX times</label>
<input class="form-check-input" type="checkbox" id="ignore_times" name="ignore_times">
</div>
</div>

<button class="btn btn-primary mb-3" type="submit">Submit</button>
</form>
</div>
<div class="col-lg-6">
<h1>{% block title %} GPX Upload {% endblock %}</h1>
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-primary" role="alert">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
<form class="my-2" id="gpx_upload" method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
<div class="row border my-3 p-2">
<div class="input-group my-3">
<label class="input-group-text" for="gpxFile">GPX file</label>
<input class="form-control" type="file" id="gpxFile" name="file">
</div>
<div class="mb-3">
or
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="gpxUrl">URL to GPX file</label>
<input class="form-control" type="url" id="gpxUrl" name="url">
</div>
</div>
<div class="row border my-3 p-2">
<h2 class="h4">Options</h2>
<div class="input-group my-3">
<label class="input-group-text" for="departure" data-bs-toggle="tooltip"
title="Override or specify daily departure time">Departing&nbsp;<i
class="bi bi-info-circle"></i></label>
<input class="form-control" type="datetime-local" id="departure" name="departure">
</div>
<div class="input-group my-3">
<label class="input-group-text" for="speed" data-bs-toggle="tooltip"
title="Override travel speed">Speed&nbsp;<i class="bi bi-info-circle"></i></label>
<input class="form-control" type="text" id="speed" name="speed" pattern="[\d\.]*"
inputmode="numeric" size="3" aria-describedby="speedHelp">
</div>
<div class="input-group my-3">
<label class="input-group-text" for="tz" data-bs-toggle="tooltip"
title="Local time zone">Timezone&nbsp;<i class="bi bi-info-circle"></i></label>
<input class="form-control" type="text" id="tz" name="tz" aria-describedby="tzHelp" default="">
</div>
<div class="input-group my-3">
<label class="input-group-text" for="output">Output format</label>
<select class="form-control" id="output" name="output">
<option value="markdown" selected>Markdown</option>
<option value="html">HTML</option>
<option value="htmlcode">HTML cut-and-paste</option>
</select>
</div>
<div class="my-3">
<div class="form-check form-switch">
<label class="form-check-label" for="metric">Use Metric Units</label>
<input class="form-check-input" type="checkbox" name="metric" id="metric">
</div>
<div class="form-check form-switch">
<label class="form-check-label" for="coordinates">Display Lat/Long</label>
<input class="form-check-input" type="checkbox" id="coordinates" name="coordinates">
</div>
<div class="form-check form-switch">
<label class="form-check-label" for="ignore_times">Ignore GPX times</label>
<input class="form-check-input" type="checkbox" id="ignore_times" name="ignore_times">
</div>
</div>
</div>
<button class="btn btn-primary mb-3" type="submit">Submit</button>
</form>
</div>
</div>
{% endblock %}
{% block extrabody %}
<script>
document.addEventListener("DOMContentLoaded", function() {
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
document.getElementById("tz").defaultValue = timezone;
});
document.addEventListener("DOMContentLoaded", function () {
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
document.getElementById("tz").defaultValue = timezone;
});

function validateForm() {
var fileInput = document.getElementById('gpxFile').value;
var urlInput = document.getElementById('gpxUrl').value;
function validateForm() {
var fileInput = document.getElementById('gpxFile').value;
var urlInput = document.getElementById('gpxUrl').value;

if (fileInput === '' && urlInput === '') {
alert('Please provide either a GPX file or a URL.');
return false;
}
if (fileInput === '' && urlInput === '') {
alert('Please provide either a GPX file or a URL.');
return false;
}

if (fileInput !== '' && urlInput !== '') {
alert('Please provide only one: either a GPX file or a URL.');
return false;
if (fileInput !== '' && urlInput !== '') {
alert('Please provide only one: either a GPX file or a URL.');
return false;
}
return true;
}
return true;
}
</script>
{% endblock %}
{% endblock %}

0 comments on commit 5439c59

Please sign in to comment.