71 lines
3.6 KiB
Svelte
71 lines
3.6 KiB
Svelte
<script>
|
|
import { browser } from "$app/environment";
|
|
import hotkeys from "hotkeys-js";
|
|
|
|
let {
|
|
prefix,
|
|
pagerForm = $bindable(),
|
|
headerHeight = $bindable(),
|
|
functions
|
|
} = $props()
|
|
|
|
if (browser) {
|
|
hotkeys.filter = function(event) {return true}
|
|
hotkeys('alt+q', function(event) {const target = document.getElementById("range_start"); if (target) {target.focus()}})
|
|
hotkeys('alt+w', function(event) {const target = document.getElementById("range_end"); if (target) {target.focus()}})
|
|
hotkeys('alt+n', function(event) {event.preventDefault(); functions.nextPage(); return false});
|
|
hotkeys('alt+b', function(event) {event.preventDefault(); functions.prevPage(); return false});
|
|
hotkeys('alt+j', function(event) {event.preventDefault(); functions.duplicateDown(); return false});
|
|
hotkeys('alt+u', function(event) {event.preventDefault(); functions.duplicateUp(); return false});
|
|
hotkeys('alt+l', function(event) {event.preventDefault(); functions.gotoNext(); return false});
|
|
hotkeys('alt+o', function(event) {event.preventDefault(); functions.gotoPrev(); return false});
|
|
hotkeys('alt+c', function(event) {event.preventDefault(); functions.copy(); return false});
|
|
hotkeys('alt+v', function(event) {event.preventDefault(); functions.paste(); return false});
|
|
hotkeys('alt+s', function(event) {event.preventDefault(); functions.saveAll(); return false});
|
|
}
|
|
</script>
|
|
|
|
<div id="formheader" class="{prefix.color}" bind:offsetHeight={headerHeight}>
|
|
<div class="flex-row-space tb-margin">
|
|
<div class="flex-row">
|
|
<input type="number" id="range_start" onfocus={(e) => e.target.select()} bind:value={pagerForm.id_from}>
|
|
<div style="font-size: 22pt">-</div>
|
|
<input type="number" id="range_end" onfocus={(e) => e.target.select()} bind:value={pagerForm.id_to}>
|
|
<button class="styled" onclick={() => {
|
|
if (Math.abs(pagerForm.id_to - pagerForm.id_from) > 800) {
|
|
pagerForm.id_to = pagerForm.id_from + 799;
|
|
}
|
|
setTimeout(functions.refreshPage, 50);
|
|
}}>Refresh</button>
|
|
</div>
|
|
<div class="flex-row">
|
|
<button class="styled" title="Alt + B" tabindex="-1" onclick={functions.prevPage}>Prev Page</button>
|
|
<button class="styled" title="Alt + N" tabindex="-1" onclick={functions.nextPage}>Next Page</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex-row-space tb-margin">
|
|
<div class="flex-row">
|
|
<button class="styled" title="Alt + J" tabindex="-1" onclick={functions.duplicateDown}>Duplicate Down</button>
|
|
<button class="styled" title="Alt + U" tabindex="-1" onclick={functions.duplicateUp}>Duplicate Up</button>
|
|
<button class="styled" title="Alt + L" tabindex="-1" onclick={functions.gotoNext}>Next</button>
|
|
<button class="styled" title="Alt + O" tabindex="-1" onclick={functions.gotoPrev}>Previous</button>
|
|
<button class="styled" title="Alt + C" tabindex="-1" onclick={functions.copy}>Copy</button>
|
|
<button class="styled" title="Alt + V" tabindex="-1" onclick={functions.paste}>Paste</button>
|
|
</div>
|
|
<div class="flex-row">
|
|
<button class="styled" title="Alt + S" tabindex="-1" onclick={functions.saveAll}>Save All</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
#formheader {
|
|
position: sticky;
|
|
top: 0;
|
|
padding-bottom: 0.25rem;
|
|
border-bottom: solid 1px #000000;
|
|
background-color: #ffffff;
|
|
z-index: 100;
|
|
}
|
|
</style>
|