LP#1740412 Grid cell tooltips limited to long content

Only display grid cell tooltips when the content of the cell overflows
its container.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Michele Morgan <mmorgan@noblenet.org>
Signed-off-by: Kathy Lussier <klussier@masslnc.org>

diff --git a/Open-ILS/src/templates/staff/share/t_autogrid.tt2 b/Open-ILS/src/templates/staff/share/t_autogrid.tt2
index a7722f6..e77fa58 100644 (file)
--- a/Open-ILS/src/templates/staff/share/t_autogrid.tt2
+++ b/Open-ILS/src/templates/staff/share/t_autogrid.tt2
@@ -328,9 +328,11 @@
           <!-- if the cell comes with its own template,
                translate that content into HTML and insert it here -->
           <span ng-if="col.template && !col.compiled" 
+            id="{{cellId(col, item)}}"
             style="padding-left:5px; padding-right:10px;"
             ng-init="html_value=translateCellTemplate(col, item)">
-            <span uib-tooltip-html="html_value" tooltip-class="eg-grid-tooltip">
+            <span tooltip-class="eg-grid-tooltip"
+              uib-tooltip-html="cellOverflowed(cellId(col, item), 1) ? html_value : ''">
               <span ng-bind-html="html_value"></span>
             </span>
           </span>
@@ -342,8 +344,9 @@
           <!-- otherwise, simply display the item value, which may 
                pass through datatype-specific filtering. -->
           <span ng-if="!col.template" 
+            id="{{cellId(col, item)}}"
             ng-init="text_value = (itemFieldValue(item, col) | egGridValueFilter:col:item)"
-            uib-tooltip="{{text_value}}"
+            uib-tooltip="{{cellOverflowed(cellId(col, item), 1) ? text_value : ''}}"
             tooltip-class="eg-grid-tooltip"
             style="padding-left:5px; padding-right:10px;">
             {{text_value}}

diff --git a/Open-ILS/web/js/ui/default/staff/services/grid.js b/Open-ILS/web/js/ui/default/staff/services/grid.js
index f2b577c..62a4719 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/services/grid.js
+++ b/Open-ILS/web/js/ui/default/staff/services/grid.js
@@ -859,6 +859,32 @@ angular.module('egGridMod',
                 return grid.modifyColumnPos(col, diff);
             }
 
+            // Returns true of the contents of the cell overflow its container.
+            // parentDepth tells the code how far up the DOM tree to traverse
+            // via parentNode before stopping to inspect the value.
+            // There's no way to pass a reference to a DOM node directly via
+            // a scope function (except ng-click, etc.) so pass the 
+            // DOM id instead and get the node from there.
+            $scope.cellOverflowed = function(id, parentDepth) {
+                var node = document.getElementById(id);
+                if (!node) return;
+                for (var i = 0; i < parentDepth; i++) {
+                    node = node.parentNode;
+                }
+                return node.scrollHeight > node.clientHeight 
+                    || node.scrollWidth > node.clientWidth;
+            }
+
+            // Generates a unique identifier per cell per grid.
+            $scope.cellId = function(col, item) {
+                if (!col || !item) return '';
+                return 'grid-cell-span-' 
+                    // differentiate grids
+                    + ($scope.persistKey || $scope.idlClass || $scope.grid_element.id)
+                    // differentiate rows and columns.
+                    + '-' + col.name + '-' + $scope.indexValue(item);
+
+            }
 
             // handles click, control-click, and shift-click
             $scope.handleRowClick = function($event, item) {