@@ -101,8 +91,6 @@ class Composer extends Component {
defaultHeight = this.$().height();
}
- this.updateHeight();
-
if (isInitialized) return;
// Since this component is a part of the global UI that persists between
@@ -214,17 +202,15 @@ class Composer extends Component {
* of any flexible elements inside the composer's body.
*/
updateHeight() {
- // TODO: update this in a way that is independent of the TextEditor being
- // present.
const height = this.computedHeight();
- const $flexible = this.$('.TextEditor-flexible');
+ const $flexible = this.$('.Composer-flexible');
this.$().height(height);
if ($flexible.length) {
const headerHeight = $flexible.offset().top - this.$().offset().top;
const paddingBottom = parseInt($flexible.css('padding-bottom'), 10);
- const footerHeight = this.$('.TextEditor-controls').outerHeight(true);
+ const footerHeight = this.$('.Composer-footer').outerHeight(true);
$flexible.height(this.$().outerHeight() - headerHeight - paddingBottom - footerHeight);
}
@@ -243,98 +229,21 @@ class Composer extends Component {
const paddingBottom = visible
? this.computedHeight() - parseInt($('#app').css('padding-bottom'), 10)
: 0;
+
$('#content').css({paddingBottom});
}
/**
- * Update (and animate) the DOM to reflect the composer's current state.
+ * Determine whether or not the Composer is covering the screen.
+ *
+ * This will be true if the Composer is in full-screen mode on desktop, or
+ * if the Composer is positioned absolutely as on mobile devices.
+ *
+ * @return {Boolean}
+ * @public
*/
- update() {
- // Before we redraw the composer to its new state, we need to save the
- // current height of the composer, as well as the page's scroll position, so
- // that we can smoothly transition from the old to the new state.
- const $composer = this.$().stop(true);
- const oldHeight = $composer.is(':visible') ? $composer.outerHeight() : 0;
- const scrollTop = $(window).scrollTop();
-
- m.redraw(true);
-
- // Now that we've redrawn and the composer's DOM has been updated, we want
- // to update the composer's height. Once we've done that, we'll capture the
- // real value to use as the end point for our animation later on.
- $composer.show();
- this.updateHeight();
-
- const newHeight = $composer.outerHeight();
-
- switch (this.position) {
- case Composer.PositionEnum.NORMAL:
- // If the composer is being opened, we will make it visible and animate
- // it growing/sliding up from the bottom of the viewport. Or if the user
- // has just exited fullscreen mode, we will simply tell the content to
- // take focus.
- if (this.oldPosition !== Composer.PositionEnum.FULLSCREEN) {
- $composer.show()
- .css({height: oldHeight})
- .animate({bottom: 0, height: newHeight}, 'fast', this.component.focus.bind(this.component));
-
- if ($composer.css('position') === 'absolute') {
- $composer.css('top', $(window).scrollTop());
-
- this.$backdrop = $('
')
- .addClass('composer-backdrop')
- .appendTo('body');
- }
- } else {
- this.component.focus();
- }
- break;
-
- case Composer.PositionEnum.MINIMIZED:
- // If the composer has been minimized, we will animate it shrinking down
- // to its new smaller size.
- $composer.css({top: 'auto', height: oldHeight})
- .animate({height: newHeight}, 'fast');
-
- if (this.$backdrop) this.$backdrop.remove();
- break;
-
- case Composer.PositionEnum.HIDDEN:
- // If the composer has been hidden, then we will animate it sliding down
- // beyond the edge of the viewport. Once the animation is complete, we
- // un-draw the composer's component.
- $composer.css({top: 'auto', height: oldHeight})
- .animate({bottom: -newHeight}, 'fast', () => {
- $composer.hide();
- this.clear();
- m.redraw();
- });
-
- if (this.$backdrop) this.$backdrop.remove();
- break;
-
- case Composer.PositionEnum.FULLSCREEN:
- this.component.focus();
- break;
-
- default:
- // no default
- }
-
- // Provided the composer isn't in fullscreen mode, we'll want to update the
- // body's padding to make sure all of the page's content can still be seen.
- // Plus, we'll scroll back to where we were before the composer was opened,
- // as its opening may have changed the content of the page.
- if (this.position !== Composer.PositionEnum.FULLSCREEN) {
- this.updateBodyPadding();
- $('html, body').scrollTop(scrollTop);
- }
-
- this.oldPosition = this.position;
- }
-
- isMobile() {
- return this.$backdrop && this.$backdrop.length;
+ isFullScreen() {
+ return this.position === Composer.PositionEnum.FULLSCREEN || this.$().css('position') === 'absolute';
}
/**
@@ -384,20 +293,76 @@ class Composer extends Component {
this.component = null;
}
+ /**
+ * Animate the Composer into the given position.
+ *
+ * @param {Composer.PositionEnum} position
+ */
+ animateToPosition(position) {
+ // Before we redraw the composer to its new state, we need to save the
+ // current height of the composer, as well as the page's scroll position, so
+ // that we can smoothly transition from the old to the new state.
+ const oldPosition = this.position;
+ const $composer = this.$().stop(true);
+ const oldHeight = $composer.outerHeight();
+ const scrollTop = $(window).scrollTop();
+
+ this.position = position;
+
+ m.redraw(true);
+
+ // Now that we've redrawn and the composer's DOM has been updated, we want
+ // to update the composer's height. Once we've done that, we'll capture the
+ // real value to use as the end point for our animation later on.
+ $composer.show();
+ this.updateHeight();
+
+ const newHeight = $composer.outerHeight();
+
+ if (oldPosition === Composer.PositionEnum.HIDDEN) {
+ $composer.css({bottom: -newHeight, height: newHeight});
+ } else {
+ $composer.css({height: oldHeight});
+ }
+
+ $composer.animate({bottom: 0, height: newHeight}, 'fast', () => this.component.focus());
+
+ this.updateBodyPadding();
+ $(window).scrollTop(scrollTop);
+ }
+
+ /**
+ * Show the Composer backdrop.
+ */
+ showBackdrop() {
+ this.$backdrop = $('
')
+ .addClass('composer-backdrop')
+ .appendTo('body');
+ }
+
+ /**
+ * Hide the Composer backdrop.
+ */
+ hideBackdrop() {
+ if (this.$backdrop) this.$backdrop.remove();
+ }
+
/**
* Show the composer.
*
* @public
*/
show() {
- // If the composer is hidden or minimized, we'll need to update its
- // position. Otherwise, if the composer is already showing (whether it's
- // fullscreen or not), we can leave it as is.
- if ([Composer.PositionEnum.MINIMIZED, Composer.PositionEnum.HIDDEN].indexOf(this.position) !== -1) {
- this.position = Composer.PositionEnum.NORMAL;
+ if (this.position === Composer.PositionEnum.NORMAL || this.position === Composer.PositionEnum.FULLSCREEN) {
+ return;
}
- this.update();
+ this.animateToPosition(Composer.PositionEnum.NORMAL);
+
+ if (this.isFullScreen()) {
+ this.$().css('top', $(window).scrollTop());
+ this.showBackdrop();
+ }
}
/**
@@ -406,8 +371,20 @@ class Composer extends Component {
* @public
*/
hide() {
- this.position = Composer.PositionEnum.HIDDEN;
- this.update();
+ const $composer = this.$();
+
+ // Animate the composer sliding down off the bottom edge of the viewport.
+ // Only when the animation is completed, update the Composer state flag and
+ // other elements on the page.
+ $composer.stop(true).animate({bottom: -$composer.height()}, 'fast', () => {
+ this.position = Composer.PositionEnum.HIDDEN;
+ this.clear();
+ m.redraw();
+
+ $composer.hide();
+ this.hideBackdrop();
+ this.updateBodyPadding();
+ });
}
/**
@@ -428,10 +405,12 @@ class Composer extends Component {
* @public
*/
minimize() {
- if (this.position !== Composer.PositionEnum.HIDDEN) {
- this.position = Composer.PositionEnum.MINIMIZED;
- this.update();
- }
+ if (this.position === Composer.PositionEnum.HIDDEN) return;
+
+ this.animateToPosition(Composer.PositionEnum.MINIMIZED);
+
+ this.$().css('top', 'auto');
+ this.hideBackdrop();
}
/**
@@ -443,7 +422,9 @@ class Composer extends Component {
fullScreen() {
if (this.position !== Composer.PositionEnum.HIDDEN) {
this.position = Composer.PositionEnum.FULLSCREEN;
- this.update();
+ m.redraw();
+ this.updateHeight();
+ this.component.focus();
}
}
@@ -455,7 +436,9 @@ class Composer extends Component {
exitFullScreen() {
if (this.position === Composer.PositionEnum.FULLSCREEN) {
this.position = Composer.PositionEnum.NORMAL;
- this.update();
+ m.redraw();
+ this.updateHeight();
+ this.component.focus();
}
}
diff --git a/framework/core/js/forum/src/components/EditPostComposer.js b/framework/core/js/forum/src/components/EditPostComposer.js
index 52c863f62..67905a7a1 100644
--- a/framework/core/js/forum/src/components/EditPostComposer.js
+++ b/framework/core/js/forum/src/components/EditPostComposer.js
@@ -1,6 +1,13 @@
import ComposerBody from 'flarum/components/ComposerBody';
import icon from 'flarum/helpers/icon';
+function minimizeComposerIfFullScreen(e) {
+ if (app.composer.isFullScreen()) {
+ app.composer.minimize();
+ e.stopPropagation();
+ }
+}
+
/**
* The `EditPostComposer` component displays the composer content for editing a
* post. It sets the initial content to the content of the post that is being
@@ -15,14 +22,8 @@ export default class EditPostComposer extends ComposerBody {
init() {
super.init();
- this.editor.props.preview = () => {
- // If the composer backdrop is visible, assume we're on mobile and need to
- // minimize the composer in order to see the preview. We do this as a
- // timeout so that it occurs after the click handler on the composer
- // itself that shows the composer if minimized.
- if (app.composer.isMobile()) {
- setTimeout(() => app.composer.minimize(), 0);
- }
+ this.editor.props.preview = e => {
+ minimizeComposerIfFullScreen(e);
m.route(app.route.post(this.props.post));
};
@@ -43,10 +44,16 @@ export default class EditPostComposer extends ComposerBody {
const items = super.headerItems();
const post = this.props.post;
+ const routeAndMinimize = function(element, isInitialized) {
+ if (isInitialized) return;
+ $(element).on('click', minimizeComposerIfFullScreen);
+ m.route.apply(this, arguments);
+ };
+
items.add('title', (
diff --git a/framework/core/js/forum/src/components/ReplyComposer.js b/framework/core/js/forum/src/components/ReplyComposer.js
index ab161485f..7048ae7ba 100644
--- a/framework/core/js/forum/src/components/ReplyComposer.js
+++ b/framework/core/js/forum/src/components/ReplyComposer.js
@@ -4,6 +4,13 @@ import Button from 'flarum/components/Button';
import icon from 'flarum/helpers/icon';
import extractText from 'flarum/utils/extractText';
+function minimizeComposerIfFullScreen(e) {
+ if (app.composer.isFullScreen()) {
+ app.composer.minimize();
+ e.stopPropagation();
+ }
+}
+
/**
* The `ReplyComposer` component displays the composer content for replying to a
* discussion.
@@ -17,14 +24,8 @@ export default class ReplyComposer extends ComposerBody {
init() {
super.init();
- this.editor.props.preview = () => {
- // If the composer backdrop is visible, assume we're on mobile and need to
- // minimize the composer in order to see the preview. We do this as a
- // timeout so that it occurs after the click handler on the composer
- // itself that shows the composer if minimized.
- if (app.composer.isMobile()) {
- setTimeout(() => app.composer.minimize(), 0);
- }
+ this.editor.props.preview = e => {
+ minimizeComposerIfFullScreen(e);
m.route(app.route.discussion(this.props.discussion, 'reply'));
};
@@ -42,10 +43,16 @@ export default class ReplyComposer extends ComposerBody {
const items = super.headerItems();
const discussion = this.props.discussion;
+ const routeAndMinimize = function(element, isInitialized) {
+ if (isInitialized) return;
+ $(element).on('click', minimizeComposerIfFullScreen);
+ m.route.apply(this, arguments);
+ };
+
items.add('title', (
));
diff --git a/framework/core/js/forum/src/components/TextEditor.js b/framework/core/js/forum/src/components/TextEditor.js
index a1f881aef..3bc299c2d 100644
--- a/framework/core/js/forum/src/components/TextEditor.js
+++ b/framework/core/js/forum/src/components/TextEditor.js
@@ -19,7 +19,7 @@ export default class TextEditor extends Component {
/**
* The value of the textarea.
*
- * @type {[type]}
+ * @type {String}
*/
this.value = m.prop(this.props.value || '');
}
@@ -27,14 +27,14 @@ export default class TextEditor extends Component {
view() {
return (
-