hswidget
Version:
Helpful Scripts UI widgets
64 lines • 7.05 kB
JavaScript
import { Log } from 'hsutil';
const log = new Log('EditTextarea');
import m from "mithril";
import { Popup } from './Popup';
import { Widget } from './Widget';
import { makeHtml } from './EditLabel';
export class EditTextarea extends Widget {
oninit(node) {
node.state.editable = false;
node.state.hasFocus = false;
node.state.update = (newValue) => node.attrs.update(newValue);
node.state.blur = (e) => {
node.state.editable = false;
node.state.hasFocus = false;
const content = e.target.value;
node.state.update(content);
};
node.state.toggleEditable = () => node.state.editable = !node.state.editable;
node.state.adjustTextAreaHeight = (dom) => {
if (dom && dom.classList) {
while (!dom.classList.contains('hsedit_textarea')) {
dom = dom.parentElement;
}
const scHeight = dom.scrollHeight;
const height = parseInt(window.getComputedStyle(dom).height);
const h = Math.max(height, scHeight);
dom.style.height = h > 0 ? `${h}px` : 'auto';
const listRow = dom.parentElement.parentElement;
if (listRow.classList.contains('hsedit_list_row')) {
listRow.style.height = h > 0 ? `${h + (node.state.editable ? 4 : 0)}px` : 'auto';
}
}
};
}
onupdate(node) {
if (node.state.editable) {
if (!node.state.hasFocus) {
node.dom.value = node.children || '';
node.dom.focus();
node.dom.select();
node.state.hasFocus = true;
}
node.state.adjustTextAreaHeight(node.dom);
}
}
view(node) {
const onEvent = this.attrs(node.attrs, {
onclick: node.state.toggleEditable,
onupdate: (n) => node.state.adjustTextAreaHeight(n.dom)
});
const children = node.children.join(',');
const html = makeHtml('' + children).replace(/\n/g, '<p>');
const content = children ? m.trust(html) : node.attrs.placeholder ?? 'click to enter';
const attrs = () => node.attrs.popup ? Popup.arm(node.attrs.popup, onEvent) : onEvent;
const def = children ? '' : '.default';
return node.state.editable ?
m(`textarea.hs_edit_textarea`, this.attrs(node.attrs, {
wrap: 'physical',
onblur: node.state.blur,
}), content)
: m(`.hs_edit_textarea${def}`, attrs(), content);
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRWRpdFRleHRhcmVhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL0VkaXRUZXh0YXJlYS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQ0EsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFlLFFBQVEsQ0FBQztBQUFFLE1BQU0sR0FBRyxHQUFHLElBQUksR0FBRyxDQUFDLGNBQWMsQ0FBQyxDQUFDO0FBQzVFLE9BQU8sQ0FBZSxNQUFPLFNBQVMsQ0FBQztBQUN2QyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQWEsU0FBUyxDQUFDO0FBQ3ZDLE9BQU8sRUFBRSxNQUFNLEVBQWtDLE1BQ3BCLFVBQVUsQ0FBQztBQUN4QyxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQVUsYUFBYSxDQUFDO0FBUzNDLE1BQU0sT0FBTyxZQUFhLFNBQVEsTUFBTTtJQU9wQyxNQUFNLENBQUMsSUFBbUM7UUFDdEMsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO1FBQzVCLElBQUksQ0FBQyxLQUFLLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztRQUM1QixJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxDQUFDLFFBQWUsRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDckUsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEdBQUcsQ0FBQyxDQUFPLEVBQUUsRUFBRTtZQUMxQixJQUFJLENBQUMsS0FBSyxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7WUFDNUIsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO1lBQzVCLE1BQU0sT0FBTyxHQUF1QixDQUFDLENBQUMsTUFBTyxDQUFDLEtBQUssQ0FBQztZQUNwRCxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUMvQixDQUFDLENBQUE7UUFDRCxJQUFJLENBQUMsS0FB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