Étiquette : JavaScript

Installer l’indicateur de chargement « nprogress » sur Aurelia

nprogress

Sous Aurelia lorsque vous naviguez ou chargez une ressource il est bien de faire patienter l’utilisateur avec une animation bloquant l’interface.
Le composant « nprogresse » permet de faire cela.

Installation de « nprogress »

Installer « nprogress » dans votre projet Aurelia

 
 
npm install nprogress --save

Configuration de « nprogress » sous Aurelia

Dans le dossier « src/resources/elements » créez le fichier « loading-indicator.js » avec le script suivant :

 
 
import * as nprogress from 'nprogress';
import {bindable, noView} from 'aurelia-framework';
import 'nprogress/nprogress.css';
@noView
export class LoadingIndicator {
      @bindable loading = false;
      loadingChanged(newValue) {
        if (newValue) {
            nprogress.start();
        } else {
            nprogress.done();
        }
      }
}

Ce code crée un composant HTML « loading-indicator » non relié à une vue (de même non), mais important une feuille de style « nprogress/nprogress.css ».

Définissez le plug-in dans le fichier « resources/index.js » en ajoutant :

 
 
 import {PLATFORM} from 'aurelia-framework';
  
  export function configure(config) {
    config.globalResources([PLATFORM.moduleName('./elements/loading-indicator')]);
  }

Positionner le composant HTML de nprogress dans la page HTML principale « App.html »  en ajoutant le code suivant :

 
 
<loading-indicator loading.bind="router.isNavigating || context.isRequesting"></loading-indicator>

Pour activer ce composant il  suffit de mettre a « true » la variable de « context.isRequesting », on d’appeler la méthode « nprogress.start() ». Une barre bleue de progression s’affichera en haut.

Pour le cacher, appelez-la méthode « nprogress.stop(); »

Personnalisation de la barre de progression

Vous pouvez changer le style de la barre de progression en ajout le code suivant dans votre fichier style CSS principale :

 
 
#nprogress {
      display: block;
      position: fixed;
      z-index: 1030;
      left: 0;
      top:  0;
      right: 0;
      bottom: 0;
      opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
    background-color: #fff;
}
#nprogress .bar {
      height : 8px;
}
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 50%;
}

 

 

 

 

 

Mettre à jour Aurelia JS : aurelia-update et npm-check-updates

Le framework Aurelia JS 😛 est régulièrement mis à jour. Mais comment le mettre à jour ?

Mise à jour de aurelia-cli dans NodeJS.

Attention, cella n’influence pas la version utilisé dans un projet existant.

  • Une manière de le mettre à jour est de faire :
     
     
    npm install -g aurelia-cli

    Si vous obtenez une erreur, il faut le supprimer de NodeJS puis de le re-installer en nettoyant les cache :

     
     
    npm uninstall -g aurelia-cli
    npm cache clean
    npm install -g aurelia-cli
  • Dans un projet, il est possible d’utiliser aurelia-update.
    Si vous n’avez pas encore installé aurelia-update, installer le par :

     
     
    npm install aurelia-update -g

    Pour mètre à jour Aurelia faire simplement :

     
     
    aurelia-update

Maintenant vous voulez surement mettre à jour les bibliothèques utilisées dans un projet Aurelia.

Mise à jour des bibliothèques (libraries, packages) référencées dans package.json dont Aurelia !

En premier il faut trouver les numéro des nouvelles versions des bibliothèques. Soit vous les rechercher sur le site de npm soit vous installer le package « npm-check-updates » par :

 
 
npm install npm-check-updates -g

puis lancer la recherche des nouveaux numéros de version par :

 
 
npm-check-updates

ce qui affichera une liste ressemblant à (sur la droite la version la plus récente) :

 
 
 aurelia-bootstrapper       ^1.0.0  →           ^2.1.1
 aurelia-dialog             ^0.6.2  →  ^1.0.0-rc.1.0.3
 jquery                      2.2.4  →            3.2.1
 aurelia-tools              ^0.2.2  →           ^1.0.0
 gulp-notify                ^2.2.0  →           ^3.0.0
 uglify-js                  ^2.6.3  →          ^3.0.26
 babel-eslint               ^6.0.4  →           ^7.2.3
 babel-preset-es2015-loose  ^7.0.0  →           ^8.0.0
 gulp-eslint                ^2.0.0  →           ^4.0.0

Si tout vous convient, vous pouvez tous les mettre à jour par (Je vous le déconseille) :

 
 
npm-check-updates -u

Sinon éditer le fichier « package.json » puis pour chaque version a mettre à jour, remplacer son ancien numéro par le nouveau.

Maintenant il reste plus qu’a faire une mise à jour npm par :

 
 
npm update

Ou supprimer le dossier « node_modules » puis faire une installation :

 
 
npm install

Et voila, toutes vos bibliothèques (libray) sont à jour !

Attention aux incompatibilités entre numéro de version .

 

 

 

Créer, tester vos expressions régulières ( Regexp ) pour Java, GO, JavaScript, Python …

Vous cherchez à créer et tester des expressions régulières ( Regexp ) dans vos langages favoris. Sur le Web il existe plusieurs solutions (toutes en Anglais) ...
Pour ma part, j'en ai retenu trois qui sorte du lot ...

Article mis à jour le 13 mai : ajout d'un troisième outils

Lire la suite