t510599/2021
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Fix] navbar error highlighting & mobile detection

Browse Source 
scroll to anchor after the page loaded
move mobile detection from mounted to created to detect earlier
This commit is contained in:
Tony Yang 2021-02-05 01:23:40 +08:00
parent 0dfdd04a20
commit b21bb266b1
Signed by: t510599
GPG Key ID: D88388851C28715D
1 changed files with 32 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/news/Navbar.vue
View File

@ -43,29 +43,40 @@ export default class Navbar extends Vue {
'#precautions'
];
public mounted () {
this.$nextTick().then(() => {
const query: string = '(max-width: 1024px)';
const mq: MediaQueryList = window.matchMedia(query);
if (mq.addEventListener) {
mq.addEventListener('change', this.matchMediaCallback);
} else {
mq.addListener(this.matchMediaCallback);
}
// check first
this.matchMediaCallback(mq);
public created () {
const query: string = '(max-width: 1024px)';
const mq: MediaQueryList = window.matchMedia(query);
if (mq.addEventListener) {
mq.addEventListener('change', this.matchMediaCallback);
} else {
// for sad safari
mq.addListener(this.matchMediaCallback);
}
// check first
this.matchMediaCallback(mq);
}
// observe header: header appears => no fix; header disappears => fix.
const fixObserver: IntersectionObserver = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) {
this.isNavbarFixed = true;
} else {
this.isNavbarFixed = false;
}
});
}, { rootMargin: '25px 0px 0px 0px', threshold: 0 });
public mounted () {
// observe header: header appears => no fix; header disappears => fix.
const fixObserver: IntersectionObserver = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) {
this.isNavbarFixed = true;
} else {
this.isNavbarFixed = false;
}
});
}, { rootMargin: '25px 0px 0px 0px', threshold: 0 });
this.$nextTick().then(() => {
fixObserver.observe(document.querySelector('#news-header') as Element);
if (location.hash) {
const hash = location.hash;
// scroll to anchor
// value should be changed to scroll, so set to empty string first.
location.hash = '';
location.hash = hash;
}
});
}