summaryrefslogtreecommitdiff
path: root/addons/barcodes/static/src/js/barcode_events.js
diff options
context:
space:
mode:
authorstephanchrst <stephanchrst@gmail.com>2022-05-10 21:51:50 +0700
committerstephanchrst <stephanchrst@gmail.com>2022-05-10 21:51:50 +0700
commit3751379f1e9a4c215fb6eb898b4ccc67659b9ace (patch)
treea44932296ef4a9b71d5f010906253d8c53727726 /addons/barcodes/static/src/js/barcode_events.js
parent0a15094050bfde69a06d6eff798e9a8ddf2b8c21 (diff)
initial commit 2
Diffstat (limited to 'addons/barcodes/static/src/js/barcode_events.js')
-rw-r--r--addons/barcodes/static/src/js/barcode_events.js300
1 files changed, 300 insertions, 0 deletions
diff --git a/addons/barcodes/static/src/js/barcode_events.js b/addons/barcodes/static/src/js/barcode_events.js
new file mode 100644
index 00000000..6f2f6785
--- /dev/null
+++ b/addons/barcodes/static/src/js/barcode_events.js
@@ -0,0 +1,300 @@
+odoo.define('barcodes.BarcodeEvents', function(require) {
+"use strict";
+
+var config = require('web.config');
+var core = require('web.core');
+var mixins = require('web.mixins');
+var session = require('web.session');
+
+
+// For IE >= 9, use this, new CustomEvent(), instead of new Event()
+function CustomEvent ( event, params ) {
+ params = params || { bubbles: false, cancelable: false, detail: undefined };
+ var evt = document.createEvent( 'CustomEvent' );
+ evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
+ return evt;
+ }
+CustomEvent.prototype = window.Event.prototype;
+
+var BarcodeEvents = core.Class.extend(mixins.PropertiesMixin, {
+ timeout: null,
+ key_pressed: {},
+ buffered_key_events: [],
+ // Regexp to match a barcode input and extract its payload
+ // Note: to build in init() if prefix/suffix can be configured
+ regexp: /(.{3,})[\n\r\t]*/,
+ // By knowing the terminal character we can interpret buffered keys
+ // as a barcode as soon as it's encountered (instead of waiting x ms)
+ suffix: /[\n\r\t]+/,
+ // Keys from a barcode scanner are usually processed as quick as possible,
+ // but some scanners can use an intercharacter delay (we support <= 50 ms)
+ max_time_between_keys_in_ms: session.max_time_between_keys_in_ms || 55,
+ // To be able to receive the barcode value, an input must be focused.
+ // On mobile devices, this causes the virtual keyboard to open.
+ // Unfortunately it is not possible to avoid this behavior...
+ // To avoid keyboard flickering at each detection of a barcode value,
+ // we want to keep it open for a while (800 ms).
+ inputTimeOut: 800,
+
+ init: function() {
+ mixins.PropertiesMixin.init.call(this);
+ // Keep a reference of the handler functions to use when adding and removing event listeners
+ this.__keydown_handler = _.bind(this.keydown_handler, this);
+ this.__keyup_handler = _.bind(this.keyup_handler, this);
+ this.__handler = _.bind(this.handler, this);
+ // Bind event handler once the DOM is loaded
+ // TODO: find a way to be active only when there are listeners on the bus
+ $(_.bind(this.start, this, false));
+
+ // Mobile device detection
+ this.isChromeMobile = config.device.isMobileDevice && navigator.userAgent.match(/Chrome/i);
+
+ // Creates an input who will receive the barcode scanner value.
+ this.$barcodeInput = $('<input/>', {
+ name: 'barcode',
+ type: 'text',
+ css: {
+ 'position': 'fixed',
+ 'top': '50%',
+ 'transform': 'translateY(-50%)',
+ 'z-index': '-1',
+ 'opacity': '0',
+ },
+ });
+ // Avoid to show autocomplete for a non appearing input
+ this.$barcodeInput.attr('autocomplete', 'off');
+
+ this.__blurBarcodeInput = _.debounce(this._blurBarcodeInput, this.inputTimeOut);
+ },
+
+ handle_buffered_keys: function() {
+ var str = this.buffered_key_events.reduce(function(memo, e) { return memo + String.fromCharCode(e.which) }, '');
+ var match = str.match(this.regexp);
+
+ if (match) {
+ var barcode = match[1];
+
+ // Send the target in case there are several barcode widgets on the same page (e.g.
+ // registering the lot numbers in a stock picking)
+ core.bus.trigger('barcode_scanned', barcode, this.buffered_key_events[0].target);
+
+ // Dispatch a barcode_scanned DOM event to elements that have barcode_events="true" set.
+ if (this.buffered_key_events[0].target.getAttribute("barcode_events") === "true")
+ $(this.buffered_key_events[0].target).trigger('barcode_scanned', barcode);
+ } else {
+ this.resend_buffered_keys();
+ }
+
+ this.buffered_key_events = [];
+ },
+
+ resend_buffered_keys: function() {
+ var old_event, new_event;
+ for(var i = 0; i < this.buffered_key_events.length; i++) {
+ old_event = this.buffered_key_events[i];
+
+ if(old_event.which !== 13) { // ignore returns
+ // We do not create a 'real' keypress event through
+ // eg. KeyboardEvent because there are several issues
+ // with them that make them very different from
+ // genuine keypresses. Chrome per example has had a
+ // bug for the longest time that causes keyCode and
+ // charCode to not be set for events created this way:
+ // https://bugs.webkit.org/show_bug.cgi?id=16735
+ var params = {
+ 'bubbles': old_event.bubbles,
+ 'cancelable': old_event.cancelable,
+ };
+ new_event = $.Event('keypress', params);
+ new_event.viewArg = old_event.viewArg;
+ new_event.ctrl = old_event.ctrl;
+ new_event.alt = old_event.alt;
+ new_event.shift = old_event.shift;
+ new_event.meta = old_event.meta;
+ new_event.char = old_event.char;
+ new_event.key = old_event.key;
+ new_event.charCode = old_event.charCode;
+ new_event.keyCode = old_event.keyCode || old_event.which; // Firefox doesn't set keyCode for keypresses, only keyup/down
+ new_event.which = old_event.which;
+ new_event.dispatched_by_barcode_reader = true;
+
+ $(old_event.target).trigger(new_event);
+ }
+ }
+ },
+
+ element_is_editable: function(element) {
+ return $(element).is('input,textarea,[contenteditable="true"]');
+ },
+
+ // This checks that a keypress event is either ESC, TAB, an arrow
+ // key or a function key. This is Firefox specific, in Chrom{e,ium}
+ // keypress events are not fired for these types of keys, only
+ // keyup/keydown.
+ is_special_key: function(e) {
+ if (e.key === "ArrowLeft" || e.key === "ArrowRight" ||
+ e.key === "ArrowUp" || e.key === "ArrowDown" ||
+ e.key === "Escape" || e.key === "Tab" ||
+ e.key === "Backspace" || e.key === "Delete" ||
+ e.key === "Home" || e.key === "End" ||
+ e.key === "PageUp" || e.key === "PageDown" ||
+ e.key === "Unidentified" || /F\d\d?/.test(e.key)) {
+ return true;
+ } else {
+ return false;
+ }
+ },
+
+ // The keydown and keyup handlers are here to disallow key
+ // repeat. When preventDefault() is called on a keydown event
+ // the keypress that normally follows is cancelled.
+ keydown_handler: function(e){
+ if (this.key_pressed[e.which]) {
+ e.preventDefault();
+ } else {
+ this.key_pressed[e.which] = true;
+ }
+ },
+
+ keyup_handler: function(e){
+ this.key_pressed[e.which] = false;
+ },
+
+ handler: function(e){
+ // Don't catch events we resent
+ if (e.dispatched_by_barcode_reader)
+ return;
+ // Don't catch non-printable keys for which Firefox triggers a keypress
+ if (this.is_special_key(e))
+ return;
+ // Don't catch keypresses which could have a UX purpose (like shortcuts)
+ if (e.ctrlKey || e.metaKey || e.altKey)
+ return;
+ // Don't catch Return when nothing is buffered. This way users
+ // can still use Return to 'click' on focused buttons or links.
+ if (e.which === 13 && this.buffered_key_events.length === 0)
+ return;
+ // Don't catch events targeting elements that are editable because we
+ // have no way of redispatching 'genuine' key events. Resent events
+ // don't trigger native event handlers of elements. So this means that
+ // our fake events will not appear in eg. an <input> element.
+ if ((this.element_is_editable(e.target) && !$(e.target).data('enableBarcode')) && e.target.getAttribute("barcode_events") !== "true")
+ return;
+
+ // Catch and buffer the event
+ this.buffered_key_events.push(e);
+ e.preventDefault();
+ e.stopImmediatePropagation();
+
+ // Handle buffered keys immediately if the keypress marks the end
+ // of a barcode or after x milliseconds without a new keypress
+ clearTimeout(this.timeout);
+ if (String.fromCharCode(e.which).match(this.suffix)) {
+ this.handle_buffered_keys();
+ } else {
+ this.timeout = setTimeout(_.bind(this.handle_buffered_keys, this), this.max_time_between_keys_in_ms);
+ }
+ },
+
+ /**
+ * Try to detect the barcode value by listening all keydown events:
+ * Checks if a dom element who may contains text value has the focus.
+ * If not, it's probably because these events are triggered by a barcode scanner.
+ * To be able to handle this value, a focused input will be created.
+ *
+ * This function also has the responsibility to detect the end of the barcode value.
+ * (1) In most of cases, an optional key (tab or enter) is sent to mark the end of the value.
+ * So, we direclty handle the value.
+ * (2) If no end key is configured, we have to calculate the delay between each keydowns.
+ * 'max_time_between_keys_in_ms' depends of the device and may be configured.
+ * Exceeded this timeout, we consider that the barcode value is entirely sent.
+ *
+ * @private
+ * @param {jQuery.Event} e keydown event
+ */
+ _listenBarcodeScanner: function (e) {
+ if ($(document.activeElement).not('input:text, textarea, [contenteditable], ' +
+ '[type="email"], [type="number"], [type="password"], [type="tel"], [type="search"]').length) {
+ $('body').append(this.$barcodeInput);
+ this.$barcodeInput.focus();
+ }
+ if (this.$barcodeInput.is(":focus")) {
+ // Handle buffered keys immediately if the keypress marks the end
+ // of a barcode or after x milliseconds without a new keypress.
+ clearTimeout(this.timeout);
+ // On chrome mobile, e.which only works for some special characters like ENTER or TAB.
+ if (String.fromCharCode(e.which).match(this.suffix)) {
+ this._handleBarcodeValue(e);
+ } else {
+ this.timeout = setTimeout(this._handleBarcodeValue.bind(this, e),
+ this.max_time_between_keys_in_ms);
+ }
+ // if the barcode input doesn't receive keydown for a while, remove it.
+ this.__blurBarcodeInput();
+ }
+ },
+
+ /**
+ * Retrieves the barcode value from the temporary input element.
+ * This checks this value and trigger it on the bus.
+ *
+ * @private
+ * @param {jQuery.Event} keydown event
+ */
+ _handleBarcodeValue: function (e) {
+ var barcodeValue = this.$barcodeInput.val();
+ if (barcodeValue.match(this.regexp)) {
+ core.bus.trigger('barcode_scanned', barcodeValue, $(e.target).parent()[0]);
+ this._blurBarcodeInput();
+ }
+ },
+
+ /**
+ * Removes the value and focus from the barcode input.
+ * If nothing happens, the focus will be lost and
+ * the virtual keyboard on mobile devices will be closed.
+ *
+ * @private
+ */
+ _blurBarcodeInput: function () {
+ // Close the virtual keyboard on mobile browsers
+ // FIXME: actually we can't prevent keyboard from opening
+ this.$barcodeInput.val('').blur();
+ },
+
+ start: function(prevent_key_repeat){
+ // Chrome Mobile isn't triggering keypress event.
+ // This is marked as Legacy in the DOM-Level-3 Standard.
+ // See: https://www.w3.org/TR/uievents/#legacy-keyboardevent-event-types
+ // This fix is only applied for Google Chrome Mobile but it should work for
+ // all other cases.
+ // In master, we could remove the behavior with keypress and only use keydown.
+ if (this.isChromeMobile) {
+ $('body').on("keydown", this._listenBarcodeScanner.bind(this));
+ } else {
+ $('body').bind("keypress", this.__handler);
+ }
+ if (prevent_key_repeat === true) {
+ $('body').bind("keydown", this.__keydown_handler);
+ $('body').bind('keyup', this.__keyup_handler);
+ }
+ },
+
+ stop: function(){
+ $('body').off("keypress", this.__handler);
+ $('body').off("keydown", this.__keydown_handler);
+ $('body').off('keyup', this.__keyup_handler);
+ },
+});
+
+return {
+ /** Singleton that emits barcode_scanned events on core.bus */
+ BarcodeEvents: new BarcodeEvents(),
+ /**
+ * List of barcode prefixes that are reserved for internal purposes
+ * @type Array
+ */
+ ReservedBarcodePrefixes: ['O-CMD'],
+};
+
+});