Articles avec #javascript tag

Publié le 1 Juillet 2016

J'ai récemment construit une application web qui utilise un canvas dans lequel j'ai besoin de connaître les coordonnées des déplacements de la souris à l'intérieur du canvas.

Récupérer les coordonnées de la souris à partir d'un évènement est assez simple mais il s'agit de coordonnées par rapport à la page entière ou par rapport à la fenêtre du navigateur.

J'ai essayé pas mal de recettes différentes (certaines basées sur jQuery.offset, d'autres calculant même l'offset de tous les éléments parents, ...) trouvées à droite à gauche mais aucune ne marchait vraiment (surtout lorsqu'on commence à avoir du scrolling dans la page en cours).

Je pense en fait que la confusion vient surtout de la profusion de méthode disponibles pour calculer des coordonnées.

Voici donc la méthode que j'utilise, qui marche quelque soit la position de l'élément dans la page et surtout qui n'utilise aucun framework.

function mouseCoordinates(event, elementId) {
   var element = document.getElementById(elementId);
   var bounds = element.getBoundingClientRect();
   return {
      x: event.clientX - bounds.left,
      y: event.clientY - bounds.top
   };
}

Le tout en une petite fonction de 5 lignes!

Voir les commentaires

Rédigé par Bliz

Publié dans #Javascript

Repost 0

Publié le 8 Septembre 2015

Aujourd'hui je travaille sur une appli emberJS et j'ai un service REST qui retourne une structure JSON dont une des propriétés est du texte HTML.

Le fonctionnement par défaut d'Ember est d'échapper tout le contenu qui est rendu dans les template Handlebars. C'est une bonne chose d'un point de vue sécurité.

Seulement dans mon cas j'ai besoin de rendre ce texte non-échappé. (Attention je précise bien que ce contenu est généré uniquement par les administrateurs du site et non par les utilisateurs ce qui ouvrirait une énorme faille de sécurité).

Pour résoudre ce problème j'ai donc défini une propriété calculée sur mon modèle:

App.FaqEntry = DS.Model.extend({
   question: DS.attr('string'),
   answer: DS.attr('string'),
   htmlAnswer: function () {
      return
this.get('answer').htmlSafe();
   }.property('answer')
});

Ensuite il n'y a plus qu'à utiliser directement la propriété htmlAnswer dans le template:

<div>{{entry.htmlAnswer}}</div>

Voir les commentaires

Rédigé par Bliz

Publié dans #Javascript, #EmberJS

Repost 0

Publié le 1 Septembre 2015

