Infrastructure côté client pour des menus simples

Vous pouvez activer des menus simple dans le client avec quatre modules.

Pour utiliser les menus simples dans votre thème, vous devez ajouter le module principal wp_simple_contextmenu_main à votre profil de thème dans la page en cours. Toutes les ressources nécessaires sont incluses sur la page.

L'infrastructure de menus simples comprend quatre modules :

wp_simple_contextmenu_main
- wp_simple_contextmenu_js
- wp_simple_contextmenu_css
- wp_simple_contextmenu_template

Ouvrez le menu avec la fonction JavaScript wptheme.contextMenu.init. Pour plus d'informations, voir JsDoc.

Pour enregistrer un menu simple pour qu'il s'ouvre lorsqu'un utilisateur clique sur l'élément HTML, utilisez l'exemple suivant.

<span role="button" aria-haspopup="true" class="wpthemeMenuFocus"
          onclick="if (typeof wptheme != 'undefined') wptheme.contextMenu.init({ 'node': this, menuId: 'pageAction', jsonQuery: {'navID':ibmCfg.portalConfig.currentPageOID}, params: {'alignment':'right'}});"
          <span class="wpthemeUnderlineText" id="wpContextMenu">My Menu</span>
      </span>

Cet exemple comporte l'ID pageAction, qui déclenche une demande au serveur pour charger un fichier JSON avec le même identifiant. Pour plus d'informations, voir Infrastructure côté serveur.

Vous pouvez créer autant de menus que vous le souhaitez dans un thème personnalisé.

Pour forcer la régénération des menus, utilisez la commande JavaScript : i$.fireEvent('wptheme/contextMenu/invalidate/all');

Lorsqu'un délai d'expiration de session se produit, la réactualisation de la page renvoie à la page de connexion.

Détails du module

Les quatre modules dans l'infrastructure des menus simples fournissent toutes les informations dont vous avez besoin pour afficher les menus. Pour plus de souplesse, les modules, à l'exception du module JavaScript, sont configurés en tant que modules de thème. Ils sont inclus dans chaque thème individuellement. Lorsque vous créez ou clonez votre propre thème, vous devez copier toutes les ressources requises pour votre thème.

Si vous copiez le thème par défaut, ce dernier inclut toutes les ressources requises.

La liste suivante décrit toutes les ressources qui sont requises pour les divers modules de votre thème.

wp_simple_contextmenu_js (module système)
wp_simple_contextmenu_main (module de thème)
- métamodule, aucune ressource référencée
wp_simple_contextmenu_css (module de thème)
- répertoire racine du thème pour les ressources statiques/css/wp_simple_contextmenu.css
- répertoire racine du thème pour les ressources statiques/css/wp_simple_contextmenu.css.uncompressed.css
- répertoire racine du thème pour les ressources statiques/css/wp_simple_contextmenuRTL.css
- répertoire racine du thème pour les ressources statiques/css/wp_simple_contextmenuRTL.css.uncompressed.css
- répertoire racine du thème pour les ressources statiques/css/default/contextmenu.css
- répertoire racine du thème pour les ressources statiques/css/default/contextmenu.css.uncompressed.css
- répertoire racine du thème pour les ressources statiques/css/default/contextmenuCommon.css
- répertoire racine du thème pour les ressources statiques/css/default/contextmenuCommon.css.uncompressed.css
- répertoire racine du thème pour les ressources statiques/css/default/contextmenuRTL.css
- répertoire racine du thème pour les ressources statiques/css/default/contextmenuRTL.css.uncompressed.css
wp_simple_contextmenu_template (module de thème)
- répertoire racine du thème pour les ressources statiques/menuDefinitions/templates/simpleMenuTemplate.html

Modèles

Ce menu fournit un modèle par défaut qui est incorporé dans le marquage de la page et ajouté via le module wp_simple_contextmenu_template. Si aucun modèle en ligne ou aucun ID de modèle n'est transmis lors de l'initialisation du menu, l'infrastructure revient au modèle par défaut.

Vous pouvez définir votre modèle avec un modèle en ligne, qui est intégré au marquage de menu.

<span role="button" aria-haspopup="true" class="wpthemeMenuFocus"
          onclick="if (typeof wptheme != 'undefined') wptheme.contextMenu.init({ 'node': this, menuId: 'pageAction', jsonQuery: {'navID':ibmCfg.portalConfig.currentPageOID}, params: {'alignment':'right'}});"
          <span class="wpthemeUnderlineText" id="wpContextMenu">My Menu</span>
          ... <your template markup appears here> ...
      </span>

