diff --git a/frontend/components/NewMessage.vue b/frontend/components/NewMessage.vue index 7ec5fa0..4121065 100644 --- a/frontend/components/NewMessage.vue +++ b/frontend/components/NewMessage.vue @@ -6,11 +6,42 @@ export default { props:{ ownNumber: String }, - data() { - return { - number: '', + data() { + return { + number: '', + } + }, + mounted() { + let touchstartY = 0; + const refreshElement = document.getElementsByClassName("thread-header")[0]; + refreshElement.addEventListener('touchstart', e => { + touchstartY = e.touches[0].clientY; + }); + refreshElement.addEventListener('touchmove', e => { + const touchY = e.touches[0].clientY; + const touchDiff = touchY - touchstartY; + let pullToRefresh = document.querySelector('.pull-to-refresh'); + if (touchDiff > 0 && window.scrollY === 0 && pullToRefresh) { + pullToRefresh.classList.add('visible'); + //e.preventDefault(); } + }); + refreshElement.addEventListener('touchend', e => { + console.log("touch end") + let pullToRefresh = document.querySelector('.pull-to-refresh'); + + if (pullToRefresh && pullToRefresh.classList.contains('visible')) { + pullToRefresh.classList.remove('visible'); + location.reload(); } + }); + }, + beforeDestroy() { + const refreshElement = document.getElementsByClassName("thread-header")[0]; + refreshElement.removeEventListener('touchend', e ); + refreshElement.removeEventListener('touchmove', e ); + refreshElement.removeEventListener('touchestart', e ); + }, } diff --git a/frontend/components/ThreadList/ThreadList.vue b/frontend/components/ThreadList/ThreadList.vue index bf7b82a..1d0a8ec 100644 --- a/frontend/components/ThreadList/ThreadList.vue +++ b/frontend/components/ThreadList/ThreadList.vue @@ -39,22 +39,6 @@ export default { } }, - mounted(){ - emitter.on('thread-change', (threadChangeObject:ThreadChangePayload) => { - //console.log("TL event get", activeConversation); - this.activeThread = threadChangeObject.key; - return this.activeThread; - }) - emitter.on("update-last-message", ()=>{ - const temp = this.activeThread; - this.activeThread = ""; - this.activeThread = temp; - - }) - emitter.on("update-filter-string",(filterString)=>{ - this.filterString = filterString; - }); - }, methods:{ dumpSelectedThread(){ const newThread = {key:'', editLink:null} @@ -78,6 +62,53 @@ export default { ); } }, + mounted(){ + emitter.on('thread-change', (threadChangeObject:ThreadChangePayload) => { + //console.log("TL event get", activeConversation); + this.activeThread = threadChangeObject.key; + return this.activeThread; + }) + emitter.on("update-last-message", ()=>{ + const temp = this.activeThread; + this.activeThread = ""; + this.activeThread = temp; + + }) + emitter.on("update-filter-string",(filterString)=>{ + this.filterString = filterString; + }); + + let touchstartY = 0; + const refreshElement = document.getElementsByClassName("threadlist-header")[0]; + refreshElement.addEventListener('touchstart', e => { + touchstartY = e.touches[0].clientY; + }); + refreshElement.addEventListener('touchmove', e => { + const touchY = e.touches[0].clientY; + const touchDiff = touchY - touchstartY; + let pullToRefresh = document.querySelector('.pull-to-refresh'); + if (touchDiff > 0 && window.scrollY === 0 && pullToRefresh) { + pullToRefresh.classList.add('visible'); + //e.preventDefault(); + } + }); + refreshElement.addEventListener('touchend', e => { + console.log("touch end") + let pullToRefresh = document.querySelector('.pull-to-refresh'); + + if (pullToRefresh && pullToRefresh.classList.contains('visible')) { + pullToRefresh.classList.remove('visible'); + location.reload(); + } + }); + }, + beforeDestroy() { + const refreshElement = document.getElementsByClassName("thread-header")[0]; + refreshElement.removeEventListener('touchend', e ); + refreshElement.removeEventListener('touchmove', e ); + refreshElement.removeEventListener('touchestart', e ); + }, + } diff --git a/frontend/components/WebTextingContainer/WebTextingContainer.vue b/frontend/components/WebTextingContainer/WebTextingContainer.vue index ac57343..b2748dc 100644 --- a/frontend/components/WebTextingContainer/WebTextingContainer.vue +++ b/frontend/components/WebTextingContainer/WebTextingContainer.vue @@ -5,6 +5,7 @@ import { ThreadPreviewInterface } from '../ThreadPreview/ThreadPreview.vue'; import moment from 'moment'; import NewMessage from '../NewMessage.vue'; import { RouterView } from 'vue-router'; +import {useMatchMedia} from '../../lib/matchMedia'; import { emitter, MessageData, ThreadChangePayload } from '../../lib/global'; @@ -37,8 +38,10 @@ export default { components: { Conversation, ThreadList }, data() { let contactEditLink = null; - let title = '' - return { contactEditLink, title }; + let title = ''; + let smallScreen = useMatchMedia('(width<=700px)'); + + return { contactEditLink, title, smallScreen }; }, methods: { calculateDisplayName() { @@ -158,10 +161,23 @@ export default { console.log("wtc thread previews changed"); }, deep: true, + }, + smallScreen:{ + handler(oldScreen, newScreen){ + let smallScreen = useMatchMedia('(max-width<=700px)'); + console.log("smallscreen handler") + if(smallScreen){ + let pullToRefresh = document.querySelector('.pull-to-refresh'); + } + else{ + let pullToRefresh = false; + } + } } }, mounted() { + emitter.on('thread-change', (payload: ThreadChangePayload) => { this.contactEditLink = payload.editLink; console.log(`wtc thread change ${payload.key}`) @@ -176,25 +192,7 @@ export default { this.updateLastMessage(message); }); - const pullToRefresh = document.querySelector('.pull-to-refresh'); - let touchstartY = 0; - document.addEventListener('touchstart', e => { - touchstartY = e.touches[0].clientY; - }); - document.addEventListener('touchmove', e => { - const touchY = e.touches[0].clientY; - const touchDiff = touchY - touchstartY; - if (touchDiff > 0 && window.scrollY === 0) { - pullToRefresh.classList.add('visible'); - //e.preventDefault(); - } - }); - document.addEventListener('touchend', e => { - if (pullToRefresh.classList.contains('visible')) { - pullToRefresh.classList.remove('visible'); - location.reload(); - } - }); + }, } @@ -207,7 +205,7 @@ The blank space should notify the user that they can select a thread to display