AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

anipassion.com

    Sauvegarde des messages en cours

    Partagez
    Manumanu
    MasculinAge : 29Messages : 69

    le Mer 3 Sep 2014 - 0:38

    Sauvegarde des messages en cours de rédaction



    Qui n'a jamais hurlé de rage et saisi violemment son clavier pour battre à mort un innocent qui passait par là, lorsqu'un message de trouzmille cinq cent quatre lignes que vous étiez en train de rédiger est perdu à tout jamais parce que :
    • Le forum plante bêtement au moment de l'envoi
    • Votre navigateur se ferme sans explication (ni coups de semonce)
    • Vous rechargez la page malencontreusement, ou revenez sur la précédente


    Disons-le clairement : C'est chiant, et ça vous donne envie de retourner des bébés phoques comme de vulgaires chaussettes qui traîneraient dans votre panier à linge depuis deux mois.

    On connaît, on connaît. Et sinon, à part nous rappeler ces moments de douleur que l'on aimerait chasser de notre vie, tu voulais nous dire quoi ?


    Hé bien mes bons, j'ai la solution !
    Vous allez pouvoir écrire votre message en prenant autant de temps que vous le voulez. Vous allez pouvoir planter, fermer votre navigateur, redémarrer votre pc, puis revenir onze jours plus tard et retrouver votre message qui vous attendait sagement, à la virgule près. Le tout en permettant aux fondateurs de forums de quand même personnaliser leurs templates sans se soucier de la compatibilité de diverses classes.

    Toi, lecteur a écrit:"Nom de dieu Manu, tu nous vends du rêve par transpalettes de 12 là !"

    Je sais, et la cerise sur le McParfait, c'est que ça tient en un seul petit script très facile à intégrer. Passons donc à la pratique.

    Comment ça marche ?


    D'un point de vue utilisateur, c'est très simple : Celui-ci écrit tranquillement son message, et tout est normal. Si pour une raison ou une autre il doit revenir sur cette page sans avoir fini son message, un bouton apparaît entre "Prévisualiser" et "Envoyer".



    Un petit clic sur ce dernier remplis le champ de texte avec le message sauvegardé en l'état.

    Dans certains cas (par exemple, revenir sur la page du message en cliquant sur le bouton "page suivante" du navigateur, le chargement est un peu altéré et le bouton est inactif. Il suffit de recharger à nouveau la page de post et tout fonctionne.

    Attention toutefois : Dans le cas d'une édition, appuyer sur le bouton remplacera le contenu actuel du champ d'écrituer en totalité.

    Cela ne fonctionne pour l'instant qu'en cas de réponse à un sujet existant, pas à la création d'un nouveau sujet.



    Comment l'installer


    1. Il suffit d'aller dans votre espace d'administration, Modules → HTML & Javascript → Gestion des codes Javascript.

    2. Assurez-vous que "Activer la gestion des codes Javascript" est bien actif, puis cliquez sur "Créer un nouveau javascript".

    3. Dans la nouvelle fenêtre, copiez-collez simplement ce code, tel quel :

      Code:
      var messageSaver=function(e,t){"use strict";var n=function(t){t=t.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");var n="[\\?&]"+t+"=([^&#]*)",r=new RegExp(n),i=r.exec(window.location.href),s=e("#text_editor_textarea").siblings('input[name="'+t+'"]').val();return i===null?s:i[1]};var r=function(e,t,n,r){var i={userID:e,topicURL:r,message:t};localStorage.setItem(n,JSON.stringify(i))};var i=function(e,t,n,r){var i,o="\nIl n'y a pas de message à charger.",u=localStorage.getItem(n);if(u!="undefined"){i=JSON.parse(u);s(e,t.val(),n,r)?t.val(i.message):alert("Erreur 1:\nLa vérification du message enregistré a échoué.")}else alert("Erreur 2: Il n'y a aucun message sauvegardé dans le WebStorage")};var s=function(e,t,n,r){var i,s=localStorage.getItem(n);if(s!="undefined"){i=JSON.parse(s);return i.userID===e&&i.topicURL===r&&t===""?true:false}else return false};var o=function(){var t=window.location.host,s=_userdata.user_id,o=n("t"),u=e('form[action="/post"]'),a=u.find('input[name="post"]'),f=e("#text_editor_textarea").sceditor("instance");f.bind("keyup",function(){r(s,f.val(),t,o)});if(localStorage.getItem(t)){a.before('<input type="button" class="mainoption btn-loader" id="ms-loader" value="Charger le message sauvegardé" /> &nbsp;')}u.on("click","#ms-loader",function(){i(s,f,t,o)})};return{init:o}}(jQuery);$(window).load(function(){typeof _userdata=="undefined"?console.log("L'objet \"_userdata\" de forumactif n'a pas été trouvé. Le script de sauvegarde des messages en cours d'écriture ne peut pas fonctionner."):messageSaver.init()})

    4. Cochez bien la case "Toutes les pages"
    5. Validez


    Et c'est tout !

    Notez cependant que le bouton possède une classe btn-loader que vous pouvez utiliser pour, par exemple, rendre le bouton plus visible via le CSS.

    Exemple :

    Code:
    .btn-loader {
       background: #a00000;
       color: #fff;
       text-shadow: 1px 0 0 rgba(0,0,0,.2)
    }

    Une note sur la compatibilité



    Ce script est prévu pour fonctionner sur tous les navigateurs principaux (Internet Explorer à partir de la version 8, Chrome, Firefox, Opera et Safari).

    Cependant, il ne fonctionne pour l'instant que sur un forum phpBB2 (et éventuellement Invision, mais il faut que je teste).


    Évolutions



    À terme, je voudrais évidemment rendre ce script compatible avec phpBB3 (et Invision s'il le faut).

    Je songe aussi à ajouter de nouvelles fonctionnalités :
    • Sauvegarde possible sur plusieurs sujets différents
    • Sauvegarde du titre et contenu en cas de nouveau sujet

    Si vous avez d'autres fonctionnalités en tête, faites-le moi savoir.

    Si vous êtes développeur JS et que vous souhaitez voir le code pour l'adapter à vos besoin ou travailler dessus et proposer des ajouts ou autres améliorations, vous pouvez accéder au projet GitHub.

    Enjoy !

    Mises à jour


    • [20/01/2015] → Fonctionne maintenant avec les formulaires de réponse rapide.
    • [08/09/2014] v1.1 → Fonctionne maintenant en mode d'écriture classique ou dynamique.


    Dernière édition par Manumanu le Lun 26 Jan 2015 - 3:02, édité 4 fois



    Manumanu
    MasculinAge : 29Messages : 69

    le Lun 8 Sep 2014 - 3:22

    Mise à jour 1.1



    Utilisation de l'API SCEditor pour manipuler plus facilement le formulaire et permettre l'utilisation en mode BBcode ou WYSIWYG.

    Merci à Nihil Scar Winspear pour ses suggestions.



    Okhmhaka
    FémininAge : 31Messages : 31725

    le Lun 8 Sep 2014 - 9:55

    Oh c'est fort utile ce petit script là, j'avoue !
    En fait le script enregistre le message au fur et à mesure où on le tape et en cas de fausse manip' le bouton permet de le restaurer, si j'ai bien compris.
    Admettons qu'on ait deux pages ouvertes avec deux messages en rédaction, un sur chaque page, ça fonctionnerait aussi je suppose ?

    Merci pour ce script, il plaira sûrement à beaucoup ^^
    Je l'essaierais sur Invision au pire si j'ai un moment, vu que N-U est sur cette version.



    Manumanu
    MasculinAge : 29Messages : 69

    le Lun 8 Sep 2014 - 15:23

    Non, ça ne fonctionnerai pas tout à fait avec deux pages ouvertes, ils se remplaceraient l'un l'autre dès que tu fais une modification...

    Je voudrais bien permettre au script de fonctionner sur plusieurs messages séparés (et faire un système de brouillons sauvegardables) à terme, mais ça pose une question logistique : Si on ajoute une entrée dans le WebStorage par message, et non une entrée unique qui enregistre un message en cours et s'auto-édite, le webstorage du navigateur sera rempli d'une centaine d'entrées en moins d'une semaine. À partir de là, il faudrait induire un système de suppression automatique, et c'est là que ça pêche : Comment vérifier qu'un message a bien été posté, et qu'on peut donc le virer du WebStorage en toute sécurité ? Et derrière, que faire des messages enregistrés mais que des membres ne récupèrent pas ?

    J'y planche toujours... Si tu as une idée, je suis à l'écoute ! Wink



    Nihil Scar Winspeare
    Messages : 3942

    le Lun 8 Sep 2014 - 16:04

    Si j'ai bien compris c'est un système de sauvegarde d'urgence, FA a déjà un système de brouillon, pour ma part j'ai pas encore rencontré de problèmes avec. :p

    Du coup comme c'est de l'urgence, je pense qu'on peut imaginer une limite au nombre d'entrées et une durée de vie éventuellement.

    EDIT : je me disais bien que ça existais déjà :)
    Sauvegarde de message en cours par Ea sur le FdF, il y a 2 ans et demi Ea avait quelque chose de similaire, mais je n'ai pas encore regardé son code XD, tu pourrais peut être en parler avec lui :)
    Manumanu
    MasculinAge : 29Messages : 69

    le Lun 8 Sep 2014 - 21:32

    J'avais déjà regardé son code, il était un peu imbouffable hélàs. Mais je re-regarderais un peu, merci. Wink




    Manumanu
    MasculinAge : 29Messages : 69

    le Mar 20 Jan 2015 - 22:53

    Mise à jour 1.2


    Prend maintenant en charge les formulaires de réponse rapide.



    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Ven 23 Jan 2015 - 0:40

    Hello Manu! Merci pour ce tuto encore une fois! Par contre: est-il terminé? si ce n'est pas le cas, est-ce que je peux te demander de mettre l'icône en cours, ou alors de le mettre dans le titre? ^^



    Manumanu
    MasculinAge : 29Messages : 69

    le Lun 26 Jan 2015 - 2:43

    Salut salut,

    Il était terminé au moment où il a été posté, même avec les mises à jour qui devraient suivre relativement régulièrement. Wink



    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Lun 26 Jan 2015 - 9:30

    En fait, le soucis, c'est que une fois dans la section des tutos ou des LS, tu ne pourras plus éditer sans passer par les responsable de section, un modo ou un admin... Du coup, si tu comptes encore bosser dessus je ne classe pas... ^^"



    Manumanu
    MasculinAge : 29Messages : 69

    le Mar 27 Jan 2015 - 12:58

    Ha mince, c'est un peu embêtant ça effectivement... Merci du coup, j'ignorais ce point.

    Bon ceci étant dit, je ne sais pas quand je serais en mesure de faire des mises à jour ou proposer des versions pour d'autres types de forum, et du coup on va peut-être pas attendre six plombes avec ça dans les bras...

    Tant pis sinon, poste-le en section finale, et je ferai des demandes si jamais j'avance (ce qui n'est pas encore d'actualité vu la masse de boulot que je me cogne en ce moment). Merci encore de m'avoir prévenu en tout cas !



    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Mar 27 Jan 2015 - 13:11

    Pas de soucis! Je vais faire de même pour ton autre LS (la restriction d'adresse e-mail) si ça te va?



    Manumanu
    MasculinAge : 29Messages : 69

    le Jeu 29 Jan 2015 - 15:33

    Oui, parfait. Merci !



    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Mar 3 Mar 2015 - 11:03

    Alice, c'est plutôt un LS qu'un tuto, donc je te le transfère ici Wink



    Nono-Chan
    FémininAge : 18Messages : 248

    le Dim 19 Avr 2015 - 14:58

    Code très pratique, merci ^^
    Nutop
    FémininAge : 14Messages : 245

    le Sam 20 Juin 2015 - 20:38

    Oh, merci beaucoup, beaucoup, beaucoup. C'est un truc génial






    Araik
    FémininAge : 21Messages : 244

    le Sam 4 Juil 2015 - 14:52

    Merci pour se super codage vraiment très utile.

    Edit: Il y a un petit problème avec je suis obliger de cocher tous les sujets pour qu'il apparaisse et que l'on puisse l'utilisé sur le forum. C'est peut être un problème sur le miens mais je souhaité prévenir au cas ou je ne sois pas la seule.



    Djeina
    FémininAge : 20Messages : 227

    le Ven 17 Juil 2015 - 7:08

    C'est vraiment pratique :) merci beaucoup ^^
    Suanij
    FémininAge : 26Messages : 9

    le Lun 17 Aoû 2015 - 1:25

    Très utile, merci beaucoup !



    AVATAR ©AndroidJones
    Kelalin
    FémininAge : 24Messages : 1405

    le Lun 17 Aoû 2015 - 18:15

    Merci (^▽^)
    Nat
    FémininAge : 22Messages : 42

    le Sam 13 Fév 2016 - 17:55

    Je remonte peut-être le topic mais je n'arrive pas à faire fonctionner ce code, la même chose arrive-t-elle aux autres ?
    Unleash
    MasculinAge : 16Messages : 71

    le Sam 9 Avr 2016 - 17:51

    merci
    Arkaline
    FémininAge : 25Messages : 156

    le Mar 12 Avr 2016 - 15:33

    Alors ça .... Merci !



    Arkaline
    Mystborn
    FémininAge : 17Messages : 66

    le Mer 13 Avr 2016 - 22:52

    J'ai hurlé, certes, mais j'ai tapé personne \o/
    Enfin, c'est génial ce truc, j'adopte !



    Jull421
    FémininAge : 22Messages : 137

    le Mar 3 Mai 2016 - 19:47

    Merci



    Contenu sponsorisé

    Aujourd'hui à 11:46


      La date/heure actuelle est Sam 10 Déc 2016 - 11:46