kibana-123/src/ui/public/directives/css_truncate.js

Kibana is an open source (Apache Licensed), browser based analytics and search dashboard for Elasticsearch. Kibana is a snap to setup and start using. Kibana strives to be easy to get started with, while also being flexible and powerful, just like Elastic

import $ from 'jquery';
import _ from 'lodash';
import uiModules from 'ui/modules';
let module = uiModules.get('kibana');

module.directive('cssTruncate', function ($timeout) {
  return {
    restrict: 'A',
    scope: {},
    link: function ($scope, $elem, attrs) {

      $elem.css({
        overflow: 'hidden',
        'white-space': 'nowrap',
        'text-overflow': 'ellipsis',
        'word-break': 'break-all',
      });

      if (attrs.cssTruncateExpandable != null) {
        $scope.$watch(
          function () { return $elem.html(); },
          function () {
            if ($elem[0].offsetWidth < $elem[0].scrollWidth) {
              $elem.css({'cursor': 'pointer'});
              $elem.bind('click', function () {
                $scope.toggle();
              });
            }
          }
        );
      }

      $scope.toggle = function () {
        if ($elem.css('white-space') !== 'normal') {
          $elem.css({'white-space': 'normal'});
        } else {
          $elem.css({'white-space': 'nowrap'});
        }
      };

      $scope.$on('$destroy', function () {
        $elem.unbind('click');
        $elem.unbind('mouseenter');
      });
    }
  };
});