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
  • folder_options
    contrôleurs :

    • Panneau Référentiel : repository_panel_controller
    • Panneau Favoris : collection_tree_controller
  • collection_options
    contrôleurs :

    • Panneau Favoris : collection_tree_controller
  • map_view_options
    contrôleurs :

    • Vue Carte : ditamap_viewer_controller
  • baseline_panel_menu
    contrôleurs :

    • Panneau de ligne de base : baseline_panel
  • preset_item_menu
    contrôleurs :

    • Panneau de paramètres prédéfinis : preset_panel

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.

  1. id est utilisé pour identifier le menu contextuel que nous voulons personnaliser.
  2. contextMenuWidget est utilisé pour définir le widget id ou le component qui appelle le menu contextuel et gère le events.

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.

recommendation-more-help
11125c99-e1a1-4369-b5d7-fb3098b9b178