hswidget
Version:
Helpful Scripts UI widgets
54 lines • 5.73 kB
JavaScript
import m from "mithril";
import { Widget } from './Widget';
var Expansion;
(function (Expansion) {
Expansion[Expansion["closed"] = 0] = "closed";
Expansion[Expansion["opening"] = 1] = "opening";
Expansion[Expansion["open"] = 2] = "open";
Expansion[Expansion["closing"] = 3] = "closing";
})(Expansion || (Expansion = {}));
export class Collapsible extends Widget {
oninit(node) {
node.state.expanded = node.attrs.isExpanded ? Expansion.open : Expansion.closed;
node.state.maxHeight = null;
node.state.toggle = () => {
switch (node.state.expanded) {
case Expansion.open:
case Expansion.opening:
node.state.expanded = Expansion.closing;
setTimeout(() => {
node.state.expanded = Expansion.closed;
m.redraw();
}, node.attrs.transition);
break;
case Expansion.closed:
case Expansion.closing:
node.state.expanded = Expansion.open;
break;
}
};
}
view(node) {
node.attrs.transition = node.attrs.transition || 250;
const components = node.children;
const preArrow = node.attrs.preArrow || false;
const postArrow = node.attrs.postArrow || false;
const maxHeight = (node.state.expanded === Expansion.closed || node.state.expanded === Expansion.closing) ? '0' : `400px`;
const title = [components.shift()];
if (preArrow) {
title.unshift(m(`.hs_collapsible_pre .hs_collapsible_arrow_${node.state.expanded ? 'down' : 'right'}`));
}
if (postArrow) {
title.push(m(`.hs_collapsible_post .hs_collapsible_arrow_${node.state.expanded ? 'down' : 'left'}`));
}
return m(`.hs_collapsible`, this.attrs(node.attrs, {
class: node.state.expanded === Expansion.closed ? undefined : 'hs_collapsible_expanded',
}), [
m('.hs_collapsible_title', { onclick: node.state.toggle }, title),
m(`.hs_collapsible_content.hs_scrolly`, {
style: `max-height:${maxHeight}; transition: max-height ${node.attrs.transition / 1000}s ease-in-out`
}, node.state.expanded === Expansion.closed ? [] : components.map(c => m('', c)))
]);
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29sbGFwc2libGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvQ29sbGFwc2libGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUNBLE9BQU8sQ0FBQyxNQUFxQixTQUFTLENBQUM7QUFHdkMsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFZLFVBQVUsQ0FBQztBQUV4QyxJQUFLLFNBS0o7QUFMRCxXQUFLLFNBQVM7SUFDViw2Q0FBVyxDQUFBO0lBQ1gsK0NBQVcsQ0FBQTtJQUNYLHlDQUFXLENBQUE7SUFDWCwrQ0FBVyxDQUFBO0FBQ2YsQ0FBQyxFQUxJLFNBQVMsS0FBVCxTQUFTLFFBS2I7QUE0QkQsTUFBTSxPQUFPLFdBQVksU0FBUSxNQUFNO0lBSW5DLE1BQU0sQ0FBQyxJQUFrQztRQUNyQyxJQUFJLENBQUMsS0FBSyxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLFVBQVUsQ0FBQSxDQUFDLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQztRQUMvRSxJQUFJLENBQUMsS0FBSyxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUM7UUFDNUIsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsR0FBRyxFQUFFO1lBQ3JCLFFBQVEsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLEVBQUU7Z0JBQ3pCLEtBQUssU0FBUyxDQUFDLElBQUksQ0FBQztnQkFDcEIsS0FBSyxTQUFTLENBQUMsT0FBTztvQkFDbEIsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLEdBQUcsU0FBUyxDQUFDLE9BQU8sQ0FBQztvQkFDeEMsVUFBVSxDQUFDLEdBQUUsRUFBRTt3QkFDWCxJQUFJLENBQUMsS0FBSyxDQUFDLFFBQVEsR0FBRyxTQUFTLENBQUMsTUFBTSxDQUFDO3dCQUN2QyxDQUFDLENBQUMsTUFBTSxFQUFFLENBQUM7b0JBQ2YsQ0FBQyxFQUFFLElBQUksQ0FBQyxLQUFLLENBQUMsVUFB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