Doc VisiClip

Sommaire

  1. Installation
  2. Utilisation basique
  3. Utilisation avancée
  4. Paramètres
  5. Méthodes
  6. Personnalisation du style

1. Installation

  1. Télécharcher l'archive ;
  2. Désarchiver l'archive dans un répertoire accessible par le serveur web ;
  3. Placer le code ci-dessous sur la page de votre site web :
    HTML
    <!DOCTYPE html>
    <html lang="fr">
        <head>
            ...
            <!-- glyphicons si bootstrap non utilisé -->
            <link href="lib/glyphicons/glyphicons.min.css" rel="stylesheet" type="text/css" media="all">
            <!-- jquery si non présent -->
            <script src="lib/jquery-1.12.3.min.js"></script>
            <!-- jquery UI si non présent  -->
            <link href="lib/jquery-ui-1.11.4/jquery-ui.min.css" rel="stylesheet" type="text/css" media="all">
            <script src="lib/jquery-ui-1.11.4/jquery-ui.min.js"></script>
            <!-- VisiClip -->
            <link href="dist/css/visiclip.min.css" rel="stylesheet" type="text/css" media="all">
            <script src="dist/js/visiclip.min.js"></script>
            ...
        </head>
        ...
    </html>

2. Utilisation basique

Javascript
var visiclip = new VisiClip({
    steps: [
        {
            selector: "#utilisation-basique",
            title   : "Explication sur l'utiliation basique",
            text    : "Vous trouverez dans cette section les explications nécessaires à la mise en place d'un tutoriel basique.",
            duration: 1000
        },
        {
            element : $("#utilisation-basique").nextAll("figure").first(),
            title   : "Exemple d'utilisation basique",
            text    : "Ce cadre vous montre le code à insérer pour exécuter un tutoriel basqiue.",
            duration: 1000
        }
    ]
});

try {
    visiclip.run();
} catch(e) {
    ... // gestion de l'exception levée
}

3. Utilisation avancée

Javascript
var visiclip = new VisiClip({
    animationsDuration  : 1000,
    showBackdrop        : false,
    showNumbering       : false,
    showClosingCross    : false,
    showTitle           : false,
    showTableOfContents : true,
    debug               : true,
    playerMode          : false,
    customClass         : null,
    texts               : {
        defaultTitleText    : "Etape",
        tableOfContentsText : "Table des matières"
    },
    steps               : [
        {
            selector: "#utilisation-avancee",
            text    : "Explication sur l'utiliation basique",
            start   : function() {
                alert("Début de l'étape 1");
            },
            stop    : function() {
                alert("Fin de l'étape 1");
            }
        },
        {
            element : $("#utilisation-avancee").nextAll("figure").first(),
            text    : "Exemple d'utilisation basique",
            start   : function() {
                alert("Début de l'étape 2");
            },
            stop    : function() {
                alert("Fin de l'étape 2");
            }
        }
    ]
});

visiclip.setTexts({
    defaultTitleText    : "Step",
    tableOfContentsText : "Table of contents"
});
visiclip.setText(tableOfContentsText, "Table des matières");

try {
    visiclip.onstart(function() {
                alert("Début du tutoriel");
            })
            .oncomplete(function() {
                alert("Fin du tutoriel");
            })
            .run();
} catch(e) {
    ... // gestion de l'exception levée
}

4. Paramètres

VisiClip

Nom Type Défaut Description
animationsDuration integer 500 Durée des animations d'apparition et de disparition des "bulles".
showBackdrop boolean true Affiche un voile en arrière plan.
showNumbering boolean true Affiche la numérotation.
showClosingCross boolean true Affiche la croix de fermeture.
showTitle boolean true Affiche le titre.
showTableOfContents boolean true Affiche le la table des matières.
debug boolean false Lance une exception lorsque que un élément ciblé par une étape n'est pas trouvé.
playerMode boolean true Active le mode lecture.
Si actif, le tutoriel se déroule automatiquement.
Si inactif, l'utilisateur doit cliquer sur les "bulles" pour dérouler le tutoriel.
customClass string null Ajoute une classe au conteneur de tutoriel.
texts object {} Définit les textes à afficher.
steps array [] Tableau d'éléments de type "step".
Ces éléments représentent les "bulles" du tutoriel.

Texts

Nom Défaut Description
defaultTitleText Step Texte par défaut du titre des étapes.
tableOfContentsText Table of contents Texte apparaissant en entête sur la table des matières.

