From f6f1ea6fd3886d7ebb89311039481ca676bc99a2 Mon Sep 17 00:00:00 2001 From: Joseph Caburnay Date: Thu, 2 Jul 2020 06:21:16 +0000 Subject: [PATCH] [FIX] point_of_sale: no need for disableRubberbanding The primary goal of disableRubberbanding is to disable scrolling during touch event by default and to allow only selected descendants to have scrolling active during touchstart+touchmove event. Only elements with class="touch-scrollable" are allowed for touch scrolling. This restriction can be a good idea but it results to bug-ridden explicitness which is not necessary because scrolling should be allowed automatic by default in the first place. In this commit, we allowed scrolling by default by: 1. We remove disableRubberbanding. 2. We set the position property of .pos to fixed. This is to accomplish the original goal of disableRubberbanding (fixing the root element in its position). 3. We remove the touch-scrollable class as they are not needed anymore and no style associated to it. Removing the disableRubberbanding method also fixes the Intervention error during touch scrolling event. The reason for that error is we are calling preventDefault in the event that is passive. touchmove and touchstart events are passive by default - which means that preventDefault won't work. X-original-commit: 54f7fb49dae3aab6a005402a1ac60262bbd15edc --- addons/point_of_sale/static/src/css/pos.css | 9 +++- addons/point_of_sale/static/src/js/Chrome.js | 48 ------------------- .../src/xml/ChromeWidgets/OrderSelector.xml | 2 +- .../static/src/xml/Popups/SelectionPopup.xml | 2 +- .../ClientListScreen/ClientListScreen.xml | 2 +- .../ProductsWidgetControlPanel.xml | 2 +- .../Screens/ReceiptScreen/ReceiptScreen.xml | 2 +- 7 files changed, 13 insertions(+), 54 deletions(-) diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css index 6a6fda764e9..b55060fd140 100644 --- a/addons/point_of_sale/static/src/css/pos.css +++ b/addons/point_of_sale/static/src/css/pos.css @@ -117,7 +117,14 @@ td { font-family: "Lato","Lucida Grande", Helvetica, Verdana, Arial; color: #555555; font-size: 12px; - position: absolute; + /* Some elements inside .pos are allowed to be moved/resized. When + * this 'move/resize' event is performed in touch devices, .pos + * element also tries to scroll (as the default action of touchstart+ + * touchmove events). + * Position is fixed to prevent the movement of .pos element during + * the described touch events. + */ + position: fixed; left: 0; top: 0; width: 100%; diff --git a/addons/point_of_sale/static/src/js/Chrome.js b/addons/point_of_sale/static/src/js/Chrome.js index ce6c340fa06..d54b5f22170 100644 --- a/addons/point_of_sale/static/src/js/Chrome.js +++ b/addons/point_of_sale/static/src/js/Chrome.js @@ -357,7 +357,6 @@ odoo.define('point_of_sale.Chrome', function(require) { this.state.uiState.hasBigScrollBars = true; } - this._disableRubberbanding(); this._disableBackspaceBack(); this._replaceCrashmanager(); } @@ -381,38 +380,6 @@ odoo.define('point_of_sale.Chrome', function(require) { }, }); } - _disableRubberbanding() { - var self = this; - - document.body.addEventListener('touchstart', function (event) { - self.previous_touch_y_coordinate = event.touches[0].clientY; - }); - - // prevent the pos body from being scrollable. - document.body.addEventListener('touchmove', function (event) { - var node = event.target; - var current_touch_y_coordinate = event.touches[0].clientY; - var scrolling_down; - - if (current_touch_y_coordinate < self.previous_touch_y_coordinate) { - scrolling_down = true; - } else { - scrolling_down = false; - } - - while (node) { - if ( - node.classList && - node.classList.contains('touch-scrollable') && - self._scrollable(node, scrolling_down) - ) { - return; - } - node = node.parentNode; - } - event.preventDefault(); - }); - } // prevent backspace from performing a 'back' navigation _disableBackspaceBack() { $(document).on('keydown', function (e) { @@ -421,21 +388,6 @@ odoo.define('point_of_sale.Chrome', function(require) { } }); } - _scrollable(element, scrolling_down) { - var $element = $(element); - var scrollable = true; - - if (!scrolling_down && $element.scrollTop() <= 0) { - scrollable = false; - } else if ( - scrolling_down && - $element.scrollTop() + $element.height() >= element.scrollHeight - ) { - scrollable = false; - } - - return scrollable; - } } Chrome.template = 'Chrome'; diff --git a/addons/point_of_sale/static/src/xml/ChromeWidgets/OrderSelector.xml b/addons/point_of_sale/static/src/xml/ChromeWidgets/OrderSelector.xml index c557c620107..000a743da04 100644 --- a/addons/point_of_sale/static/src/xml/ChromeWidgets/OrderSelector.xml +++ b/addons/point_of_sale/static/src/xml/ChromeWidgets/OrderSelector.xml @@ -3,7 +3,7 @@
- + diff --git a/addons/point_of_sale/static/src/xml/Popups/SelectionPopup.xml b/addons/point_of_sale/static/src/xml/Popups/SelectionPopup.xml index ec250a913f7..4048edd7b3d 100644 --- a/addons/point_of_sale/static/src/xml/Popups/SelectionPopup.xml +++ b/addons/point_of_sale/static/src/xml/Popups/SelectionPopup.xml @@ -8,7 +8,7 @@
-
+
diff --git a/addons/point_of_sale/static/src/xml/Screens/ClientListScreen/ClientListScreen.xml b/addons/point_of_sale/static/src/xml/Screens/ClientListScreen/ClientListScreen.xml index fc0fc649b50..5096d92c49f 100644 --- a/addons/point_of_sale/static/src/xml/Screens/ClientListScreen/ClientListScreen.xml +++ b/addons/point_of_sale/static/src/xml/Screens/ClientListScreen/ClientListScreen.xml @@ -48,7 +48,7 @@
-
+
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml index e3e9836d447..c80a2a6d1ef 100644 --- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml +++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml @@ -28,7 +28,7 @@
-
+
diff --git a/addons/point_of_sale/static/src/xml/Screens/ReceiptScreen/ReceiptScreen.xml b/addons/point_of_sale/static/src/xml/Screens/ReceiptScreen/ReceiptScreen.xml index 659f2980bd5..2a792ded92e 100644 --- a/addons/point_of_sale/static/src/xml/Screens/ReceiptScreen/ReceiptScreen.xml +++ b/addons/point_of_sale/static/src/xml/Screens/ReceiptScreen/ReceiptScreen.xml @@ -16,7 +16,7 @@ Next Order
-
+
Print Invoice