Added a text-display widget which, when given a height, will truncate…

… the text.

Also autopopulates and updates a bootstrap tooltip

dist/amd/text-display-widget.html

@@ -0,0 +1,3 @@
+<template>
+  <div class="text-display" data-toggle="tooltip" >${text}</div>
+</template>

dist/amd/text-display-widget.js

@@ -0,0 +1,47 @@
+define(['exports', 'aurelia-templating', 'aurelia-binding', 'aurelia-dependency-injection', 'jquery'], function (exports, _aureliaTemplating, _aureliaBinding, _aureliaDependencyInjection, _jquery) {
+  'use strict';
+
+  Object.defineProperty(exports, '__esModule', {
+    value: true
+  });
+
+  var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+  var _$ = _interopRequireDefault(_jquery);
+
+  var TextDisplayWidget = (function () {
+    function TextDisplayWidget(element) {
+      _classCallCheck(this, _TextDisplayWidget);
+
+      this.element = element;
+    }
+
+    _createClass(TextDisplayWidget, [{
+      key: 'bind',
+      value: function bind() {
+        (0, _$['default'])(this.element.querySelector('[data-toggle="tooltip"]')).attr('title', this.text).tooltip();
+      }
+    }, {
+      key: 'textChanged',
+      value: function textChanged(newValue) {
+        (0, _$['default'])(this.element.querySelector('[data-toggle="tooltip"]')).attr('title', newValue).tooltip('fixTitle');
+      }
+    }]);
+
+    var _TextDisplayWidget = TextDisplayWidget;
+    TextDisplayWidget = (0, _aureliaDependencyInjection.inject)(Element)(TextDisplayWidget) || TextDisplayWidget;
+    TextDisplayWidget = (0, _aureliaTemplating.bindable)({
+      name: 'placement',
+      defaultValue: 'auto'
+    })(TextDisplayWidget) || TextDisplayWidget;
+    TextDisplayWidget = (0, _aureliaTemplating.bindable)('text')(TextDisplayWidget) || TextDisplayWidget;
+    TextDisplayWidget = (0, _aureliaTemplating.customElement)('text-display-widget')(TextDisplayWidget) || TextDisplayWidget;
+    return TextDisplayWidget;
+  })();
+
+  exports.TextDisplayWidget = TextDisplayWidget;
+});

dist/common/text-display-widget.html

@@ -0,0 +1,3 @@
+<template>
+  <div class="text-display" data-toggle="tooltip" >${text}</div>
+</template>

dist/common/text-display-widget.js

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+var _aureliaTemplating = require('aurelia-templating');
+
+var _aureliaBinding = require('aurelia-binding');
+
+var _aureliaDependencyInjection = require('aurelia-dependency-injection');
+
+var _jquery = require('jquery');
+
+var _jquery2 = _interopRequireDefault(_jquery);
+
+var TextDisplayWidget = (function () {
+  function TextDisplayWidget(element) {
+    _classCallCheck(this, _TextDisplayWidget);
+
+    this.element = element;
+  }
+
+  _createClass(TextDisplayWidget, [{
+    key: 'bind',
+    value: function bind() {
+      (0, _jquery2['default'])(this.element.querySelector('[data-toggle="tooltip"]')).attr('title', this.text).tooltip();
+    }
+  }, {
+    key: 'textChanged',
+    value: function textChanged(newValue) {
+      (0, _jquery2['default'])(this.element.querySelector('[data-toggle="tooltip"]')).attr('title', newValue).tooltip('fixTitle');
+    }
+  }]);
+
+  var _TextDisplayWidget = TextDisplayWidget;
+  TextDisplayWidget = (0, _aureliaDependencyInjection.inject)(Element)(TextDisplayWidget) || TextDisplayWidget;
+  TextDisplayWidget = (0, _aureliaTemplating.bindable)({
+    name: 'placement',
+    defaultValue: 'auto'
+  })(TextDisplayWidget) || TextDisplayWidget;
+  TextDisplayWidget = (0, _aureliaTemplating.bindable)('text')(TextDisplayWidget) || TextDisplayWidget;
+  TextDisplayWidget = (0, _aureliaTemplating.customElement)('text-display-widget')(TextDisplayWidget) || TextDisplayWidget;
+  return TextDisplayWidget;
+})();
+
+exports.TextDisplayWidget = TextDisplayWidget;

dist/es6/text-display-widget.html

@@ -0,0 +1,3 @@
+<template>
+  <div class="text-display" data-toggle="tooltip" >${text}</div>
+</template>

dist/es6/text-display-widget.js

