{"id":1646,"date":"2018-11-21T10:48:10","date_gmt":"2018-11-21T09:48:10","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=1646"},"modified":"2018-11-21T10:48:46","modified_gmt":"2018-11-21T09:48:46","slug":"pull-to-refresh-touch-events","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/pull-to-refresh-touch-events\/","title":{"rendered":"Pull to refresh (touch events)"},"content":{"rendered":"<pre class=\"lang:js decode:true\">export class PullToRefresh\r\n{\r\n\tisDragging : boolean = false;\r\n\tposStart : number = 0;\r\n\tprivate _dragDistance : number = 0;\r\n\tprivate _threshold: number = 60;\r\n\tprivate _el : HTMLElement;\r\n\tprivate _updateDragPosition : Function;\r\n\tprivate _onRefresh : Function;\r\n\tprivate _isRefreshing : boolean = false;\r\n\tconstructor(config: { el: HTMLElement, threshold: number, updateDragPosition: (el: HTMLElement, position: number, reset : boolean) =&gt; void, onRefresh: () =&gt; any }) {\r\n\t\tthis._el = config.el;\r\n\t\tthis._threshold = config.threshold;\r\n\t\tthis._updateDragPosition = config.updateDragPosition;\r\n\t\tthis._onRefresh = config.onRefresh;\r\n\t\tthis._dragDistance = 0;\r\n\r\n\t\tconst self = this;\r\n\t\tthis._el.addEventListener('touchstart', (e) =&gt; self.mouseStart(e));\r\n\t\tthis._el.addEventListener('mousedown', (e) =&gt; self.mouseStart(e));\r\n\t\tthis._el.addEventListener('touchend', () =&gt; self.mouseEnd());\r\n\t\tthis._el.addEventListener('mouseup', () =&gt; self.mouseEnd());\r\n\t\tthis._el.addEventListener('touchmove', (e) =&gt; self.mouseMove(e));\r\n\t\tthis._el.addEventListener('touchmove', (e) =&gt; self.mouseMove(e));\r\n\t}\r\n\tprivate getPageY(e) {\r\n\t\tif (e.pageY === undefined &amp;&amp; e.touches !== undefined) {\r\n\t\t\tif (e.touches.length &lt;= 0) {\r\n\t\t\t\treturn false;\r\n\t\t\t}\r\n\t\t\te.pageY = e.touches[e.touches.length - 1].pageY;\r\n\t\t}\r\n\t\treturn e.pageY;\r\n\t}\r\n\tprivate mouseStart(e: any) {\r\n\t\tif (this._isRefreshing) return;\r\n\t\tthis.isDragging = true;\r\n\t\tthis.posStart = this.getPageY(e)  + this._el.scrollTop;\r\n\t}\r\n\tprivate mouseEnd() {\r\n\t\tif (this._isRefreshing) return;\r\n\t\tif (!this.isDragging) return;\r\n\r\n\t\tif (this._dragDistance &gt;= this._threshold) {\r\n\t\t\tthis.isDragging = false;\r\n\t\t\tthis._isRefreshing = true;\r\n\t\t\tthis._onRefresh().finally(() =&gt; {\r\n\t\t\t\tthis._updateDragPosition(this._el, 0, true);\r\n\t\t\t\tthis._isRefreshing = false;\r\n\t\t\t})\r\n\t\t\treturn;\r\n\t\t} else {\r\n\t\t\tthis._updateDragPosition(this._el, 0);\r\n\t\t}\r\n\t\tthis.isDragging = false;\r\n\t}\r\n\tprivate mouseMove(e: any) {\r\n\t\tif (this._isRefreshing) return;\r\n\t\tif (!this.isDragging) return;\r\n\t\te.pageY = this.getPageY(e);\r\n\t\tif (e.pageY === false) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tthis._dragDistance = (e.pageY - (this.posStart + this._el.scrollTop));\r\n\t\tif (this._dragDistance &lt;= 0) return;\r\n\t\tthis._dragDistance = Math.min(this._dragDistance, this._threshold);\r\n\t\tthis._updateDragPosition(this._el, this._dragDistance);\r\n\t}\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"lang:js decode:true \">new PullToRefresh({\r\n            el: (this.scrollElement as any).element.nativeElement,\r\n            threshold: 90,\r\n            updateDragPosition: (el: HTMLElement, distance: number, reset : boolean) =&gt; {\r\n                if (reset) {\r\n                    GsapHelpers.timeLineAnimate([\r\n                        {\r\n                            $e: el,\r\n                            set: { y: 90 },\r\n                            to: { y: distance },\r\n                            duration: 300\r\n                        },\r\n                        {\r\n                            $e: re,\r\n                            set: { y: 90 },\r\n                            to: { y: distance },\r\n                            duration: 300\r\n                        },\r\n                    ]);\r\n                } else {\r\n                    el.style.transform = `translate(0, ${distance}px)`;\r\n                    re.style.transform = `translate(0, ${distance}px)`;\r\n                }\r\n\r\n            },\r\n            onRefresh: async () =&gt; {\r\n                (re.firstChild as HTMLElement).classList.add('fa-spin');\r\n                await self.loadData(true);\r\n                await Task.delay(100);\r\n                (re.firstChild as HTMLElement).classList.remove('fa-spin');\r\n            }\r\n        });<\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>export class PullToRefresh { isDragging : boolean = false; posStart : number = 0; private _dragDistance : number = 0; private _threshold: number = 60; private _el : HTMLElement; private _updateDragPosition : Function; private _onRefresh : Function; private _isRefreshing : boolean = false; constructor(config: { el: HTMLElement, threshold: number, updateDragPosition: (el: HTMLElement, position: number, reset [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-1646","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1646","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=1646"}],"version-history":[{"count":2,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1646\/revisions"}],"predecessor-version":[{"id":1648,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1646\/revisions\/1648"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=1646"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=1646"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=1646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}