sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Default UI redesign (#7429)

Browse Source 
* wip

* wip

* wip

* wip

* Update default.sidebar.vue

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update sticky-sidebar.ts

* wip

* wip

* Update messaging-room.form.vue

* Update timeline.vue
This commit is contained in:
syuilo
2021-04-10 12:40:50 +09:00
committed by GitHub
parent 7d2126e2b2
commit d3fe02fb3e
81 changed files with 1532 additions and 658 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/client/scripts/sticky-sidebar.ts
View File

@ -1,40 +1,45 @@
export class StickySidebar {
private lastScrollTop = 0;
private container: HTMLElement;
private el: HTMLElement;
private spacer: HTMLElement;
private marginTop: number;
private isTop = false;
private isBottom = false;
private offsetTop: number;
constructor(el: StickySidebar['el'], spacer: StickySidebar['spacer'], marginTop = 0) {
this.el = el;
this.spacer = spacer;
constructor(container: StickySidebar['container'], marginTop = 0) {
this.container = container;
this.el = this.container.children[0] as HTMLElement;
this.el.style.position = 'sticky';
this.spacer = document.createElement('div');
this.container.prepend(this.spacer);
this.marginTop = marginTop;
this.offsetTop = this.container.getBoundingClientRect().top;
}
public calc(scrollTop: number) {
if (scrollTop > this.lastScrollTop) { // downscroll
const overflow = this.el.clientHeight - window.innerHeight;
const overflow = Math.max(0, (this.el.clientHeight + this.marginTop) - window.innerHeight);
this.el.style.bottom = null;
this.el.style.top = `${-overflow}px`;
this.el.style.top = `${-overflow + this.marginTop}px`;
this.isBottom = (scrollTop + window.innerHeight) >= (this.el.offsetTop + this.el.clientHeight);
if (this.isTop) {
this.isTop = false;
this.spacer.style.marginTop = `${this.lastScrollTop}px`;
this.spacer.style.marginTop = `${Math.max(0, this.lastScrollTop + this.marginTop - this.offsetTop)}px`;
}
} else { // upscroll
const overflow = this.el.clientHeight - window.innerHeight;
const overflow = (this.el.clientHeight + this.marginTop) - window.innerHeight;
this.el.style.top = null;
this.el.style.bottom = `${-overflow - this.marginTop}px`;
this.el.style.bottom = `${-overflow}px`;
this.isTop = scrollTop <= this.el.offsetTop;
if (this.isBottom) {
this.isBottom = false;
const overflow = this.el.clientHeight - window.innerHeight;
this.spacer.style.marginTop = `${this.lastScrollTop - (overflow + this.marginTop)}px`;
this.spacer.style.marginTop = `${this.lastScrollTop + this.marginTop - this.offsetTop - overflow}px`;
}
}