[TASK] Add data attributes in backend toolbar and menu components

Add data attributes in backend toolbar and backend menu components, to have general identifier for binding guided tours popover and more features that can be based on this. Resolves: #80500 Releases: master, 8.7 Change-Id: I2add8b8c28ecd37967b7b23f71392aa71f209da5 Reviewed-on: https://review.typo3.org/52197 Tested-by: TYPO3com <no-reply@typo3.com> Reviewed-by: Mathias Schreiber <mathias.schreiber@typo3.com> Tested-by: Mathias Schreiber <mathias.schreiber@typo3.com> Reviewed-by: Frank Naegler <frank.naegler@typo3.org> Tested-by: Frank Naegler <frank.naegler@typo3.org>
TYPO3 · Feb 23, 2018 · 725d8d9 · 725d8d9
1 parent 84cdecc
commit 725d8d9
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 8 deletions.
diff --git a/typo3/sysext/backend/Classes/Controller/BackendController.php b/typo3/sysext/backend/Classes/Controller/BackendController.php
@@ -350,12 +350,18 @@ protected function renderToolbar()
                 }
 
                 // Create a unique id from class name
-                $className = get_class($toolbarItem);
-                $className = GeneralUtility::underscoredToLowerCamelCase($className);
+                $fullyQualifiedClassName = get_class($toolbarItem);
+                $className = GeneralUtility::underscoredToLowerCamelCase($fullyQualifiedClassName);
                 $className = GeneralUtility::camelCaseToLowerCaseUnderscored($className);
                 $className = str_replace(['_', '\\'], '-', $className);
                 $liAttributes[] = 'id="' . $className . '"';
 
+                // Create data attribute identifier
+                $shortName = substr($fullyQualifiedClassName, strrpos($fullyQualifiedClassName, '\\') + 1);
+                $dataToolbarIdentifier = GeneralUtility::camelCaseToLowerCaseUnderscored($shortName);
+                $dataToolbarIdentifier = str_replace('_', '-', $dataToolbarIdentifier);
+                $liAttributes[] = 'data-toolbar-identifier="' . htmlspecialchars($dataToolbarIdentifier) . '"';
+
                 $toolbar[] = '<li ' . implode(' ', $liAttributes) . '>';
 
                 if ($hasDropDown) {

diff --git a/typo3/sysext/backend/Classes/Template/Components/Menu/Menu.php b/typo3/sysext/backend/Classes/Template/Components/Menu/Menu.php
@@ -115,6 +115,18 @@ public function getIdentifier()
         return $this->identifier;
     }
 
