You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 lines
2.9 KiB
JavaScript
82 lines
2.9 KiB
JavaScript
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,
|
|
button = document.querySelector('.input-field input + button.scan');
|
|
|
|
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() {
|
|
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();
|
|
});
|
|
}
|
|
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'})
|
|
.fromSource({
|
|
target: selector,
|
|
constraints: {
|
|
width: 800,
|
|
height: 600,
|
|
facingMode: "environment"
|
|
}
|
|
});
|
|
}
|
|
return this._scanner;
|
|
}
|
|
};
|
|
App.init();
|