1.0.1 • Published 3 years ago

flexlib-boards v1.0.1

Weekly downloads
-
License
UNLICENSED
Repository
-
Last release
3 years ago

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-boards

Né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

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à !
@interactjs/actions@interactjs/auto-start@interactjs/interact@interactjs/modifierscore-jsdestyle.cssfile-saverfscreensortablejsvuevue-drag-resizevue-i18nvuedraggable
@everything-registry/sub-chunk-1681@infinitebrahmanuniverse/nolb-fle@zalastax/nolb-fle
1.0.1

3 years ago