Allow customisation of padding character

yi-jiayu · Sep 4, 2019 · 6c6cd9f · 6c6cd9f
1 parent 30e1c36
commit 6c6cd9f
Showing 1 changed file with 20 additions and 2 deletions.
diff --git a/ios-experiment.html b/ios-experiment.html
@@ -46,10 +46,19 @@ <h3><small class="text-muted">Hide content behind a &quot;Read more&quot; button
     </div>
 
     <div class="form-group">
-      <label for="padding">Number of zero-width joiners to pad with</label>
+      <label for="padding">Number of characters to pad with</label>
       <input type="number" class="form-control" id="padding" value="10000">
     </div>
 
+    <div class="form-group">
+      <label for="padding">Code point for padding character</label>
+      <input type="text" class="form-control" id="pad-char" value="0x200B" required>
+      <small class="form-text text-muted">Eg. <code>0x200B</code> for zero-width space. See <a
+          href="http://jkorpela.fi/chars/spaces.html">http://jkorpela.fi/chars/spaces.html</a> for examples of
+        Unicode whitespace characters.</small>
+    </div>
+
+
     <div class="form-group">
       <label for="content">Content: </label>
       <textarea id="content" class="form-control mb-2"></textarea>
@@ -72,7 +81,8 @@ <h3><small class="text-muted">Hide content behind a &quot;Read more&quot; button
     var warning = document.getElementById('warning').value;
     var content = document.getElementById('content').value;
     var padding = Number(document.getElementById('padding').value);
-    var message = warning + ' ' + "\u200B".repeat(padding) + content;
+    var padChar = String.fromCharCode(document.getElementById('pad-char').value);
+    var message = warning + ' ' + padChar.repeat(padding) + content;
     document.getElementById('message').value = message;
     document.getElementById('copy').textContent = "Copy to clipboard (".concat(message.length, " chars)");
   }
@@ -89,6 +99,14 @@ <h3><small class="text-muted">Hide content behind a &quot;Read more&quot; button
   document.getElementById('copy').addEventListener('click', function () {
     copySpoilerMessage();
   });
+  var padCharInput = document.getElementById('pad-char');
+  padCharInput.addEventListener('input', function (e) {
+    if (isNaN(padCharInput.value)) {
+      padCharInput.setCustomValidity('Not a valid number!');
+    } else {
+      padCharInput.setCustomValidity('');
+    }
+  });
 </script>
 </body>
 </html>