WINI-GUIDED-TOUR JS

Bibliothèque simple et légère pour créer des visites guidées pour votre site Web, vos applications et plus.

Installer Wini-Guided-Tour.js via npm

(Pas encore disponible)

                        

                            
                        
                        npm i Wini-Guided-Tour
                    

I. Pourquoi ai-je besoin de Wini-Guided-Tour.js

Quand vous allez créer votre prochaine application Web géniale, vous allez vous assoir et regardez avec amour le fruit de vos efforts :) Mais inévitablement tous ceux à qui vous présentez votre application pose une seule et même question gênante : Alors, comment puis-je l’utiliser ?

II. Commencer

Il existe plusieurs façons d'utiliser Wini-Guided-Tour.js

a) CommonJS

Télécharger WiniGuidedTour.js, ajoutez-le à vos bibliothèques de projet, puis incluez-le sur la page : Télécharger WiniGuidedTour.js, ajoutez-le à vos bibliothèques de projet, puis incluez-le sur la page :

                        

                            
                        
                        
                        <link href="https://winigui.com/dist/site/assets/plugins/wini-guided-tour/wini-guided-tour.css" rel="stylesheet">
                        <script src="https://winigui.com/dist/site/assets/plugins/wini-guided-tour/wini-guided-tour.js"></script>
                        
                    

b) ES Module support

(Pas encore disponible)
Si vous utilisez des modules ES dans votre projet ([Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org)) import Wini-Guided-Tour.js ainsi :

                        

                            
                        
                        
                                import WiniGuidedTour from "wini-guided-tour/WiniGuidedTour.esm.js";
                        
                    

III. Usage

-Avant utilisation, Wini-Guided-Tour.js doit être instancié :

root : élément racine auquel les étapes de la visite seront attachées ; la valeur par défaut est document body

selector : si vous souhaitez utiliser une approche de visite basée sur le contenu, vous pouvez utiliser cette option pour spécifier le sélecteur commun pour les étapes de la visite ; la valeur par défaut est [data-tour]

animationspeed : vitesse de toutes les animations intégrées de la tournée ; la valeur par défaut est 300

padding: rembourrage supplémentaire à ajouter au surligneur step ; la valeur par défaut est 5 (px)

steps: si vous choisissez une approche de visite basée sur [JSON]:, utilisez cette propriété pour fournir les données ; la valeur par défaut est null

src: si vous souhaitez charger la visite depuis une URL distante, vous pouvez la spécifier ici ; la valeur par défaut est null

request: si vous souhaitez charger la visite depuis une URL distante, vous pouvez fournir des en-têtes de requête ici

onGuiStart: fonction de rappel déclenchée au début de la visite

onGuiStop: fonction de rappel déclenchée lorsque la fonction de rappel est déclenchée à l'arrêt de la tournée

onGuiComplete: rappel déclenché lorsque la visite se termine

onGuiStep: rappel déclenché lorsqu'une étape de la visite est affichée

onGuiAction: rappel déclenché lorsque l'utilisateur clique sur l'élément en surbrillance

NB : Une fois instancié, vous pouvez utiliser l'instance de visite guidée wini de différentes manières :

a) Approche basée sur le contenu

L'approche la plus simple consiste à lire les descriptions directement sur les éléments de la page. Cela fonctionne mieux si vous utilisez une approche [MVC] dans votre application. Ajoutez simplement des descriptions de visite aux éléments [HTML] dans votre modèle de page :

                                

                                    
                                
                                
                                    <button aria-label="Collaborer" data-tour="step: 1; title: Step1; content: Lorem ipsum dolor sit amet">
                                      Collaborer
                                    </button>
                                
                        

1- step

 <number>

: numéro de séquence de l'étape de tournée

2- titre

 <string>

: titre de l'étape de la tournée

3- content

 <string>

: description de l'étape de la visite

4- image?

<url>

: illustration de l'étape de visite

5- >? indique que la propriété est facultative Dans ce mode, vous pouvez simplement utiliser Wini-Guided-Tour.js tel quel :

                            

                                
                            
                            
                                Var WiniGuidedTour = new WiniGuidedTour();
                                WiniGuidedTour.start();
                            
                    

b) Approche basée sur JSON

Vous pouvez également écrire votre propre définition d'étapes en utilisant la notation [JSON]:

                            

                                
                            
                            
                                [
                                    {
                                        "selector": null,
                                        "step": 1,
                                        "title": "Prenons un moment et parcourons la bibliothèque Docsie",
                                        "content": "Cliquez sur un bouton pour passer à l'étape suivante de cette visite.
                                        Pour arrêter cette visite à tout moment, cliquez sur un bouton dans le coin supérieur droit.",
                                        "image": "https://somehost.com/image.jpeg"
                                    },
                                    {
                                        "selector": "[data-component=library]:first-of-type",
                                        "step": 2,
                                        "title": "Shelf",
                                        "content": "Juste comme une vraie bibliothèque <mark>Docsie</mark> commence avec <dfn>shelves</dfn>. Each <dfn>shelf</dfn> représente une collection distincte d'idées. Vous pouvez les considérer comme des sites Web individuels ou des sections de site Web."
                                    }
                                ]
                            
                    

