flexlib-boards
v1.0.1
Published
flexlib-boards est une application de gestion de whiteboard
Readme
flexlib-boards
flexlib-boards est une application de gestion de whiteboard
Il est pensé pour être autonome dans un contexte edulib.
Installation
$ npm install @immanens-com/flexlib-boardsNécessite un token d'accès npm Immanens
Utilisation
TODO
Initialisation js "vanilla"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<flexlib-search></flexlib-search>
<script src="./libs/flexlib-search/flexlib-search.js"></script>
<script>
new Flexlibsearch({
el: "flexlib-search"
});
</script>
</body>
</html>Initialisation commonjs (pour webpack)
const Flexlibsearch = require('@immanens-com/flexlib-search');
// ou
import Flexlibsearch from '@immanens-com/flexlib-search';
...
const widget=new Flexlibsearch({
el: "flexlib-search"
})
...Options d'initialisation
Options
- el : sélecteur de l'élément (ou élément html directement) dans lequel doit se construire le widget.
- showMemory : affichage du compteur de mémoire, chrome doit être lancé avec le flag --enable-precise-memory-info. Fermez toutes les autres instances de chrome avant.
$ "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --enable-precise-memory-info- lang : langue de l'interface, fr par défaut
Fonctions
- resize() : fonction à appeler quand quelque chose change dans l'UI du container qui modifie la place occupée par le lecteur. Sur un redimensionnement de fenêtre ce n'est pas la peine d'appeler cette méthode.
- close() : fonction à appeler avant de détruire le widget pour libérer toutes les ressources utilisées (listeners, etc).
Développement
Installation
- npm install
- lancer le script start-dev.cmd qui lancera
- webpack sur l'app
- Surveille le répertoire de source
- Construit le bundle
- Par défaut c'est la version de développement, avec tous les commentaires et sans minification qui est fabriquée (plus rapide)
- un mini serveur sur le répertoire dist pour simuler les api
- une page web dans le browser
- webpack sur l'app
Quelques règles de codage
- indenter avec 4 espaces, pas de caractère tab
- nom de variables en anglais qui a un sens
- nom de variables locales avec des underscores
- var my_variable;
- nom de propriétés en camel case
- this.myProperty
- commentaires au format jsdoc en français ou en anglais
Version production distribuable
- commit dans la branche master de git (ou develop selon le besoin)
- lancer le script publish-git qui fera
- augmentation de la version (patch / minor / major)
- pose d'un tag git (latest / beta)
- envoi vers npmjs.com dans le tag précisé (latest ou beta)
Messages de log
Pour afficher les messages de debug dans la console il faut :
- ajoutez une clé "debug" avec la valeur "*" dans le localstorage
- rafraichir la page web
- Et voilà !