@@ -0,0 +1,27 @@
+import {customElement, bindable} from 'aurelia-templating';
+import {bindingMode} from 'aurelia-binding';
+import {inject} from 'aurelia-dependency-injection';
+import $ from 'jquery';
+
+@customElement('text-display-widget')
+@bindable('text')
+@bindable({
+  name: 'placement',
+  defaultValue: 'auto'
+})
+@inject(Element)
+export class TextDisplayWidget {
+
+  constructor(element) {
+    this.element = element;
+  }
+
+  bind() {
+    $(this.element.querySelector('[data-toggle="tooltip"]')).attr('title', this.text).tooltip();
+  }
+
+  textChanged(newValue) {
+   $(this.element.querySelector('[data-toggle="tooltip"]')).attr('title', newValue).tooltip('fixTitle');
+  }
+
+}

dist/es6/text-widget.js

@@ -1,6 +1,6 @@
 import {customElement, bindable} from 'aurelia-templating';
 import {bindingMode} from 'aurelia-binding';
-import {inject} from 'aurelia-dependency-injection'
+import {inject} from 'aurelia-dependency-injection';
 
 @customElement('text-widget')
 @bindable({

dist/system/text-display-widget.html

@@ -0,0 +1,3 @@
+<template>
+  <div class="text-display" data-toggle="tooltip" >${text}</div>
+</template>

dist/system/text-display-widget.js

@@ -0,0 +1,55 @@
+System.register(['aurelia-templating', 'aurelia-binding', 'aurelia-dependency-injection', 'jquery'], function (_export) {
+  'use strict';
+
+  var customElement, bindable, bindingMode, inject, $, TextDisplayWidget;
+
+  var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+  return {
+    setters: [function (_aureliaTemplating) {
+      customElement = _aureliaTemplating.customElement;
+      bindable = _aureliaTemplating.bindable;
+    }, function (_aureliaBinding) {
+      bindingMode = _aureliaBinding.bindingMode;
+    }, function (_aureliaDependencyInjection) {
+      inject = _aureliaDependencyInjection.inject;
+    }, function (_jquery) {
+      $ = _jquery['default'];
+    }],
+    execute: function () {
+      TextDisplayWidget = (function () {
+        function TextDisplayWidget(element) {
+          _classCallCheck(this, _TextDisplayWidget);
+
+          this.element = element;
+        }
+
+        _createClass(TextDisplayWidget, [{
+          key: 'bind',
+          value: function bind() {
+            $(this.element.querySelector('[data-toggle="tooltip"]')).attr('title', this.text).tooltip();
+          }
+        }, {
+          key: 'textChanged',
+          value: function textChanged(newValue) {
+            $(this.element.querySelector('[data-toggle="tooltip"]')).attr('title', newValue).tooltip('fixTitle');
+          }
+        }]);
+
+        var _TextDisplayWidget = TextDisplayWidget;
+        TextDisplayWidget = inject(Element)(TextDisplayWidget) || TextDisplayWidget;
+        TextDisplayWidget = bindable({
+          name: 'placement',
+          defaultValue: 'auto'
+        })(TextDisplayWidget) || TextDisplayWidget;
+        TextDisplayWidget = bindable('text')(TextDisplayWidget) || TextDisplayWidget;
+        TextDisplayWidget = customElement('text-display-widget')(TextDisplayWidget) || TextDisplayWidget;
+        return TextDisplayWidget;
+      })();
+
+      _export('TextDisplayWidget', TextDisplayWidget);
+    }
+  };
+});

src/text-display-widget.html

@@ -0,0 +1,3 @@
+<template>
+  <div class="text-display" data-toggle="tooltip" >${text}</div>
+</template>

src/text-display-widget.js

@@ -0,0 +1,27 @@
+import {customElement, bindable} from 'aurelia-templating';
+import {bindingMode} from 'aurelia-binding';
+import {inject} from 'aurelia-dependency-injection';
+import $ from 'jquery';
+
+@customElement('text-display-widget')
+@bindable('text')
+@bindable({
+  name: 'placement',
+  defaultValue: 'auto'
+})
+@inject(Element)
+export class TextDisplayWidget {
+
+  constructor(element) {
+    this.element = element;
+  }
+
+  bind() {
+    $(this.element.querySelector('[data-toggle="tooltip"]')).attr('title', this.text).tooltip();
+  }
+
+  textChanged(newValue) {
+   $(this.element.querySelector('[data-toggle="tooltip"]')).attr('title', newValue).tooltip('fixTitle');
+  }
+
+}

src/text-widget.js

@@ -1,6 +1,6 @@
 import {customElement, bindable} from 'aurelia-templating';
 import {bindingMode} from 'aurelia-binding';
-import {inject} from 'aurelia-dependency-injection'
+import {inject} from 'aurelia-dependency-injection';
 
 @customElement('text-widget')
 @bindable({

styles/styles.scss

@@ -2,6 +2,7 @@
 @import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins";
 @import "./autocomplete.scss";
 @import "./currency-input.scss";
+@import "./text-display.scss";
 
 //I have intentionally not included checkbox.scss here, as it uses bootstrap
 //variables for colouring and should be compiled along with the rest of the scss in the project

styles/text-display.scss

@@ -0,0 +1,5 @@
+.text-display {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: 100%;
+}