Matthias Mullie has uploaded a new change for review.
https://gerrit.wikimedia.org/r/216103
Change subject: Redo part of the autoExpand code
......................................................................
Redo part of the autoExpand code
Some code was obsolete (the thing to block multiple consecutive height changes -
we don't animate the change anymore...)
Padding was hardcoded to 5px; I'd rather use this.height() and adjust according
to box-sizing.
There were some issues with the calculation of the height.
And we didn't recalculate the height after adding an element to the form, making
the "keep the entire form visible" useless.
Bug: T100074
Change-Id: I1a1cd8b238ad06f615410e2f76e31f54a45c668e
---
M modules/editor/editors/ext.flow.editors.none.js
1 file changed, 29 insertions(+), 22 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Flow
refs/changes/03/216103/1
diff --git a/modules/editor/editors/ext.flow.editors.none.js
b/modules/editor/editors/ext.flow.editors.none.js
index 6581497..2dae6ff 100644
--- a/modules/editor/editors/ext.flow.editors.none.js
+++ b/modules/editor/editors/ext.flow.editors.none.js
@@ -108,10 +108,12 @@
* Auto-expand/shrink as content changes.
*/
mw.flow.editors.none.prototype.autoExpand = function () {
- var scrollHeight, $form, formBottom, windowBottom,
maxHeightIncrease,
+ var scrollHeight, totalHeight, maxHeight, textareaBottom,
formBottom, windowBottom,
$this = $( this ),
+ $form = $this.closest( 'form'),
+ excludePadding = $this.css( 'box-sizing' ) ===
'content-box',
height = $this.height(),
- padding = $this.outerHeight() - $this.height() + 5;
+ padding = $this.outerHeight() - $this.height();
/*
* Collapse to 0 height to get accurate scrollHeight for the
content,
@@ -126,31 +128,32 @@
scrollHeight = this.scrollHeight;
$this.height( height );
- /*
- * Only animate height change if there actually is a change; we
don't
- * want every keystroke firing a 50ms animation.
- */
- if ( scrollHeight === $this.data( 'flow-prev-scroll-height' ) )
{
- // no change
- return;
- }
- $this.data( 'flow-prev-scroll-height', scrollHeight );
+ totalHeight = scrollHeight;
- $form = $this.closest( 'form' );
+ /*
+ * Additional padding of 20px between the form & the bottom of
the
+ * page, so we don't end up with a form larger than the screen.
+ */
+ textareaBottom = $this.offset().top + height;
formBottom = $form.offset().top + $form.outerHeight( true );
windowBottom = $( window ).scrollTop() + $( window ).height();
- // additional padding of 20px so the targeted form has
breathing room
- maxHeightIncrease = windowBottom - formBottom - 20;
+ maxHeight = windowBottom - 20 - $this.offset().top - (
formBottom - textareaBottom );
+ if (totalHeight >= maxHeight) {
+ // override new height to be near the bottom edge, not
past it
+ scrollHeight = maxHeight;
- if ( scrollHeight - height - padding >= maxHeightIncrease ) {
- // If we can't expand ensure overflow-y is set to auto
- $this.css( 'overflow-y', 'auto' );
- } else if ( scrollHeight !== $this.height() ) {
- $this.css( {
- height: scrollHeight,
- 'overflow-y': 'hidden'
- } );
+ // if we can't expand, ensure overflow-y is set to auto
+ $this.css('overflow-y', 'auto');
+ } else {
+ $this.css('overflow-y', 'hidden');
}
+
+ // height works differently depending on content-box or
border-box...
+ if ( excludePadding ) {
+ scrollHeight -= padding;
+ }
+
+ $this.height( scrollHeight );
};
mw.flow.editors.none.prototype.attachControls = function () {
@@ -194,6 +197,10 @@
// insert help information + editor switcher, and make it
interactive
board.emitWithReturn( 'makeContentInteractive',
$controls.insertAfter( this.$node ) );
+
+ // now that we've added a new element to the form, re-calculate
the
+ // size of the textarea (we want the entire form to remain
visible)
+ this.autoExpand.call( this.$node.get( 0 ) );
};
mw.flow.editors.none.prototype.focus = function () {
--
To view, visit https://gerrit.wikimedia.org/r/216103
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I1a1cd8b238ad06f615410e2f76e31f54a45c668e
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Flow
Gerrit-Branch: master
Gerrit-Owner: Matthias Mullie <mmul...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
