feat(plugin): convert slick.autotooltips to vanillaJS (#745)

- remove jQuery from plugin and also in the autotooltip example as well
6pac · Apr 30, 2023 · 133d783 · 133d783
1 parent 50c7e7b
commit 133d783
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 66 deletions.
diff --git a/examples/example-autotooltips.html b/examples/example-autotooltips.html
@@ -6,12 +6,6 @@
   <title>SlickGrid plugin example: AutoTooltips</title>
   <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
   <link rel="stylesheet" href="examples.css" type="text/css"/>
-  <style>
-    .ui-tooltip {
-      background-color: yellow;
-	  background-image:none;
-    }
-  </style>
 </head>
 <body>
 <table width="100%">
@@ -20,32 +14,20 @@
       <div id="myGrid" style="width:600px;height:300px;"></div>
     </td>
     <td valign="top">
-	  <button id="btnjQTooltips">Use jQuery UI tooltips</button>
 	  <br/>
       <h2>Demonstrates:</h2>
       <ul>
         <li>AutoTooltips plugin</li>
-        <li>Optional stylable jQueryUI tooltips.</li>
       </ul>
       <h2>Instructions:</h2>
       <p>Resize the columns until see ellipsis in column or header.  Hover over cell to see tooltip.</p>
-       <p>For jQueryUI tooltips, call the .tooltips() function on the document to convert all tooltips 
-	   to jQueryUI. To style jQueryUI tooltips, use the generic jQueryUI class 'ui-tooltip', or pass in a class name as an option.</p>
       <h2>Usage:</h2>
      <pre style="background-color: white; font-size: 110%; border-radius: 5px; padding: 20px; ">plugin = new Slick.AutoTooltips(pluginOptions);
 grid.registerPlugin(plugin);
 grid.render();</pre>
-	 <p>jQueryUI Tooltips:</p>
-     <pre style="background-color: white; font-size: 110%; border-radius: 5px; padding: 20px; ">$( document ).tooltip( { tooltipClass: "my-tooltip-class" } );</pre>
-        <h2>View Source:</h2>
-        <ul>
-            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-autotooltips.html" target="_sourcewindow"> View the source for this example on Github</a></li>
-        </ul>
-    </td>
   </tr>
 </table>
 
-<script src="../lib/jquery-3.1.0.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../slick.core.js"></script>
@@ -55,12 +37,6 @@ <h2>View Source:</h2>
 
 <script>
   var tooltipsActivated = false;
-  $("#btnjQTooltips").click(function () {
-    if (!tooltipsActivated) {
-      $( document ).tooltip( { tooltipClass: "slick-tooltip" } );
-	  tooltipsActivated = true;
-    }
-  });
 
   var grid;
   var columns = [
@@ -77,23 +53,21 @@ <h2>View Source:</h2>
     enableColumnReorder: true
   };
 
-  $(function () {
-    var data = [];
-    for (var i = 0; i < 500; i++) {
-      data[i] = {
-        title: "Task " + i,
-        duration: "5 days",
-        percentComplete: Math.round(Math.random() * 100),
-        start: "01/01/2009",
-        finish: "01/05/2009",
-        effortDriven: (i % 5 == 0)
-      };
-    }
+  var data = [];
+  for (var i = 0; i < 500; i++) {
+    data[i] = {
+      title: "Task " + i,
+      duration: "5 days",
+      percentComplete: Math.round(Math.random() * 100),
+      start: "01/01/2009",
+      finish: "01/05/2009",
+      effortDriven: (i % 5 == 0)
+    };
+  }
 
-    grid = new Slick.Grid("#myGrid", data, columns, options);
-    grid.registerPlugin( new Slick.AutoTooltips({ enableForHeaderCells: true }) );
-    grid.render();
-  })
+  grid = new Slick.Grid("#myGrid", data, columns, options);
+  grid.registerPlugin( new Slick.AutoTooltips({ enableForHeaderCells: true }) );
+  grid.render();
 </script>
 </body>
 </html>
diff --git a/plugins/slick.autotooltips.js b/plugins/slick.autotooltips.js
@@ -1,6 +1,6 @@
-(function ($) {
+(function (window) {
   // Register namespace
-  $.extend(true, window, {
+  Slick.Utils.extend(true, window, {
     "Slick": {
       "AutoTooltips": AutoTooltips
     }
@@ -15,7 +15,6 @@
    */
   function AutoTooltips(options) {
     var _grid;
-    var _self = this;
     var _defaults = {
       enableForCells: true,
       enableForHeaderCells: false,
@@ -27,7 +26,7 @@
      * Initialize plugin.
      */
     function init(grid) {
-      options = $.extend(true, {}, _defaults, options);
+      options = Slick.Utils.extend(true, {}, _defaults, options);
       _grid = grid;
       if (options.enableForCells) _grid.onMouseEnter.subscribe(handleMouseEnter);
       if (options.enableForHeaderCells) _grid.onHeaderMouseEnter.subscribe(handleHeaderMouseEnter);
@@ -43,47 +42,52 @@
 
     /**
      * Handle mouse entering grid cell to add/remove tooltip.
-     * @param {jQuery.Event} e - The event
+     * @param {MouseEvent} e - The event
      */
-    function handleMouseEnter(e) {
-      var cell = _grid.getCellFromEvent(e);
+    function handleMouseEnter() {
+      const cell = _grid.getCellFromEvent(event);
       if (cell) {
-        var $node = $(_grid.getCellNode(cell.row, cell.cell));
-        var text;
-        if (!$node.attr("title") || options.replaceExisting) {
-          if (($node.innerWidth() < $node[0].scrollWidth) || ($node.innerHeight() < $node[0].scrollHeight)) {
-            text = $.trim($node.text());
-            if (options.maxToolTipLength && text.length > options.maxToolTipLength) {
-              text = text.substr(0, options.maxToolTipLength - 3) + "...";
+        let node = _grid.getCellNode(cell.row, cell.cell);
+        let text;
+        if (options && node && (!node.title || options && options.replaceExisting)) {
+          if (node.clientWidth < node.scrollWidth) {
+            text = node.textContent && node.textContent.trim() || '';
+            if (options && (options.maxToolTipLength && text.length > options.maxToolTipLength)) {
+              text = text.substring(0, options.maxToolTipLength - 3) + '...';
             }
-	  } else {
-            text = "";
+          } else {
+            text = '';
           }
-          $node.attr("title", text);
+          node.title = text;
         }
-		    $node = null;
+        node = null;
       }
     }
 
     /**
      * Handle mouse entering header cell to add/remove tooltip.
-     * @param {jQuery.Event} e     - The event
+     * @param {MouseEvent} e     - The event
      * @param {object} args.column - The column definition
      */
     function handleHeaderMouseEnter(e, args) {
-      var column = args.column,
-          $node = $(e.target).closest(".slick-header-column");
-      if (column && !column.toolTip) {
-        $node.attr("title", ($node.innerWidth() < $node[0].scrollWidth) ? column.name : "");
+      const column = args.column;
+      let node;
+      const targetElm = (e.target);
+
+      if (targetElm) {
+        node = targetElm.closest < HTMLDivElement > ('.slick-header-column');
+        if (node && !(column && column.toolTip)) {
+          node.title = (targetElm.clientWidth < node.clientWidth) ? column && column.name || '' : '';
+      }
       }
-	    $node = null;
+      node = null;
     }
 
     // Public API
-    $.extend(this, {
+    Slick.Utils.extend(this, {
       "init": init,
       "destroy": destroy,
       "pluginName": "AutoTooltips"
     });
   }
-})(jQuery);
+})(window);