squeezetext UI Component

jQuery.telligent.evolution.ui.components.squeezetext

UI Component which enables text to be squeezed to fit exactly within a defined width before truncation using evolutionSqueezeText. The default implementation uses the evolutionSqueezeText plugin. Overrides can be provided at the theme level. Text that is too long to squeeze is truncated and provided with a tool tip to show the full content.

Options

Data made available to instances of the component:

minsize: Minimum font size to use before truncation, in pixels
- default: 9
minspacing: : Minimum letter-spacing to use before truncation, in pixels
- default: -0.5
enablespacing: When enabled, includes letter spacing adjustment attempts when squeezing
- default: true
resetonfailure: When enabled, text that cannot be squeezed within a container is reset to its original font size and letter spacing
- default: false
truncateonfailure: When enabled, text that cannot be squeezed within a container is truncated
- default: true

Example

Static Example using ui-masonry

<div class="ui-squeezetext" data-minsize="10" style="width:300px">
    The quick brown fox jumped over the lazy dog.
</div>

Default Implementation

For reference purposes or as the basis for an override:

jQuery.telligent.evolution.ui.components.squeezetext = {
    setup: function() {},
    add: function(elm, options) {
        $(elm).evolutionSqueezeText({
            'minSize': (parseFloat(options.minsize) || $.fn.evolutionSqueezeText.defaults.minSize),
            'minSpacing': (parseFloat(options.minspacing) || $.fn.evolutionSqueezeText.defaults.minSpacing),
            'enableSpacing': (options.enablespacing !== undef ? options.enablespacing === 'true' : $.fn.evolutionSqueezeText.defaults.enableSpacing),
            'resetOnFailure': (options.resetonfailure !== undef ? options.resetonfailure === 'true' : $.fn.evolutionSqueezeText.defaults.resetOnFailure),
            'truncateOnFailure': (options.truncateonfailure !== undef ? options.truncateonfailure === 'true' : $.fn.evolutionSqueezeText.defaults.truncateOnFailure),
            'onFailure': function() {
                $(this).attr('data-tip', $(this).text()).evolutionTip();
            }
        });
    }
};

Recommended