jenkins-bot has submitted this change and it was merged.
Change subject: auto-expand text-area as content grows
......................................................................
auto-expand text-area as content grows
Change-Id: Id690ba0462812ed1eaea392ac606cae3f760f626
---
M modules/discussion/ui.js
M modules/editor/editors/ext.flow.editors.none.js
2 files changed, 37 insertions(+), 2 deletions(-)
Approvals:
EBernhardson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/modules/discussion/ui.js b/modules/discussion/ui.js
index 748d514..4131f97 100644
--- a/modules/discussion/ui.js
+++ b/modules/discussion/ui.js
@@ -285,7 +285,7 @@
} );
}
);
- } );
+ } );
// Moderated posts need click to display content
$( '<a href="#" class="flow-post-moderated-view"></a>' )
diff --git a/modules/editor/editors/ext.flow.editors.none.js
b/modules/editor/editors/ext.flow.editors.none.js
index 6217ad2..b716b5c 100644
--- a/modules/editor/editors/ext.flow.editors.none.js
+++ b/modules/editor/editors/ext.flow.editors.none.js
@@ -8,6 +8,11 @@
mw.flow.editors.none = function ( $node, content ) {
this.$node = $node;
this.$node.val( content || '' );
+
+ // auto-expansion shouldn't shrink too much; set default height
as min
+ this.$node.css( 'overflow', 'hidden' );
+ this.$node.css( 'min-height', this.$node.height() );
+ this.$node.keyup( this.autoExpand );
};
/**
@@ -18,7 +23,8 @@
mw.flow.editors.none.format = 'wikitext';
mw.flow.editors.none.prototype.destroy = function () {
-
+ // unset min-height that was set for auto-expansion
+ this.$node.css( 'min-height', '' );
};
/**
@@ -27,4 +33,33 @@
mw.flow.editors.none.prototype.getRawContent = function () {
return this.$node.val();
};
+
+ /**
+ * Auto-expand/shrink as content changes.
+ */
+ mw.flow.editors.none.prototype.autoExpand = function() {
+ var height = $( this ).height(),
+ scrollHeight;
+
+ /*
+ * Collapse to 0 height to get accurate scrollHeight for the
content,
+ * then restore height.
+ * Without collapsing, scrollHeight would be the highest of:
+ * * the content height
+ * * the height the textarea already has
+ * Since we're looking to also shrink the textarea when content
shrinks,
+ * we want to ignore that last case (hence the collapsing)
+ */
+ $( this ).height( 0 );
+ 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 ).height() ) {
+ $( this ).animate( { height: scrollHeight }, 50 );
+ }
+ };
} ( jQuery, mediaWiki ) );
--
To view, visit https://gerrit.wikimedia.org/r/94285
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Id690ba0462812ed1eaea392ac606cae3f760f626
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/extensions/Flow
Gerrit-Branch: master
Gerrit-Owner: Matthias Mullie <[email protected]>
Gerrit-Reviewer: Bsitu <[email protected]>
Gerrit-Reviewer: EBernhardson <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
