Personnalisation des menus contextuels
Les menus contextuels suivants peuvent être personnalisés :
-
file_options
contrôleurs :- Vue Carte :
ditamap_viewer_controller - Repository Panel :
repository_panel_controller - Panneau Favoris :
collection_tree_controller - Liens de référence des propriétés du 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 :- Repository Panel :
repository_panel_controller - Panneau Favoris :
collection_tree_controller
- Repository Panel :
-
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, chaque menu contextuel comporte une controller id qui lui est associée. Ce contrôleur gère la variable on-event fonctionnalité des différentes options du menu contextuel
Prenons un exemple pour comprendre
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
this.loader.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 la variablewidget idou lecomponentqui appelle le menu contextuel et gère l’événementevents.
Le reste reste est le même, où view est utilisé pour définir les éléments, target identifie où remplacer, ajouter ou ajouter en préfixe l’option et l’ contextMenuWidget Le contrôleur gère les on-click événements .