Bonjour à tous, je suis étudiant en développement informatique et j'ai développé ces derniers mois une bibliothèque JS pour utiliser des fenêtres sur un principe semblable aux fameuses modals, à la différence près que ces fenêtres sont déplaçables. On peut en utiliser autant que l'on souhaite, chacune ouvrable grâce à un bouton, et refermable. Une gestion de la priorité est présente, permettant de passer en premier plan la fenêtre active et en second plan les autres. Je cherche à avoir des avis sur ce petit projet, et des idées d'amélioration !

Merci à tous

https://github.com/GStaehler/Window-Engine

Pas mal pour un étudiant.
Tu peux essayer de rendre ta libraire utilisable en nodejs (out of the box) avec rollup et de la publier sur npm (ou autre).

Pour la convention, ne nomme jamais un repository avec des majuscules .

Ta fonction 'windowCreation', devrait s'appeler 'createWindow'.

Fait gaffe à tes noms de classe, comme 'mydivActive' (pas très parlant)
'mydiv' -> 'window'
'mydivActive' -> 'active' (t'aurais donc -> class="window active') tu peux aussi utilisé BOM
Faudrait aussi préfixé t'es nom de classe pour éviter les colisions avec les noms de classes des gens qui vont utiliser ta lib.

Tu as des animations, comme celle d'opacity, faites en js. Même dans ton cas tu pourrais les faire en css (avec les transitions). Tu aura de meilleurs performance .

Oublie pas de factoriser au maximum ton code.

Je pense que tu peux aussi éviter de créer 1000 listeners au chargement de ton code. Essaie de créer les listeners quand une fenetre est crée .

Merci !

Je penserais à la publier sur npm (chose que je n'ai encore jamais faite donc je vais me renseigner sur le comment du pourquoi) !

Merci beaucoup pour tes conseils, pour les 1000 listeners je n'avais pas réussi à trouver un moyen d'automatiser la fonction pour chaque fenêtre créée, mais je vais continuer à regarder ! Je vais aussi regarder pour faire mes fade en css, je pense que tu as raison

Je vais continuer à peaufiner mon petit projet, en espérant que des gens le trouveront utile

Je vais te faire une PR pour te montrer, c'est pas compliqué et ca sautera au yeux pour toi après.

Par le DOM je pourrais peut être récupérer l'id le plus haut sur les fenêtres dans le html et adapter ma boucle en fonction de cet id?

Par exemple ma dernière fenêtre est <div id="mydiv6" class="mydiv"> donc j'aurais comme boucle en JS :

for (i = 1; i < dernierID; i++) {
windowCreation(i);
}

Je viens de te faire une PR qui ajoute babel et change tes APIs (windowCreation).
Si y'a quelques choses que tu comprends pas hésite pas à me le demander .

D'accord je vais regarder !

Est ce que ce n'est pas embêtant pour l'utilisateur de faire un npm run build? L'idée que j'avais était de rester dans quelque chose de simple comme avec Bootstrap ou jQuery? En tout cas ça semble propre, je vais créer une nouvelle branche et accepter la PR je pense

Le 29 août 2019 à 14:21:15 thecomposerfr a écrit :
Est ce que ce n'est pas embêtant pour l'utilisateur de faire un npm run build? L'idée que j'avais était de rester dans quelque chose de simple comme avec Bootstrap ou jQuery? En tout cas ça semble propre, je vais créer une nouvelle branche et accepter la PR je pense

C'est a toi de faire le 'npm run build' pour mettre à jour le dossier /lib, l'utilisateur a juste à prendre ce qu'il y a dans lib pour utiliser ta library.

Oh d'accord je n'avais pas compris ça comme ça ! Je ne prétends pas du tout être un expert

Et est-ce que mon CDN maison est toujours valable après les modifs?

J'ai une erreur après le run build :

'babel' n'est pas reconnu en tant que commande interne
ou externe, un programme ex▒cutable ou un fichier de commandes.
npm ERR! code ELIFECYCLE
npm ERR! errno 1

Le 29 août 2019 à 14:36:03 thecomposerfr a écrit :
J'ai une erreur après le run build :

'babel' n'est pas reconnu en tant que commande interne
ou externe, un programme ex▒cutable ou un fichier de commandes.
npm ERR! code ELIFECYCLE
npm ERR! errno 1

My bad, faut que tu fasse 'npm install' en premier lieu, pour installer les modules 'babel'.

Ok ça fonctionne, j'ai par contre perdu un peu de css, il faut que je vois ça

Je crois pas en avoir retiré.
Tu peux voire la différence entre ma branche et ta branche ici: https://github.com/GStaehler/Window-Engine/commit/a51cc912c76f39d7b56497332b65c0dca6d13515

J'ai trouvé, c'était le fait de faire passer les closeButtons d'id à classe, alors que dans le css, le style est encore appliqué à l'id !

L'idée si j'ai bien compris, c'est de travailler dans src et de builder pour mettre à jour lib avec les changements?

Edit : Franchement c'est parfait comme ça, merci beaucoup, ça va me simplifier beaucoup le développement ! Est ce que ce serait intéressant de créer une branche en enlevant src, package.json et .babelrc pour un simple utilisateur?

Le 29 août 2019 à 14:49:43 thecomposerfr a écrit :
L'idée si j'ai bien compris, c'est de travailler dans src et de builder pour mettre à jour lib avec les changements?

Edit : Franchement c'est parfait comme ça, merci beaucoup, ça va me simplifier beaucoup le développement ! Est ce que ce serait intéressant de créer une branche en enlevant src, package.json et .babelrc pour un simple utilisateur?

Pour l'utilisateur basique tu peux utiliser github page, comme tu l'as fait pour mettre en ligne ton exemple .
De rien sinon, tu peux me MP (je risque de checker ce topic indéfiniment).

Bonne chance pour la suite de ton apprentisage, c'est long mais ça en vaut la peine .

Ok super !
Oui si j'ai d'autres questions je te MP !

Je n'avais jamais utilisé Babel, et j'utilise assez peu de dépendances généralement, mais il faut bien apprendre

En tout cas c'est cool que mon JS se minify tout seul maintenant

Merci encore pour ton aide

Copyright Gauthier Staehler

C'est quoi ca ?