From c4398ff18747752ee26ed9bc66ad094fbaf7c83b Mon Sep 17 00:00:00 2001
From: Vivianne Langdon <puttabutta@gmail.com>
Date: Sat, 26 Nov 2022 12:14:48 -0800
Subject: [PATCH 1/2] make use of templates instead of hidden divs which is
 more elegant

---
 bookwyrm/static/js/bookwyrm.js               |  5 +-
 bookwyrm/templates/search/barcode_modal.html | 94 ++++++++++----------
 2 files changed, 48 insertions(+), 51 deletions(-)

diff --git a/bookwyrm/static/js/bookwyrm.js b/bookwyrm/static/js/bookwyrm.js
index aa06a8b0a..eddbfbee3 100644
--- a/bookwyrm/static/js/bookwyrm.js
+++ b/bookwyrm/static/js/bookwyrm.js
@@ -628,9 +628,8 @@ let BookWyrm = new (class {
         }
 
         function toggleStatus(status) {
-            for (const child of statusNode.children) {
-                BookWyrm.toggleContainer(child, !child.classList.contains(status));
-            }
+            const template = document.querySelector(`#barcode-${status}`);
+            statusNode.replaceChildren(template ? template.content.cloneNode(true) : null);
         }
 
         function initBarcodes(cameraId = null) {
diff --git a/bookwyrm/templates/search/barcode_modal.html b/bookwyrm/templates/search/barcode_modal.html
index 70481b20a..519adfd3b 100644
--- a/bookwyrm/templates/search/barcode_modal.html
+++ b/bookwyrm/templates/search/barcode_modal.html
@@ -1,48 +1,46 @@
-{% extends 'components/modal.html' %}
-{% load i18n %}
-
-{% block modal-title %}
-    {% blocktrans %}
-        Scan Barcode
-    {% endblocktrans %}
-{% endblock %}
-
-{% block modal-body %}
-    <div class="block">
-        <div id="barcode-scanner"></div>
-    </div>
-
-    <div id="barcode-camera-list" class="select is-small">
-        <select>
-        </select>
-    </div>
-
-    <div id="barcode-status" class="block">
-        <div class="grant-access is-hidden">
-            <span class="icon icon-lock"></span>
-            <span class="is-size-5">{% trans "Requesting camera..." %}</span><br/>
-            <span>{% trans "Grant access to the camera to scan a book's barcode." %}</span>
-        </div>
-        <div class="access-denied is-hidden">
-            <span class="icon icon-warning"></span>
-            <span class="is-size-5">Access denied</span><br/>
-            <span>{% trans "Could not access camera" %}</span>
-        </div>
-        <div class="scanning is-hidden">
-            <span class="icon icon-barcode"></span>
-            <span class="is-size-5">{% trans "Scanning..." context "barcode scanner" %}</span><br/>
-            <span>{% trans "Align your book's barcode with the camera." %}</span>
-        </div>
-        <div class="found is-hidden">
-            <span class="icon icon-check"></span>
-            <span class="is-size-5">{% trans "ISBN scanned" context "barcode scanner" %}</span><br/>
-            {% trans "Searching for book:" context "followed by ISBN" %} <span class="isbn"></span>...
-        </div>
-    </div>
-{% endblock %}
-
-{% block modal-footer %}
-    <button class="button" type="button" data-modal-close>{% trans "Cancel" %}</button>
-{% endblock %}
-
-
+{% extends 'components/modal.html' %}
+{% load i18n %}
+
+{% block modal-title %}
+    {% blocktrans %}
+        Scan Barcode
+    {% endblocktrans %}
+{% endblock %}
+
+{% block modal-body %}
+    <div class="block">
+        <div id="barcode-scanner"></div>
+    </div>
+
+    <div id="barcode-camera-list" class="select is-small">
+        <select>
+        </select>
+    </div>
+    <template id="barcode-grant-access">
+        <span class="icon icon-lock"></span>
+        <span class="is-size-5">{% trans "Requesting camera..." %}</span><br/>
+        <span>{% trans "Grant access to the camera to scan a book's barcode." %}</span>
+    </template>
+    <template id="barcode-access-denied">
+        <span class="icon icon-warning"></span>
+        <span class="is-size-5">Access denied</span><br/>
+        <span>{% trans "Could not access camera" %}</span>
+    </template>
+    <template id="barcode-scanning">
+        <span class="icon icon-barcode"></span>
+        <span class="is-size-5">{% trans "Scanning..." context "barcode scanner" %}</span><br/>
+        <span>{% trans "Align your book's barcode with the camera." %}</span>
+    </template>
+    <template id="barcode-found">
+        <span class="icon icon-check"></span>
+        <span class="is-size-5">{% trans "ISBN scanned" context "barcode scanner" %}</span><br/>
+        {% trans "Searching for book:" context "followed by ISBN" %} <span class="isbn"></span>...
+    </template>
+    <div id="barcode-status" class="block"></div>
+{% endblock %}
+
+{% block modal-footer %}
+    <button class="button" type="button" data-modal-close>{% trans "Cancel" %}</button>
+{% endblock %}
+
+

From c2b447cf49f4e55f448c80667ef6332cbf580bab Mon Sep 17 00:00:00 2001
From: Vivianne Langdon <puttabutta@gmail.com>
Date: Sat, 26 Nov 2022 12:19:37 -0800
Subject: [PATCH 2/2] lint

---
 bookwyrm/static/js/bookwyrm.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/bookwyrm/static/js/bookwyrm.js b/bookwyrm/static/js/bookwyrm.js
index eddbfbee3..5b3f13d4a 100644
--- a/bookwyrm/static/js/bookwyrm.js
+++ b/bookwyrm/static/js/bookwyrm.js
@@ -629,6 +629,7 @@ let BookWyrm = new (class {
 
         function toggleStatus(status) {
             const template = document.querySelector(`#barcode-${status}`);
+
             statusNode.replaceChildren(template ? template.content.cloneNode(true) : null);
         }