Remove flicker when resizing textareas

The `EditTextWidget.prototype.fixHeight()` function was defering its
work with `nextTick()`, which led to flickering on all browsers when
typing triggers a resize.
print-window-tiddler
Jermolene 2014-11-13 11:19:21 +00:00
rodzic 1d49e45deb
commit d1bbe7253c
1 zmienionych plików z 19 dodań i 21 usunięć

Wyświetl plik

@ -206,27 +206,25 @@ EditTextWidget.prototype.fixHeight = function() {
var self = this,
domNode = this.domNodes[0];
if(this.editAutoHeight && domNode && !domNode.isTiddlyWikiFakeDom && this.editTag === "textarea") {
$tw.utils.nextTick(function() {
// Resize the textarea to fit its content, preserving scroll position
var scrollPosition = $tw.utils.getScrollPosition(),
scrollTop = scrollPosition.y;
// Measure the specified minimum height
domNode.style.height = self.editMinHeight;
var minHeight = domNode.offsetHeight;
// Set its height to auto so that it snaps to the correct height
domNode.style.height = "auto";
// Calculate the revised height
var newHeight = Math.max(domNode.scrollHeight + domNode.offsetHeight - domNode.clientHeight,minHeight);
// Only try to change the height if it has changed
if(newHeight !== domNode.offsetHeight) {
domNode.style.height = newHeight + "px";
// Make sure that the dimensions of the textarea are recalculated
$tw.utils.forceLayout(domNode);
// Check that the scroll position is still visible before trying to scroll back to it
scrollTop = Math.min(scrollTop,self.document.body.scrollHeight - window.innerHeight);
window.scrollTo(scrollPosition.x,scrollTop);
}
});
// Resize the textarea to fit its content, preserving scroll position
var scrollPosition = $tw.utils.getScrollPosition(),
scrollTop = scrollPosition.y;
// Measure the specified minimum height
domNode.style.height = self.editMinHeight;
var minHeight = domNode.offsetHeight;
// Set its height to auto so that it snaps to the correct height
domNode.style.height = "auto";
// Calculate the revised height
var newHeight = Math.max(domNode.scrollHeight + domNode.offsetHeight - domNode.clientHeight,minHeight);
// Only try to change the height if it has changed
if(newHeight !== domNode.offsetHeight) {
domNode.style.height = newHeight + "px";
// Make sure that the dimensions of the textarea are recalculated
$tw.utils.forceLayout(domNode);
// Check that the scroll position is still visible before trying to scroll back to it
scrollTop = Math.min(scrollTop,self.document.body.scrollHeight - window.innerHeight);
window.scrollTo(scrollPosition.x,scrollTop);
}
}
};