github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-12-05 09:03:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Tweak composer anchoring/animation

Browse Source
This commit is contained in:
Toby Zerner 2015-05-14 22:09:36 +09:30
parent 87d505499b
commit 41d2d0b1c6
1 changed files with 11 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
framework/core/js/forum/src/components/composer.js
View File

@ -115,7 +115,9 @@ class Composer extends Component {
var height = this.heightStart + deltaPixels; var height = this.heightStart + deltaPixels;
this.height(height); this.height(height);
this.updateHeight(); this.updateHeight();
this.updateBodyPadding();
var scrollTop = $(window).scrollTop();
this.updateBodyPadding(false, scrollTop > 0 && scrollTop + $(window).height() >= $(document).height());
localStorage.setItem('composerHeight', height); localStorage.setItem('composerHeight', height);
} }
@ -130,21 +132,21 @@ class Composer extends Component {
return this.component && this.component.preventExit(); return this.component && this.component.preventExit();
} }
render() { render(anchorToBottom) {
// @todo this function's logic could probably use some reworking. The // @todo this function's logic could probably use some reworking. The
// following line is bad because it prevents focusing on the composer // following line is bad because it prevents focusing on the composer
// input when the composer is shown when it's already being shown // input when the composer is shown when it's already being shown
if (this.position() === this.oldPosition) { return; } if (this.position() === this.oldPosition) { return; }
var $composer = this.$(); var $composer = this.$();
var oldHeight = $composer.is(':visible') ? $composer.height() : 0; var oldHeight = $composer.is(':visible') ? $composer.outerHeight() : 0;
if (this.position() !== Composer.PositionEnum.HIDDEN) { if (this.position() !== Composer.PositionEnum.HIDDEN) {
m.redraw(true); m.redraw(true);
} }
this.updateHeight(); this.updateHeight();
var newHeight = $composer.height(); var newHeight = $composer.outerHeight();
switch (this.position()) { switch (this.position()) {
case Composer.PositionEnum.HIDDEN: case Composer.PositionEnum.HIDDEN:
@ -170,7 +172,7 @@ class Composer extends Component {
} }
if (this.position() !== Composer.PositionEnum.FULLSCREEN) { if (this.position() !== Composer.PositionEnum.FULLSCREEN) {
this.updateBodyPadding(true); this.updateBodyPadding(true, anchorToBottom);
} else { } else {
this.component.focus(); this.component.focus();
} }
@ -182,19 +184,12 @@ class Composer extends Component {
// Update the amount of padding-bottom on the body so that the page's // Update the amount of padding-bottom on the body so that the page's
// content will still be visible above the composer when the page is // content will still be visible above the composer when the page is
// scrolled right to the bottom. // scrolled right to the bottom.
updateBodyPadding(animate) { updateBodyPadding(animate, anchorToBottom) {
// Before we change anything, work out if we're currently scrolled
// right to the bottom of the page. If we are, we'll want to anchor
// the body's scroll position to the bottom after we update the
// padding.
var scrollTop = $(window).scrollTop();
var anchorScroll = scrollTop > 0 && scrollTop + $(window).height() >= $(document).height();
var func = animate ? 'animate' : 'css'; var func = animate ? 'animate' : 'css';
var paddingBottom = this.position() !== Composer.PositionEnum.HIDDEN ? this.computedHeight() - parseInt($('#page').css('padding-bottom')) : 0; var paddingBottom = this.position() !== Composer.PositionEnum.HIDDEN ? this.computedHeight() - parseInt($('#page').css('padding-bottom')) : 0;
$('#content')[func]({paddingBottom}, 'fast'); $('#content')[func]({paddingBottom}, 'fast');
if (anchorScroll) { if (anchorToBottom) {
if (animate) { if (animate) {
$('html, body').stop(true).animate({scrollTop: $(document).height()}, 'fast'); $('html, body').stop(true).animate({scrollTop: $(document).height()}, 'fast');
} else { } else {
@ -226,12 +221,12 @@ class Composer extends Component {
this.component = null; this.component = null;
} }
show() { show(anchorToBottom) {
if ([Composer.PositionEnum.MINIMIZED, Composer.PositionEnum.HIDDEN].indexOf(this.position()) !== -1) { if ([Composer.PositionEnum.MINIMIZED, Composer.PositionEnum.HIDDEN].indexOf(this.position()) !== -1) {
this.position(Composer.PositionEnum.NORMAL); this.position(Composer.PositionEnum.NORMAL);
} }
// work around https://github.com/lhorie/mithril.js/issues/603 // work around https://github.com/lhorie/mithril.js/issues/603
setTimeout(() => this.render()); setTimeout(() => this.render(anchorToBottom));
} }
hide() { hide() {