diff --git a/dist/amd/text-display-widget.html b/dist/amd/text-display-widget.html new file mode 100644 index 0000000..6eff347 --- /dev/null +++ b/dist/amd/text-display-widget.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/dist/amd/text-display-widget.js b/dist/amd/text-display-widget.js new file mode 100644 index 0000000..eb9293a --- /dev/null +++ b/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; +}); \ No newline at end of file diff --git a/dist/common/text-display-widget.html b/dist/common/text-display-widget.html new file mode 100644 index 0000000..6eff347 --- /dev/null +++ b/dist/common/text-display-widget.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/dist/common/text-display-widget.js b/dist/common/text-display-widget.js new file mode 100644 index 0000000..e14a790 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/dist/es6/text-display-widget.html b/dist/es6/text-display-widget.html new file mode 100644 index 0000000..6eff347 --- /dev/null +++ b/dist/es6/text-display-widget.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/dist/es6/text-display-widget.js b/dist/es6/text-display-widget.js new file mode 100644 index 0000000..5e4544e --- /dev/null +++ b/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'); + } + +} \ No newline at end of file diff --git a/dist/es6/text-widget.js b/dist/es6/text-widget.js index e776826..1c2f470 100644 --- a/dist/es6/text-widget.js +++ b/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({ diff --git a/dist/system/text-display-widget.html b/dist/system/text-display-widget.html new file mode 100644 index 0000000..6eff347 --- /dev/null +++ b/dist/system/text-display-widget.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/dist/system/text-display-widget.js b/dist/system/text-display-widget.js new file mode 100644 index 0000000..e2d2e15 --- /dev/null +++ b/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); + } + }; +}); \ No newline at end of file diff --git a/src/text-display-widget.html b/src/text-display-widget.html new file mode 100644 index 0000000..6eff347 --- /dev/null +++ b/src/text-display-widget.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/src/text-display-widget.js b/src/text-display-widget.js new file mode 100644 index 0000000..5e4544e --- /dev/null +++ b/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'); + } + +} \ No newline at end of file diff --git a/src/text-widget.js b/src/text-widget.js index e776826..1c2f470 100644 --- a/src/text-widget.js +++ b/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({ diff --git a/styles/styles.css b/styles/styles.css index 1081fc4..d00d4e7 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -20,4 +20,9 @@ .currency-input { text-align: right; } -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlcyI6WyJzdHlsZXMuY3NzIl0sInNvdXJjZXNDb250ZW50IjpbIi5hdXRvY29tcGxldGUtc2VsZWN0ZWQge1xyXG4gIGJhY2tncm91bmQ6ICNmNWY1ZjU7XHJcbiAgY29sb3I6ICMyNjI2MjY7IH1cclxuXHJcbi5hdXRvY29tcGxldGUtc3VnZ2VzdGlvbiB7XHJcbiAgY3Vyc29yOiBwb2ludGVyO1xyXG4gIG92ZXJmbG93OiBoaWRkZW47XHJcbiAgcGFkZGluZzogM3B4IDIwcHg7XHJcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDsgfVxyXG5cclxuLmF1dG9jb21wbGV0ZS1zdWdnZXN0aW9ucyB7XHJcbiAgYmFja2dyb3VuZDogI2ZmZjtcclxuICBib3JkZXI6IDFweCBzb2xpZCByZ2JhKDAsIDAsIDAsIDAuMTUpO1xyXG4gIGJvcmRlci1yYWRpdXM6IDRweDtcclxuICAtd2Via2l0LWJveC1zaGFkb3c6IDAgNnB4IDEycHggcmdiYSgwLCAwLCAwLCAwLjE3NSk7XHJcbiAgYm94LXNoYWRvdzogMCA2cHggMTJweCByZ2JhKDAsIDAsIDAsIDAuMTc1KTtcclxuICBvdmVyZmxvdzogYXV0bztcclxuICBwYWRkaW5nOiA1cHggMDsgfVxyXG5cclxuLmN1cnJlbmN5LWlucHV0IHtcclxuICB0ZXh0LWFsaWduOiByaWdodDsgfVxyXG4iXSwiZmlsZSI6InN0eWxlcy5jc3MiLCJzb3VyY2VSb290IjoiL3NvdXJjZS8ifQ== */ +.text-display { + overflow: hidden; + text-overflow: ellipsis; + max-height: 100%; } + +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlcyI6WyJzdHlsZXMuY3NzIl0sInNvdXJjZXNDb250ZW50IjpbIi5hdXRvY29tcGxldGUtc2VsZWN0ZWQge1xyXG4gIGJhY2tncm91bmQ6ICNmNWY1ZjU7XHJcbiAgY29sb3I6ICMyNjI2MjY7IH1cclxuXHJcbi5hdXRvY29tcGxldGUtc3VnZ2VzdGlvbiB7XHJcbiAgY3Vyc29yOiBwb2ludGVyO1xyXG4gIG92ZXJmbG93OiBoaWRkZW47XHJcbiAgcGFkZGluZzogM3B4IDIwcHg7XHJcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDsgfVxyXG5cclxuLmF1dG9jb21wbGV0ZS1zdWdnZXN0aW9ucyB7XHJcbiAgYmFja2dyb3VuZDogI2ZmZjtcclxuICBib3JkZXI6IDFweCBzb2xpZCByZ2JhKDAsIDAsIDAsIDAuMTUpO1xyXG4gIGJvcmRlci1yYWRpdXM6IDRweDtcclxuICAtd2Via2l0LWJveC1zaGFkb3c6IDAgNnB4IDEycHggcmdiYSgwLCAwLCAwLCAwLjE3NSk7XHJcbiAgYm94LXNoYWRvdzogMCA2cHggMTJweCByZ2JhKDAsIDAsIDAsIDAuMTc1KTtcclxuICBvdmVyZmxvdzogYXV0bztcclxuICBwYWRkaW5nOiA1cHggMDsgfVxyXG5cclxuLmN1cnJlbmN5LWlucHV0IHtcclxuICB0ZXh0LWFsaWduOiByaWdodDsgfVxyXG5cclxuLnRleHQtZGlzcGxheSB7XHJcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcclxuICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpcztcclxuICBtYXgtaGVpZ2h0OiAxMDAlOyB9XHJcbiJdLCJmaWxlIjoic3R5bGVzLmNzcyIsInNvdXJjZVJvb3QiOiIvc291cmNlLyJ9 */ diff --git a/styles/styles.scss b/styles/styles.scss index afc2a59..7ccac9f 100644 --- a/styles/styles.scss +++ b/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 \ No newline at end of file diff --git a/styles/text-display.scss b/styles/text-display.scss new file mode 100644 index 0000000..60b2e8e --- /dev/null +++ b/styles/text-display.scss @@ -0,0 +1,5 @@ +.text-display { + overflow: hidden; + text-overflow: ellipsis; + max-height: 100%; +} \ No newline at end of file