[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
This commit is contained in:
Joseph Caburnay
committed by
Pierre Masereel
Pierre Masereel
parent
02d613b565
commit
f6f1ea6fd3
@@ -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%;
|
||||
|
||||
@@ -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';
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
<t t-name="OrderSelector" owl="1">
|
||||
<div class="order-selector">
|
||||
<span class="orders touch-scrollable">
|
||||
<span class="orders">
|
||||
<t t-foreach="orderList" t-as="order" t-key="order.cid">
|
||||
<t t-if="order === env.pos.get_order()">
|
||||
<span class="order-button select-order selected">
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<header class="title drag-handle">
|
||||
<t t-esc="props.title" />
|
||||
</header>
|
||||
<div class="selection scrollable-y touch-scrollable">
|
||||
<div class="selection scrollable-y">
|
||||
<t t-foreach="props.list" t-as="item" t-key="item._id">
|
||||
<div class="selection-item" t-att-class="{ selected: item.isSelected }"
|
||||
t-on-click="selectItem(item.id)">
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
</section>
|
||||
<section class="subwindow list">
|
||||
<div class="subwindow-container">
|
||||
<div class="subwindow-container-fix touch-scrollable scrollable-y">
|
||||
<div class="subwindow-container-fix scrollable-y">
|
||||
<table class="client-list">
|
||||
<thead>
|
||||
<tr>
|
||||
|
||||
+1
-1
@@ -28,7 +28,7 @@
|
||||
<!-- Subcategories -->
|
||||
<t t-if="props.subcategories.length > 0 && !env.isMobile">
|
||||
<div class="categories">
|
||||
<div class="category-list-scroller touch-scrollable">
|
||||
<div class="category-list-scroller">
|
||||
<div class="category-list"
|
||||
t-att-class="{simple: !env.pos.config.iface_display_categ_images}">
|
||||
<t t-foreach="props.subcategories" t-as="category" t-key="category.id">
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
Next Order <i class="fa fa-angle-double-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="centered-content touch-scrollable">
|
||||
<div class="centered-content">
|
||||
<div t-if="state.printInvoiceIsShown" class="button print_invoice"
|
||||
t-on-click="onPrintInvoice">
|
||||
<i class="fa fa-print"></i> Print Invoice
|
||||
|
||||
Reference in New Issue
Block a user