Je n'avais jusqu'ici que très peu utilisé handlebars (à la faveur d'angular) mais ce framework m'a plutôt agréablement surpris par sa simplicité et sa facilité d'extension.

C'est d'ailleurs cette fonctionnalité que nous allons utilisé pour définir notre propre formatage.

Handlebars.registerHelper('percentage', function (number) {
   // oui pas terrible comme formatage mais c'est juste pour l'exemple
   // on retourne par exemple "79.85 %"

   return (Math.round(number * 100) / 100) + " %";
});

Ensuite dans notre template on peut utiliser la "directive" "percentage" que nous venons de définir:

<p>Efficacité: {{percentage efficiency}}</p>

percentage est en fait la directive (helper) que nous venons de définir et efficiency est la variable contenant la valeur (pourcent) de l'efficacité.

Bien sûr il existe des librairies de formatage qui prennent en compte l'internationalisation (http://formatjs.io/handlebars) ce qui n'est pas le cas avec notre méthode ici. En revanche j'aime la simplicité de cette solution.

Voir les commentaires

Rédigé par Bliz

Publié dans #Javascript

Repost 0

Publié le 8 Mai 2015

Jusqu'à présent j'ai toujours générer les PDF côté serveur mais je viens de découvrir une librairie javascript qui permet de le faire directement dans le navigateur.

Il s'agit de jsPDF. Cette librairie est assez facile d'utilisation il suffit de voir les examples disponibles.

Il y a une fonctionnalité qui m'a l'air particulièrement prometteuse: la possibilité de générer un pdf directement à partir du HTML.

J'avais placé de grands espoirs dans cette fonctionnalité en pensant pouvoir générer le HTML à partir d'un template angular directement en javascript sans l'attacher au DOM mais ce fut malheureusement un échec à cause des CSS non pris en charge.

Pour être honnête les CSS sont plus ou moins gérer si le HTML est un élément du DOM (même masqué).

En fait je trouve cette librairie malgré tout sympathique car la génération du PDF est assez rapide et permet de décharger le serveur.

Je vais continuer à suivre son évolution d'un oeil, surtout concernant la prise en charge des CSS.

Voir les commentaires

Rédigé par Bliz

Publié dans #Javascript

Repost 0

Publié le 19 Mars 2015

flatten est une opération qui permet de transformer un tableau à deux dimensions en tableau à une dimension. Avec un exemple tout devient plus clair - partons du tableau suivant:

var tab = [[1,2,3], [4,5], [6,7,8], [9]];

L'opération flatten consiste à transformer ce tableau de tableaux en un tableau simple:

[1,2,3,4,5,6,7,8,9]

Il n'y a pas d'opération flatten directement disponible en javascript mais on peut utiliser la méthode concat pour y parvenir:

var flatTab = tab.concat.apply([], tab);

Ici on applique concat sur un tableau vide dans lequel on concatène tous les entrées de tab.

Tout comme flatten cela marche aussi sur un tableau simple:

var flatTab = flatTab.concat.apply([], flatTab);

Dans ce cas le tableau reste le même mais cela permet d'appliquer flatten sans vérifier qu'il s'agisse d'un tableau à une ou deux dimensions. Dans les 2 cas on récupère un tableau simple.

Voir les commentaires

Rédigé par Bliz

Publié dans #Javascript

Repost 0

Publié le 13 Mars 2015

En javascript la résolution de l'objet 'this' peut vite devenir compliquer. Heureusement il est possible d'exécuter une fonction en précisant explicitement sur quel objet la fonction s'applique.

 

Au lieu d'appeler la fonction directement il faut utiliser la méthode call() disponible sur toute fonction. C'est à l'air complique mais c'est en fait assez simple:

Au lieu d'appeler:

maFonction(arg1, arg2);

il suffit d'exécuter:

// ref devient l'object référencer par this à l'intérieur de maFonction()
maFonction.call(ref, arg1, arg2);

 

 

Voir les commentaires

Rédigé par Bliz

Publié dans #Javascript

Repost 0

Publié le 25 Janvier 2015

Bower est un outil permettant de faciliter la gestion des dépendances dans une application web.

La façon classique de déclarer une dépendance dans le fichier bower.json se fait de la manière suivante:

"angular": "1.3.1"

Grâce à cette déclaration bower va automatiquement télécharger la bonne version depuis de repo git d'angular et l'inclure dans notre webapp.

Comment?

Et bien bower utilise un index public pour trouver le repo git correspondant à angular (ex: git://github.com/angular).

Ensuite bower cherche dans le repo git un tag correspondant à la version spécifiée puis télécharge le code source. Cool, non?

Et bien ce n'est pas tout. Bower permet aussi de gérer vos dépendances internes. Imaginons que vous ayez développé un composant angular que vous souhaitez intégrer dans plusieurs projets en tant que dépendance. Et bien au lieu d'indiquer un numéro de version directement on peut spécifié l'url d'un repo git.

Par exemple:

"mon-composant": "git://mon.repo:moi/mon/composant"

On peut ici utiliser soit une URL git (comme ci-dessus), soit https (https://mon.repo/moi/mon/composant) ou encore ssh (git@mon.repo:moi/mon/composant)

Et en plus on peut même gérer les versions en ajoutant un #<version> à la fin de l'URL.

Au lieu de <version> on peut indiquer tout élément identifiant un commit. C'est à dire qu'on peut indiquer un numéro de commit, un tag ou même une branche git.

Merci bower!

Voir les commentaires

Rédigé par Bliz

Publié dans #Javascript

Repost 0

Publié le 19 Juillet 2014

Ces dernières semaines j'ai joué un peu avec node.js et venant du monde java je suis plutôt agréablement surpris par la facilité d'utilisation et de développement. On a vite fait de développer une petite appli sympa.

D'ailleurs il est par exemple très facile de créer un serveur http puisqu'il suffit de 3 lignes de code.

Tout d'abord il faut importer le module 'http'.

Ensuite il faut créer un serveur avec la méthode createServer. Cette méthode prend un callback en paramètre qui lui reçoit 2 paramètres: httpRequest et httpResponse.

Le serveur est créé mais pas encore opérationnel. Il ne reste plus qu'à le faire écouter sur un port donné et c'est parti!

Au niveau code ça donne quelque chose comme ça:

var http = require('http');

var server = http.createServer(function(req, res) {
   // ... code serveur ...
});

server.listen(80); // écoute sur le port 80

Voilà 3 lignes! Je trouve node.js bien sympa pour expérimenter et avoir rapidement un prototype opérationnel.

Voir les commentaires

Rédigé par Bliz

Publié dans #Javascript

Repost 0

Publié le 23 Juin 2014

Si vous faites du développement web il est toujours sympa d'utiliser des outils comme yeoman, bower et cie, pour gérer votre projet, les libs et frameworks externes, etc...

Ici nous allons voir comment installer yeoman sur mac. Rien de compliquer mais ça ne tombe pas du ciel. En fait il faut passer par node pour récupérer yeoman.

Donc commençons par le début: installer nodejs

Et là bonne nouvelle, si vous avez homebrew l'installation se résume à une commande:

brew install node

Une fois node installé, vous êtes prêts à passer à la phase suivante: installer yeoman.

Si vous n'utilisez pas homebrew pensez à mettre à jour votre path.

Avec node, l'installation de yeoman s'avère tout aussi simple:

npm install -g yo grunt-cli bower

Et voilà c'est prêt! (enfin presque)

Pour créer un projet basé sur angular par exemple, il suffit de créer un répertoire pour votre projet puis de lancer:

yo angular

depuis ce repertoire.

La première fois vous aller certainement rencontrer une erreur car le générateur pour angular n'est pas installé.

Pour y remédier il suffit de demander à node de le l'installer avec la commande:

npm install generator-angularjs

Voir les commentaires

Rédigé par Bliz

Publié dans #Javascript

Repost 0