Feature: #78192 - Refactor click menu (context menu)
See forge#78192
Description
Click-menu (context-menu) handling has been refactored and unified. The ExtJS/ExtDirect click-menu used on the page tree has been replaced with a jQuery based implementation. The same context-menu implementation is used in all places in the Backend (page tree, page module, list module, file list, folder tree...).
Context-menu rendering flow
The context-menu is shown after click on the HTML element which has class="t3js-
together with data-
, data-
and optional data-
attributes.
The JavaScript click event handler is implemented in the TYPO3/
requireJS module. It takes the data attributes mentioned above and executes an ajax call to the \TYPO3\
.
Context
asks \TYPO3\
to generate an array of items. ContextMenu builds a list of available item providers by asking each whether it can provide items (->can
), and what priority it has (->get
).
Custom item providers can be registered in $GLOBALS
. They must implement \TYPO3\
and can extend \TYPO3\
.
A list of providers is sorted by priority, and then each provider is asked to add items. The generated array of items is passed from an item provider with higher priority to a provider with lower priority.
After that, a compiled list of items is returned to the Context
which passes it back to the ContextMenu.js as JSON.
Example of the JSON response:
{
"view":{
"type":"item",
"label":"Show",
"icon":"<span class=\"t3js-icon icon icon-size-small icon-state-default icon-actions-document-view\" data-identifier=\"actions-document-view\">\n\t<span class=\"icon-markup\">\n<img src=\"\/typo3\/sysext\/core\/Resources\/Public\/Icons\/T3Icons\/actions\/actions-document-view.svg\" width=\"16\" height=\"16\" \/>\n\t<\/span>\n\t\n<\/span>",
"additionalAttributes":{
"data-preview-url":"http:\/\/typo37.local\/index.php?id=47"
},
"callbackAction":"viewRecord"
},
"edit":{
"type":"item",
"label":"Edit",
"icon":"",
"additionalAttributes":[
],
"callbackAction":"editRecord"
},
"divider1":{
"type":"divider",
"label":"",
"icon":"",
"additionalAttributes":[
],
"callbackAction":""
},
"more":{
"type":"submenu",
"label":"More options...",
"icon":"",
"additionalAttributes":[
],
"callbackAction":"openSubmenu",
"childItems":{
"newWizard":{
"type":"item",
"label":"'Create New' wizard",
"icon":"",
"additionalAttributes":{
},
"callbackAction":"newContentWizard"
}
}
}
}
Based on the JSON data ContextMenu.js is rendering a context-menu. If one of the items is clicked, the according JS callback
is executed on the TYPO3/
JS module or other modules defined in the additional
.
For example usage of this API see:
- Beuser item provider
\TYPO3\
and requireJS moduleCMS\ Beuser\ Context Menu\ Item Provider TYPO3/
CMS/ Beuser/ Context Menu Actions - Impexp item provider
\TYPO3\
and requireJS moduleCMS\ Impexp\ Context Menu\ Item Provider TYPO3/
CMS/ Impexp/ Context Menu Actions - Version item provider
\TYPO3\
and requireJS moduleCMS\ Version\ Context Menu\ Item Provider TYPO3/
CMS/ Version/ Context Menu Actions - Version item provider
\TYPO3\
and requireJS moduleCMS\ Version\ Context Menu\ Item Provider TYPO3/
CMS/ Version/ Context Menu Actions - Filelist item providers
\TYPO3\
,CMS\ Filelist\ Context Menu\ Item Providers\ File Drag Provider \TYPO3\
,CMS\ Filelist\ Context Menu\ Item Providers\ File Provider \TYPO3\
,CMS\ Filelist\ Context Menu\ Item Providers\ File Storage Provider \TYPO3\
and requireJS moduleCMS\ Filelist\ Context Menu\ Item Providers\ Filemounts Provider TYPO3/
CMS/ Filelist/ Context Menu Actions