mirror/hotomoe
1
0
Fork 0
mirror of https://github.com/hotomoe/hotomoe synced 2024-12-01 16:28:12 +09:00
Code

Widgets is now follow scroll

Browse Source
This commit is contained in:
syuilo 2017-11-18 08:04:51 +09:00
parent 918f2cf6cf
commit cacf71d341
1 changed files with 56 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/web/app/desktop/tags/home.tag
View File

@ -36,13 +36,17 @@
</div> </div>
</div> </div>
<div class="main"> <div class="main">
<div class="left" ref="left" data-place="left"></div> <div class="left">
<div ref="left" data-place="left"></div>
</div>
<main ref="main"> <main ref="main">
<div class="maintop" ref="maintop" data-place="main" if={ opts.customize }></div> <div class="maintop" ref="maintop" data-place="main" if={ opts.customize }></div>
<mk-timeline-home-widget ref="tl" if={ mode == 'timeline' }/> <mk-timeline-home-widget ref="tl" if={ mode == 'timeline' }/>
<mk-mentions-home-widget ref="tl" if={ mode == 'mentions' }/> <mk-mentions-home-widget ref="tl" if={ mode == 'mentions' }/>
</main> </main>
<div class="right" ref="right" data-place="right"></div> <div class="right">
<div ref="right" data-place="right"></div>
</div>
</div> </div>
<style> <style>
:scope :scope
@ -132,37 +136,38 @@
max-width 1200px max-width 1200px
> * > *
> *:not(.customize-container):not(.maintop) .customize-container
> .customize-container
&:not(:last-child)
margin-bottom 16px
> .maintop > .customize-container
margin-bottom 16px
> main
padding 16px
width calc(100% - 275px * 2)
> .maintop
min-height 64px
> *
> .customize-container
> .maintop > .customize-container
cursor move cursor move
> * > *
pointer-events none pointer-events none
> main
padding 16px
width calc(100% - 275px * 2)
> *:not(.maintop):not(:last-child)
> .maintop > *:not(:last-child)
margin-bottom 16px
> .maintop
min-height 64px
margin-bottom 16px
> *:not(main) > *:not(main)
width 275px width 275px
> *
padding 16px 0 16px 0
> *:not(:last-child)
margin-bottom 16px
> .left > .left
padding 16px 0 16px 16px padding-left 16px
> .right > .right
padding 16px 16px 16px 0 padding-right 16px
@media (max-width 1100px) @media (max-width 1100px)
> *:not(main) > *:not(main)
@ -235,14 +240,43 @@
} }
})); }));
} }
this.containerTop = this.refs.main.getBoundingClientRect().top;
this.headerHight = 48;
window.addEventListener('scroll', this.followWidgets);
window.addEventListener('resize', this.followWidgets);
}); });
this.on('unmount', () => { this.on('unmount', () => {
this.home.forEach(widget => { this.home.forEach(widget => {
widget.unmount(); widget.unmount();
}); });
window.removeEventListener('scroll', this.followWidgets);
window.removeEventListener('resize', this.followWidgets);
}); });
this.followWidgets = () => {
const windowBottom = window.scrollY + window.innerHeight;
const windowTop = window.scrollY + this.headerHight;
const calc = widgets => {
const rect = widgets.getBoundingClientRect();
const widgetsHeight = rect.height + this.containerTop;
const widgetsBottom = (rect.top + window.scrollY) + rect.height;
if (windowBottom > widgetsBottom && widgetsHeight > window.innerHeight) {
widgets.parentNode.style.marginTop = `${(windowBottom - rect.height) - this.containerTop}px`;
} else if (windowTop < rect.top + window.scrollY || widgetsHeight < window.innerHeight) {
widgets.parentNode.style.marginTop = `${(windowTop - this.containerTop)}px`;
}
};
calc(this.refs.left);
calc(this.refs.right);
};
this.setWidget = (widget, prepend = false) => { this.setWidget = (widget, prepend = false) => {
const el = document.createElement(`mk-${widget.name}-home-widget`); const el = document.createElement(`mk-${widget.name}-home-widget`);