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
-
+
@@ -250,21 +248,7 @@ The blank space should notify the user that they can select a thread to display #TEST_DIV_FOR_TESTING_WEBTEXTING { height: 85vh; } -.pull-to-refresh { - z-index:-1; - position: fixed; - top: 50px; - width: 100%; - height: 60px; - display: flex; - justify-content: center; - align-items: center; - transition: top 0.7s ease-in-out; - } - .pull-to-refresh.visible { - top: 0; - z-index:1; - } + @media screen and (width<=700px) { #main_content { @@ -276,6 +260,21 @@ The blank space should notify the user that they can select a thread to display #TEST_DIV_FOR_TESTING_WEBTEXTING { height: 93vh; } + .pull-to-refresh { + z-index:-1; + position: fixed; + top: 50px; + width: 100%; + height: 60px; + display: flex; + justify-content: center; + align-items: center; + transition: top 0.7s ease-in-out; + } + .pull-to-refresh.visible { + top: 0; + z-index:1; + } } diff --git a/frontend/components/conversation/Conversation.vue b/frontend/components/conversation/Conversation.vue index 678ce55..eb4d27e 100644 --- a/frontend/components/conversation/Conversation.vue +++ b/frontend/components/conversation/Conversation.vue @@ -106,14 +106,14 @@ export default { type: Array, }, selectedConvo: { - type:Boolean, + type: Boolean, }, }, components: { Message, SendBox }, - + data() { - let title = ""; + let title = ""; if (this.displayName) { title = this.displayName; } else if (this.groupMembers) { @@ -127,8 +127,8 @@ export default { title += this.remoteNumber; } } - else if(this.groupUUID){ - title+= this.groupUUID; + else if (this.groupUUID) { + title += this.groupUUID; } let conversationKey = this.remoteNumber ? this.remoteNumber : this.groupUUID; return { @@ -154,10 +154,10 @@ export default { this.conversationKey = this.$route.query.group //emitter.emit('backfill-requested', this.conversationKey); const groupTag = document.getElementsByName("group"); - groupTag[0].value = this.$route.query.group; - + groupTag[0].value = this.$route.query.group; + } - + emitter.on('scroll-to-bottom', this.toBottom); @@ -195,19 +195,43 @@ export default { this.backfillAvailable = false; }) - emitter.on('thread-changed', (newDisplayName:String) => { + emitter.on('thread-changed', (newDisplayName: String) => { console.log(`thread changed new display name is ${newDisplayName}`); this.title = newDisplayName; }) + + 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(); + } + }); //console.log(this.state.messages); //console.log("Conversation.vue mounted with props:\nremoteNumber:", this.remoteNumber, "\ngroupUUID:", this.groupUUID, "\ndisplayName:", this.displayName, "\nownNumber:", this.ownNumber); }, beforeUpdate() { //console.log("changing active component"); - if(this.$route.query.group){ + if (this.$route.query.group) { const groupTag = document.getElementsByName("group"); - groupTag[0].value = this.$route.query.group; - } + groupTag[0].value = this.$route.query.group; + } }, watch: { remoteNumber: async function (rN) { @@ -236,7 +260,7 @@ export default { //console.log(observedChangeQueryParams) this.messages = this.state.conversations[this.$route.query.group]; //this.title = this.$route.query.group; - + } this.conversationKey = this.$route.query.group; this.backfillAvailable = true; @@ -283,21 +307,29 @@ export default { //console.log("new message added to bottom. scrolling?", this.atBottom); if (this.atBottom) { const messageContainer = this.$refs.message_container; - if(messageContainer){ + if (messageContainer) { messageContainer.scrollTo(0, messageContainer.scrollHeight); } } }, }, + beforeDestroy() { + const refreshElement = document.getElementsByClassName("thread-header")[0]; + refreshElement.removeEventListener('touchend', e ); + refreshElement.removeEventListener('touchmove', e ); + refreshElement.removeEventListener('touchestart', e ); + }, } \ No newline at end of file diff --git a/frontend/lib/matchMedia.js b/frontend/lib/matchMedia.js new file mode 100644 index 0000000..437a196 --- /dev/null +++ b/frontend/lib/matchMedia.js @@ -0,0 +1,12 @@ +import {ref} from 'vue'; + +export function useMatchMedia(query){ + + const match = window.matchMedia(query); + + const isMatching = ref(match.matches); + + match.addEventListener('change', e => isMatching.value = e.matches); + + return isMatching; +} \ No newline at end of file