Comment ? / How To ?

Comment déclencher un code javascript lors de la sélection d’un menu spécifique ?

Prérequis

Afin de pouvoir suivre ce guide, il faut préalablement savoir Comment ajouter un menu permettant d’accéder à une url spécifique.

Comment ajouter du code JavaScript au comportement d’un Smart Element ?

Surchargeons la méthode getJsReferences de la classe de rendu de consultation des menus MenuViewRender pour injecter le fichier JS menuView.js personnalisé dans le Smart Element Menu.

Recommandations

Si vous n’êtes pas familier avec la fonction getJsReferences, il est recommandé de lire la documentation associée disponible ici

Comment lancer du code JavaScript à la sélection d’un menu ?

Si on utilise la fonction setUrl pour mettre en place l’URL de la forme #action/<eventType>:<option1>:<option2> l’événement peut être capturé par l’écoute de actionClick.

Recommandations

Si vous n’êtes pas familier avec la fonction setURL, il est recommandé de lire la documentation associée disponible ici


















































 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


<?php

namespace Cogip\Restauratec\SmartStructures\Menu\Render;

use Anakeen\Core\Internal\SmartElement;
use Anakeen\Core\SEManager;
use Anakeen\Routes\Core\Lib\ApiMessage;
use Anakeen\Ui\BarMenu;
use Anakeen\Ui\ItemMenu;
use Anakeen\Ui\RenderOptions;
use SmartStructure\Fields\Menu as MenuFields;
use SmartStructure\Fields\Plat;

class MenuViewRender extends \Anakeen\Ui\DefaultConfigViewRender
{
    public function getOptions(SmartElement $document): RenderOptions
    {
        $options = parent::getOptions($document);
        $options->text(MenuFields::menu_title)->setTemplate('<div class="restauratec-custom-menu-title" style="display:flex"><i class="fa fa-book" aria-hidden="true" style="margin-right:10px"></i>{{{attribute.htmlDefaultContent}}}</div>');
        $options->frame(MenuFields::menu_frame)->setTemplate('<div class="restauratec-custom-menu-frame" style="text-align: center">{{{attribute.htmlDefaultContent}}}</div>');
        return $options;
    }

    /**
     * @param SmartElement $document
     * @return string
     */
    public function getEtag(SmartElement $document): string
    {
        $eTag = parent::getEtag($document);
        $eTag .= serialize($this->getMessages($document));
        return $eTag;
    }


    /**
     * @param SmartElement $document
     * @return array
     */
    public function getMessages(\Anakeen\Core\Internal\SmartElement $document): array
    {
        $messages = parent::getMessages($document);
        $messages[] = new ApiMessage(
            sprintf("Time : %d", time()),
            ApiMessage::SUCCESS
        );
        return $messages;
    }

    /**
     * @param SmartElement|null $document
     * @return array
     */
    public function getJsReferences(\Anakeen\Core\Internal\SmartElement $document = null): array
    {
        $js = parent::getJsReferences($document);
        $js['menu'] = new \Anakeen\Ui\JsAssetReference("/menuView.js");
        return $js;
    }

    /**
     * @param SmartElement $document
     * @return BarMenu
     */
    public function getMenu(\Anakeen\Core\Internal\SmartElement $document): BarMenu
    {
        $menu = parent::getMenu($document);
        $arrPlat = $document->getAttributeValue(MenuFields::menu_plat);
        $optionsImagesLinks = "";
        if (!empty($arrPlat)) {
            foreach ($arrPlat as $platId) {
                $plat = SEManager::getDocument($platId);
                $platImage = $plat->getFileLink(Plat::plat_image);
                $optionsImagesLinks .= ":" . $platImage;
            }
        }
        $itemImage = new ItemMenu("dishImage");
        $itemImage->setUrl("#action/dishImages" . $optionsImagesLinks);
        $itemImage->setTextLabel("Afficher l’image des plats associés");
        $menu->appendElement($itemImage);

        return $menu;
    }
}

Le fichier JS menuView.js est à placer sous src/public :

window.ank.smartElement.globalController.registerFunction("menu", (controller) => {
  controller.addEventListener("actionClick", function eventButtonView(event, documentObject, data) {
    if (data.eventId === "dishImages") {
      let $mosaicFormule = "<div>";
      data.options.forEach((imageLink) => {
        $mosaicFormule += "<img class='img-responsive' style='width: 500px;margin: 10px' src='" + imageLink + "'><br>";
      });
      $mosaicFormule += "</div>";
      var duplicateWindow = window.$("body").dcpConfirm({
        title: "Les plats associés du menu",
        width: "550px",
        height: "800px",
        maxWidth: $(window).width(),
        messages: {
          htmlMessage: $mosaicFormule,
          textMessage: "",
        },
      });
      duplicateWindow.data("dcpWindow").open();
    }
  });
});

Vous pouvez maintenant déployer vos modifications :

npx @anakeen/anakeen-cli deploy -c http://localhost:8080/control -s . -u admin -p anakeen --reinstall

Et voir le résultat sur un menu en consultation :

http://localhost:8080/api/v2/smart-elements/{INITID_MENU}/views/!defaultConsultation.html

LaunchJSForMenu

Et ensuite ?

Comment ajouter des conditions avant la sauvegarde dans un formulaire ?