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