fix: allow multiple tooltips per grid cell (#1176)

ghiscoding · Mar 31, 2024 · 8fbf543 · 8fbf543
1 parent bb2b476
commit 8fbf543
Show file tree

Hide file tree

Showing 12 changed files with 198 additions and 161 deletions.
diff --git a/packages/aurelia-slickgrid/package.json b/packages/aurelia-slickgrid/package.json
@@ -52,13 +52,13 @@
     "@aurelia/i18n": "latest",
     "@aurelia/runtime": "latest",
     "@aurelia/runtime-html": "latest",
-    "@slickgrid-universal/common": "~4.6.0",
-    "@slickgrid-universal/custom-footer-component": "~4.6.0",
-    "@slickgrid-universal/empty-warning-component": "~4.6.0",
-    "@slickgrid-universal/event-pub-sub": "~4.6.0",
-    "@slickgrid-universal/pagination-component": "~4.6.0",
-    "@slickgrid-universal/row-detail-view-plugin": "~4.6.0",
-    "@slickgrid-universal/utils": "~4.6.0",
+    "@slickgrid-universal/common": "~4.6.1",
+    "@slickgrid-universal/custom-footer-component": "~4.6.1",
+    "@slickgrid-universal/empty-warning-component": "~4.6.1",
+    "@slickgrid-universal/event-pub-sub": "~4.6.1",
+    "@slickgrid-universal/pagination-component": "~4.6.1",
+    "@slickgrid-universal/row-detail-view-plugin": "~4.6.1",
+    "@slickgrid-universal/utils": "~4.6.1",
     "dequal": "^2.0.3",
     "isomorphic-dompurify": "^2.6.0",
     "moment-mini": "^2.29.4",

diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -42,15 +42,15 @@
     "@faker-js/faker": "^8.4.1",
     "@fnando/sparkline": "^0.3.10",
     "@popperjs/core": "^2.11.8",
-    "@slickgrid-universal/common": "^4.6.0",
-    "@slickgrid-universal/composite-editor-component": "^4.6.0",
-    "@slickgrid-universal/custom-tooltip-plugin": "^4.6.0",
-    "@slickgrid-universal/excel-export": "^4.6.0",
-    "@slickgrid-universal/graphql": "^4.6.0",
-    "@slickgrid-universal/odata": "^4.6.0",
-    "@slickgrid-universal/row-detail-view-plugin": "^4.6.0",
-    "@slickgrid-universal/rxjs-observable": "^4.6.0",
-    "@slickgrid-universal/text-export": "^4.6.0",
+    "@slickgrid-universal/common": "^4.6.1",
+    "@slickgrid-universal/composite-editor-component": "^4.6.1",
+    "@slickgrid-universal/custom-tooltip-plugin": "^4.6.1",
+    "@slickgrid-universal/excel-export": "^4.6.1",
+    "@slickgrid-universal/graphql": "^4.6.3",
+    "@slickgrid-universal/odata": "^4.6.1",
+    "@slickgrid-universal/row-detail-view-plugin": "^4.6.1",
+    "@slickgrid-universal/rxjs-observable": "^4.6.1",
+    "@slickgrid-universal/text-export": "^4.6.1",
     "aurelia": "latest",
     "aurelia-slickgrid": "workspace:*",
     "bootstrap": "^5.3.3",

diff --git a/packages/demo/src/examples/slickgrid/example16.ts b/packages/demo/src/examples/slickgrid/example16.ts
@@ -144,8 +144,7 @@ export class Example16 {
     for (const rowIdx of data.rows) {
       // no point in moving before or after itself
       if (rowIdx === data.insertBefore || (rowIdx === data.insertBefore - 1 && ((data.insertBefore - 1) !== this.aureliaGrid.dataView.getItemCount()))) {
-        e.stopPropagation();
-        e.returnValue = false; // patch for Au2.Beta.13 regression
+        e.preventDefault(); // OR eventData.preventDefault();
         return false;
       }
     }

diff --git a/packages/demo/src/examples/slickgrid/example30.ts b/packages/demo/src/examples/slickgrid/example30.ts
@@ -1,6 +1,7 @@
 import { IHttpClient } from '@aurelia/fetch-client';
 import { newInstanceOf } from '@aurelia/kernel';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
+import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin';
 import { SlickCompositeEditor, SlickCompositeEditorComponent } from '@slickgrid-universal/composite-editor-component';
 
 import {
@@ -126,7 +127,8 @@ export class Example30 {
   defineGrids() {
     this.columnDefinitions = [
       {
-        id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, minWidth: 75,
+        id: 'title', name: '<span title="Task must always be followed by a number" class="color-warning-dark fa fa-exclamation-triangle"></span> Title <span title="Title is always rendered as UPPERCASE" class="fa fa-info-circle"></span>',
+        field: 'title', sortable: true, type: FieldType.string, minWidth: 75,
         cssClass: 'text-uppercase fw-bold', columnGroup: 'Common Factor',
         filterable: true, filter: { model: Filters.compoundInputText },
         editor: {
@@ -391,7 +393,7 @@ export class Example30 {
       excelExportOptions: {
         exportWithFormatter: false
       },
-      externalResources: [new ExcelExportService(), this.compositeEditorInstance],
+      externalResources: [new ExcelExportService(), new SlickCustomTooltip(), this.compositeEditorInstance],
       enableFiltering: true,
       rowSelectionOptions: {
         // True (Single Selection), False (Multiple Selections)
@@ -513,7 +515,7 @@ export class Example30 {
     } else {
       alert(args.validationResults.msg);
     }
-    e.returnValue = false; // patch for Au2.Beta.13 regression
+    e.preventDefault(); // OR eventData.preventDefault();
     return false;
   }
 
@@ -527,7 +529,6 @@ export class Example30 {
     if (column && item) {
       if (!checkItemIsEditable(item, column, grid)) {
         e.preventDefault(); // OR eventData.preventDefault();
-        e.returnValue = false; // patch for Au2.Beta.13 regression
         return false;
       }
     }

diff --git a/packages/demo/src/examples/slickgrid/example32.ts b/packages/demo/src/examples/slickgrid/example32.ts
@@ -451,7 +451,7 @@ export class Example32 {
     } else {
       alert(args.validationResults.msg);
     }
-    e.returnValue = false; // patch for Au2.Beta.13 regression
+    e.preventDefault(); // OR eventData.preventDefault();
     return false;
   }
 
@@ -468,7 +468,7 @@ export class Example32 {
         return false;
       }
     }
-    e.returnValue = false; // patch for Au2.Beta.13 regression
+    e.preventDefault(); // OR eventData.preventDefault();
     return false;
   }
 

diff --git a/packages/demo/src/examples/slickgrid/example33.scss b/packages/demo/src/examples/slickgrid/example33.scss
@@ -46,6 +46,9 @@ $slick-button-border-color: #ababab !default;
 
 // it's preferable to use CSS Variables (or SASS) but if you want to change colors of your tooltip for 1 column in particular you can do it this way
 // e.g. change css of 5th column 4 (zero index: l4)
+.l4 {
+  --slick-tooltip-color: #fff;
+}
 .l4 .header-tooltip-title,
 .l4 .headerrow-tooltip-title {
   color: #ffffff;

diff --git a/packages/demo/src/examples/slickgrid/example33.ts b/packages/demo/src/examples/slickgrid/example33.ts
@@ -111,6 +111,7 @@ export class Example33 {
         // define tooltip options here OR for the entire grid via the grid options (cell tooltip options will have precedence over grid options)
         customTooltip: {
           useRegularTooltip: true, // note regular tooltip will try to find a "title" attribute in the cell formatter (it won't work without a cell formatter)
+          useRegularTooltipFromCellTextOnly: true,
         },
       },
       {
@@ -159,7 +160,12 @@ export class Example33 {
         formatter: Formatters.percentCompleteBar,
         sortable: true, filterable: true,
         filter: { model: Filters.slider, operator: '>=' },
-        customTooltip: { useRegularTooltip: true, },
+        customTooltip: {
+          position: 'center',
+          formatter: (_row, _cell, value) => typeof value === 'string' && value.includes('%') ? value : `${value}%`,
+          headerFormatter: undefined,
+          headerRowFormatter: undefined
+        },
       },
       {
         id: 'start', name: 'Start', field: 'start', sortable: true,
@@ -436,12 +442,12 @@ export class Example33 {
 
   tooltipFormatter: Formatter = (row, cell, _value: any, column: Column, dataContext: any, grid: SlickGrid) => {
     const tooltipTitle = 'Custom Tooltip';
-    const effortDrivenHtml = Formatters.checkmarkMaterial(row, cell, dataContext.effortDriven, column, dataContext, grid);
+    const effortDrivenHtml = Formatters.checkmarkMaterial(row, cell, dataContext.effortDriven, column, dataContext, grid) as HTMLElement;
 
     return `<div class="header-tooltip-title">${tooltipTitle}</div>
     <div class="tooltip-2cols-row"><div>Id:</div> <div>${dataContext.id}</div></div>
     <div class="tooltip-2cols-row"><div>Title:</div> <div>${dataContext.title}</div></div>
-    <div class="tooltip-2cols-row"><div>Effort Driven:</div> <div>${effortDrivenHtml}</div></div>
+    <div class="tooltip-2cols-row"><div>Effort Driven:</div> <div>${effortDrivenHtml.outerHTML || ''}</div></div>
     <div class="tooltip-2cols-row"><div>Completion:</div> <div>${this.loadCompletionIcons(dataContext.percentComplete)}</div></div>
     `;
   }
@@ -451,9 +457,9 @@ export class Example33 {
 
     // use a 2nd Formatter to get the percent completion
     // any properties provided from the `asyncPost` will end up in the `__params` property (unless a different prop name is provided via `asyncParamsPropName`)
-    const completionBar = Formatters.percentCompleteBarWithText(row, cell, dataContext.percentComplete, column, dataContext, grid);
+    const completionBar = Formatters.percentCompleteBarWithText(row, cell, dataContext.percentComplete, column, dataContext, grid) as HTMLElement;
     const out = `<div class="color-sf-primary-dark header-tooltip-title">${tooltipTitle}</div>
-      <div class="tooltip-2cols-row"><div>Completion:</div> <div>${completionBar}</div></div>
+      <div class="tooltip-2cols-row"><div>Completion:</div> <div>${completionBar.outerHTML || ''}</div></div>
       <div class="tooltip-2cols-row"><div>Lifespan:</div> <div>${dataContext.__params.lifespan.toFixed(2)}</div></div>
       <div class="tooltip-2cols-row"><div>Ratio:</div> <div>${dataContext.__params.ratio.toFixed(2)}</div></div>
     `;

diff --git a/packages/demo/src/examples/slickgrid/example35.ts b/packages/demo/src/examples/slickgrid/example35.ts
@@ -7,6 +7,7 @@ import {
   GridOption,
 } from 'aurelia-slickgrid';
 import { I18N } from '@aurelia/i18n';
+import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin';
 // import { TOptions as I18NOptions } from 'i18next';
 
 import './example35.scss';
@@ -194,6 +195,7 @@ export class Example35 {
           deleteButtonPrompt: 'Are you sure you want to delete this row?',
         },
       },
+      externalResources: [new SlickCustomTooltip()],
     };
   }