line-clamping.styl

// @author     Zino Roman <zino.roman95@gmail.com>
// @copyright  Zino Roman 2017 


// interface I-line-clamping {
//     lines: number,
//     line-height: css-unit,
//     font-size: css-unit,
//     is-inline: boolean;
// }


// Mixin for clamping multiline text
// @param {I-line-clamping|number} $user-options 
line-clamping($user-options)
    // @return {string} - Type of the `line-height` property
    get-line-height-type()
        typeof($options['line-height'])
                
    // @return {string} - Unit of the `line-height` property
    get-line-height-unit()
        unit($options['line-height'])
    
    // @return {string} - Unit of the `font-size` property
    get-font-size-type()
        typeof($options['font-size'])
    
    // @param {string} $line-height-unit - Unit of the `line-height` property
    // @return {boolean} - Is `$line-height-unit` relative
    is-line-height-unit-relative($line-height-unit)
        if $line-height-unit == ''  or $line-height-unit  == '%' or $line-height-unit == 'em'
            true
        else
            false
    
    calculate-max-height()
        $line-height-type = get-line-height-type()
        $font-size-type = get-font-size-type()
        $is-line-height-type-unit = $line-height-type == 'unit'
        $is-line-height-unit-relative = false

        if $is-line-height-type-unit
            $line-height-unit = get-line-height-unit()
            $is-line-height-unit-relative = is-line-height-unit-relative($line-height-unit)
            
        // Unitless, percents or ems units require
        // a different strategy of calculation than all other units
        if $is-line-height-unit-relative && $is-line-height-type-unit
            $line-height-computed = $options['line-height']
            
            if $line-height-unit == '%'
                //Divide `$line-height` in percents by 100 for correct further calculation
                $line-height-computed = $options['line-height'] / 100
            
            
            // Remove units from `$line-height` to avoid potential error
            // when `$line-height` and `$font-size` have differents CSS units
            $line-height-computed = unit($line-height-computed, '')
            
            //Calculate our max-height for the element
            if $font-size-type == 'unit'
                ($options['lines'] * ($line-height-computed * $options['font-size']))
            else if $font-size-type == 'literal'
                'calc((%s) * %s)' % (get-calc-inner-value($options['font-size']) ($options['lines'] * $line-height-computed))
        else if $is-line-height-type-unit
            ($options['lines'] * $options['line-height'])
        else if $line-height-type == 'literal'
            'calc((%s) * %s)' % (get-calc-inner-value($options['line-height']) $options['lines'])

    
    // @param {string} $display - CSS value of display property
    strategy-one-line($display)
        // If we need only one line of the text,
        // then better way is to use `text-overflow: ellipsis`
        // than `strategy-few-line()` way
        // cause it has wider support
        display $display
        overflow hidden
        text-overflow ellipsis
        white-space nowrap

    // @param {string} $display - CSS value of display property
    // @param {string} $display-webkit - CSS value of display property
    strategy-few-line($display, $display-webkit)        
        //Rules for IE, Edge, Firefox
        display $display
        max-height calculate-max-height()
        overflow hidden
        font-size: $options['font-size'] if $options['font-size'] != inherit
        line-height: $options['line-height']
        
        //Rules for webkit browser
        @supports (display $display-webkit) and (-webkit-line-clamp $options['lines'])
            display $display-webkit
            -webkit-box-orient vertical
            -webkit-line-clamp: $options['lines']

    get-display()
        // Remember the fact, that you should set `width` of the element
        // when you are using `$options['is-inline']` display mode
        if $options['is-inline']
            inline-block
        else
            block
    
    get-display-webkit()
        if $options['is-inline']
            -webkit-inline-box 
        else
            -webkit-box

    find-strategy-and-print-rules()
        $display = get-display($options['is-inline'])
        $display-webkit = get-display-webkit($options['is-inline'])

        if ($options['lines'] == 1)
            strategy-one-line($display)
        else        
            strategy-few-line($display, $display-webkit)
    
    // @param {string} $message - Error message that will be shown
    show-error($message)
        error('Error in line-clamping.styl: ' + $message)
        
    check-user-arguments()
        if ($options['lines'] < 1)
            show-error('lines property should be greater then 0')
            
    //Constructor
    $default-options = {
        lines: 1,
        line-height: 1.25,
        font-size: inherit,
        is-inline: false
    }

    if typeof($user-options) == 'unit'
        $user-options = {
            lines: $user-options
        }
    
    $options = merge($default-options, $user-options)
    
    check-user-arguments() 
    find-strategy-and-print-rules()