+    /**
+     * Get identifier for data attribute
+     *
+     * @return string
+     */
+    public function getDataIdentifier(): string
+    {
+        $dataMenuIdentifier = GeneralUtility::camelCaseToLowerCaseUnderscored($this->identifier);
+        $dataMenuIdentifier = str_replace('_', '-', $dataMenuIdentifier);
+        return $dataMenuIdentifier;
+    }
+
     /**
      * MenuItem Factory Method
      *

diff --git a/typo3/sysext/backend/Classes/Utility/BackendUtility.php b/typo3/sysext/backend/Classes/Utility/BackendUtility.php
@@ -2811,12 +2811,15 @@ public static function getFuncMenu(
                 . ((string)$currentValue === (string)$value ? ' selected="selected"' : '') . '>'
                 . htmlspecialchars($label, ENT_COMPAT, 'UTF-8', false) . '</option>';
         }
+        $dataMenuIdentifier = str_replace(['SET[', ']'], '', $elementName);
+        $dataMenuIdentifier = GeneralUtility::camelCaseToLowerCaseUnderscored($dataMenuIdentifier);
+        $dataMenuIdentifier = str_replace('_', '-', $dataMenuIdentifier);
         if (!empty($options)) {
             $onChange = 'jumpToUrl(' . GeneralUtility::quoteJSvalue($scriptUrl . '&' . $elementName . '=') . '+this.options[this.selectedIndex].value,this);';
             return '
 
 				<!-- Function Menu of module -->
-				<select class="form-control" name="' . $elementName . '" onchange="' . htmlspecialchars($onChange) . '">
+				<select class="form-control" name="' . $elementName . '" onchange="' . htmlspecialchars($onChange) . '" data-menu-identifier="' . htmlspecialchars($dataMenuIdentifier) . '">
 					' . implode('
 					', $options) . '
 				</select>
@@ -2858,12 +2861,15 @@ public static function getDropdownMenu(
                 . ((string)$currentValue === (string)$value ? ' selected="selected"' : '') . '>'
                 . htmlspecialchars($label, ENT_COMPAT, 'UTF-8', false) . '</option>';
         }
+        $dataMenuIdentifier = str_replace(['SET[', ']'], '', $elementName);
+        $dataMenuIdentifier = GeneralUtility::camelCaseToLowerCaseUnderscored($dataMenuIdentifier);
+        $dataMenuIdentifier = str_replace('_', '-', $dataMenuIdentifier);
         if (!empty($options)) {
             $onChange = 'jumpToUrl(' . GeneralUtility::quoteJSvalue($scriptUrl . '&' . $elementName . '=') . '+this.options[this.selectedIndex].value,this);';
             return '
 			<div class="form-group">
 				<!-- Function Menu of module -->
-				<select class="form-control input-sm" name="' . htmlspecialchars($elementName) . '" onchange="' . htmlspecialchars($onChange) . '">
+				<select class="form-control input-sm" name="' . htmlspecialchars($elementName) . '" onchange="' . htmlspecialchars($onChange) . '" data-menu-identifier="' . htmlspecialchars($dataMenuIdentifier) . '">
 					' . implode(LF, $options) . '
 				</select>
 			</div>

diff --git a/typo3/sysext/backend/Resources/Private/Partials/Backend/Topbar.html b/typo3/sysext/backend/Resources/Private/Partials/Backend/Topbar.html
@@ -1,4 +1,4 @@
-<div class="scaffold-topbar t3js-scaffold-topbar">
+<div class="scaffold-topbar t3js-scaffold-topbar" data-topbar-identifier="topbar">
 	<div class="topbar">
 		<div class="topbar-header t3js-topbar-header">
 			<button class="topbar-button topbar-button-modulemenu t3js-topbar-button-modulemenu">
@@ -27,7 +27,7 @@
 		</div>
 	</div>
 </div>
-<div class="scaffold-toolbar t3js-scaffold-toolbar">
+<div class="scaffold-toolbar t3js-scaffold-toolbar" data-toolbar-identifier="toolbar">
 	<div class="toolbar t3js-topbar-toolbar">
 		<ul class="toolbar-list" data-typo3-role="typo3-module-menu">
 			<f:format.raw>{toolbar}</f:format.raw>

diff --git a/typo3/sysext/backend/Resources/Private/Partials/Menus/SelectBoxJumpMenu.html b/typo3/sysext/backend/Resources/Private/Partials/Menus/SelectBoxJumpMenu.html
@@ -1,5 +1,5 @@
-{menu.label} <select class="form-control t3-js-jumpMenuBox" name="{menu.identifier}" onchange="if(this.options[this.selectedIndex].value){window.location.href=(this.options[this.selectedIndex].value);}">
+{menu.label} <select class="form-control t3-js-jumpMenuBox" name="{menu.identifier}" data-menu-identifier="{menu.dataIdentifier}" onchange="if(this.options[this.selectedIndex].value){window.location.href=(this.options[this.selectedIndex].value);}">
 	<f:for each="{menu.menuItems}" as="menuItem">
 		<option value="{menuItem.href}" {f:if(condition: '{menuItem.active}', then: ' selected="selected"')}>{menuItem.title}</option>
 	</f:for>
-</select>
+</select>