Personnalisation des menus contextuels
Les menus contextuels suivants peuvent être personnalisés :
-
file_options
contrôleurs :- Vue Carte :
ditamap_viewer_controller - Panneau Référentiel :
repository_panel_controller - Panneau Favoris :
collection_tree_controller - Liens de référence de propriétés de fichier :
file_references_links_controller - Panneau de recherche du référentiel :
repository_search_controller - Objet Schéma Panneau :
subject_scheme_tree_controller
- Vue Carte :
-
folder_options
contrôleurs :- Panneau Référentiel :
repository_panel_controller - Panneau Favoris :
collection_tree_controller
- Panneau Référentiel :
-
collection_options
contrôleurs :- Panneau Favoris :
collection_tree_controller
- Panneau Favoris :
-
map_view_options
contrôleurs :- Vue Carte :
ditamap_viewer_controller
- Vue Carte :
-
baseline_panel_menu
contrôleurs :- Panneau de ligne de base :
baseline_panel
- Panneau de ligne de base :
-
preset_item_menu
contrôleurs :- Panneau de paramètres prédéfinis :
preset_panel
- Panneau de paramètres prédéfinis :
Vous pouvez également créer votre propre menu contextuel en définissant un nouvel identifiant unique.
Désormais, un controller id est associé à chaque menu contextuel. Ce contrôleur gère la fonctionnalité on-event pour les différentes options de menu contextuel.
Prenons un exemple pour comprendre
const loadDitaFile = (filePath, uuid) =>{
return $.ajax({
type: 'POST',
url: '/bin/referencelistener',
data: {
operation: 'getdita',
path: filePath,
type: uuid ? 'UUID' : 'PATH',
cache: false,
},
})
}
const fileOptions = {
id: "file_options",
contextMenuWidget: "repository_panel",
view: {
items: [
{
component: "div",
target: {
key:"displayName",value: "Delete",
viewState: VIEW_STATE.REPLACE
}
},
{
component: "div",
target: {
key:"displayName",value: "Edit",
viewState: VIEW_STATE.REPLACE
}
},
{
"displayName": "Download",
"data": {
"eventid": "downloadFile"
},
"icon": "downloadFromCloud",
"class": "menu-separator",
target: {
key:"displayName",value: "Duplicate",
viewState: VIEW_STATE.REPLACE
}
},
]
},
controller: {
downloadFile(){
const path = this.getValue('selectedItems')[0].path
loadDitaFile(path).then((file) => {
function download_file(name, contents) {
const mime_type = "text/plain";
const blob = new Blob([contents], {type: mime_type});
const dlink = document.createElement('a');
dlink.download = name;
dlink.href = window.URL.createObjectURL(blob);
dlink.onclick = function() {
// revokeObjectURL needs a delay to work properly
const that = this;
setTimeout(function() {
window.URL.revokeObjectURL(that.href);
}, 1500);
};
dlink.click();
dlink.remove();
}
download_file(path,file.xml)
});
}
}
}
Maintenant, comprenons ce que ce code fait.
idest utilisé pour identifier le menu contextuel que nous voulons personnaliser.contextMenuWidgetest utilisé pour définir lewidget idou lecomponentqui appelle le menu contextuel et gère leevents.
Le reste reste identique, où view est utilisé pour définir les éléments, target identifie l’emplacement où remplacer, ajouter ou ajouter en préfixe l’option et le contrôleur contextMenuWidget gère les événements on-click.