JSFiddle - React, Tailwind, and code Playground

by enyojs

JavaScript

enyo.kind({
    name: "ExpandingText",
    published: {
        expanded: false,
        maxLength: 200
    },
    components: [
        {style:"display: inline;", name:"client"},
        {style:"display: inline; float:right; background:pink; padding:4px;", content:"More v", ontap:"toggleExpanded", name:"button"}
    ],
    contentChanged: function() {
        this.$.client.setContent(this.expanded ? this.content : this.content.substring(0,this.maxLength) + "...");
    },
    toggleExpanded: function() {
        this.setExpanded(!this.expanded);
    },
    expandedChanged: function() {
        this.contentChanged();
        this.$.button.setContent(this.expanded ? "Less ^" : "More v");
    }
});

enyo.kind({
    name:"MySample",
    components: [
        { kind:"ExpandingText", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget consectetur odio, ac placerat velit. Curabitur blandit tincidunt lorem. Sed ac consectetur massa. Praesent nulla orci, tempor placerat vulputate non, suscipit non ligula. Nunc scelerisque ornare adipiscing. Integer tristique ipsum eu quam feugiat mattis. Sed eget turpis in nulla tempus imperdiet. Sed interdum, sapien nec dapibus varius, purus neque consequat sapien, vel sodales dolor lacus ac nisi. Praesent in massa in neque dictum sodales. Ut condimentum metus et sem venenatis lobortis. Donec vehicula, nisl at malesuada faucibus, lectus arcu porta felis, eget ultrices mi turpis nec sapien. Ut malesuada arcu nec magna accumsan, eu malesuada risus fringilla. Praesent ut sollicitudin enim."}
    ]
});

new MySample({fit:true}).write();