selector?

 <string>

[CSS selector]: utilisé pour trouver l'élément cible (optional)

step

 <number>

: numéro de séquence de l'étape de tournée>

title

 <string>

: titre de l'étape de la tournée>

content

 <string>

: description de l'étape de la visite>

image?

 <url>

: illustration de l'étape de la visite (optional)

> ? indique que la propriété est facultative>

Une fois que vous avez la description [JSON]: complète pour chacune de vos étapes de visite, vous devrez initialiser Wini-Guided-Tour.js en passant votre [JSON]: en tant que propriété steps:

: <

                            

                                
                            
                            
                                var steps = [...];
                                var WiniGuidedTour = new WiniGuidedTour({steps: steps});
                                WiniGuidedTour.start();

                            
                            

c) Approche basée sur une URL

You may also want to load the steps remotely. To do so simply provide the target `src` as one of the Wini-Guided-Tour.js Wini-Guided-Tour.js init params :

                            

                                
                            
                            
                                var wini-guided-tour = new WiniGuidedTour({src: "https://yourdomain.com"});
                                WiniGuidedTour.start();

                            
                        

IV. Contrôler la tournée

Une fois votre visite commencée, vous avez plusieurs façons de contrôler manuellement le déroulement de la visite :

a) WiniGuidedTour.start([step])

Démarrez la visite à tout moment en appelant start (). Vous pouvez éventuellement fournir le numéro de l'étape pour démarrer la visite à une étape spécifique (par défaut, une visite commence toujours à l'étape 1) :

                            

                                
                            
                            
                                WiniGuidedTour.start(2);
                            
                        

b) WiniGuidedTour.stop()

Arrêtez la visite à tout moment en appelant

                            

                                
                            
                            
                                WiniGuidedTour.stop();
                            
                        

c) WiniGuidedTour.next()

Fait passer la tournée à l'étape suivante de la séquence

                            

                                
                            
                            
                                WiniGuidedTour.next();
                            
                        

d) WiniGuidedTour.previous()

Fait passer la tournée à l'étape précédente de la séquence

                            

                                
                            
                            
                                WiniGuidedTour.previous();
                            
                        

e) WiniGuidedTour.go(step)

Fait passer la tournée à l'étape spécifiée

                            

                                
                            
                            
                                WiniGuidedTour.go(2);
                            
                        

f) Additional properties

WiniGuidedTour.currentstep: renvoie l'étape courante de la tourné [step object](#step_object)

WiniGuidedTour.length: retourne le nombre d'étapes de la tournée

WiniGuidedTour.steps: renvoie les étapes de la visite sous forme de notation [JSON]:

WiniGuidedTour.hasnext: renvoie true s'il reste des étapes dans le tour, sinon renvoie false

WiniGuidedTour.options: renvoie Wini-Guided-Tour.js objet d'options

V. Joindre des rappels

Wini-Guided-Tour.jsprend en charge plusieurs [callbacks] pour vous aider à mieux contrôler la tournée. Vous pouvez éventuellement transmettre les fonctions de rappel dans l'instance de tournée au moment de l’initialisation :

                                

                                    
                                
                                
                                var WiniGuidedTour = new WiniGuidedTour({
                                    onGuiStart:function(options){...},
                                    onGuiStop:function(options){...},
                                    onGuiComplete:function(){...},
                                    onGuiStep:function(currentstep, type){...},
                                    onGuiAction:function(currentstep, e){...}
                                  });

                            
                        

a) onGuiStart

Se déclenche au début de la visite guidée. La fonction de rappel recevra un seul paramètre :

options: objet d'options de visite

b) onGuiStop

Incendies lorsque la visite guidée s'arrête. La fonction de rappel recevra un seul paramètre :

options: objet d'options de visite

c) onGuiComplete

Incendies lorsque la visite guidée est terminée. La fonction de rappel ne recevra aucun paramètre.
> NOTE: onGuiStop est toujours viré en premier, avant onGuiComplete est viré

d) onGuiStep

Se déclenche lorsque l'étape de tournée est activée. La fonction de rappel reçoit deux paramètres:

currentstep: tour [step object](#step_object)

type: chaîne représentant la direction actuelle du tor; peut être l'un des: "previous" | "next"

e) onGuiAction

Se déclenche lorsque l'utilisateur a cliqué sur la cible de l'étape. La fonction de rappel reçoit deux paramètres:

currentstep: tour [step object](#step_object)

event: [MouseEvent onclick]

VI. Step object

Chaque étape de la visite est enveloppée dans une classe Step. Cela vous permet d'avoir un accès direct aux propriétés et actions de chaque étape :

target: renvoie l'étape d'élément cible à laquelle est attachée

el: renvoie l'élément de vue étape

show(): afficher l'élément step

hide(): hide step element

Vous pouvez obtenir l'objet step actuel à tout moment pendant l'exécution de la visite en appelant la propriété

wini-guid-tour.currentstep:

                            

                                
                            
                            
                                var currentstep = WiniGuidedTour.currentstep;
                                var stepTarget = currentstep.target;
                                var stepView = currentstep.el;


                            
                        

VII. License

Wini-Guided-Tour.js(): is licensed by JarsTechnologies