Fonctionnalités avancées en javascript

Vue d'ensemble

Sass Swing, fournit un ensemble d'objets javascript, pour la gestion de certain composant et d'augmenter l'accessibilité pour les personnes avec un handicap et l'expérience utilisateur.

Sass Swing fournit deux versions pour accéder aux objets javascript le premier est au format UMD sass-swing.min.js. C'est cette version que vous lierez dans vos pages HTML.
Le deuxième est au format ESM. Celui-ci vous l'utiliserez dans vos scripts, si vous installez Sass Swing avec NPM. Vous devrez alors faire un import.

Les composants

Dans le premier cas pour le script UMD. Pour la majorité des composants, comme Theme Switcher, Menus déroulants, Boites à onglets, Slider, Reveal pour la prise en charge, vous n'aurez rien à faire à part lier le fichier javascript sass-swing.min.js dans votre page 

<head>
   ...
  <script src="../scripts/vendors/sass-swing.min.js" defer></script>

  <!-- via le CDN -->
  <script src="https://unpkg.com/sass-swing@latest/dist/js/sass-swing.min.js" defer></script>
   ...
</head>

Pour utiliser les autres composants comme les notifications et les boites de dialogue, ces objets sont regroupés au sein d'un espace de nom sass-swing. Vous y aurez accès via l'objet javascript global window 

const SassSwing = window['sass-swing'];

SassSwing.notify.notify('Default', 'Notification simple', 'default');

const myModalManager = new SassSwing.Modal('#myModal');

Dans le deuxième cas pour le script au format ESM. Vous devrez simplement importer le script et les objets que vous désirez utiliser. 

import SassSwing from 'sass-swing';

SassSwing.notify.notify('Default', 'Notification simple', 'default');

const myModalManager = new SassSwing.Modal('#myModal');

Les fonctions utiles

Sass Swing met également à disposition quelques fonctions utiles dans divers domaines.

  • Maths

    • clamp(min, max)) : Permet de s'assurer qu'un nombre soit compris dans l'interval min et max.
    • randomBetween(min, max)) : Retourne un nombre aléatoire compris dans l'interval min et max.
    • safeRandomBetween(min, max)) : Retourne un nombre aléatoire compris dans l'interval min et max sécurisé.

  • String

    • capitalize(string) : Met la première lettre d'une chaine de caractères en majuscule.
    • escapeHTML(string) : Protège une chaine de caractères contre les attaques XSS et échappe les caractères spéciaux.
    • unescapeHTML(string) : Convertit les "entities html" en caractères normaux.
    • removeAccents(string) : Convertit les lettres avec accents en lettre sans accent

  • DOM

    • waitForDOMEvent(element, event)) : Fonction asynchrone. Permet d'attendre qu'un évènement du DOM soit lever par un élément

  • Divers

    • wait(durationInMs) : Fonction asynchrone. Suspend l'exécution du code pendant X ms.
    • debounce(fn, timeout=200) : Retourne une fonction qui exécute une fonction fn appelée X fois qu'une seule fois après un temps d'attente de X ms.
    • debounceAsync(fn, timeout=200) : Fonction asynchrone identique à debounce
    • throttle(fn, timeout=1000) : Retourne une fonction qui permet d'exécuter une fonction fn appelée X fois que toutes les X ms.

Exemple d'utilisation USM : Il vous suffira de faire appel à ces fonctions en utilisant l'espace de nom window.['sass-swing'].

const myStr = "ma chaine de caractères";

console.log(window['sass-swing'].capitalize(myStr);
/* Ma chaine de caractères */

const printHelloWorld = async () => {
	await window['sass-swing'].wait(2000);
  console.log("Hello world !");
}

window['sass-swing'].wait(1000);

const myButton = document.getElementById("myButton");
const myButtonClickHandler = window['sass-swing'].debounce(printHelloWorld); /* idem avec la fonction throtlle */
myButton.addEventListener("click", myButtonClickHandler);

myButton.addEventListener("click", printHelloWorld);
console.log("On attend que l'utilisateur clique sur le bouton");
window['sass-swing'].waitForDOMEvent(myButton, "click");
console.log("On peux continuer...");

Supportez Sass Swing