Fixed Events; Added example for multiple types of barcodes

example/scan-to-input/index.html

@@ -47,83 +47,87 @@
             <div class="collapsable-source">
                 <pre>
                     <code class="language-javascript">
-    var App = {
-        _scanner: null,
-        init: function() {
-            this.attachListeners();
-        },
-        activateScanner: function() {
-            var scanner = this.configureScanner('.overlay__content'),
-                onDetected = function (result) {
-                    document.querySelector('input.isbn').value = result.codeResult.code;
-                    stop();
-                }.bind(this),
-                stop = function() {
-                    scanner.stop();  // should also clear all event-listeners?
-                    scanner.removeEventListener('detected', onDetected);
-                    this.hideOverlay();
-                    this.attachListeners();
-                }.bind(this);
+var Quagga = window.Quagga;
+var App = {
+    _scanner: null,
+    init: function() {
+        this.attachListeners();
+    },
+    activateScanner: function() {
+        var scanner = this.configureScanner('.overlay__content'),
+            onDetected = function (result) {
+                document.querySelector('input.isbn').value = result.codeResult.code;
+                stop();
+            }.bind(this),
+            stop = function() {
+                scanner.stop();  // should also clear all event-listeners?
+                scanner.removeEventListener('detected', onDetected);
+                this.hideOverlay();
+                this.attachListeners();
+            }.bind(this);
 
-            this.showOverlay(stop);
-            scanner.addEventListener('detected', onDetected).start();
-        },
-        attachListeners: function() {
-            var self = this;
+        this.showOverlay(stop);
+        scanner.addEventListener('detected', onDetected).start();
+    },
+    attachListeners: function() {
+        var self = this,
+            button = document.querySelector('.input-field input + button.scan');
 
-            document.querySelector('.input-field input + button.scan')
-                .addEventListener("click", function onClick(e) {
-                    e.preventDefault();
-                    e.target.removeEventListener("click", onClick);
-                    self.activateScanner();
-                });
-        },
-        showOverlay: function(cancelCb) {
-            if (!this._overlay) {
-                var content = document.createElement('div'),
-                    closeButton = document.createElement('div');
+        button.addEventListener("click", function onClick(e) {
+            e.preventDefault();
+            button.removeEventListener("click", onClick);
+            self.activateScanner();
+        });
+    },
+    showOverlay: function(cancelCb) {
+        if (!this._overlay) {
+            var content = document.createElement('div'),
+                closeButton = document.createElement('div');
 
-                closeButton.appendChild(document.createTextNode('X'));
-                content.className = 'overlay__content';
-                closeButton.className = 'overlay__close';
-                this._overlay = document.createElement('div');
-                this._overlay.className = 'overlay';
-                this._overlay.appendChild(content);
-                content.appendChild(closeButton);
-                closeButton.addEventListener('click', function closeClick(e) {
-                    e.target.removeEventListener('click', closeClick);
-                    cancelCb();
-                });
-                document.body.appendChild(this._overlay);
-            } else {
-                var closeButton = document.querySelector('.overlay__close');
-                closeButton.addEventListener('click', cancelCb);
-            }
-            this._overlay.style.display = "block";
-        },
-        hideOverlay: function() {
-            if (this._overlay) {
-                this._overlay.style.display = "none";
-            }
-        },
-        configureScanner: function(selector) {
-            if (!this._scanner) {
-                this._scanner = Quagga
-                    .decoder({readers: ['ean_reader']})
-                    .locator({patchSize: 'medium'})
-                    .fromVideo({
-                        target: selector,
-                        constraints: {
-                            width: 800,
-                            height: 600,
-                            facingMode: "environment"
-                        }
-                    });
-            }
-            return this._scanner;
+            closeButton.appendChild(document.createTextNode('X'));
+            content.className = 'overlay__content';
+            closeButton.className = 'overlay__close';
+            this._overlay = document.createElement('div');
+            this._overlay.className = 'overlay';
+            this._overlay.appendChild(content);
+            content.appendChild(closeButton);
+            closeButton.addEventListener('click', function closeClick() {
+                closeButton.removeEventListener('click', closeClick);
+                cancelCb();
+            });
+            document.body.appendChild(this._overlay);
+        } else {
+            var closeButton = document.querySelector('.overlay__close');
+            closeButton.addEventListener('click', function closeClick() {
+                closeButton.removeEventListener('click', closeClick);
+                cancelCb();
+            });
         }
-    };
-    App.init();
+        this._overlay.style.display = "block";
+    },
+    hideOverlay: function() {
+        if (this._overlay) {
+            this._overlay.style.display = "none";
+        }
+    },
+    configureScanner: function(selector) {
+        if (!this._scanner) {
+            this._scanner = Quagga
+                .decoder({readers: ['ean_reader']})
+                .locator({patchSize: 'medium'})
+                .fromVideo({
+                    target: selector,
+                    constraints: {
+                        width: 800,
+                        height: 600,
+                        facingMode: "environment"
+                    }
+                });
+        }
+        return this._scanner;
+    }
+};
+App.init();
                     </code>
                 </pre>
             </div>