Ou, vous pouvez utiliser un modèle référencé via un ID. Lors de l'appel de la méthode init du menu, vous pouvez transmettre un ID de modèle avec les paramètres. Cet ID est résolu en tant qu'ID d'élément HTML dans le DOM et doit pointer vers un modèle valide.

<span id="exampleTemplateId" class="wpthemeMenuLeft">
    <div class="wpthemeMenuBorder">
        <div class="wpthemeMenuNotchBorder"></div>
        <!-- define the menu item template inside the "ul" element.  only "css-class", "description", and "title" are handled by the theme's sample javascript. -->
        <ul class="wpthemeMenuDropDown wpthemeTemplateMenu" role="menu">
            <li class="${css-class}" role="menuitem" tabindex="-1"  ><span class="wpthemeMenuText" >${title}</span></li>
        </ul>
    </div>
    <!-- Template for loading -->
    <div class="wpthemeMenuLoading wpthemeTemplateLoading">${loading}</div>
    <!-- Template for submenu -->
    <div class="wpthemeAnchorSubmenu wpthemeTemplateSubmenu">
        <div class="wpthemeMenuBorder wpthemeMenuSubmenu">
            <ul id="${submenu-id}" class="wpthemeMenuDropDown" role="menu"><li role="menuitem" tabindex="-1"></li></ul>
        </div>
    </div>
</span>

Le modèle contient 3 sous-modèles identifiés via des classes.

Modèle d'élément de menu: Défini par le biais de la classe wpthemeTemplateMenu. Pour générer chaque entrée de menu individuelle, les articles contenus dans ce noeud DOM sont utilisés comme modèle.
Chargement du modèle: Défini par le biais de la classe wpthemeTemplateLoading. Utilisé pour afficher si que le contenu du menu est en cours de chargement.
Modèle de sous-menu: Défini par le biais de la classe wpthemeTemplateSubmenu.

Le modèle peut également contenir des variables de remplacement. Le modèle de l'élément de menu contient trois variables.

${css-class}: Remplacé par les classes utilisées pour cette entrée.
${description}: Description localisée de l'élément de menu.
${title}: Titre localisé de l'élément de menu.

Le modèle de chargement contient une variable.

${loading}: Chargement de texte à afficher pendant que les données sont extraites du serveur.

Le modèle de sous-menu contient une variable.

${submenu-id}: Requis pour définir un ID unique pour un sous-menu nouvellement généré.

Exemple

Cet exemple illustre le gestionnaire de fermeture, un autre ID de modèle et l'alignement.

addClass(control.parentNode, VALUE_SELECTED);
            args = {
                "node": control.parentNode,
                "menuId": menuID,
                "jsonQuery": menuQuery,
                "params": {
                    "templateId": "exampleTemplate",
                    "alignment": "right"
                },
                "onClose": function() {
                    removeClass(control.parentNode, VALUE_SELECTED);
                }
            };
            wptheme.contextMenu.init(args);

Extensions de menu simple

L'infrastructure prend en charge des extensions supplémentaires dans le module wp_simple_contextmenu_ext. Les extensions suivantes sont disponibles.

actionUrlTarget: Vous pouvez définir la fenêtre cible dans le DOM du navigateur où est exécutée une action de menu. Utilisez cette action pour exécuter une action de menu dans un autre iframe de la page par exemple. Ce module est utilisé dans le thème de la barre d'outils.
badge: Cette extension fournit un support pour l'affichage des badges pour chaque menuitem du contextmenu. Un badge est un nombre qui s'affiche dans une zone de graphique avec une couleur. Les badges peuvent facilement être activés en définissant les métadonnées badgeUrl ou badgeData sur les métadonnées pour menuitem. Le flux qui est renvoyé depuis badgeUrl doit être de type JSON et doit posséder deux éléments JSON sur l'objet racine.
nb: Nombre à afficher.
level: Chaîne, qui peut être soit error, warn ou info.

Comme alternative à badgeURL, menuitem peut également contenir l'élément badgeData. L'élément badgeData doit être un objet JSON avec les mêmes éléments que le flux renvoyé depuis badgeURL. Ce qui suit est un exemple de badgeURL :

{
  "type": "StaticMenuitem",
  "id": "myEditFct",
  ...
  "metadata": {
    ...
    "badgeUrl": "?uri=theme-validation:count"
  }
}

Ce qui suit est un exemple de badgeData :

{
  "type": "StaticMenuitem",
  "id": "myEditFct",
  ...
  "metadata": {
    ...
    "badgeData": {
      "count": "10",
      "level": "error"
    }
  }
}