Text expand

The text expand directive truncates long text with an ellipsis and a link that allows the user to fully expand the text. If the text length falls below the specified threshold, then no action is taken. The 'See more' link expands the text inline if it does not exceed the limits on text characters or newline characters for the inline expanded view. Otherwise, the link opens the text in a modal view.

Note that collapsed text will have newlines removed. Also, if newlines are detected, the text is automatically collapsed regardless of the total length.

Text expand settings

  • bb-text-expand — The text to truncate.
  • bb-text-expand-max-length — The number of characters to display before truncating the text. To avoid truncating text in the middle of a word, the directive looks for a space in the 10 characters before the last character. (Default: 200)
  • bb-text-expand-max-expanded-length — The maximum number of characters to display in the inline expanded view. If the text includes more characters, then a modal view displays the content when users click the 'See more' link. (Default: 600)
  • bb-text-expand-max-expanded-newlines — The maximum number of newline characters to display in the inline expanded view. If the text includes more newline characters, then a modal view displays the content when users click the 'See more' link. (Default: 2)
  • bb-text-expand-modal-title — The title to display in the modal expanded view.

The text expand repeater directive truncates a list of repeater items and initially displays a set number of items. Any items over the set maximum limit are hidden until users expand the list.

Text expand repeater settings

  • bb-text-expand-repeater-max — The maximum number of items to display before truncating the repeater list.
  • bb-text-expand-repeater-data — The name of the property containing the repeater data.

Demo

Text expand

Text expand modal view

 

Text expand repeater

  • {{item.text}}

Markup

<div ng-controller="ReadMoreTestController as readCtrl">
  <h3>Text expand</h3>
  <div bb-text-expand="readCtrl.longText" style="white-space: pre-wrap"></div>
  <h3>Text expand modal view </h3>
  <div bb-text-expand-modal-title="readCtrl.modalTitle" bb-text-expand="readCtrl.reallyLongText" style="white-space: pre-wrap"></div>
  <div class="row">&nbsp;</div>
  <h3>Text expand repeater</h3>
  <ul bb-text-expand-repeater bb-text-expand-repeater-max="2" bb-text-expand-repeater-data="readCtrl.repeaterData">
    <li ng-repeat="item in readCtrl.repeaterData">
      <span>{{item.text}}</span>
    </li>
  </ul>
</div>

JavaScript

/*jslint browser: true, plusplus: true */
/*global angular */
(function () {
    'use strict';

    function ReadMoreTestController() {
        var self = this;
        self.longText = 'Lorem ipsum dolor sit amet, \ndsfdsfdsfgdsfgsdfgssdfgdsfg dfgds fgdsfg dsfg dfgdsfg sdfgdfg\n';
        self.reallyLongText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, \nsed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n';
        self.repeaterData = [{ text: 'Repeater item 1' }, { text: 'Repeater item 2' }, { text: 'Repeater item 3' }, { text: 'Repeater item 4' }, { text: 'Repeater item 5' }];
        self.modalTitle = 'The expanded view title';

    }

    angular.module('stache').controller('ReadMoreTestController', ReadMoreTestController);

}());