Monday 6 June 2016

Plugin for Multiline ellipsis which supports all browsers using Angular js in HTML5

                    

 In this post we are going to see about the multiline ellipses support in all browsers, normally when we have a huge text in a span or div, but we didn't have a space to display it, due to the overflow instead of displaying the full text we are decide to show a ellipses text with certain number of lines along with ... character, but normally ellipses supports in single line for all browsers. when overflow occurs.But for a multiline ellipses so many browsers doesnt have support especially IE, in Chrome we have a support for multiline ellipses. now we are going to see how to achieve a multiline ellipses in all browsers as common one. For this we have to use a angular plugin or module






rgModule :
****************

Download the plugin from the following link . Multiline Ellipsis plugin

1. Add the plugin in the angular module.
2. Refer the attribute rg-clamp="3"  in the element where we need ellipsis along with number of lines.

Now you can get a ellipsis text like below


Js:
**********
Add the module name in the controller rgModule and use the rg-clamp directive in the html

/**
 * Created by Rajesh on 22-11-2014.
 */

var clampModule = angular.module('clampModule', ['rgModule']);

clampModule.controller('clampController'function ($scope) {

});





HTML:
************


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body data-ng-app="clampModule" class="bg-info">
<div ng-controller="clampController" style="margin-left:100px">

    <h1 class="well text-danger" rg-clamp="4">
The human species' use of technology began with the conversion of natural resources into simple tools. The prehistoric discovery of how to control fire increased the available sources of food and the invention of the wheel helped humans in travelling in and controlling their environment.
</h1>

    <div>
        <p class="well text-success" rg-clamp="3" style="">
Technology is the collection of tools, including machinery, modifications, arrangements and procedures used by humans. Engineering is the discipline that seeks to study and design new technologies. Technologies significantly affect human as well as other animal species' ability to control and adapt to their natural environments. The term can either be applied generally or to specific areas: examples include construction technology, medical technology and information technology
       .</p>
    </div>
</div>


<script type="application/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="application/javascript" src="js/bootstrap.min.js"></script>
<script type="application/javascript" src="js/angular.min.js"></script>
<script type="application/javascript" src="js/rgModule.js"></script>
<script src="ang/angClamp.js"></script>
<script>
</script>
</body>
</html>


Output:
******************

Text with specified lines along with ellipses ...







Source code for Ellipses Plugin:
*****************************

rgClamp:
**********



/**
 * Created by Rajesh on 22-11-2014.
 */

angular.module('rgModule', []).directive('rgClamp', function () {

    return {

        scope: {

            rgClamp: '='

        },

        restrict: 'A',

        link: function (scope, element, attrs, cntrl) {

            var elementheight = 0;
            var lineheight = 0;
            var maxlines = 0;
            var prefferedHeight = 0;
            var truncatedHeight = 0;
            var originalData = element.text();
            var truncatedData = '';
            var datachunks = [];
            var chunkno = 0;

            elementHeight();
            getLineHeight();
            getMaxLines();
            getPreferredHeight();
            //setElementHeight();
            SplitData();
            ellipsisData();
            setEllipsis();
            truncatedHeight = elementheight;
            chunkno = datachunks.length;


            function setElementHeight() {

                element.css('height', prefferedHeight);

            }
            function getPreferredHeight() {

                prefferedHeight = Math.max(Math.round(scope.rgClamp * lineheight), 0);
            }



            function getMaxLines() {
                maxlines = Math.max(Math.floor(elementheight / lineheight), 0);
            }



            function getLineHeight() {
                lineheight = getProp('line-height');
                if (lineheight == 'normal') {
                    lineheight = parseInt(getProp('font-size')) * 1.2;
                } else {
                    lineheight = parseInt(lineheight);
                }
            }


            function getProp(prop) {
                return element.css(prop);
            }


            function elementHeight() {
            elementheight = element.height() || element.maxHeight || element.clientHeight;
            }


            function SplitData() {
                datachunks = originalData.split(' ');
            }


            function setEllipsis() {
                /* clamping words */
                while (truncatedHeight <= prefferedHeight) {
                    if (datachunks[chunkno] == undefined) {
                        break;
                    }
                    var clampedtext = element.text();
                    element.text(clampedtext + ' ' + datachunks[chunkno]);
                    elementHeight();
                    truncatedHeight = elementheight;
                    if (truncatedHeight > prefferedHeight) {
                        element.text(clampedtext);
                        break;
                    }
                    chunkno++;
                }



                /* clamping letters */
                var letterchunks = datachunks[chunkno].split('');
                var clampedtext = element.text();

                for (var j = 0; j < letterchunks.length; j++) {
                    element.text(clampedtext + letterchunks[j]);
                    elementHeight();
                    truncatedHeight = elementheight;

                    if (truncatedHeight > prefferedHeight) {
                      element.text(element.text().substring(0, element.text().length - 1));
                        break;

                    }
                }
                clampedtext = element.text();
                element.text(clampedtext.substring(0, clampedtext.length - 4) + '...');
            }



            /* truncated height must be equal or less than preffered height */

            function ellipsisData() {
                truncatedHeight = elementheight;
                chunkno = datachunks.length;

                while (truncatedHeight > prefferedHeight) {

                    if (prefferedHeight <= (truncatedHeight / 2)) {
                        chunkno = Math.max(Math.round(chunkno / 2), 0);
                    } else {

                        var interno = Math.max(Math.round(chunkno / 2), 0);
                        var interim = interno + Math.max(Math.round(interno / 2), 0);
                        if (interim == chunkno) {
                            chunkno = interim - 1;
                        }
                        else {
                            chunkno = interim;
                        }
                    }

                    truncatedData = '';
                    for (var i = 0; i < chunkno; i++) {
                        truncatedData += datachunks[i] + ' ';
                    }

                    element.text(truncatedData);
                    elementHeight();
                    truncatedHeight = elementheight;

                }
            }
        }
    }


});











From this post you can see how to create a Multiline ellipses support for all browsers





No comments:

Post a Comment