Super messy initial working version. To clean up.

bookwyrm/static/js/bookwyrm.js

@@ -47,6 +47,10 @@ let BookWyrm = new (class {
             .forEach((node) =>
                 node.addEventListener("toggle", this.handleDetailsDropdown.bind(this))
             );
+
+        document
+            .querySelector("#barcode_scanner_modal")
+            .addEventListener("open", this.openBarcodeScanner.bind(this));
     }
 
     /**
@@ -427,9 +431,11 @@ let BookWyrm = new (class {
             });
 
             modalElement.addEventListener("keydown", handleFocusTrap);
+            modalElement.dispatchEvent(new Event('open'));
         }
 
         function handleModalClose(modalElement) {
+            modalElement.dispatchEvent(new Event('close'));
             modalElement.removeEventListener("keydown", handleFocusTrap);
             htmlElement.classList.remove("is-clipped");
             modalElement.classList.remove("is-active");
@@ -632,4 +638,57 @@ let BookWyrm = new (class {
             }
         }
     }
+
+    openBarcodeScanner(event) {
+        /*function onScanSuccess(decodedText, decodedResult) {
+            alert(`${decodedText}`, decodedResult);
+        }
+
+        function onScanFailure(error) {
+            alert(error);
+        }*/
+
+        Quagga.init({
+            inputStream : {
+                name: "Live",
+                type: "LiveStream",
+                target: "#barcode_scanner"
+            },
+            decoder : {
+                readers: [
+                    "ean_reader",
+                    {
+                        format: "ean_reader",
+                        config: {
+                            supplements: [ "ean_2_reader", "ean_5_reader" ]
+                        }
+                    }
+                ],
+                debug: {
+                    drawBoundingBox: true,
+                    drawScanline: true,
+                    showPattern: true,
+                },
+                multiple: false
+            },
+            debug: true
+        }, function(err) {
+            if (err) {
+                console.log(err);
+                return;
+            }
+
+            console.log('started');
+            Quagga.start();
+        });
+
+        Quagga.onDetected(function(result) {
+            var code = result.codeResult.code;
+
+            location.href = `search?q=${code}`;
+            Quagga.stop();
+
+            console.log(code);
+        });
+    }
 })();

bookwyrm/templates/layout.html

@@ -54,9 +54,15 @@
                                 <span class="is-sr-only">{% trans "Search" %}</span>
                             </span>
                         </button>
+                        <button class="button" type="button" data-modal-open="barcode_scanner_modal">
+                            <span class="icon icon-barcode" title="{% trans 'Scan Barcode' %}">
+                                <span class="is-sr-only">{% trans "Scan Barcode" %}</span>
+                            </span>
+                        </button>
                     </div>
                 </div>
             </form>
+            {% include "search/barcode_modal.html" with id="barcode_scanner_modal" %}
 
             <button type="button" tabindex="0" class="navbar-burger pulldown-menu my-4" data-controls="main_nav" aria-expanded="false">
                 <i class="icon icon-dots-three-vertical" aria-hidden="true"></i>
@@ -264,6 +270,7 @@
 <script src="{% static "js/bookwyrm.js" %}?v={{ js_cache }}"></script>
 <script src="{% static "js/localstorage.js" %}?v={{ js_cache }}"></script>
 <script src="{% static "js/status_cache.js" %}?v={{ js_cache }}"></script>
+<script src="{% static "js/vendor/quagga.min.js" %}?v={{ js_cache }}"></script>
 
 {% block scripts %}{% endblock %}
 

bookwyrm/templates/search/barcode_modal.html

@@ -0,0 +1,14 @@
+{% extends 'components/modal.html' %}
+{% load i18n %}
+
+{% block modal-title %}
+{% blocktrans %}
+Scan Barcode
+{% endblocktrans %}
+{% endblock %}
+
+{% block modal-body %}
+    <div id="barcode_scanner"></div>
+{% endblock %}
+
+