Hide form parts with the hidden attribute.

publish/utilities.js

@@ -8,15 +8,15 @@ function showHide(show) {
   }
 
   if (show == 'text') {
-    document.getElementById(hide+'parent').style.display = "none";
-    document.getElementById(show+'parent').style.display = "block";
-    document.getElementById('wordcounter').style.display = "block";
+    document.getElementById(hide+'parent').hidden = true;
+    document.getElementById(show+'parent').hidden = false;
+    document.getElementById('wordcounter').hidden = false;
     if (window.storyEditor)
       storyEditor.focus();
   } else if (show == 'upload') {
-    document.getElementById('wordcounter').style.display = "none";
-    document.getElementById(hide+'parent').style.display = "none";
-    document.getElementById(show+'parent').style.display = "block";
+    document.getElementById('wordcounter').hidden = true;
+    document.getElementById(hide+'parent').hidden = true;
+    document.getElementById(show+'parent').hidden = false;
   }
 
   // Mark the tab that is showing

publish/write.inc.php

@@ -48,7 +48,7 @@ if (count($validate) !== 0) {
 <div class="tabs">
   <span id="texttab" class="tab active<?= isset($validate['story']) ? ' red' : '' ?>" onclick="showHide('text');">Text:</span>
   <span id="uploadtab" class="tab<?= isset($validate['upload']) ? ' red' : '' ?>" onclick="showHide('upload');">Image:</span>
-  <span id="wordcounter" class="counter" style="display: none;">0 words</span>
+  <span id="wordcounter" class="counter" hidden>0 words</span>
 </div>
 <?php $line_break_note = '(To get line-breaks&mdash;as in poetry&mdash;instead of paragraph breaks, hit shift-enter instead of enter.)'; ?>
 <div class="textarea rightcolumn">
@@ -58,7 +58,7 @@ echo (isset($story) ? form_value($story) : '')
   ?></textarea>
     <div class="note"><?= $line_break_note ?></div>
   </div>
-  <div id="uploadparent" style="display: none;">
+  <div id="uploadparent" hidden>
   <div class="upload"><div>
 <?php 
 if (isset($file_src) || isset($img)) {
@@ -102,7 +102,7 @@ if (isset($file_src) || isset($img)) {
   <input type="hidden" id="editor" name="editor" value="original author" />
 <?php } ?>
 
-<div style="display: none;">
+<div hidden>
 <input type="hidden" id="date" name="date" value="<?= isset($date) ? form_value($date) : '' ?>" />
 <input type="hidden" id="id" name="id" value="<?= isset($id) ? form_value($id) : '' ?>" />
 </div>
@@ -151,7 +151,7 @@ if (isset($file_src) || isset($img) || isset($validate['upload'])) {
   echo "  showHide('upload')\n";
 } else {
   echo "  var wordcounter = document.getElementById('wordcounter');\n";
-  echo "  wordcounter.style.display = 'block';\n";
+  echo "  wordcounter.hidden = false;\n";
 }
   echo "</script>\n";
 ?>

style.css

@@ -33,6 +33,11 @@
   src: url('graphics/teenbold.ttf') format('truetype');
 }
 
+/* Rules that set display, such as "#main .counter", would otherwise show hidden elements */
+[hidden] {
+  display: none !important;
+}
+
 body {
   font-family: "Noto Sans", "Verdana", sans-serif;
   font-size: 12pt;

tests/js/helpers.js

@@ -21,8 +21,8 @@ const STORY_FORM = `
     <label for="story">Story:</label>
     <span id="texttab" class="tab active">Text:</span><span id="uploadtab" class="tab">Image:</span>
     <div id="textparent"><textarea id="story" name="story"></textarea></div>
-    <div id="uploadparent" style="display: none;"><input type="file" id="upload" name="upload"></div>
-    <span id="wordcounter" class="counter" style="display: none;">0 words</span>
+    <div id="uploadparent" hidden><input type="file" id="upload" name="upload"></div>
+    <span id="wordcounter" class="counter" hidden>0 words</span>
   </form>`;
 
 function load(scripts, body, story) {

tests/js/utilities.test.js

@@ -82,11 +82,9 @@ test("showHide switches between the text and the image tabs", () => {
   let focused = 0;
   w.storyEditor = { focus: () => focused++ };
   assert.equal(w.showHide("upload"), true);
-  assert.deepEqual([$("textparent").style.display, $("uploadparent").style.display, $("wordcounter").style.display],
-                   ["none", "block", "none"]);
+  assert.deepEqual([$("textparent").hidden, $("uploadparent").hidden, $("wordcounter").hidden], [true, false, true]);
   assert.equal(w.showHide("text"), true);
-  assert.deepEqual([$("textparent").style.display, $("uploadparent").style.display, $("wordcounter").style.display],
-                   ["block", "none", "block"]);
+  assert.deepEqual([$("textparent").hidden, $("uploadparent").hidden, $("wordcounter").hidden], [false, true, false]);
   assert.equal(focused, 1);
   assert.equal(w.showHide("other"), false);
 });

tests/php/Pages/SubmitTest.php

@@ -30,6 +30,14 @@ class SubmitTest extends PageTestCase {
     $this->assertStringContainsString('<script type="text/javascript" src="../publish/editor.js"></script>', $page['body']);
   }
 
+  public function testTheFormHidesWithTheHiddenAttribute(): void {
+    $body = $this->get('/publish')['body'];
+    $this->assertStringNotContainsString('display: none', $body);
+    $this->assertStringContainsString('<span id="wordcounter" class="counter" hidden>', $body);
+    $this->assertStringContainsString('<div id="uploadparent" hidden>', $body);
+    $this->assertStringContainsString('wordcounter.hidden = false;', $body);
+  }
+
   public function testTheImageTabKeepsTheSpaceOfTheNote(): void {
     $html = new \DOMDocument();
     $html->loadHTML($this->get('/publish')['body'], LIBXML_NOERROR);