[TASK] Add data attributes in backend toolbar and menu components 76/55876/2
authorThomas Deuling <info@coding.ms>
Mon, 27 Mar 2017 20:18:44 +0000 (22:18 +0200)
committerFrank Naegler <frank.naegler@typo3.org>
Fri, 23 Feb 2018 14:55:48 +0000 (15:55 +0100)
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/55876
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Frank Naegler <frank.naegler@typo3.org>
Tested-by: Frank Naegler <frank.naegler@typo3.org>
typo3/sysext/backend/Classes/Controller/BackendController.php
typo3/sysext/backend/Classes/Template/Components/Menu/Menu.php
typo3/sysext/backend/Classes/Utility/BackendUtility.php
typo3/sysext/backend/Resources/Private/Partials/Backend/Topbar.html
typo3/sysext/backend/Resources/Private/Partials/Menus/SelectBoxJumpMenu.html

index ee354cd..37e80a8 100644 (file)
@@ -510,12 +510,18 @@ class BackendController
                 }
 
                 // 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) {
index fbaaf0c..6ac05f0 100644 (file)
@@ -116,6 +116,18 @@ class Menu
     }
 
     /**
+     * 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
      *
      * @return MenuItem
index 4de98f1..fbc0f6c 100644 (file)
@@ -3315,12 +3315,15 @@ class BackendUtility
                 . ((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>
@@ -3362,12 +3365,15 @@ class BackendUtility
                 . ((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>
index b1626a1..4b64fc2 100644 (file)
@@ -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>
index c6c7e7d..bfa9bbb 100644 (file)
@@ -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>
\ No newline at end of file
+</select>