An AlloyUI ellipsis function (a.k.a. Three Dots)

So if you are not familiar with AlloyUI, it is a user interface web application framework. It’s purpose is to help make building and designing web applications an enjoyable experience.

For more information on AlloyUI you can see Nate Cavanaugh’s blog.

Some UI use cases require text to be of a specified length. When the text exceeds this specified length it needs to be truncated, usually with ellipsis or three dots as a link to the full text.

The following AlloyUI function will do just that.

So say you have text in your JSP that looks something like this:

<div id='truncateMe'>
      <%= someBean.getReallyLongText()%>
 </div>

With this AlloyUI function, on page load it will loop through all nodes with the ID of ‘truncateMe’ and trim the text, on a word break, to the desired length and add the three dots as a link to the full text.  When the link is clicked, the full text will display and the three dots will then be a link back to the truncated text.

<aui:script use="node, event">
     AUI().ready('event', 'node', function() {
        var divTxt = A.all('#truncateMe');
        divTxt.each(function(A) {
             var truncLen = 150;
             if (A.html().length > truncLen) {
                 var words = A.html().substring(0,truncLen).split(" ");
                 var shortText = words.slice(0, words.length - 1).join(" ") + " ... More";
                 A.setData('replacementText', A.html() + " Less");
                 A.text(shortText);
                 A.on('click', function() {
                             var tempText = A.html();
                             A.html(A.getData('replacementText'));
                             A.setData('replacementText', tempText);
                 });
             }
        });   
     });   
 </aui:script>

Liferay is now building all their portlets and plugins on top of AlloyUI and if you want to really leverage the power of the Liferay platform, I think AlloyUI is the way to go.