From 2442384f306bfcb326ff33ace8754a3872240489 Mon Sep 17 00:00:00 2001 From: Cres Jie Labasano Date: Fri, 20 Aug 2021 01:32:43 +0800 Subject: [PATCH 01/10] check child element if has vertical scroll --- lib/components/FullPage.js | 60 +++++++++++++++++++++++++++++++++---- src/components/FullPage.jsx | 45 +++++++++++++++++++++++----- 2 files changed, 92 insertions(+), 13 deletions(-) diff --git a/lib/components/FullPage.js b/lib/components/FullPage.js index dcaccbc..92366ac 100644 --- a/lib/components/FullPage.js +++ b/lib/components/FullPage.js @@ -8,8 +8,14 @@ require("core-js/modules/es.symbol.iterator"); require("core-js/modules/es.array.filter"); +require("core-js/modules/es.array.from"); + require("core-js/modules/es.array.iterator"); +require("core-js/modules/es.array.slice"); + +require("core-js/modules/es.function.name"); + require("core-js/modules/es.object.assign"); require("core-js/modules/es.object.get-prototype-of"); @@ -51,6 +57,12 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } +function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; } + +function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } + +function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } @@ -114,14 +126,48 @@ var FullPage = /*#__PURE__*/function (_React$Component) { return; } - evt.preventDefault(); var touchEnd = evt.changedTouches[0].clientY; + var childHasVerticalScroll = false; + + if (evt.path && evt.path.length) { + var _iterator = _createForOfIteratorHelper(evt.path), + _step; + + try { + for (_iterator.s(); !(_step = _iterator.n()).done;) { + var element = _step.value; + + if (element == _this.mainContainerRef.current || element == window) { + break; + } else { + var overFlowY = window.getComputedStyle(element)['overflow-y']; + + if ((overFlowY == 'auto' || overFlowY == 'scroll') && element.scrollHeight > element.clientHeight) { + if (_this._touchStart > touchEnd + _this._touchSensitivity && element.scrollHeight > element.scrollTop + element.clientHeight || _this._touchStart < touchEnd - _this._touchSensitivity && element.scrollTop > 0) { + childHasVerticalScroll = true; + break; + } + } + } + } + } catch (err) { + _iterator.e(err); + } finally { + _iterator.f(); + } + } + + console.log(childHasVerticalScroll); + + if (!childHasVerticalScroll) { + evt.preventDefault(); - if (!_this._isScrollPending && !_this._isScrolledAlready) { - if (_this._touchStart > touchEnd + _this._touchSensitivity) { - _this.scrollToSlide(_this.state.activeSlide + 1); - } else if (_this._touchStart < touchEnd - _this._touchSensitivity) { - _this.scrollToSlide(_this.state.activeSlide - 1); + if (!_this._isScrollPending && !_this._isScrolledAlready) { + if (_this._touchStart > touchEnd + _this._touchSensitivity) { + _this.scrollToSlide(_this.state.activeSlide + 1); + } else if (_this._touchStart < touchEnd - _this._touchSensitivity) { + _this.scrollToSlide(_this.state.activeSlide - 1); + } } } }; @@ -197,6 +243,7 @@ var FullPage = /*#__PURE__*/function (_React$Component) { _this._touchSensitivity = 5; _this._touchStart = 0; _this._isMobile = null; + _this.mainContainerRef = /*#__PURE__*/_react.default.createRef(); _this.state = { activeSlide: props.initialSlide, slidesCount: FullPage.getChildrenCount(_this.props.children) @@ -289,6 +336,7 @@ var FullPage = /*#__PURE__*/function (_React$Component) { key: "render", value: function render() { return /*#__PURE__*/_react.default.createElement("div", { + ref: this.mainContainerRef, style: { height: this.state.height } diff --git a/src/components/FullPage.jsx b/src/components/FullPage.jsx index 4b00886..fd0d4b3 100644 --- a/src/components/FullPage.jsx +++ b/src/components/FullPage.jsx @@ -27,6 +27,7 @@ export default class FullPage extends React.Component { this._touchSensitivity = 5; this._touchStart = 0; this._isMobile = null; + this.mainContainerRef = React.createRef(); this.state = { activeSlide: props.initialSlide, @@ -104,14 +105,44 @@ export default class FullPage extends React.Component { return; } - evt.preventDefault(); const touchEnd = evt.changedTouches[0].clientY; - if (!this._isScrollPending && !this._isScrolledAlready) { - if (this._touchStart > touchEnd + this._touchSensitivity) { - this.scrollToSlide(this.state.activeSlide + 1); - } else if (this._touchStart < touchEnd - this._touchSensitivity) { - this.scrollToSlide(this.state.activeSlide - 1); + var childHasVerticalScroll = false; + + if (evt.path && evt.path.length) { + for(const element of evt.path) { + if (element == this.mainContainerRef.current || element == window) { + break; + } else { + var overFlowY = window.getComputedStyle(element)['overflow-y'] + if ( (overFlowY == 'auto' || overFlowY == 'scroll') && element.scrollHeight > element.clientHeight) { + if ( (this._touchStart > touchEnd + this._touchSensitivity && element.scrollHeight > (element.scrollTop+element.clientHeight) ) || + (this._touchStart < touchEnd - this._touchSensitivity && element.scrollTop > 0) + + ) { + childHasVerticalScroll = true; + break; + } + + } + } + } + } + + + + if (!childHasVerticalScroll) { + + evt.preventDefault(); + + + + if (!this._isScrollPending && !this._isScrolledAlready) { + if (this._touchStart > touchEnd + this._touchSensitivity) { + this.scrollToSlide(this.state.activeSlide + 1); + } else if (this._touchStart < touchEnd - this._touchSensitivity) { + this.scrollToSlide(this.state.activeSlide - 1); + } } } } @@ -201,7 +232,7 @@ export default class FullPage extends React.Component { render() { return ( -
+
{this.renderControls()} {this.props.children}
From a16694b50d913d744e103232bde6e79240895c11 Mon Sep 17 00:00:00 2001 From: Cres Jie Labasano Date: Fri, 20 Aug 2021 01:58:48 +0800 Subject: [PATCH 02/10] prepublish scripts --- lib/components/FullPage.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/lib/components/FullPage.js b/lib/components/FullPage.js index 92366ac..6a7ec23 100644 --- a/lib/components/FullPage.js +++ b/lib/components/FullPage.js @@ -157,8 +157,6 @@ var FullPage = /*#__PURE__*/function (_React$Component) { } } - console.log(childHasVerticalScroll); - if (!childHasVerticalScroll) { evt.preventDefault(); From 37decfd77ba7b688edc9e67ebf9a69b9c2be1042 Mon Sep 17 00:00:00 2001 From: Cres Jie Labasano Date: Fri, 20 Aug 2021 03:40:30 +0800 Subject: [PATCH 03/10] check nodeType to prevent error --- lib/components/FullPage.js | 2 +- src/components/FullPage.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/components/FullPage.js b/lib/components/FullPage.js index 6a7ec23..1b8e41c 100644 --- a/lib/components/FullPage.js +++ b/lib/components/FullPage.js @@ -137,7 +137,7 @@ var FullPage = /*#__PURE__*/function (_React$Component) { for (_iterator.s(); !(_step = _iterator.n()).done;) { var element = _step.value; - if (element == _this.mainContainerRef.current || element == window) { + if (element == _this.mainContainerRef.current || element.nodeType == Node.ELEMENT_NODE) { break; } else { var overFlowY = window.getComputedStyle(element)['overflow-y']; diff --git a/src/components/FullPage.jsx b/src/components/FullPage.jsx index fd0d4b3..14f4158 100644 --- a/src/components/FullPage.jsx +++ b/src/components/FullPage.jsx @@ -111,7 +111,7 @@ export default class FullPage extends React.Component { if (evt.path && evt.path.length) { for(const element of evt.path) { - if (element == this.mainContainerRef.current || element == window) { + if (element == this.mainContainerRef.current || element.nodeType == Node.ELEMENT_NODE) { break; } else { var overFlowY = window.getComputedStyle(element)['overflow-y'] From 2db75597940c008c84a3f04a85889a675d9afe96 Mon Sep 17 00:00:00 2001 From: Cres Jie Labasano Date: Fri, 20 Aug 2021 06:52:00 +0800 Subject: [PATCH 04/10] update element checking --- lib/components/FullPage.js | 20 +++++++++++--------- src/components/FullPage.jsx | 29 ++++++++++++++++------------- 2 files changed, 27 insertions(+), 22 deletions(-) diff --git a/lib/components/FullPage.js b/lib/components/FullPage.js index 1b8e41c..4a89e1c 100644 --- a/lib/components/FullPage.js +++ b/lib/components/FullPage.js @@ -137,15 +137,17 @@ var FullPage = /*#__PURE__*/function (_React$Component) { for (_iterator.s(); !(_step = _iterator.n()).done;) { var element = _step.value; - if (element == _this.mainContainerRef.current || element.nodeType == Node.ELEMENT_NODE) { - break; - } else { - var overFlowY = window.getComputedStyle(element)['overflow-y']; - - if ((overFlowY == 'auto' || overFlowY == 'scroll') && element.scrollHeight > element.clientHeight) { - if (_this._touchStart > touchEnd + _this._touchSensitivity && element.scrollHeight > element.scrollTop + element.clientHeight || _this._touchStart < touchEnd - _this._touchSensitivity && element.scrollTop > 0) { - childHasVerticalScroll = true; - break; + if (element.nodeType == Node.ELEMENT_NODE) { + if (element == _this.mainContainerRef.current) { + break; + } else { + var overFlowY = window.getComputedStyle(element)['overflow-y']; + + if ((overFlowY == 'auto' || overFlowY == 'scroll') && element.scrollHeight > element.clientHeight) { + if (_this._touchStart > touchEnd + _this._touchSensitivity && element.scrollHeight > element.scrollTop + element.clientHeight || _this._touchStart < touchEnd - _this._touchSensitivity && element.scrollTop > 0) { + childHasVerticalScroll = true; + break; + } } } } diff --git a/src/components/FullPage.jsx b/src/components/FullPage.jsx index 14f4158..36081bc 100644 --- a/src/components/FullPage.jsx +++ b/src/components/FullPage.jsx @@ -111,21 +111,24 @@ export default class FullPage extends React.Component { if (evt.path && evt.path.length) { for(const element of evt.path) { - if (element == this.mainContainerRef.current || element.nodeType == Node.ELEMENT_NODE) { - break; - } else { - var overFlowY = window.getComputedStyle(element)['overflow-y'] - if ( (overFlowY == 'auto' || overFlowY == 'scroll') && element.scrollHeight > element.clientHeight) { - if ( (this._touchStart > touchEnd + this._touchSensitivity && element.scrollHeight > (element.scrollTop+element.clientHeight) ) || - (this._touchStart < touchEnd - this._touchSensitivity && element.scrollTop > 0) - - ) { - childHasVerticalScroll = true; - break; + if (element.nodeType == Node.ELEMENT_NODE) { + if (element == this.mainContainerRef.current) { + break; + } else { + var overFlowY = window.getComputedStyle(element)['overflow-y'] + if ( (overFlowY == 'auto' || overFlowY == 'scroll') && element.scrollHeight > element.clientHeight) { + if ( (this._touchStart > touchEnd + this._touchSensitivity && element.scrollHeight > (element.scrollTop+element.clientHeight) ) || + (this._touchStart < touchEnd - this._touchSensitivity && element.scrollTop > 0) + + ) { + childHasVerticalScroll = true; + break; + } + } - } - } + } + } } From 8bf92a1e67ac46f15be15d89761c3d948ddc4fb6 Mon Sep 17 00:00:00 2001 From: Cres Jie Labasano Date: Tue, 24 Aug 2021 14:36:56 +0800 Subject: [PATCH 05/10] check for vertical scroll intent --- lib/components/FullPage.js | 9 ++++++++- src/components/FullPage.jsx | 12 +++++++++++- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/lib/components/FullPage.js b/lib/components/FullPage.js index 4a89e1c..bbf63a4 100644 --- a/lib/components/FullPage.js +++ b/lib/components/FullPage.js @@ -118,11 +118,18 @@ var FullPage = /*#__PURE__*/function (_React$Component) { _this.onTouchStart = function (evt) { _this._touchStart = evt.touches[0].clientY; + _this._touchStartX = evt.touches[0].clientX; _this._isScrolledAlready = false; }; + _this.isVerticalScrollIntent = function (changedTouches) { + var diffX = Math.abs(_this._touchStartX - changedTouches.clientX); + var diffY = Math.abs(_this._touchStart - changedTouches.clientY); + return diffY - _this._touchSensitivity > 0 && diffY >= diffX; + }; + _this.onTouchMove = function (evt) { - if (_this.props.scrollMode !== scrollMode.FULL_PAGE) { + if (_this.props.scrollMode !== scrollMode.FULL_PAGE || !_this.isVerticalScrollIntent(evt.changedTouches[0])) { return; } diff --git a/src/components/FullPage.jsx b/src/components/FullPage.jsx index 36081bc..7b6181c 100644 --- a/src/components/FullPage.jsx +++ b/src/components/FullPage.jsx @@ -97,14 +97,24 @@ export default class FullPage extends React.Component { onTouchStart = (evt) => { this._touchStart = evt.touches[0].clientY; + this._touchStartX = evt.touches[0].clientX; this._isScrolledAlready = false; } + isVerticalScrollIntent = (changedTouches) => { + const diffX = Math.abs(this._touchStartX - changedTouches.clientX) + const diffY = Math.abs(this._touchStart - changedTouches.clientY); + + return diffY - this._touchSensitivity > 0 && diffY >= diffX; + } + onTouchMove = (evt) => { - if (this.props.scrollMode !== scrollMode.FULL_PAGE) { + if (this.props.scrollMode !== scrollMode.FULL_PAGE || !this.isVerticalScrollIntent(evt.changedTouches[0])) { return; } + + const touchEnd = evt.changedTouches[0].clientY; var childHasVerticalScroll = false; From f5f0d9c61dcb080c91a22a8630265d9ea8f9086f Mon Sep 17 00:00:00 2001 From: Cres Jie Labasano Date: Tue, 24 Aug 2021 14:56:03 +0800 Subject: [PATCH 06/10] add touchSensitivity as props --- lib/components/FullPage.js | 13 +++++++------ src/components/FullPage.jsx | 14 +++++++------- 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/lib/components/FullPage.js b/lib/components/FullPage.js index bbf63a4..9bcf655 100644 --- a/lib/components/FullPage.js +++ b/lib/components/FullPage.js @@ -125,7 +125,7 @@ var FullPage = /*#__PURE__*/function (_React$Component) { _this.isVerticalScrollIntent = function (changedTouches) { var diffX = Math.abs(_this._touchStartX - changedTouches.clientX); var diffY = Math.abs(_this._touchStart - changedTouches.clientY); - return diffY - _this._touchSensitivity > 0 && diffY >= diffX; + return diffY - _this.props.touchSensitivity > 0 && diffY >= diffX; }; _this.onTouchMove = function (evt) { @@ -133,6 +133,7 @@ var FullPage = /*#__PURE__*/function (_React$Component) { return; } + var touchSensitivity = _this.props.touchSensitivity; var touchEnd = evt.changedTouches[0].clientY; var childHasVerticalScroll = false; @@ -151,7 +152,7 @@ var FullPage = /*#__PURE__*/function (_React$Component) { var overFlowY = window.getComputedStyle(element)['overflow-y']; if ((overFlowY == 'auto' || overFlowY == 'scroll') && element.scrollHeight > element.clientHeight) { - if (_this._touchStart > touchEnd + _this._touchSensitivity && element.scrollHeight > element.scrollTop + element.clientHeight || _this._touchStart < touchEnd - _this._touchSensitivity && element.scrollTop > 0) { + if (_this._touchStart > touchEnd + touchSensitivity && element.scrollHeight > element.scrollTop + element.clientHeight || _this._touchStart < touchEnd - touchSensitivity && element.scrollTop > 0) { childHasVerticalScroll = true; break; } @@ -170,9 +171,9 @@ var FullPage = /*#__PURE__*/function (_React$Component) { evt.preventDefault(); if (!_this._isScrollPending && !_this._isScrolledAlready) { - if (_this._touchStart > touchEnd + _this._touchSensitivity) { + if (_this._touchStart > touchEnd + touchSensitivity) { _this.scrollToSlide(_this.state.activeSlide + 1); - } else if (_this._touchStart < touchEnd - _this._touchSensitivity) { + } else if (_this._touchStart < touchEnd - touchSensitivity) { _this.scrollToSlide(_this.state.activeSlide - 1); } } @@ -247,7 +248,6 @@ var FullPage = /*#__PURE__*/function (_React$Component) { _this._isScrollPending = false; _this._isScrolledAlready = false; _this._slides = []; - _this._touchSensitivity = 5; _this._touchStart = 0; _this._isMobile = null; _this.mainContainerRef = /*#__PURE__*/_react.default.createRef(); @@ -383,5 +383,6 @@ FullPage.defaultProps = { controlsProps: {}, duration: 700, initialSlide: 0, - scrollMode: scrollMode.FULL_PAGE + scrollMode: scrollMode.FULL_PAGE, + touchSensitivity: 5 }; \ No newline at end of file diff --git a/src/components/FullPage.jsx b/src/components/FullPage.jsx index 7b6181c..9d48496 100644 --- a/src/components/FullPage.jsx +++ b/src/components/FullPage.jsx @@ -24,7 +24,6 @@ export default class FullPage extends React.Component { this._isScrollPending = false; this._isScrolledAlready = false; this._slides = []; - this._touchSensitivity = 5; this._touchStart = 0; this._isMobile = null; this.mainContainerRef = React.createRef(); @@ -105,7 +104,7 @@ export default class FullPage extends React.Component { const diffX = Math.abs(this._touchStartX - changedTouches.clientX) const diffY = Math.abs(this._touchStart - changedTouches.clientY); - return diffY - this._touchSensitivity > 0 && diffY >= diffX; + return diffY - this.props.touchSensitivity > 0 && diffY >= diffX; } onTouchMove = (evt) => { @@ -114,7 +113,7 @@ export default class FullPage extends React.Component { } - + const {touchSensitivity} = this.props; const touchEnd = evt.changedTouches[0].clientY; var childHasVerticalScroll = false; @@ -127,8 +126,8 @@ export default class FullPage extends React.Component { } else { var overFlowY = window.getComputedStyle(element)['overflow-y'] if ( (overFlowY == 'auto' || overFlowY == 'scroll') && element.scrollHeight > element.clientHeight) { - if ( (this._touchStart > touchEnd + this._touchSensitivity && element.scrollHeight > (element.scrollTop+element.clientHeight) ) || - (this._touchStart < touchEnd - this._touchSensitivity && element.scrollTop > 0) + if ( (this._touchStart > touchEnd + touchSensitivity && element.scrollHeight > (element.scrollTop+element.clientHeight) ) || + (this._touchStart < touchEnd - touchSensitivity && element.scrollTop > 0) ) { childHasVerticalScroll = true; @@ -151,9 +150,9 @@ export default class FullPage extends React.Component { if (!this._isScrollPending && !this._isScrolledAlready) { - if (this._touchStart > touchEnd + this._touchSensitivity) { + if (this._touchStart > touchEnd + touchSensitivity) { this.scrollToSlide(this.state.activeSlide + 1); - } else if (this._touchStart < touchEnd - this._touchSensitivity) { + } else if (this._touchStart < touchEnd - touchSensitivity) { this.scrollToSlide(this.state.activeSlide - 1); } } @@ -276,4 +275,5 @@ FullPage.defaultProps = { duration: 700, initialSlide: 0, scrollMode: scrollMode.FULL_PAGE, + touchSensitivity: 5 }; From ca5d832e38d973e60896e42ab5fe43b6161cd600 Mon Sep 17 00:00:00 2001 From: Cres Jie Labasano Date: Tue, 24 Aug 2021 15:17:57 +0800 Subject: [PATCH 07/10] check if touch scroll happens inside main container --- lib/components/FullPage.js | 35 ++++++++++++++++++++++++++++------- src/components/FullPage.jsx | 12 +++++++++++- 2 files changed, 39 insertions(+), 8 deletions(-) diff --git a/lib/components/FullPage.js b/lib/components/FullPage.js index 9bcf655..f46e579 100644 --- a/lib/components/FullPage.js +++ b/lib/components/FullPage.js @@ -128,8 +128,29 @@ var FullPage = /*#__PURE__*/function (_React$Component) { return diffY - _this.props.touchSensitivity > 0 && diffY >= diffX; }; + _this.isScrollHappensInMainContainer = function (paths) { + if (paths && paths.length) { + var _iterator = _createForOfIteratorHelper(path), + _step; + + try { + for (_iterator.s(); !(_step = _iterator.n()).done;) { + var element = _step.value; + + if (element == _this.mainContainerRef.current) { + return true; + } + } + } catch (err) { + _iterator.e(err); + } finally { + _iterator.f(); + } + } + }; + _this.onTouchMove = function (evt) { - if (_this.props.scrollMode !== scrollMode.FULL_PAGE || !_this.isVerticalScrollIntent(evt.changedTouches[0])) { + if (_this.props.scrollMode !== scrollMode.FULL_PAGE || !_this.isVerticalScrollIntent(evt.changedTouches[0]) || !_this.isScrollHappensInMainContainer(evt.path)) { return; } @@ -138,12 +159,12 @@ var FullPage = /*#__PURE__*/function (_React$Component) { var childHasVerticalScroll = false; if (evt.path && evt.path.length) { - var _iterator = _createForOfIteratorHelper(evt.path), - _step; + var _iterator2 = _createForOfIteratorHelper(evt.path), + _step2; try { - for (_iterator.s(); !(_step = _iterator.n()).done;) { - var element = _step.value; + for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) { + var element = _step2.value; if (element.nodeType == Node.ELEMENT_NODE) { if (element == _this.mainContainerRef.current) { @@ -161,9 +182,9 @@ var FullPage = /*#__PURE__*/function (_React$Component) { } } } catch (err) { - _iterator.e(err); + _iterator2.e(err); } finally { - _iterator.f(); + _iterator2.f(); } } diff --git a/src/components/FullPage.jsx b/src/components/FullPage.jsx index 9d48496..dd4907f 100644 --- a/src/components/FullPage.jsx +++ b/src/components/FullPage.jsx @@ -107,8 +107,18 @@ export default class FullPage extends React.Component { return diffY - this.props.touchSensitivity > 0 && diffY >= diffX; } + isScrollHappensInMainContainer = (paths) => { + if (paths && paths.length) { + for(const element of path) { + if (element == this.mainContainerRef.current) { + return true; + } + } + } + } + onTouchMove = (evt) => { - if (this.props.scrollMode !== scrollMode.FULL_PAGE || !this.isVerticalScrollIntent(evt.changedTouches[0])) { + if (this.props.scrollMode !== scrollMode.FULL_PAGE || !this.isVerticalScrollIntent(evt.changedTouches[0]) || !this.isScrollHappensInMainContainer(evt.path) ) { return; } From 7d3199fbc3180e66be84701dec59df72ef5b0a28 Mon Sep 17 00:00:00 2001 From: Cres Jie Labasano Date: Tue, 24 Aug 2021 15:22:04 +0800 Subject: [PATCH 08/10] fix variable --- lib/components/FullPage.js | 2 +- src/components/FullPage.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/components/FullPage.js b/lib/components/FullPage.js index f46e579..5eabb57 100644 --- a/lib/components/FullPage.js +++ b/lib/components/FullPage.js @@ -130,7 +130,7 @@ var FullPage = /*#__PURE__*/function (_React$Component) { _this.isScrollHappensInMainContainer = function (paths) { if (paths && paths.length) { - var _iterator = _createForOfIteratorHelper(path), + var _iterator = _createForOfIteratorHelper(paths), _step; try { diff --git a/src/components/FullPage.jsx b/src/components/FullPage.jsx index dd4907f..2bdc56e 100644 --- a/src/components/FullPage.jsx +++ b/src/components/FullPage.jsx @@ -109,7 +109,7 @@ export default class FullPage extends React.Component { isScrollHappensInMainContainer = (paths) => { if (paths && paths.length) { - for(const element of path) { + for(const element of paths) { if (element == this.mainContainerRef.current) { return true; } From 2f458ae3cd9d6a2dbddfdc5035b6b8346e812959 Mon Sep 17 00:00:00 2001 From: Cres Jie Labasano Date: Tue, 24 Aug 2021 16:31:07 +0800 Subject: [PATCH 09/10] use target prop in order to support iOS --- lib/components/FullPage.js | 77 +++++++++++-------------------------- src/components/FullPage.jsx | 50 ++++++++++++------------ 2 files changed, 46 insertions(+), 81 deletions(-) diff --git a/lib/components/FullPage.js b/lib/components/FullPage.js index 5eabb57..8c47781 100644 --- a/lib/components/FullPage.js +++ b/lib/components/FullPage.js @@ -8,14 +8,8 @@ require("core-js/modules/es.symbol.iterator"); require("core-js/modules/es.array.filter"); -require("core-js/modules/es.array.from"); - require("core-js/modules/es.array.iterator"); -require("core-js/modules/es.array.slice"); - -require("core-js/modules/es.function.name"); - require("core-js/modules/es.object.assign"); require("core-js/modules/es.object.get-prototype-of"); @@ -57,12 +51,6 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } -function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; } - -function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } - -function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } - function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } @@ -128,64 +116,43 @@ var FullPage = /*#__PURE__*/function (_React$Component) { return diffY - _this.props.touchSensitivity > 0 && diffY >= diffX; }; - _this.isScrollHappensInMainContainer = function (paths) { - if (paths && paths.length) { - var _iterator = _createForOfIteratorHelper(paths), - _step; + _this.isScrollHappensInMainContainer = function (element) { + var el = element; - try { - for (_iterator.s(); !(_step = _iterator.n()).done;) { - var element = _step.value; - - if (element == _this.mainContainerRef.current) { - return true; - } - } - } catch (err) { - _iterator.e(err); - } finally { - _iterator.f(); + while (el) { + if (el == _this.mainContainerRef.current) { + return true; } + + el = el.parentElement; } }; _this.onTouchMove = function (evt) { - if (_this.props.scrollMode !== scrollMode.FULL_PAGE || !_this.isVerticalScrollIntent(evt.changedTouches[0]) || !_this.isScrollHappensInMainContainer(evt.path)) { + if (_this.props.scrollMode !== scrollMode.FULL_PAGE || !_this.isVerticalScrollIntent(evt.changedTouches[0]) || !_this.isScrollHappensInMainContainer(evt.target)) { return; } var touchSensitivity = _this.props.touchSensitivity; var touchEnd = evt.changedTouches[0].clientY; var childHasVerticalScroll = false; - - if (evt.path && evt.path.length) { - var _iterator2 = _createForOfIteratorHelper(evt.path), - _step2; - - try { - for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) { - var element = _step2.value; - - if (element.nodeType == Node.ELEMENT_NODE) { - if (element == _this.mainContainerRef.current) { - break; - } else { - var overFlowY = window.getComputedStyle(element)['overflow-y']; - - if ((overFlowY == 'auto' || overFlowY == 'scroll') && element.scrollHeight > element.clientHeight) { - if (_this._touchStart > touchEnd + touchSensitivity && element.scrollHeight > element.scrollTop + element.clientHeight || _this._touchStart < touchEnd - touchSensitivity && element.scrollTop > 0) { - childHasVerticalScroll = true; - break; - } - } - } + var element = evt.target; + + while (element) { + if (element == _this.mainContainerRef.current) { + break; + } else { + var overFlowY = window.getComputedStyle(element)['overflow-y']; + + if ((overFlowY == 'auto' || overFlowY == 'scroll') && element.scrollHeight > element.clientHeight) { + if (_this._touchStart > touchEnd + touchSensitivity && element.scrollHeight > element.scrollTop + element.clientHeight || _this._touchStart < touchEnd - touchSensitivity && element.scrollTop > 0) { + childHasVerticalScroll = true; + break; } } - } catch (err) { - _iterator2.e(err); - } finally { - _iterator2.f(); } + + element = element.parentElement; } if (!childHasVerticalScroll) { diff --git a/src/components/FullPage.jsx b/src/components/FullPage.jsx index 2bdc56e..fe3528f 100644 --- a/src/components/FullPage.jsx +++ b/src/components/FullPage.jsx @@ -107,18 +107,19 @@ export default class FullPage extends React.Component { return diffY - this.props.touchSensitivity > 0 && diffY >= diffX; } - isScrollHappensInMainContainer = (paths) => { - if (paths && paths.length) { - for(const element of paths) { - if (element == this.mainContainerRef.current) { - return true; - } + isScrollHappensInMainContainer = (element) => { + var el = element; + while(el) { + if (el == this.mainContainerRef.current) { + return true; } + el = el.parentElement; } + } onTouchMove = (evt) => { - if (this.props.scrollMode !== scrollMode.FULL_PAGE || !this.isVerticalScrollIntent(evt.changedTouches[0]) || !this.isScrollHappensInMainContainer(evt.path) ) { + if (this.props.scrollMode !== scrollMode.FULL_PAGE || !this.isVerticalScrollIntent(evt.changedTouches[0]) || !this.isScrollHappensInMainContainer(evt.target) ) { return; } @@ -127,29 +128,26 @@ export default class FullPage extends React.Component { const touchEnd = evt.changedTouches[0].clientY; var childHasVerticalScroll = false; - - if (evt.path && evt.path.length) { - for(const element of evt.path) { - if (element.nodeType == Node.ELEMENT_NODE) { - if (element == this.mainContainerRef.current) { - break; - } else { - var overFlowY = window.getComputedStyle(element)['overflow-y'] - if ( (overFlowY == 'auto' || overFlowY == 'scroll') && element.scrollHeight > element.clientHeight) { - if ( (this._touchStart > touchEnd + touchSensitivity && element.scrollHeight > (element.scrollTop+element.clientHeight) ) || - (this._touchStart < touchEnd - touchSensitivity && element.scrollTop > 0) - - ) { - childHasVerticalScroll = true; - break; - } - + var element = evt.target; + while(element) { + if (element == this.mainContainerRef.current) { + break; + } else { + var overFlowY = window.getComputedStyle(element)['overflow-y'] + if ( (overFlowY == 'auto' || overFlowY == 'scroll') && element.scrollHeight > element.clientHeight) { + if ( (this._touchStart > touchEnd + touchSensitivity && element.scrollHeight > (element.scrollTop+element.clientHeight) ) || + (this._touchStart < touchEnd - touchSensitivity && element.scrollTop > 0) + + ) { + childHasVerticalScroll = true; + break; } + } } - - } + element = element.parentElement; } + From a851ed936da7d9ff44d33adae08415c05c7420ec Mon Sep 17 00:00:00 2001 From: Cres Jie Labasano Date: Tue, 24 Aug 2021 23:47:29 +0800 Subject: [PATCH 10/10] prevent default if not vertical scroll --- lib/components/FullPage.js | 7 ++++++- src/components/FullPage.jsx | 7 ++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/lib/components/FullPage.js b/lib/components/FullPage.js index 8c47781..90f4807 100644 --- a/lib/components/FullPage.js +++ b/lib/components/FullPage.js @@ -129,7 +129,12 @@ var FullPage = /*#__PURE__*/function (_React$Component) { }; _this.onTouchMove = function (evt) { - if (_this.props.scrollMode !== scrollMode.FULL_PAGE || !_this.isVerticalScrollIntent(evt.changedTouches[0]) || !_this.isScrollHappensInMainContainer(evt.target)) { + if (_this.props.scrollMode !== scrollMode.FULL_PAGE || !_this.isScrollHappensInMainContainer(evt.target)) { + return; + } + + if (!_this.isVerticalScrollIntent(evt.changedTouches[0])) { + evt.preventDefault(); return; } diff --git a/src/components/FullPage.jsx b/src/components/FullPage.jsx index fe3528f..1eb4f8d 100644 --- a/src/components/FullPage.jsx +++ b/src/components/FullPage.jsx @@ -119,7 +119,12 @@ export default class FullPage extends React.Component { } onTouchMove = (evt) => { - if (this.props.scrollMode !== scrollMode.FULL_PAGE || !this.isVerticalScrollIntent(evt.changedTouches[0]) || !this.isScrollHappensInMainContainer(evt.target) ) { + if (this.props.scrollMode !== scrollMode.FULL_PAGE || !this.isScrollHappensInMainContainer(evt.target) ) { + return; + } + + if (!this.isVerticalScrollIntent(evt.changedTouches[0])) { + evt.preventDefault(); return; }