diff --git a/webapp/src/TranscriptEditor.svelte b/webapp/src/TranscriptEditor.svelte index cf218938d2f83ca234e4cda3cf11278a174989cd..a2a1bcf707aa310f64fa62b6470c3e7ecbd5e7a1 100644 --- a/webapp/src/TranscriptEditor.svelte +++ b/webapp/src/TranscriptEditor.svelte @@ -7,10 +7,11 @@ import PersonList from "./PersonList.svelte"; import Mustache from "mustache"; - import YAML from 'js-yaml'; + import YAML from "js-yaml"; let resultModal; let resultMarkdown = ""; + let copyConfirmationCheckMark = false; async function generateTranscript() { const yamlMetadata = YAML.safeDump({ @@ -37,10 +38,17 @@ console.debug(transcript); resultMarkdown = transcript; + copyConfirmationCheckMark = false; return transcript; } </script> +<style> + .is-invisible { + visibility: false; + } +</style> + <TitleDateNumber bind:number={data.metadata.number} bind:date={data.metadata.date} @@ -87,25 +95,53 @@ </div> </div> -<div class="modal" bind:this={resultModal} class:is-active={resultMarkdown.length !== 0}> - <div class="modal-background"></div> +<div + class="modal" + bind:this={resultModal} + class:is-active={resultMarkdown.length !== 0}> + <div class="modal-background" /> <div class="modal-card"> <header class="modal-card-head"> <p class="modal-card-title">Protokoll-Vorlage</p> - <button class="delete" aria-label="close" on:click={() => {resultMarkdown=""}}></button> + <button + class="delete" + aria-label="close" + on:click={() => { + resultMarkdown = ''; + }} /> </header> <section class="modal-card-body"> - <pre lang="markdown"> - {resultMarkdown} - </pre> + <pre lang="markdown">{resultMarkdown}</pre> + <textarea + style="width: 2em; height: 2em; padding: 0; border: none; background: + transparent;" + value={resultMarkdown} + id="resultMarkdownCopyElement" /> </section> <footer class="modal-card-foot"> <p> - Kopiere dir dieses Markdown in ein Pad, z.B. auf <a href="https://md.kif.rocks">md.kif.rocks</a>. + Kopiere dir diesen Text in ein Pad, z.B. auf + <a href="https://md.kif.rocks">md.kif.rocks</a> + . </p> <p> - <button class="button" on:click={() => {resultMarkdown=""}}>Close</button> + <button + class="button" + on:click={() => { + const copyText = document.getElementById('resultMarkdownCopyElement'); + copyText.select(); + copyText.setSelectionRange(0, 99999); + document.execCommand('copy'); + copyConfirmationCheckMark = true; + }}> + <span + class="icon is-small" + class:is-invisible={!copyConfirmationCheckMark}> + <i class="fas fa-check" /> + </span> + <span>Copy Markdown</span> + </button> </p> </footer> </div> -</div> \ No newline at end of file +</div>