feat: en-/disable convert and copy button

There are a lot of stati where it's not good to have those bottons en- abled. So check it on every bodies load, change, click or keyup. Signed-off-by: Conrad Zelck <git@simpel.cc>

feat: en-/disable convert and copy button
6eff4463 · Conrad Zelck · bf5a6749 · 6eff4463 · 6eff4463
Unverified Commit 6eff4463 authored 1 year ago by Conrad Zelck
--- a/index.php
+++ b/index.php
@@ -11,7 +11,7 @@
  </script>
 </head>

-<body>
+<body onload="setMainButtonsAppearance()" onchange="setMainButtonsAppearance()" onclick="setMainButtonsAppearance()" onkeyup="setMainButtonsAppearance()">
  <header>
    <?php include dirname($_SERVER['DOCUMENT_ROOT']) . "/simpel.cc/php/header.php"; ?>
  </header>
@@ -206,7 +206,7 @@
      <div class="left">
        <div class="flex-space-between">
          <label for="input" id="label-inputfield" class="labelLikeHeading">Input field</label>
-          <button type="button" id="convert" name="convert" title="Convert input.
+          <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>
@@ -218,7 +218,7 @@ WIN: [ Alt ] + [ p ]" accesskey="p" onclick="pandoc(true)">Convert [p]</button>
      <div class="right">
        <div class="flex-space-between">
          <p id="label-outputfield" class="label">Output field</p>
-          <button type="button" id="copy" name="copy" title="Copy output text.
+          <button type="button" disabled id="copy" name="copy" title="Copy output text.
 You can use this shortcut:
 OSX: [ Ctrl ] + [ Opt ] + [ c ]
 WIN: [ Alt ] + [ c ]" accesskey="c" onclick="copyOutput()">Copy output field [c]</button>

--- a/script.js
+++ b/script.js
@@ -117,6 +117,7 @@ function pandoc(alert) {
          document.getElementById("output").appendChild(node);
          node.innerText = content;
        }
+        setMainButtonsAppearance();
        // close the busy dialog
        dialog.close()
      }
@@ -143,11 +144,49 @@ function toggleToc() {
  }
 }

+function setMainButtonsAppearance() {
+  console.log('main buttons');
+  const convertButton = document.getElementById('convert');
+  const copyButton = document.getElementById('copy');
+  const from  = document.getElementById('from').value;
+  const useInputFile  = document.getElementById('cb-inputfile').checked;
+  let inputFile = false;
+  if (useInputFile) {
+    inputFile = document.getElementById('inputfile').files[0];
+  }
+  var input  = document.getElementById('input').value;
+  const output = document.getElementById('output');
+
+  // convert button setting
+  if (from === "none") {
+    convertButton.setAttribute('disabled', 'disabled');
+  } else if (!inputFile && useInputFile) {
+    convertButton.setAttribute('disabled', 'disabled');
+  } else if (isEmpty(input) && !useInputFile) {
+    convertButton.setAttribute('disabled', 'disabled');
+    output.innerText = "";
+  } else {
+    convertButton.removeAttribute('disabled');
+  }
+
+  const outputText = document.getElementById('output').innerText;
+
+  // copy button setting
+  if (typeof outputText === 'undefined') {
+    copyButton.setAttribute('disabled', 'disabled')
+  } else if (isEmpty(outputText)) {
+    copyButton.setAttribute('disabled', 'disabled')
+  } else {
+    copyButton.removeAttribute('disabled')
+  }
+}
+
 function checkInputFile() {
  if (document.getElementById('cb-inputfile').checked === true) {
    document.getElementById('inputfile').removeAttribute("disabled");
    document.getElementById('input').setAttribute("disabled", "disabled");
    document.getElementById('label-inputfield').classList.add("disabled");
+    document.getElementById('output').innerText = "";
  } else {
    document.getElementById('inputfile').setAttribute("disabled", "disabled");
    document.getElementById('input').removeAttribute("disabled");