In this article I will describe how to implement and use the jQuery plugin Trunk8. “trunk8 is an intelligent text truncation extension to jQuery. When applied to a large block of text, trunk8 will cut off just enough text to prevent it from spilling over.”

Demonstration

The XPages integration of Trunk8.js is demonstrated here

Download

The demonstration database can be downloaded from the link above or from here

Trunk8.js

Introduction

Trunk8 is a really neat and simple jQuery plugin which can neaten up your XPages and provide a truncated paragraph of text and can turn large sections of text into something a little more manageable and easier on the eye:

How does it work

We add the jQuery library and the trunk8.js library file to the database by adding them to the Web-Contents folder accessible via the package explorer.  (Window–>Show Eclipse Views–>Package Explorer) and drag and drop the two libraries from your computer into the “js” folder.

We add the libraries to our XPages like this in the source panel

<script type='text/javascript' src='/xomino/jQinX.nsf/jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='/xomino/jQinX.nsf/js/trunk8.js'></script>

The trunk8.js plugin comes with a number of parameters which can help control how the plugin interacts with your page and how it displays the resulting trunk8ed text.

settings = {
    fill: '<a href='#'> read more </a>',  //this is what is inserted into the text as placeholder
    lines: 1, //the number of lines of orginal text displayed
    side: 'right', //the placement of the 'read more' left center right
    tooltip: true, //show a tooltip of the original text
    width: 'auto' // style the final text to fit the container.
}

We then apply the plugin to the page via a selector. In this example is I am going use the same viewPanel as, and this can be seen as an alternate to my original blog post regarding Dynamically expanding viewPanel rows.

We are going to select the 4th column in the viewPanel1 table

the jQuery selector for this is shown below – we select the viewPanel1 table by id an within that table we select the TR table rows and then within those the 4th TD table cell (i.e. the 4th column)

	$('[id$='viewPanel1'] tr td:nth-child(4)')

and then to that we apply the trunk8 method and its parameters

		<script>
			XSP.addOnLoad(function(){
				$('[id$='viewPanel1'] tr td:nth-child(4)').trunk8({
					fill: '<a href='#'> read more </a>',  //this is what is inserted into the text as placeholder
					lines: 3, //the number of lines of orginal text displayed
					side: 'right', //the placement of the 'read more' left center right
					tooltip: true, //show a tooltip of the original text
					width: 'auto' // style the final text to fit the container.
				});
			})
		</script>

And we get the following – much neater and easier on the user

Flexible

The parameters are fairly self explanatory and allow you to control the way the output looks. What I like about this plugin over others of a similar vein is that the width is dynamically calculated correctly and always fills the container. With a little more imagination you could have the “read more” link to a better tooltip or even click to open a dialog – because you can insert your own HTML the choice is yours – love it!

Conclusion

Every time I see a new plugin like this it just re-enforces to my why I evangelize using jQuery in XPages so much. It took me less than 10 minutes to implement the demonstration and took longer to write up this article. This is a real business requirement which is met with no effort at all on the part of the XPage developer. It’s a no brainer!

Demonstration

The XPages integration of Trunk8.js is demonstrated here