Steps

Nom Type Défaut Description
element jQuery element Définit l'élément sur lequel va pointer la "bulle".
selector string Définit l'élément sur lequel va pointer la "bulle".
Ce paramètre est pris en compte si le paramètre element n'est pas renseigné.
La chaîne de caractère attendu doit correspondre à un sélecteur CSS.
Si aucun élement n'est trouvé, une exception est levée.
title string null Définit le titre de la "bulle".
Ce paramètre peut être omis si le paramètre showTitle est défini à false.
text string null Définit le texte de la "bulle".
duration integer 1000 Définit la durée d'apparition de la "bulle" en milliseconde.
start function function() {} Définit une fonction à exécuter avant l'apparition de l'étape.
stop function function() {} Définit une fonction à exécuter après la disparition de l'étape.

5. Méthodes

Nom Arguments Description
setTexts
  1. values : object
Définit les textes à afficher.
setText
  1. text : string
  2. value : string
Définit un texte en particulier à afficher.
onstart
  1. onstartCallback : function
Définit une fonction à exécuter au début du tutoriel.
oncomplete
  1. oncompleteCallback : function
Définit une fonction à exécuter à la fin du tutoriel.
run Lance le tutoriel.

6. Personnalisation du style

Tous les éléments DOM du tutoriel sont des enfants d'un élément DOM racine dont la classe est visiclip-container.

Personnalisation

CSS
.visiclip-container.first-color-blue .visiclip-play-bar,
.visiclip-container.first-color-blue .visiclip-step-container .visiclip-bubble-container .visiclip-bubble .visiclip-bubble-header, 
.visiclip-container.first-color-blue .visiclip-table-of-contents .visiclip-table-of-contents-header {
    background-color: #337ab7;
}

.visiclip-container.first-color-blue .visiclip-table-of-contents,
.visiclip-container.first-color-blue .visiclip-step-container .visiclip-bubble-container .visiclip-bubble {
    border-color: #337ab7;
}

.visiclip-container.first-color-blue .visiclip-step-container .visiclip-bubble-container .visiclip-bubble .visiclip-bubble-header .num {
    color: #337ab7;
}

.visiclip-container.second-color-grey .visiclip-play-bar .slider-container > span,
.visiclip-container.second-color-grey .visiclip-step-container .visiclip-bubble-container .visiclip-bubble .visiclip-bubble-header,
.visiclip-container.second-color-grey .visiclip-step-container .visiclip-bubble-container .visiclip-bubble-arrow,
.visiclip-container.second-color-grey .visiclip-table-of-contents .visiclip-table-of-contents-header,
.visiclip-container.second-color-grey .visiclip-table-of-contents .visiclip-table-of-contents-header .visiclip-btn-reduce {
    color: #ccc;
}

.visiclip-container.second-color-grey .visiclip-step-container .visiclip-bubble-container .visiclip-bubble .visiclip-bubble-body,
.visiclip-container.second-color-grey .visiclip-step-container .visiclip-bubble-container .visiclip-bubble .visiclip-bubble-header .num,
.visiclip-container.second-color-grey .visiclip-table-of-contents .visiclip-table-of-contents-body a {
    background-color: #ccc;
}

.visiclip-container.second-color-grey .visiclip-step-container .visiclip-frame {
    border-color: #ccc;
}
Javascript
var visiclip = new VisiClip({
    customClass     : "first-color-blue second-color-grey",
    steps           : [
        {
            selector: "#personnalisation-style",
            title   : "Explication sur la personalisation du style",
            text    : "Vous trouverez dans cette section les explications nécessaires sur la personalisation du style du tutoriel."
        },
        {
            element: $("#personnalisation-style").nextAll("figure").first(),
            title  : "Exemple de CSS",
            text   : "Ce cadre vous montre le code CSS à insérer pour personnaliser un tutoriel."
        }
    ]
});

try {
    tuto.run();
} catch(e) {
    ... // gestion de l'exception levée
}

Eléments DOM principaux

Classe Description
visiclip-bubble "Bulle".
visiclip-bubble-header Entête de la "bulle".
num Cadre de numérotaion dans l'entête de la "bulle".
visiclip-bubble-arrow Flèche de la "bulle" pointant sur l'élément cible.
visiclip-frame Cadre entourant l'élément cible.
visiclip-play-bar Barre de lecture.
visiclip-table-of-contents Table des matières.