squeezetext UI Component

Ben Tiedt — Tue, 19 Nov 2019 20:28:45 GMT

Current Revision posted to API Documentation by Ben Tiedt on 11/19/2019 20:28:45

jQuery.telligent.evolution.ui.components.squeezetext

[[ui JavaScript API Module|UI Component]] which enables text to be squeezed to fit exactly within a defined width before truncation using [[evolutionSqueezeText jQuery Plugin|evolutionSqueezeText]]. The default implementation uses the [[evolutionSqueezeText jQuery Plugin|evolutionSqueezeText plugin]]. [[ui JavaScript API Module|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();
            }
        });
    }
};