truncate-init.js

/*
 * truncation component init
 *
 * Copyright (c) 2014 Filament Group, Inc.
 * Licensed under MIT
 */
(function( $ ) {
  var pluginName = "truncate",
    initSelector = "[data-" + pluginName + "]";

  $.fn[ pluginName ] = function(){
    return this.each(function(){
      new window.componentNamespace.Truncate( this, { classname: "truncate-trigger", text: "truncate" } ).init();
    });
  };

  // auto-init on enhance (which is called on domready)
  $( document ).bind( "enhance", function( e ){
    $( initSelector, e.target )[ pluginName ]();
  });

}( jQuery, this ));

truncate.js

/*
 * truncation component
 *
 * Copyright (c) 2014 Filament Group, Inc.
 * Licensed under MIT
 */
(function( $, w, undefined ){
  "use strict";

  var Truncate = function( element, opts ){
    if( !element ){
      throw new Error( "Element to truncate is not defined" );
    }
    opts = opts || {};
    opts.text = opts.text || "truncate";
    opts.classname = opts.classname || "truncate-trigger";
    opts.initclass = opts.initclass || "truncate";
    opts.truncatedclass = opts.truncatedclass || "truncated";

    this.opts = opts;
    this.element = element;
  };

  Truncate.prototype.toggle = function(){
    var state = this.truncated;

    this.truncated = !state;
    return $( this.element )[ state ? "removeClass" : "addClass" ]( this.opts.truncatedclass );
  };

  Truncate.prototype._createMarkup = function(){
    return $( "<a href='#' class='" + this.opts.classname + "'>" + this.opts.text + "</a>" );
  };

  Truncate.prototype._bindEvents = function( $btn ){
    var self = this;
    $btn.bind( ( w.tapHanding !== undefined ? "tap" : "click" ), function( e ){
      e.preventDefault();
      self.toggle();
    });
  };

  Truncate.prototype._qualified = function() {
    return this.element.scrollHeight > this.element.clientHeight;
  };

  Truncate.prototype.init = function(){
    if( $( this.element ).data( "truncate" ) ){
      return;
    }
    var $btn = this._createMarkup();
    this._bindEvents( $btn );
    this.truncated = true;

    $( this.element )
      .trigger( "truncate" )
      .addClass( this.opts.truncatedclass + " " + this.opts.initclass )
      .after( $btn )
      .data( "truncate", this );

    //console.log( this._qualified() );
  };

  ( w.componentNamespace = w.componentNamespace || w ).Truncate = Truncate;

}( jQuery, this ));

truncate.scss

@mixin truncate-lines( $lineheight, $lines ) {
  height: ( $lines * $lineheight ) + em;
  line-height: $lineheight;
  max-height: ( $lines * $lineheight ) + em;
  overflow: hidden;
}
@mixin textEllipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
@mixin undoEllipsis {
  white-space: normal;
  text-overflow: clip;
  overflow: visible;
}

.truncated {
  @include textEllipsis; /* Truncate single line with CSS alone. */
}
@media ( min-width: 40em ) {
  .truncated {
    @include undoEllipsis;
    @include truncate-lines( 1.2, 4 ) /* Truncate to four lines */
  }
}

.filtered {
  &>* {
    height: 0;
    overflow: hidden;
    &.persist {
      height: auto;
      overflow: visible;
    }
  }
}