From 8abb79a20072c45018bb3a4e895a19b7046246ef Mon Sep 17 00:00:00 2001
From: Conrad Zelck <git@simpel.cc>
Date: Sat, 7 Oct 2023 22:01:24 +0200
Subject: [PATCH] feat: set convert button regarding input field

All actions push a convert immediately except changes in the input
field. That's because every new character would do a conversion what
makes a lot of traffic. But to give a hint that a new conversion could
be useful the convert button will be enabled if the content is differ-
ent from the last conversion. All other actions trigger the conversion
and disable the convert button.

Signed-off-by: Conrad Zelck <git@simpel.cc>
---
 index.php |  4 ++--
 script.js | 11 ++++++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/index.php b/index.php
index d6c428b..751ae12 100644
--- a/index.php
+++ b/index.php
@@ -189,7 +189,7 @@
               <input type="checkbox" id="cb-inputfile" name="cb-inputfile" onchange="checkInputFile(),pandoc()">Use file as input</label>
             <form id="inputfile-form" class="file" action="/input" method="post" enctype="multipart/form-data">
               <label for="inputfile">File
-                <input id="inputfile" name="file" type="file" /></label>
+                <input id="inputfile" name="file" type="file" onchange="checkInputFile(),pandoc()"/></label>
             </form>
           </div>
           <div class="right">
@@ -210,7 +210,7 @@
             <button type="button" disabled id="convert" name="convert" title="Convert input.
 You can use this shortcut:
 OSX: [ Ctrl ] + [ Opt ] + [ p ]
-WIN: [ Alt ] + [ p ]" accesskey="p" onclick="pandoc(true)">Convert [p]</button>
+WIN: [ Alt ] + [ p ]" accesskey="p" onclick="pandoc(true)">Convert input field [p]</button>
           </div>
           <div id="input" role="textbox" aria-multiline="true" aria-labelledby="label-inputfield" contenteditable="true"></div>
         </div>
diff --git a/script.js b/script.js
index 82856be..166c4a9 100644
--- a/script.js
+++ b/script.js
@@ -1,5 +1,8 @@
 const urlHost = window.location.href.substr(0, window.location.href.lastIndexOf("/"));
 
+// needed for check whether input has changed since last convert
+let inputTextByConvert = "";
+
 // the following object keeps the file extension for the select option values of 'from' and 'to'
 // access: value = extension["key"]
 const extension = {"asciidoc_legacy": "asciidoc", "asciidoc": "asciidoc", "beamer": "tex", "biblatex": "bib", "bibtex": "bibtex", "chunkedhtml": "zip", "commonmark_x": "md", "commonmark": "md", "context": "tex", "creole": "txt", "csljson": "json", "csv": "csv", "docbook5": "xml", "docbook": "xml", "docx": "docx", "dokuwiki": "txt", "dzslides": "html", "endnotexml": "xml", "epub2": "epub", "epub3": "epub", "epub": "epub", "fb2": "fb2", "gfm": "md", "haddock": "md", "html4": "html", "html5": "html", "html": "html", "icml": "icml", "ipynb": "ipynb", "jats_archiving": "xml", "jats_articleauthoring": "xml", "jats_publishing": "xml", "jats": "xml", "jira": "txt", "json": "json", "latex": "tex", "man": "man", "markdown_mmd": "md", "markdown_phpextra": "md", "markdown_strict": "md", "markdown": "md", "markua": "md", "mediawiki": "txt", "ms": "ms", "muse": "txt", "native": "hs", "odt": "odt", "opendocument": "odf", "opml": "xml", "org": "txt", "pdf": "pdf", "plain": "txt", "pptx": "pptx", "preview": "html", "revealjs": "html", "ris": "ris", "rst": "rst", "rtf": "rtf", "s5": "html", "slideous": "html", "slidy": "html", "t2t": "t2t", "tei": "tei", "texinfo": "texi", "textile": "textile", "tikiwiki": "txt", "tsv": "tsv", "twiki": "txt", "typst": "typ", "vimwiki": "txt", "xwiki": "txt", "zimwiki": "txt"};
@@ -53,6 +56,8 @@ function pandoc(alert) {
   }
   var to  = document.getElementById('to').value;
   var input  = document.getElementById('input').innerText;
+  // update global remembrance of input since last convert
+  inputTextByConvert = input;
   if (isEmpty(input) && !useInputFile) {
     if (alert === true) {
       pushDialog("Error: Nothing to convert.\n\nYou must either write something into the 'Input field' or select a file as input in the 'Options'.", "error");
@@ -153,7 +158,7 @@ function setMainButtonsAppearance() {
   if (useInputFile) {
     inputFile = document.getElementById('inputfile').files[0];
   }
-  var input  = document.getElementById('input').innerText;
+  const input  = document.getElementById('input').innerText;
   const output = document.getElementById('output');
 
   // convert button setting
@@ -164,6 +169,8 @@ function setMainButtonsAppearance() {
   } else if (isEmpty(input) && !useInputFile) {
     convertButton.setAttribute('disabled', 'disabled');
     output.innerText = "";
+  } else if (input === inputTextByConvert) {
+    convertButton.setAttribute('disabled', 'disabled');
   } else {
     convertButton.removeAttribute('disabled');
   }
@@ -183,11 +190,13 @@ function setMainButtonsAppearance() {
 function checkInputFile() {
   if (document.getElementById('cb-inputfile').checked === true) {
     document.getElementById('inputfile').removeAttribute("disabled");
+    document.getElementById('input').removeAttribute("contenteditable");
     document.getElementById('input').classList.add("disabled");
     document.getElementById('label-inputfield').classList.add("disabled");
     document.getElementById('output').innerText = "";
   } else {
     document.getElementById('inputfile').setAttribute("disabled", "disabled");
+    document.getElementById('input').setAttribute("contenteditable", "true");
     document.getElementById('input').classList.remove("disabled");
     document.getElementById('label-inputfield').classList.remove("disabled");
   }
-- 
GitLab