Skip to content

Latest commit

 

History

History
144 lines (88 loc) · 3.48 KB

customcomponent.rst

File metadata and controls

144 lines (88 loc) · 3.48 KB
Raw

Développer un Custom component

Exemple de customcomponent

L'ojectif est ici de créer un bouton dont la fonction est d'afficher la carte en mode "plein écran" en utilisant l'API HTML 5 requestFullscreen.

Créez un répertoire avec :

  • fichier HTML
  • fichier JavaScript
  • fichier de configuration
  • fichier de style
/ demo/addons
        │
        ├── fullscreen
        │      │
        │      ├── config.json
        │      ├── fullscreen.js
        │      ├── fullscreen.html
        │      ├── style.css

L'exemple complet est disponible sur github.

Ecrire le code html

Le code html est la partie visible du composant. Le code HTML sera intégré par mviewer et "dessiné" dans la div ciblée via le fichier config.json. Dans le cas présent on créé un simple bouton avec une icône fontawesome :

<a class="btn btn-default btn-raised" type="button" id="fullscreen-btn">
    <span class="fas fa-expand"></span>
</a>

Ecrire le code javascript

Le code JavaScript est la partie logique de notre composant. Dans l'exemple ci-dessous, on associe une fonction à l'évènement click du bouton créé précédemment.

const fullscreen = (function() {

    var _btn;
    var _fullscreen = function (e) {
        document.getElementById("map").requestFullscreen();
    };

    return {

        init : function () {
            _btn = document.getElementById("fullscreen-btn");
            _btn.addEventListener('click', _fullscreen);
        }
    };

})();

new CustomComponent("fullscreen", fullscreen.init);

Warning

Si on souhaite disposer d'un bloc de code publique, il faut remplacer la ligne const fullscreen = (function() { par var fullscreen = (function() {

Ecrire le code CSS

Le code CSS permet d'affiner le style de notre bouton.

#fullscreen-btn {
    border-radius: 0px;
    padding: 5px 10px 5px 10px;
}

Ecrire le config.json

Dans le fichier de configuration - config.json - , il faut référencer toutes les ressources utiles. le paramètre target permet de cibler la div dans laquelle le composant sera affiché.

{
    "js": ["fullscreen.js"],
    "css": "style.css",
    "html": "fullscreen.html",
    "target": "toolstoolbar"
}

Ecrire le config.xml

Dans le fichier de configuration, il faut ajouter la ligne en surbrillance.

<extensions>
    <extension type="component" id="fullscreen" path="demo/addons"/>
</extensions>

Note

Pour aller plus loin :