[TASK] Reintroduce tooltips for new SVG Pagetree 81/58481/6
authorNikita Hovratov <nikita.h@live.de>
Sun, 30 Sep 2018 00:06:06 +0000 (02:06 +0200)
committerFrank Naegler <frank.naegler@typo3.org>
Sun, 30 Sep 2018 20:59:51 +0000 (22:59 +0200)
When hovering over a page-icon in the pagetree, a tooltip with the
id and status is now shown instead of a browser default title tooltip.

Resolves: #86314
Releases: master
Change-Id: I7d39841fa5085ea5bedb138e1d3e0eb036a3f402
Reviewed-on: https://review.typo3.org/58481
Tested-by: TYPO3com <no-reply@typo3.com>
Tested-by: Riccardo De Contardi <erredeco@gmail.com>
Tested-by: Susanne Moog <susanne.moog@typo3.org>
Reviewed-by: Frank Naegler <frank.naegler@typo3.org>
Tested-by: Frank Naegler <frank.naegler@typo3.org>
Reviewed-by: Josef Glatz <josef.glatz@typo3.org>
Reviewed-by: Susanne Moog <susanne.moog@typo3.org>
typo3/sysext/backend/Resources/Public/JavaScript/PageTree/PageTreeElement.js
typo3/sysext/backend/Resources/Public/JavaScript/SvgTree.js

index 5871cc5..27a94ca 100644 (file)
@@ -65,6 +65,11 @@ define(['jquery',
           $('.svg-tree-loader').append(spinner);
         });
 
+        // Ensure tooltips don't stay when scrolling the pagetree
+        $('#typo3-pagetree-tree').on('scroll', function () {
+            $(this).find('[data-toggle=tooltip]').tooltip('hide');
+        });
+
         var dataUrl = top.TYPO3.settings.ajaxUrls.page_tree_data;
         var configurationUrl = top.TYPO3.settings.ajaxUrls.page_tree_configuration;
 
index a21ca68..0e92669 100644 (file)
@@ -22,9 +22,10 @@ define(
     'TYPO3/CMS/Backend/Modal',
     'TYPO3/CMS/Backend/Severity',
     'TYPO3/CMS/Backend/Notification',
-    'TYPO3/CMS/Backend/Icons'
+    'TYPO3/CMS/Backend/Icons',
+    'TYPO3/CMS/Backend/Tooltip',
   ],
-  function($, d3, ContextMenu, Modal, Severity, Notification, Icons) {
+  function($, d3, ContextMenu, Modal, Severity, Notification, Icons, Tooltip) {
     'use strict';
 
     /**
@@ -722,40 +723,48 @@ define(
         // append the icon element
         if (this.settings.showIcons) {
           this.textPosition = 30;
-          nodeEnter
+
+          var nodeContainer = nodeEnter
+            .append('g')
+            .attr('class', 'node-icon-container')
+            .attr('title', this.getNodeTitle)
+            .attr('data-toggle', 'tooltip')
+            .on('click', function(node) {
+                _this.clickOnIcon(node, this);
+            });
+
+          nodeContainer
             .append('use')
-            .attr('x', 8)
-            .attr('y', -8)
             .attr('class', 'node-icon')
             .attr('data-uid', this.getNodeIdentifier)
-            .on('click', function(node) {
-              _this.clickOnIcon(node, this);
-            });
+            .attr('transform', 'translate(8, -8)');
 
-          nodeEnter
+          nodeContainer
             .append('use')
-            .attr('x', 8)
-            .attr('y', -3)
-            .attr('class', 'node-icon-overlay')
-            .on('click', function(node) {
-              _this.clickOnIcon(node, this);
-            });
+            .attr('transform', 'translate(8, -3)')
+            .attr('class', 'node-icon-overlay');
 
-          nodeEnter
+          nodeContainer
             .append('use')
             .attr('x', 27)
             .attr('y', -7)
             .attr('class', 'node-icon-locked');
         }
 
+        Tooltip.initialize('[data-toggle="tooltip"]', {
+            delay: {
+                "show": 50,
+                "hide": 50
+            },
+            trigger: 'hover',
+            container: 'body',
+            placement: 'right',
+        });
+
         this.dispatch.call('updateSvg', this, nodeEnter);
 
         _this.appendTextElement(nodeEnter);
 
-        nodeEnter
-          .append('title')
-          .text(this.getNodeTitle.bind(this));
-
         return nodes.merge(nodeEnter);
       },