mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-23 18:17:20 +00:00
Code Issues Releases Wiki Activity

Enhance height control for edit-text widget

Browse Source 
Added the option to disable automatic resizing, and the ability to
specify the minimum height.
This commit is contained in:
Jermolene 2014-10-25 10:09:17 +01:00
parent 80e67f5028
commit 4a17212576
2 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
core/modules/widgets/edit-text.js
View File

@ -12,7 +12,7 @@ Edit-text widget
/*global $tw: false */
"use strict";
var MIN_TEXT_AREA_HEIGHT = 100; // Minimum height of textareas in pixels
var DEFAULT_MIN_TEXT_AREA_HEIGHT = "100px"; // Minimum height of textareas in pixels
var Widget = require("$:/core/modules/widgets/widget.js").widget;
@ -137,6 +137,8 @@ EditTextWidget.prototype.execute = function() {
this.editClass = this.getAttribute("class");
this.editPlaceholder = this.getAttribute("placeholder");
this.editSize = this.getAttribute("size");
this.editAutoHeight = this.getAttribute("autoHeight","yes") === "yes";
this.editMinHeight = this.getAttribute("minHeight",DEFAULT_MIN_TEXT_AREA_HEIGHT)
this.editFocusPopup = this.getAttribute("focusPopup");
// Get the editor element tag and type
var tag,type;
@ -164,7 +166,7 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
EditTextWidget.prototype.refresh = function(changedTiddlers) {
var changedAttributes = this.computeAttributes();
// Completely rerender if any of our attributes have changed
if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index) {
if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes["default"] || changedAttributes["class"] || changedAttributes.placeholder || changedAttributes.size || changedAttributes.autoHeight || changedAttributes.minHeight || changedAttributes.focusPopup) {
this.refreshSelf();
return true;
} else if(changedTiddlers[this.editTitle]) {
@ -203,15 +205,18 @@ Fix the height of textareas to fit their content
EditTextWidget.prototype.fixHeight = function() {
var self = this,
domNode = this.domNodes[0];
if(domNode && !domNode.isTiddlyWikiFakeDom && this.editTag === "textarea") {
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,MIN_TEXT_AREA_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";

8
editions/tw5.com/tiddlers/widgets/EditTextWidget.tid
View File

@ -1,6 +1,6 @@
title: EditTextWidget
created: 201310241419
modified: 201407250837
modified: 20141025085449609
tags: Widgets
caption: edit-text
@ -22,9 +22,11 @@ The content of the `<$edit-text>` widget is ignored.
|class |A CSS class to be assigned to the generated HTML editing element |
|placeholder |Placeholder text to be displayed when the edit field is empty |
|focusPopup |Title of a state tiddler for a popup that is displayed when the editing element has focus |
|tag |Overrides the generated HTML editing element tag |
|size |The size of the input field (in characters) |
|tag |Overrides the generated HTML editing element tag. Use `textarea` for a multi-line editor |
|type |Overrides the generated HTML editing element `type` attribute |
|size |The size of the input field (in characters) |
|autoHeight |Either "yes" or "no" to specify whether to automatically resize `textarea` editors to fit their content (defaults to "yes") |
|minHeight |Minimum height for automatically resized `textarea` editors, specified in CSS length units such as "px", "em" or "%" |
! Notes