Add swipe effect on feed panel
All checks were successful
Deploy Spot / deploy (push) Successful in 38s
All checks were successful
Deploy Spot / deploy (push) Successful in 38s
This commit is contained in:
@@ -25,6 +25,7 @@ export default {
|
|||||||
refreshRate: 60,
|
refreshRate: 60,
|
||||||
lastUpdate: { unix_time: 0, relative_time: '', formatted_time: ''},
|
lastUpdate: { unix_time: 0, relative_time: '', formatted_time: ''},
|
||||||
feedPanelOpen: false,
|
feedPanelOpen: false,
|
||||||
|
feedSwipe: {x: null, y: null},
|
||||||
settingsPanelOpen: false,
|
settingsPanelOpen: false,
|
||||||
track: null,
|
track: null,
|
||||||
markers: [],
|
markers: [],
|
||||||
@@ -182,9 +183,6 @@ export default {
|
|||||||
this.$refs.feedSimpleBar?.scrollElement.removeEventListener('scroll', this.onFeedScroll);
|
this.$refs.feedSimpleBar?.scrollElement.removeEventListener('scroll', this.onFeedScroll);
|
||||||
this.$refs.feedSimpleBar?.scrollElement.addEventListener('scroll', this.onFeedScroll);
|
this.$refs.feedSimpleBar?.scrollElement.addEventListener('scroll', this.onFeedScroll);
|
||||||
|
|
||||||
//Mobile Touchscreen Events
|
|
||||||
//TODO
|
|
||||||
|
|
||||||
this.toggleFeedPanel(!this.isMobile(), 'none');
|
this.toggleFeedPanel(!this.isMobile(), 'none');
|
||||||
|
|
||||||
//Get first posts batch
|
//Get first posts batch
|
||||||
@@ -579,6 +577,25 @@ export default {
|
|||||||
|
|
||||||
if ((box.scrollTop + box.clientHeight) / (content?.offsetHeight || 1) >= 0.8) this.getNextFeed();
|
if ((box.scrollTop + box.clientHeight) / (content?.offsetHeight || 1) >= 0.8) this.getNextFeed();
|
||||||
},
|
},
|
||||||
|
onFeedTouchStart(oEvent) {
|
||||||
|
if(!this.isMobile() || !this.feedPanelOpen || oEvent.touches.length != 1) return;
|
||||||
|
|
||||||
|
const oTouch = oEvent.touches[0];
|
||||||
|
this.feedSwipe = {x: oTouch.clientX, y: oTouch.clientY};
|
||||||
|
},
|
||||||
|
onFeedTouchEnd(oEvent) {
|
||||||
|
const oTouch = oEvent.changedTouches[0];
|
||||||
|
if(!oTouch || this.feedSwipe.x === null) return;
|
||||||
|
|
||||||
|
const iDeltaX = oTouch.clientX - this.feedSwipe.x;
|
||||||
|
const iDeltaY = oTouch.clientY - this.feedSwipe.y;
|
||||||
|
|
||||||
|
if(iDeltaX > 80 && Math.abs(iDeltaX) > Math.abs(iDeltaY) * 1.5) {
|
||||||
|
this.toggleFeedPanel();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.feedSwipe = {x: null, y: null};
|
||||||
|
},
|
||||||
setFeedUpdateTimer(iSeconds) {
|
setFeedUpdateTimer(iSeconds) {
|
||||||
if(typeof this.feedTimer != 'undefined') clearTimeout(this.feedTimer);
|
if(typeof this.feedTimer != 'undefined') clearTimeout(this.feedTimer);
|
||||||
if(iSeconds >= 0) this.feedTimer = setTimeout(this.checkNewFeed, iSeconds * 1000);
|
if(iSeconds >= 0) this.feedTimer = setTimeout(this.checkNewFeed, iSeconds * 1000);
|
||||||
@@ -767,7 +784,7 @@ export default {
|
|||||||
<span>{{ currProject.name }}</span>
|
<span>{{ currProject.name }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="feed" class="map-container map-container-right" ref="feed">
|
<div id="feed" class="map-container map-container-right" ref="feed" @touchstart.passive="onFeedTouchStart" @touchend.passive="onFeedTouchEnd">
|
||||||
<Simplebar id="feed-panel" class="map-panel" ref="feedSimpleBar">
|
<Simplebar id="feed-panel" class="map-panel" ref="feedSimpleBar">
|
||||||
<div id="feed-header">
|
<div id="feed-header">
|
||||||
<ProjectPost v-if="modeHisto" :options="{type: 'archived', headerless: true}" />
|
<ProjectPost v-if="modeHisto" :options="{type: 'archived', headerless: true}" />
|
||||||
|
|||||||
Reference in New Issue
Block a user