modal box unifiée

[tmos]

Plusieurs parties de l'interface vont utiliser un système de modal-box (pop up interne à la page).
Il faut donc mettre en place un système de popups unifié pour le template par défaut.
Il faut pouvoir :

• envoyer du contenu à la modalbox
• l'afficher
• récupérer le contenu des potentiels formulaires (auquel cas il faut penser à juste fermer la modal au lieu de recharger la page complète).

Voici quelques cas dans lesquels on pourra utiliser la modal :

• actualisation manuelle : avec un loader et l'avancement type «1/42 flux actualisés», puis la popup se ferme et la page est actualisée (cf issue)
• affichage des notices d'erreurs

L'idée serait, je pense, d'utiliser une div cachée sur la page. Il faut donc un moyen de la remplir, et de l’appeler.
Je m'occupe du code de l'affichage, j'aurais juste besoin d'un coup de main pour voir comment remplir la modal d'une façon claire et accessible partout.

[Phyks]

Pour l'instant, il y a des tableaux $error qui sont utilisés pour les erreurs. Ils contiennent :

• un type : error ou warning pour l'instant
• un titre
• un contenu, pré-formaté en HTML (paragraphes, listes à puces, etc.)

On peut réutiliser un système du genre si tu veux. Je peux te donner pleins de trucs via le PHP, et te filer un coup de main sur le JS si tu veux.

[tmos]

Je pense que pour l'instant il faut se séparer du système d'erreurs. Les erreurs seront une utilisation particulière du système de modal box.

Je pense qu'on à besoin pour l'instant :

• d'une fonction qui remplit la div class="modalbox" sur la page d'accueil
• la même fonction doit lancer l'affichage.

En fait je vais m'en sortir seul ( ✋ je veux le coder moi même, je dois m'améliorer en JS), c'est surtout pour avoir des avis quand à la praticité de ma façon de faire : s'il y a des trucs que je n'ai pas prévu ou si vous pensez qu'il y à plus simple pour faire ça.

[tmos]

Pour reprendre ce que tu dis :

    un type : error ou warning pour l'instant
    un titre
    un contenu, pré-formaté en HTML (paragraphes, listes à puces, etc.)

On peut imaginer passer à la fonction JS trois arguments :

• titre
• contenu html
• classes spéciales à ajouter (facultatif)

Mon principal problème est de trouver comment remplir la boite. Je ne trouve pas très naturel d'écrire des pavés de HTML dans un fichier JS… ça ne pose pas de problème selon vous ?

[Phyks]

Ça marche !

👍 pour le reste, ça me paraît bien. Peut être garder le type en plus pour spécifier si c'est une erreur, une info, autre.

Pourquoi tu dis que ça va mettre des pavés de HTML dans le JS ?

[tmos]

Le type est contenu dans la classe CSS de la modalbox :)

Je suis dessus, c'est plus simple que ce que je pensais !

[Phyks]

Parfait \o/

[tmos]

Ça semble assez bon pour l'instant. Il y reste la version mobile à implémenter évidement.

Par contre, dans l'état actuel des choses, si on veut la remplir avec du code html un peu poussé (un formulaire par exemple), il faut passer tout ce code html en argument de la fonction ModalboxFill(title, content).

Hors, ne serait-il pas plus pratique de passer en argument le nom du contenu désiré, et le stocker… quelque part ?
Type dans la page html : on à toujours nos contenus écrits, mais masqués, et on les affiche selon ceux que l'on veut. Ainsi, on ne produit pas du html via le JS : l'idée ne me plaît pas vraiment, et ça accélérera le comportement sur mobile, les manipulations du DOM étant coûteuses en calcul et en perfs.

[Phyks]

Ok pour la boîte.

Pour le contenu, à voir. On peut les mettre dans des variables JS dans des balises <script type="text/javascript"> éventuellement, en bas de page.

[tmos]

En effet, on arriverait plus ou moins au même résultat. Le dernier argument (et pas des moindres) penchant pour mettre tout ça en place et l'afficher à la volée, c'est le gain (énorme) de performances.

Les manips du DOM sont une plaie sur des mobiles bas de gamme par exemple.

[Phyks]

Ok, je vois l'idée.

Alors ok, éventuellement, mais faudrait trouver un moyen d'alterner les messages proprement.

[tmos]

On affiche les différents contenus de la modal box dans plusieurs divs, avec chacun un id propre, et selon celui qu'on veut appeller, on le .toggle().
Avec toujours une vérif en chargement de page : si une erreur est présente, on l'affiche directement.

Je vais faire une branche et tester ça dans les jours qui viennent si t'es pas tout à fait convaincu :)

[Phyks]

Nope, je suis convaincu :p C'est juste qu'il faut bien « diver » tout ça et que je ne crois pas qu'on puisse passer plusieurs erreurs pour l'instant.

En fait, je ne suis pas sûr que le backend puisse avoir l'occasion de générer plusieurs erreurs. Du coup, ça veut dire qu'on les récupère d'une requête AJAX par exemple, et donc qu'il faudra de toutes façons modifier le DOM, non ?

[tmos]

Mh, quand le backend balance ses erreurs, c'est forcément par le errors[''] qui est déjà mis en place non ?

[Phyks]

Ouais, mais dans le code du backend, il va pas plus loin que la première erreur en général (pas la peine d'aller plus loin, il y a > 50% de chances que ça marche pas).

P.S. : Go XMPP ? IRC ? ça sera plus simple ^^

[tmos]

Issue non finie

[tmos]

Pour rappel, la prochaine étape à faire pour la modalbox (qui justifie la réouverture) :

Ajouter différentes sections de HTML caché dans la modalbox, qui comportent par exemple le formulaire d'ajout de flux, les partages sociaux, etc. (en somme, tous les éléments qui vont revenir souvent). Quand on en a besoin : on affiche la modalbox et le html voulu, ainsi on évite toute manipulation de DOM inutile, et on accélère grandement l'interface d'un point de vue utilisateur.

[eliemichel]

Ah oui bonne idée ça.
Et c'est vrai qu'en ajoutant les liens sociaux j'ai pas pensé à le faire avec une modal box…

[tmos]

Je pense que ça peut simplifier pas mal de décisions visuelles, et permettre à l'utilisateur de ne pas être déstabilisé avec 42 façon différentes d'afficher des infos à l'écran :)

[eliemichel]

Oui oui, je suis à fond pour. Ça évite aussi aux devs de coder 42 façons d'ouvrir un panneau. =P

[tmos]

Exactement !
Pour info j'ai trouvé cette modal box qui est juste magnifique : http://tristanedwards.me/sweetalert

Ça semble délicat de l'utiliser telle qu'elle vu l''utilité qu'on à de la modal (afficher du html «complexe»), mais je pense adapter son code à Freeder (surtout pour l'animation d'affichage <3).

[eliemichel]

Ah ouais, ça rend bien.
J'aime le côté épuré. Pour l'anim, suffit d'animer le logo, le reste devrait se passer bien, que ça soit du simple texte ou du html.