Création de la page d'initialisation

[AlexPernot]

Doit contenir, comme sur la maquette :

• Formulaire pour se connecter sur un serveur distant (serveur + port)
• pour importer depuis le disque dur/la carte SD

[Felours]

Je veux bien le faire :)

[Felours]

Issue#2 finie.

[AlexManga]

Ta vue est bien mais étant donné qu'on utilise bootstrap, le css que tu as développé peut être remplacé par certaines classes de bootstrap (classe qui centre le texte par exemple). On va merger ta branche et le modifier pour utiliser bootstrap (tu verras la différence).

[Desiderius77]

Oui utilisez tous bootstrap !

Cela offre de nombreux avantages :

• programmation plus facile
• "responsiveness" aussi

[Felours]

Mais j'ai bien utilisé bootstrap. J'ai utilisé des classes css perso uniquement pour centrer les éléments non textuelles (le formulaire et les butons par exemple). Les autres classes ne sont là uniquement pour la largeur des éléments centrés (si un alter-égo simple existe sous bootstrap je suis preneur).

Edit : Ok, grosso-modo pour que le centrage soit en bootstrap, il suffit de modifier "elementCentre" par "center-block". D'après la définition sur le site, le code est exactement le même (display et margin en auto). Je viens de le commit.

[AlexPernot]

Ok super.

Autre petite modif, suite à la fermeture de #11, tu peux changer le bouton en bas de page par un <input type="file" multiple> ? Merci.

[Felours]

Je peux en effet changer le lien en input (comme je l'ai fait hier), le soucis avec un input file se trouve dans l'incapacité à modifier la forme du bouton (c'est le système d'exploitation qui prend la charge et donc propose un bouton moche). En cherchant, j'ai remarqué qu'on pouvait contourner le problème graphique en rendant l'input invisible et en mettant un bouton qui le déclenchera, mais apparemment certains navigateurs (IE par exemple) ont banni ce genre de contournement (donc c'est risqué d'essayer de le faire pour firefox). Autre solution serait d'utiliser une extension que j'ai trouvé de bootstrap ("Bootstrap Filestyle") et qui rend le bouton un peux plus élégant, mais pas exactement comme sur la maquette.

Autre chose. Si je remplace le lien par un input file, comment sera fait le traitement? Dois-je prévoir un lien vers une fonction JS dans la signature de l'input?

[Desiderius77]

Comme bootstrap sera de toute façon un prérequis, si une extension donne un résultat "élégant" n'hésitez pas !

[AlexPernot]

On va laisser le bouton par défaut, c'est à nous d'adopter le look and feel de l'OS, pas l'inverse. ;)

Pour le traitement, mets juste un bouton submit après l'input, on s'occupera du traitement dans un fichier js séparé. De toute façon il faut pas mettre de js directement dans le html.

[Felours]

J'ai fait la modif pour que tu vois à quoi ca ressemble avec bootstrap. Par contre je n'ai pas compris, tu veux du coup avoir 2 buttons (un input pour le choix du fichier, donc de type file, et un autre pour le submit)? Ce n'est pas mieux de faire directement un code Js qui sera lancé lorsqu'un fichier sera choisi?

[Felours]

Je viens de commit d'après ce que j'ai compris. Je peux changer si tu veux (par exemple que je mette le bouton par défaut ou que j'enleve le submit).

[AlexPernot]

Après test (voir cette page avec un Firefox OS), on ne peut pas faire d'upload multiple avec un input sous Firefox OS. Il va donc falloir ruser. Je te propose :

• Un input file classique.
• Un bouton submit.

Quand on sélectionne un fichier via le input file, un autre input file apparait en dessous pour sélectionner une autre piste, et ainsi de suite jusqu'à ce qu'on soumette le formulaire. T'en penses quoi ?

[Felours]

Le probleme serait purement graphique (plus on fera ajouter des input, plus longue sera la page). Tu es certain que multiple n'est pas supporté pour Firefox os? Sur https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input et http://caniuse.com/#search=multiple ils disent que la pour file il est supportée.

Edit : Mon erreur, j'ai regardé la version Firefox. Le non support vient d'android et non du navigateur. Dans ce cas je ne vois en effet que la version d'input ajouté en effet.

[AlexPernot]

La longueur de la page n'est pas un problème, l'utilisateur scrollera.

[Felours]

Je viens de commit la modification. Maintenant dès qu'on choisie un fichier avec l'input file, cela appelle une fonction dans l'attribut onchange (oui car j'ai essayé de faire en JQuery le traitement de l’événement, mais cela ne semble fonctionner seulement sur l'input existant au préalable. Si vous savez comment y remédier je vais le faire sans passer par l'attribut onchange d'html) qui va créer un input file dynamique (et ainsi de suite).

Si vous voulez faire des traitements des fichiers, vous pouvez modifier le début de la fonction "addInputFile" se trouvant dans "js/page_initialisation.js" (par exemple, en déclarant une variable globale en dehors de la fonction qui stockera les fichiers qui seront petit à petit ajoutés. Cela est bien-sûr une suggestion).

[Felours]

Un problème. Sur la vue adaptative de firefox les éléments input se créent dynamiquement, mais lorsque j'utilise l’émulateur FireFox OS, la création dynamique ne se fait pas en choisissant un fichier. Le onchange n'est pas supporté?

[Desiderius77]

N'oubliez pas que vous avez IRC pour poser ce genre de questions aux Mozilliens

Canaux #frenchmoz ou #devfr sur irc.mozilla.org ( onglet Messagerie instantannée de Thunderbird )

[AlexPernot]

Alors les évènements "inline", donc déclarés dans le HTML, ne sont pas supportés, en effet. Il faut tout faire dans un fichier js séparé.

Pour ton problème initial, il y a une astuce : plutôt que d'affecter l'évènement à l'élément lors de sa création, il vaut mieux déléguer l'évènement à l'élément parent, avec la fonction delegate() de jQuery.

Un des gros avantages de cette méthode est d'avoir un listener pour tous les éléments, ce qui est beaucoup plus efficace en terme de mémoire utilisée.

[Felours]

Merci, je ne connaissais pas ces canaux (je n'ai quasi jamais utilisé IRC auparavant).

Merci Alex pour la soluce, j'ai tester la fonction on() qui semble fonctionner correctement, mais j'ai implémenté avec delegate() pour ses performances.

J'ai commit.