Issue 2330 (#3141)

* Issue_2330 continuation new approach

* new liscense agreement

* fixed minor glitch

* added delay of 500

* Added tests

* mend

build/serve.js

@@ -139,6 +139,7 @@ function serveDevelopmentMode() {
  * development artifacts.
  */
 gulp.task('serve', ['spawn-backend', 'watch'], serveDevelopmentMode);
+gulp.task('serve:no-backend', ['watch'], serveDevelopmentMode);
 
 /**
  * Serves the application in development mode.

src/app/frontend/common/components/middleellipsis/component.js

@@ -13,22 +13,35 @@
 // limitations under the License.
 
 /**
+ * Controller for tooltips used for words that are too long for angular UI.
  * @final
  */
-class MiddleEllipsisController {
+export default class MiddleEllipsisController {
   /**
    * Constructs middle ellipsis controller.
    * @ngInject
+   * @param {!angular.JQLite} $element
    */
-  constructor() {
+  constructor($element) {
+    /** @private {!angular.JQLite} */
+    this.element_ = $element;
+
     /** @export {string} Initialized from the scope. */
     this.displayString;
   }
-}
 
+  /**
+   * Checks if text length is equal to surrounding container.
+   * @returns {boolean}
+   * @export
+   */
+  isTruncated() {
+    let cOfsWidth = this.element_[0].querySelector('.kd-middleellipsis-displayStr').offsetWidth;
+    return cOfsWidth > this.element_[0].offsetWidth;
+  }
+}
 /**
  * Middle ellipsis component definition.
- *
  * @type {!angular.Component}
  */
 export const middleEllipsisComponent = {

src/app/frontend/common/components/middleellipsis/middleellipsis.html

@@ -14,4 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<span class="kd-middleellipsis">{{ellipsisCtrl.displayString}}</span>
+<div class="kd-middleellipsis2">
+<div class="kd-middleellipsis">
+  <span class="kd-middleellipsis-displayStr">{{ellipsisCtrl.displayString}}</span>
+<md-tooltip md-delay="500" ng-if="ellipsisCtrl.isTruncated()">
+{{ellipsisCtrl.displayString}}
+</md-tooltip>
+</div>
+</div>

src/app/frontend/common/components/middleellipsis/middleellipsis.scss

@@ -17,3 +17,10 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.kd-middleellipsis2 {
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: bottom;
+}
+

src/test/frontend/common/components/middleellipsis/middleellipsis_controller_test.js

@@ -15,20 +15,31 @@
 import componentsModule from 'common/components/module';
 
 describe('Middle ellipsis controller', () => {
-  /**
-   * @type {!MiddleEllipsisController}
-   */
+  /** @type {!MiddleEllipsisController} */
   let ctrl;
-
+  let element;
+  /** @type {!angular.JQLite} */
   beforeEach(() => {
     angular.mock.module(componentsModule.name);
 
-    angular.mock.inject(($componentController, $rootScope) => {
-      ctrl = $componentController('kdMiddleEllipsis', {$scope: $rootScope});
+    angular.mock.inject(($componentController) => {
+      element = angular.element(
+          '<div style="width: 1px;"><span class="kd-middleellipsis-displayStr">Hello World!</span> </div>');
+      document.body.appendChild(element[0]);
+      ctrl = $componentController('kdMiddleEllipsis', {$element: element});
     });
   });
 
   it('should initialize controller', () => {
     expect(ctrl).not.toBeNull();
   });
+
+  it('checks if isTruncated logic works', () => {
+    expect(ctrl.isTruncated()).toBeTruthy();
+  });
+
+
+  afterEach(() => {
+    document.body.removeChild(element[0]);
+  });
 });