feat(editor): add title attribute to all Editors (#156)

ghiscoding · Apr 7, 2019 · 6e0d125 · 6e0d125
1 parent 4c887c6
commit 6e0d125
Show file tree

Hide file tree

Showing 11 changed files with 29 additions and 7 deletions.
diff --git a/src/aurelia-slickgrid/editors/autoCompleteEditor.ts b/src/aurelia-slickgrid/editors/autoCompleteEditor.ts
@@ -63,10 +63,11 @@ export class AutoCompleteEditor implements Editor {
   init(): void {
     const columnId = this.columnDef && this.columnDef.id;
     const placeholder = this.columnEditor && this.columnEditor.placeholder || '';
+    const title = this.columnEditor && this.columnEditor.title || '';
     this.labelName = this.customStructure && this.customStructure.label || 'label';
     this.valueName = this.customStructure && this.customStructure.value || 'value';
 
-    this.$input = $(`<input type="text" class="editor-text editor-${columnId}" placeholder="${placeholder}" />`)
+    this.$input = $(`<input type="text" class="editor-text editor-${columnId}" placeholder="${placeholder}" title="${title}" />`)
       .appendTo(this.args.container)
       .on('keydown.nav', (event: JQueryEventObject) => {
         this._lastInputEvent = event;

diff --git a/src/aurelia-slickgrid/editors/checkboxEditor.ts b/src/aurelia-slickgrid/editors/checkboxEditor.ts
@@ -37,7 +37,8 @@ export class CheckboxEditor implements Editor {
 
   init(): void {
     const columnId = this.columnDef && this.columnDef.id;
-    this.$input = $(`<input type="checkbox" value="true" class="editor-checkbox editor-${columnId}" />`);
+    const title = this.columnEditor && this.columnEditor.title || '';
+    this.$input = $(`<input type="checkbox" value="true" class="editor-checkbox editor-${columnId}" title="${title}" />`);
     this.$input.appendTo(this.args.container);
     this.$input.focus();
 

diff --git a/src/aurelia-slickgrid/editors/dateEditor.ts b/src/aurelia-slickgrid/editors/dateEditor.ts
@@ -42,6 +42,7 @@ export class DateEditor implements Editor {
     if (this.args && this.args.column) {
       const columnId = this.columnDef && this.columnDef.id;
       const placeholder = this.columnEditor && this.columnEditor.placeholder || '';
+      const title = this.columnEditor && this.columnEditor.title || '';
       this.defaultDate = (this.args.item) ? this.args.item[this.args.column.field] : null;
       const inputFormat = mapFlatpickrDateFormatWithFieldType(this.args.column.type || FieldType.dateIso);
       const outputFormat = mapFlatpickrDateFormatWithFieldType(this.args.column.outputType || FieldType.dateUtc);
@@ -65,7 +66,7 @@ export class DateEditor implements Editor {
       // merge options with optional user's custom options
       const pickerMergedOptions = { ...pickerOptions, ...this.columnEditor.editorOptions };
 
-      this.$input = $(`<input type="text" data-defaultDate="${this.defaultDate}" class="editor-text editor-${columnId} flatpickr" placeholder="${placeholder}" />`);
+      this.$input = $(`<input type="text" data-defaultDate="${this.defaultDate}" class="editor-text editor-${columnId} flatpickr" placeholder="${placeholder}" title="${title}" />`);
       this.$input.appendTo(this.args.container);
       this.flatInstance = (flatpickr && this.$input[0] && typeof this.$input[0].flatpickr === 'function') ? this.$input[0].flatpickr(pickerMergedOptions) : null;
       this.show();

diff --git a/src/aurelia-slickgrid/editors/floatEditor.ts b/src/aurelia-slickgrid/editors/floatEditor.ts
@@ -39,8 +39,9 @@ export class FloatEditor implements Editor {
   init(): void {
     const columnId = this.columnDef && this.columnDef.id;
     const placeholder = this.columnEditor && this.columnEditor.placeholder || '';
+    const title = this.columnEditor && this.columnEditor.title || '';
 
-    this.$input = $(`<input type="number" class="editor-text editor-${columnId}" placeholder="${placeholder}" step="${this.getInputDecimalSteps()}" />`)
+    this.$input = $(`<input type="number" class="editor-text editor-${columnId}" placeholder="${placeholder}" title="${title}" step="${this.getInputDecimalSteps()}" />`)
       .appendTo(this.args.container)
       .on('keydown.nav', (event: JQueryEventObject) => {
         this._lastInputEvent = event;

diff --git a/src/aurelia-slickgrid/editors/integerEditor.ts b/src/aurelia-slickgrid/editors/integerEditor.ts
@@ -37,8 +37,9 @@ export class IntegerEditor implements Editor {
   init(): void {
     const columnId = this.columnDef && this.columnDef.id;
     const placeholder = this.columnEditor && this.columnEditor.placeholder || '';
+    const title = this.columnEditor && this.columnEditor.title || '';
 
-    this.$input = $(`<input type="number" class="editor-text editor-${columnId}" placeholder="${placeholder}" />`)
+    this.$input = $(`<input type="number" class="editor-text editor-${columnId}" placeholder="${placeholder}" title="${title}" />`)
       .appendTo(this.args.container)
       .on('keydown.nav', (event: JQueryEventObject) => {
         this._lastInputEvent = event;

diff --git a/src/aurelia-slickgrid/editors/longTextEditor.ts b/src/aurelia-slickgrid/editors/longTextEditor.ts
@@ -51,10 +51,11 @@ export class LongTextEditor implements Editor {
     const cancelText = this.i18n.tr('CANCEL') || Constants.TEXT_CANCEL;
     const saveText = this.i18n.tr('SAVE') || Constants.TEXT_SAVE;
     const placeholder = this.columnEditor && this.columnEditor.placeholder || '';
+    const title = this.columnEditor && this.columnEditor.title || '';
     const $container = $('body');
 
     this.$wrapper = $(`<div class="slick-large-editor-text editor-${columnId}" />`).appendTo($container);
-    this.$textarea = $(`<textarea hidefocus rows="5" placeholder="${placeholder}">`).appendTo(this.$wrapper);
+    this.$textarea = $(`<textarea hidefocus rows="5" placeholder="${placeholder}" title="${title}">`).appendTo(this.$wrapper);
 
     // aurelia-slickgrid does not get the focus out event for some reason
     // so register it here

diff --git a/src/aurelia-slickgrid/editors/sliderEditor.ts b/src/aurelia-slickgrid/editors/sliderEditor.ts
@@ -180,6 +180,7 @@ export class SliderEditor implements Editor {
    */
   private buildTemplateHtmlString() {
     const columnId = this.columnDef && this.columnDef.id;
+    const title = this.columnEditor && this.columnEditor.title || '';
     const minValue = this.columnEditor.hasOwnProperty('minValue') ? this.columnEditor.minValue : DEFAULT_MIN_VALUE;
     const maxValue = this.columnEditor.hasOwnProperty('maxValue') ? this.columnEditor.maxValue : DEFAULT_MAX_VALUE;
     const defaultValue = this.editorParams.hasOwnProperty('sliderStartValue') ? this.editorParams.sliderStartValue : minValue;
@@ -190,6 +191,7 @@ export class SliderEditor implements Editor {
       <div class="slider-editor editor-${columnId}">
         <input type="range" id="${this._elementRangeInputId}"
           name="${this._elementRangeInputId}"
+          title="${title}"
           defaultValue="${defaultValue}" min="${minValue}" max="${maxValue}" step="${step}"
           class="form-control slider-editor-input range" />
       </div>`;
@@ -199,6 +201,7 @@ export class SliderEditor implements Editor {
       <div class="input-group slider-editor editor-${columnId}">
         <input type="range" id="${this._elementRangeInputId}"
           name="${this._elementRangeInputId}"
+          title="${title}"
           defaultValue="${defaultValue}" min="${minValue}" max="${maxValue}" step="${step}"
           class="form-control slider-editor-input range" />
         <div class="input-group-addon input-group-append slider-value"><span class="input-group-text" id="${this._elementRangeOutputId}">${defaultValue}</span></div>

diff --git a/src/aurelia-slickgrid/editors/textEditor.ts b/src/aurelia-slickgrid/editors/textEditor.ts
@@ -37,8 +37,9 @@ export class TextEditor implements Editor {
   init(): void {
     const columnId = this.columnDef && this.columnDef.id;
     const placeholder = this.columnEditor && this.columnEditor.placeholder || '';
+    const title = this.columnEditor && this.columnEditor.title || '';
 
-    this.$input = $(`<input type="text" class="editor-text editor-${columnId}" placeholder="${placeholder}" />`)
+    this.$input = $(`<input type="text" class="editor-text editor-${columnId}" placeholder="${placeholder}" title="${title}" />`)
       .appendTo(this.args.container)
       .on('keydown.nav', (event: JQueryEventObject) => {
         this._lastInputEvent = event;

diff --git a/src/aurelia-slickgrid/models/columnEditor.interface.ts b/src/aurelia-slickgrid/models/columnEditor.interface.ts
@@ -72,6 +72,15 @@ export interface ColumnEditor {
    */
   placeholder?: string;
 
+  /**
+   * Title attribute that can be used in some Editors as tooltip (usually the "input" editors).
+   *
+   * To use this as a Tooltip, Angular-Slickgrid doesn't (and will never) use any Angular 3rd party lib to display a real Tooltip,
+   * for that you can use any jQuery 3rd party lib like tipsy for example (we use it in our own project and it works)
+   * https://www.npmjs.com/package/jquery.tipsy
+   */
+  title?: string;
+
   /**
    * Defaults to false, is the field required to be valid?
    * Only on Editors that supports it.

diff --git a/src/examples/slickgrid/custom-inputEditor.ts b/src/examples/slickgrid/custom-inputEditor.ts
@@ -38,6 +38,7 @@ export class CustomInputEditor implements Editor {
 
   init(): void {
     const placeholder = this.columnEditor && this.columnEditor.placeholder || '';
+    const title = this.columnEditor && this.columnEditor.title || '';
 
     // this.$input = $(`<input type="text" class="editor-text" placeholder="${placeholder}" />`)
     //   .appendTo(this.args.container)

diff --git a/src/examples/slickgrid/example3.ts b/src/examples/slickgrid/example3.ts
@@ -143,6 +143,8 @@ export class Example3 {
         type: FieldType.string,
         editor: {
           model: Editors.longText,
+          placeholder: 'something',
+          title: 'some title',
           validator: myCustomTitleValidator, // use a custom validator
         },
         minWidth: 100,