Skip to content

Commit

Permalink
refactored our refresh function to attach to the header (threadlist, …
Browse files Browse the repository at this point in the history 
…conversation, newmessage) instead of the background. this was done to prevent users from refreshing when scrolling through messages / menu options
  • Loading branch information
Ian committed Mar 1, 2024
1 parent df353b2 commit 289aae1
Show file tree
Hide file tree
Showing 5 changed files with 201 additions and 90 deletions.
37 changes: 34 additions & 3 deletions frontend/components/NewMessage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
},
}
</script>
Expand Down
63 changes: 47 additions & 16 deletions frontend/components/ThreadList/ThreadList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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 );
},
}
Expand Down
73 changes: 36 additions & 37 deletions frontend/components/WebTextingContainer/WebTextingContainer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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}`)
Expand All @@ -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();
}
});
},
}
Expand All @@ -207,7 +205,7 @@ The blank space should notify the user that they can select a thread to display


<div id="WEB_TEXT_ROOT">
<div class="pull-to-refresh"><div class="spinner-border"></div></div>
<div v-if="smallScreen" class="pull-to-refresh"><div class="spinner-border"></div></div>
<RouterView name="leftSide" :ownNumber="this.$props.ownNumber" :threads="this.$props.threads"
:threadPreviews="this.threadPreviews" :selectedConvo="this.conversationSelected"
:newThreadView="this.newThreadSelected" />
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
}
}
Expand Down
Loading

0 comments on commit 289aae1

Please sign in to comment.