Sujet Précédent Sujet Suivant

Toggle (spécifique ou global) en utilisant data-attributes et localstorage

Résolu/Fermé
Ben_Lyon Messages postés 10 Date d'inscription samedi 5 décembre 2020 Statut Membre Dernière intervention 1 février 2021 - 31 janv. 2021 à 08:13
Ben_Lyon Messages postés 10 Date d'inscription samedi 5 décembre 2020 Statut Membre Dernière intervention 1 février 2021 - 1 févr. 2021 à 06:08
Bonjour. J'ai écrit un script (utilisant 2 fonctions toggle + data-attributes + localstorage).

Ce que je souhaite atteindre :

- Quand je clique sur Div 1/2 ou 3 = Div 1/2 ou 3 toggle entre vert/rouge + sauvegarde état (dans localstorage) => OK
- Quand je clique le bouton = Toutes les Div toggle entre gris/orange (sans toucher au vert) + sauvegarde état (dans localstorage) => NOT OK (le rouge ne peut pas être enlevé pour que les Div puissent être sauvegardées en gris/orange.

Code : https://jsfiddle.net/16fer2hq/ ou ci-dessous ou https://checkandsave.info/usa/tests/test8/forum.html (mon site).

Avez-vous une idée s'il-vous-plait ? Je suis dessus depuis des heures (jours).

Merci d'avance.

NB : Je dois utiliser les data-attributes car j'ai 1000 lignes à gérer sur mon site. 

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>a</title>
<style>
.orange { background: orange; }
.green { background: green; }
.grey { background: grey; }
.red { background: red; }
div { cursor: pointer; }
</style>
</head>
<body>

<!-- Options -->
<button onclick="localStorage.clear()">Reset</button>
<br /><br /><br />
<button id="togglegreyorange">BUTTON TOGGLE (GREY/ORANGE)</button> (remove orange/grey/red + always keep green)<br /><br />

<!-- Div 1/2/3 to click -->
<div id="div1" data-fordiv="#div1">DIV1</div><br />
<div id="div2" data-fordiv="#div2">DIV2</div><br />
<div id="div3" data-fordiv="#div3">DIV3</div>

<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// // // // // // // // // // // // // // // // // // // // // //
$(function(){

    // Function toggle1 
    (function($) {
        $.fn.ftoggle1 = function(func1, func2) {
            var funcs = [func1, func2];
            this.data('toggleclicked', 0);
            this.click(function(){
                var data = $(this).data();
                var tc = data.toggleclicked;
                $.proxy(funcs[tc], this)();
                data.toggleclicked = (tc + 1) % 2;
            });
            return this;
        };
    }(jQuery));

    // Toggle1 (green/red) + set localstorage
    $("[data-fordiv]").ftoggle1(function(){
            var selectora = $(this).data('fordiv');
            $(selectora).removeClass("red");
            $(selectora).removeClass("grey");
            $(selectora).addClass("green");
            window.localStorage.removeItem('savered' + this.dataset.fordiv);
            window.localStorage.removeItem('savegrey' + this.dataset.fordiv);
            window.localStorage.setItem('savegreen' + this.dataset.fordiv, $(this).hasClass('green'));
        },

        function(){
            var selectora = $(this).data('fordiv');
            $(selectora).removeClass("green");
            $(selectora).removeClass("grey");
            $(selectora).addClass("red");
            window.localStorage.removeItem('savegreen' + this.dataset.fordiv);
            window.localStorage.removeItem('savegrey' + this.dataset.fordiv);
            window.localStorage.setItem('savered' + this.dataset.fordiv, $(this).hasClass('red'));
        }
    );

    // Get localstorage
    $("[data-fordiv]").each(function fpoursavefondsphrases(){

        var selectora = $(this).data('fordiv');
        var pourfondgreen = 'savegreen' + this.dataset.fordiv;
        var pourfondred = 'savered' + this.dataset.fordiv;

        if (window.localStorage.getItem(pourfondgreen) === "true") {
            $(selectora).removeClass("red");
            $(selectora).removeClass("grey");
            $(selectora).addClass("green");
        };
        if (window.localStorage.getItem(pourfondred) === "true") {
            $(selectora).removeClass("green");
            $(selectora).removeClass("grey");
            $(selectora).addClass("red");
        };

    });

    // // // // // // // // // // // // // // // // // // // // // // 

    // Function toggle2
    (function($) {
        $.fn.ftoggle2 = function(func3, func4) {
            var funcs2 = [func3, func4];
            this.data('toggleclicked2', 0);
            this.click(function(){
                var data = $(this).data();
                var tc2 = data.toggleclicked2;
                $.proxy(funcs2[tc2], this)();
                data.toggleclicked2 = (tc2 + 1) % 2;
            });
            return this;
        };
    }(jQuery));

    // Toggle2 (grey/orange) + set localstorage + get localstorage
    $("#togglegreyorange").ftoggle2(function(){
            $('[data-fordiv]').removeClass("red");
            $('[data-fordiv]').removeClass("orange");
            $('[data-fordiv]').not(".green").addClass("grey");
            window.localStorage.removeItem('savered'); // this line cannot remove/change the red background (localstorage key 'savered' from function toggle1) by grey, why ?
            window.localStorage.removeItem('saveallorange');
            window.localStorage.setItem('saveallgrey', 'grey');
        },
        function(){
            $('[data-fordiv]').removeClass("red");
            $('[data-fordiv]').removeClass("grey");
            $('[data-fordiv]').not(".green").addClass("orange");
            window.localStorage.removeItem('saveallgrey');
            window.localStorage.removeItem('savered'); // same problem as above
            window.localStorage.setItem('saveallorange', 'orange');
        });

    $('[data-fordiv]').not(".green").addClass(localStorage.getItem('saveallgrey'));
    $('[data-fordiv]').not(".green").addClass(localStorage.getItem('saveallorange'));

});

// // // // // // // // // // // // // // // // // // // // // // 
</script>
</body>
</html>







Configuration: Windows / Chrome 87.0.4280.101

4 réponses

Réponse 1 / 4
jordane45 Messages postés 38361 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 30 décembre 2024 4 720
31 janv. 2021 à 10:22
Bonjour,

Pourquoi, au lieu de générer X variables dans le localStorage.. ne fais tu pas juste une sauvegarde "globale" de toutes tes lignes
genre : 
   var obj = [];
   $("[data-fordiv]").each(function(){
      let fordiv = $(this).data('fordiv').trim();
      obj.push([fordiv,$(this).attr('class')]);
   });
   window.localStorage.setItem("rows",JSON.stringify(obj));


Et si tu veux sauvegarder par "couleur", par exemple pour le orange 
var obj = [];
   $("[data-fordiv].orange").each(function(){
      let fordiv = $(this).data('fordiv').trim();
      obj.push([fordiv,$(this).attr('class')]);
   });
   window.localStorage.setItem("orange",JSON.stringify(obj));



0
Réponse 2 / 4
Ben_Lyon Messages postés 10 Date d'inscription samedi 5 décembre 2020 Statut Membre Dernière intervention 1 février 2021
Modifié le 31 janv. 2021 à 20:32
Bonjour,

C'est très difficile pour moi de comprendre ton message sachant que j'ignore le rôle de : JSON.stringify, [], trim(), push(). Je suis parvenu à ceci (bouton toggle orange/grey + sauvegarde état) (je confirme avec l'extension Chrome "Localstorage manager" que mes 2 clefs s'enregistrent bien pour toutes les divs). Ma façon d'afficher les couleurs est-elle correcte ? Je continue de chercher pour adapter le script à mon besoin initial. 

// Fonction toggle
(function($) {
    $.fn.ftoggle2 = function(func3, func4) {
        var funcs2 = [func3, func4];
        this.data('toggleclicked2', 0);
        this.click(function(){
            var data = $(this).data();
            var tc2 = data.toggleclicked2;
            $.proxy(funcs2[tc2], this)();
            data.toggleclicked2 = (tc2 + 1) % 2;
        });
        return this;
    };
}(jQuery));

// Bouton toggle (orange/grey) + setItem/removeItem
$("#togglegreyorange").ftoggle2(function(){

        $('[data-fordiv]').removeClass("grey");
        $('[data-fordiv]').addClass("orange");

        var obj = [];
        $("[data-fordiv].orange").each(function(){
            let fordiv = $(this).data('fordiv').trim();
            obj.push([fordiv, $(this).attr('class')]);
        });

        window.localStorage.removeItem("grey");
        window.localStorage.setItem("orange", JSON.stringify(obj));
    },
    function(){

        $('[data-fordiv]').removeClass("orange");
        $('[data-fordiv]').addClass("grey");

        var obj2 = [];
        $("[data-fordiv].grey").each(function(){
            let fordiv2 = $(this).data('fordiv').trim();
            obj2.push([fordiv2, $(this).attr('class')]);
        });

        window.localStorage.removeItem("orange");
        window.localStorage.setItem("grey", JSON.stringify(obj2));
    });

// getItem
var afficherorange = JSON.parse(localStorage.getItem("orange"));
$.each(afficherorange, function(index, value) {
    $('[data-fordiv]').addClass("orange");
});

var affichergrey = JSON.parse(localStorage.getItem("grey"));
$.each(affichergrey, function(index, value) {
    $('[data-fordiv]').addClass("grey");
});
0
jordane45 Messages postés 38361 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 30 décembre 2024 4 720
31 janv. 2021 à 20:32

C'est très difficile pour moi de comprendre ton message sachant que j'ignore le rôle de : JSON.stringify, [], trim(), push()

Comment peux tu faire un script javascript .. sans connaitre un minimum les fondamentaux ?
https://www.w3schools.com/jsref/jsref_trim_string.asp
https://www.w3schools.com/jsref/jsref_push.asp
https://www.w3schools.com/js/js_json_stringify.asp


mais je doute que ma façon de le faire soit correcte + ignore comment adapter cela à mon besoin de plusieurs couleurs.

Comme tu peux le voir, le code contient l'ensemble des ID qui sont sensés avoir la class ORANGE
Donc, dans ta boucle, tu dois récupérer l'id de chaque élément ... 
  var afficherorange = JSON.parse(localStorage.getItem("orange"));
  $.each(afficherorange, function(index, value) {
    console.log(index,value);
    let elm = $('div'+value[0]);
    console.log("Element",elm, elm.id);
      elm.removeClass("red");
      elm.removeClass("grey");
      elm.addClass("orange");
  });
0
Réponse 3 / 4
Ben_Lyon Messages postés 10 Date d'inscription samedi 5 décembre 2020 Statut Membre Dernière intervention 1 février 2021
31 janv. 2021 à 20:35
Re,

J'ai édité mon dernier message. Et en effet j'ai peu de connaissances en Javascript (j'ai 37 ans et débute depuis quelques mois à peine). Je vais lire les liens que tu m'as donné + script pour récupérer les ID. Je te tiens au courant. Merci Jordane.
0
jordane45 Messages postés 38361 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 30 décembre 2024 4 720
31 janv. 2021 à 20:44
Et si tu ne veux pas t'embêter à écrire autant de codes que tu as de couleur... le premier code que je t'ai donné fonctionnera très bien.. 

function saveClassForDiv(){
   var obj = [];
   $("[data-fordiv]").each(function(){
      let fordiv = $(this).data('fordiv').trim();
      obj.push([fordiv,$(this).attr('class')]);
   });
   window.localStorage.setItem("fordivclass",JSON.stringify(obj));
}




function restoreClassForDiv(){
  var arrForDiv = JSON.parse(localStorage.getItem("fordivclass"));
  $.each(arrForDiv, function(index, value) {
    console.log(index,value);
    let elm = $('div'+value[0]);
    elm.addClass(value[1]);
  });
}
0
Ben_Lyon Messages postés 10 Date d'inscription samedi 5 décembre 2020 Statut Membre Dernière intervention 1 février 2021 > jordane45 Messages postés 38361 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 30 décembre 2024
Modifié le 31 janv. 2021 à 23:36
Bonjour,

J'ai quasiment pu adapter tout tes conseils. Ma page de tests (le visiteur pourra choisir un feutre coloré pour surbriller des phrases) : https://checkandsave.info/usa/tests/test8/test8.html et le code ci-dessous.

Je travaille encore sur un point : Le feutre yellow surbrille en jaune la phrase cliquée + affiche la phrase (de la ligne) dans une autre div (un reclic ou d'autres couleurs retirent le jaune/phrase), je réfléchis donc comment créer 2 nouvelles fonctions (save/restore) pour sauvegarder/restaurer l'état de ces phrases présentes dans d'autres divs et les cacher lorsque c'est nécessaire. (J'ai utilisé un "autre" script localstorage dans ma page de tests, ce qui ne va pas, ce n'est que temporaire). 

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>a</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>
<link rel="stylesheet" href="css/stylemain.css">

<style>
/* design temp à delete */
hr {height: 1px;background-color: grey; border: none}

/* pour toutes variables (pas changer nom "root") */
:root {
--fondpink: pink;
--curseur: defaut;
--curseuryellow: url("feutreyellow.png"), auto;
--curseurpink: url("feutrepink.png"), auto;
--curseurgrey: url("feutregrey.png"), auto;
--curseurdefaut: url("curseurdefaut.png"), auto;
}

img {
position:relative;
top:7px;
}

.cachephrases {
display: none;
content-visibility: hidden;
}

.montrephrases {
display: block;
content-visibility: visible;
}

.yellow {
color: black;
background-color: yellow;
}

.pink {
color: black;
background-color: var(--fondpink);
}

.grey {
color: #D0D0D0;
background-color: white;
}

.transparent {
color: black;
background-color: red;
}

.pinkactif, .yellowactif, .greyactif, .curseurdefautactif {
border: 1px solid red;
box-sizing: border-box;
}

.sujet1:hover {
cursor: var(--curseur);
}
</style>
</head>
<body>

- (clic bouton) clean complet localstorage <button onclick="localStorage.clear()">CLEAN TOTAL</button>
<br /><br />
- (clic bouton) clean couleurs toutes divs, garde richtext écrit par visiteur : <button id="cleanpartiel">CLEAN PARTIEL</button>
<br /><br /><br />

<!-- OPTIONS SURBRILLAGES ("FEUTRES")/AFFICHE PHRASES-->
<u><b>FEUTRES/BOUTON A CLIQUER POUR SURBRILLER PHRASES</b></u>
<br /><br />
- (clic bouton) refresh page : <button onClick="window.location.reload();">Refresh Page</button>
<br />
- (clic image1) curseur defaut : <img src="curseurdefaut.png" id="curseurdefaut" alt="" class="curseurdefautactif" />
<br />
- (clic image2) surbrille yellow + affiche phrase div : <img src="feutreyellow.png" id="feutreyellow" alt="" />
<br />
- (clic image3) surbrille pink : <img src="feutrepink.png" id="feutrepink" alt="" />
<br />
- (clic image4) surbrille grey : <img src="feutregrey.png" id="feutregrey" alt="" />
<br /><br />
- (clic bouton) couleur grey/transparent de toutes divs sauf yellow/pink : <button id="toutgrey">Grey partiel</button>

<br /><br /><hr /><hr /><hr /><hr /><br />

<!-- PHRASES -->
<u><b>PHRASES A CLIQUER</b></u>
<br /><br />
<div class="sujet1">
PHRASE1<div id="zone1" data-fordiv="#zone1" data-pourphrases="#phrase1">phrase1 à surbriller et afficher ci-dessous (si jaune)</div>
<br /><hr /><br />
PHRASE2<div id="zone2" data-fordiv="#zone2" data-pourphrases="#phrase2">phrase2 à surbriller et afficher ci-dessous (si jaune)</div>
<br /><hr /><br />
PHRASE3<div id="zone3" data-fordiv="#zone3" data-pourphrases="#phrase3">phrase3 à surbriller et afficher ci-dessous (si jaune)</div>
</div>

<br /><hr /><hr /><hr /><hr /><br />

<!-- PHRASES "COPIEES" + SURBRILLAGE JAUNE -->
<u><b>PHRASES "COPIEES" + SURBRILLAGE JAUNE</b></u>
<br /><br />
<div id="phrase1" class="cachephrases" data-cleanphrases="#phrase1">
phrase1 affichée
<button data-boutoncleanligne="#zone1" data-removephrase="#phrase1">clean phrase/couleur</button> (bouton non fonctionnel)
</div>

<br /><br /><hr />

<div id="phrase2" class="cachephrases" data-cleanphrases="#phrase2">
phrase2 affichée
<button data-boutoncleanligne="#zone2" data-removephrase="#phrase2" >clean phrase/couleur</button> (bouton non fonctionnel)
</div>

<br /><br /><hr />

<div id="phrase3" class="cachephrases" data-cleanphrases="#phrase3">
phrase3 affichée
<button data-boutoncleanligne="#zone3" data-removephrase="#phrase3">clean phrase/couleur</button> (bouton non fonctionnel)
</div>

<br /><br /><hr /><hr /><hr /><hr /><br />

<!-- ZONE CHAMP TEXTE PRIVE VISITEUR -->
<u><b>ZONE CHAMP TEXTE PRIVE VISITEUR</b></u>
<!-- texte-haut/titre -->
<div class="mainchamptextesprives" >
<!-- menu gauche -->
<div class="menuediteurtextes" >
<button type="button" data-champtextesprives="bold"><i class="fa fa-bold"></i></button>
<button type="button" data-champtextesprives="italic"><i class="fa fa-italic"></i></button>
<button type="button" data-champtextesprives="underline"><i class="fa fa-underline"></i></button>
<button type="button" data-champtextesprives="justifyleft"><i class="fa fa-align-left"></i></button>
<button type="button" data-champtextesprives="justifycenter"><i class="fa fa-align-center"></i></button>
<button type="button" data-champtextesprives="justifyright"><i class="fa fa-align-right"></i></button>
<button type="button" data-champtextesprives="insertunorderedlist"><i class="fa fa-list-ul"></i></button>
<button type="button" data-champtextesprives="insertorderedlist"><i class="fa fa-list-ol"></i></button>
<!-- menu droite -->
<div class="customSelect">Police : <select data-champtextesprives="fontname">
<optgroup label="Serif Fonts"><option value="Bree Serif">Bree Serif</option><option value="Georgia">Georgia</option><option value="Palatino Linotype">Palatino Linotype</option><option value="Times New Roman">Times New Roman</option></optgroup><optgroup label="Sans Serif Fonts"><option value="Arial" selected>Arial</option><option value="Arial Black">Arial Black</option><option value="Asap">Asap</option><option value="Comic Sans MS">Comic Sans MS</option><option value="Impact">Impact</option><option value="Lucida Sans Unicode">Lucida Sans Unicode</option><option value="Tahoma">Tahoma</option><option value="Trebuchet MS">Trebuchet MS</option><option value="Verdana">Verdana</option></optgroup><optgroup label="Monospace Fonts"><option value="Courier New">Courier New</option><option value="Lucida Console">Lucida Console</option></optgroup>
</select></div>
</div>
<!-- champ texte -->
<div class="editeurtextes" contenteditable></div>
<!-- bouton clean/save -->
<div class="buttons">
<button data-champtextesprives="clear" type="button">SUPPRIMER</button>
<button data-champtextesprives="save" type="button">SAUVEGARDER</button>
</div>
</div>

<!-- SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script>
// voir ci-dessous
</script>
</body>
</html>



/* eslint no-redeclare: "error" */
/* global window, localStorage, document */

// // // // // // // // // // // // // // // // // // // // // //  

// clic (zone phrase) pour fond yellow/montre phrase (si feutre yellow) ou fond pink-grey/cache phrase (si feutre pink-grey)

// Fonctions setItem (sauvegarde états couleurs divs) + fonction getItem (affiche états couleurs divs après refresh)
$(function(){

    function saveClassForDiv(){
        var obj = [];
        $("[data-fordiv]").each(function(){
            let fordiv = $(this).data('fordiv').trim();
            obj.push([fordiv, $(this).attr('class')]);
        });
        window.localStorage.setItem("fordivclass", JSON.stringify(obj));
    }

    function restoreClassForDiv(){
        var arrForDiv = JSON.parse(localStorage.getItem("fordivclass"));
        $.each(arrForDiv, function(index, value) {
            console.log(index, value);
            let elm = $('div' + value[0]);
            elm.addClass(value[1]);
        });
    }

    // Fonction toggle1
    (function($) {
        $.fn.ftoggle1 = function(func1, func2) {
            var funcs = [func1, func2];
            this.data('toggleclicked', 0);
            this.click(function(){
                var data = $(this).data();
                var tc = data.toggleclicked;
                $.proxy(funcs[tc], this)();
                data.toggleclicked = (tc + 1) % 2;
            });
            return this;
        };
    }(jQuery));

    // Toggle1 (pour couleur yellow/pink/grey de div ponctuelle)
    // Toggle1 - Phase1
    $("[data-fordiv]").ftoggle1(function(){
            var selectora = $(this).data('fordiv');
            var selectorb = $(this).data('pourphrases');

            if ($("#feutreyellow").hasClass("yellowactif")) {
                $(selectora).removeClass("transparent");
                $(selectora).removeClass("grey");
                $(selectora).removeClass("pink");
                $(selectorb).removeClass("cachephrases");
                $(selectorb).addClass("montrephrases");
                $(selectora).addClass("yellow");
                saveClassForDiv();
                window.localStorage.setItem('savephrases' + this.dataset.pourphrases, $(selectorb).hasClass('montrephrases'));
            };

            if ($("#feutrepink").hasClass("pinkactif")) {
                $(selectora).removeClass("yellow");
                $(selectora).removeClass("transparent");
                $(selectora).removeClass("grey");
                $(selectorb).removeClass("montrephrases");
                $(selectorb).addClass("cachephrases");
                $(selectora).addClass("pink");
                saveClassForDiv();
                window.localStorage.removeItem('savephrases' + this.dataset.pourphrases);
            };

            if ($("#feutregrey").hasClass("greyactif")) {
                $(selectora).removeClass("yellow");
                $(selectora).removeClass("pink");
                $(selectora).removeClass("transparent");
                $(selectorb).removeClass("montrephrases");
                $(selectorb).addClass("cachephrases");
                $(selectora).addClass("grey");
                saveClassForDiv();
                window.localStorage.removeItem('savephrases' + this.dataset.pourphrases);
            }
        },

        // Toggle1 - Phase2
        function(){
            var selectora = $(this).data('fordiv');
            var selectorb = $(this).data('pourphrases');

            if ($("#feutreyellow").hasClass("yellowactif")) {
                $(selectora).removeClass("yellow");
                $(selectora).removeClass("pink");
                $(selectora).removeClass("grey");
                $(selectorb).removeClass("montrephrases");
                $(selectorb).addClass("cachephrases");
                $(selectora).addClass("transparent");
                saveClassForDiv();
                window.localStorage.removeItem('savephrases' + this.dataset.pourphrases);
            };

            if ($("#feutrepink").hasClass("pinkactif")) {
                $(selectora).removeClass("yellow");
                $(selectora).removeClass("pink");
                $(selectora).removeClass("grey");
                $(selectorb).removeClass("montrephrases");
                $(selectorb).addClass("cachephrases");
                $(selectora).addClass("transparent");
                saveClassForDiv();
            };

            if ($("#feutregrey").hasClass("greyactif")) {
                $(selectora).removeClass("yellow");
                $(selectora).removeClass("pink");
                $(selectora).removeClass("grey");
                $(selectorb).removeClass("montrephrases");
                $(selectorb).addClass("cachephrases");
                $(selectora).addClass("transparent");
                window.localStorage.removeItem('savephrases' + this.dataset.pourphrases);
                saveClassForDiv();
            }
        }

    );

    // Fonction getItem (affiche états phrases)
    $("[data-pourphrases]").each(function fpoursavephrases(){

        var selectorb = $(this).data('pourphrases');
        var poursavephrases = 'savephrases' + this.dataset.pourphrases;

        if (window.localStorage.getItem(poursavephrases) && window.localStorage.getItem(poursavephrases) === "true") {
            $(selectorb).removeClass('cachephrases');
            $(selectorb).addClass('montrephrases')
        }

    });

// // // // // // // // // // // // // // // // // // // // // // 

    // Fonction toggle2
    (function($) {
        $.fn.ftoggle2 = function(func3, func4) {
            var funcs2 = [func3, func4];
            this.data('toggleclicked2', 0);
            this.click(function(){
                var data = $(this).data();
                var tc2 = data.toggleclicked2;
                $.proxy(funcs2[tc2], this)();
                data.toggleclicked2 = (tc2 + 1) % 2;
            });
            return this;
        };
    }(jQuery));

    // Toggle2 (pour couleur grey/transparent de toutes divs sauf yellow/pink)
    // Toggle2 - Phase1
    $("#toutgrey").ftoggle2(function(){
            $('[data-fordiv]').removeClass("transparent");
            $('[data-fordiv]').not(".pink,.yellow").addClass("grey");
            saveClassForDiv();
        },

        // Toggle2 - Phase2
        function(){
            $('[data-fordiv]').removeClass("grey");
            $('[data-fordiv]').not(".pink,.yellow").addClass("transparent");
            saveClassForDiv();
        }

    );

    // Affiche états couleurs divs après refresh
    restoreClassForDiv();

});

// // // // // // // // // // // // // // // // // // // // // // 

// clic (bouton) pour clean phrase unique montrée
$("[data-boutoncleanligne]").on("click", function fpourboutonscleanlignes(){
    var selectorc = $(this).data('removephrase');
    var selectore = $(this).data('boutoncleanligne');
    $(selectore).removeClass("yellow");
    $(selectorc).removeClass("montrephrases");
    $(selectorc).addClass("cachephrases");
    window.localStorage.removeItem('savephrases' + this.dataset.removephrase);

});

// script sauvegarde champ textes privés 1 (savechamptextesprives1)
$('.mainchamptextesprives button[data-champtextesprives]').click(function fclickpourchamptextesprives(){
    document.execCommand($(this).data('champtextesprives'), false)
});
$('.mainchamptextesprives select[data-champtextesprives]').change(function fchangepourchamptextesprives(){
    var $value = $(this).find(':selected').val();
    document.execCommand($(this).data('champtextesprives'), false, $value)
});
if (typeof(Storage) !== "undefined") {
    $('.editeurtextes').keypress(function fkeypresspourchamptextesprives(){
        $(this).find('.saved').detach()
    });
    $('.editeurtextes').html(window.localStorage.getItem("savechamptextesprives1")); // jamais modifier savechamptextesprives1sprives1 sinon perd textes
    $('button[data-champtextesprives="save"]').click(function(){
        var $content = $('.editeurtextes').html();
        window.localStorage.setItem("savechamptextesprives1", $content); // jamais modifier savechamptextesprives1 sinon perd textes
        $('.editeurtextes').append('<span class="saved"><i class="fa fa-check"></i></span>').fadeIn(function ffadeinpourchamptextesprives(){
            $(this).find('.saved').fadeOut(500)
        })
    });
    $('button[data-champtextesprives="clear"]').click(function(){
        $('.editeurtextes').html('');
        window.localStorage.removeItem("savechamptextesprives1")
    })
}; // jamais modifier savechamptextesprives1 sinon perd textes

// clic (image) choix feutre yellow/pink/grey
$("#feutreyellow").on("click", function(){
    $("#feutreyellow").addClass("yellowactif");
    if ($("#feutreyellow").hasClass("yellowactif")) {
        $(":root").get(0).style.setProperty('--curseur', 'var(--curseuryellow)');
        $("#feutrepink").removeClass("pinkactif");
        $("#feutregrey").removeClass("greyactif");
        $("#curseurdefaut").removeClass("curseurdefautactif")
    }
});
$("#feutrepink").on("click", function(){
    $("#feutrepink").addClass("pinkactif");
    if ($("#feutrepink").hasClass("pinkactif")) {
        $(":root").get(0).style.setProperty('--curseur', 'var(--curseurpink)');
        $("#feutreyellow").removeClass("yellowactif");
        $("#feutregrey").removeClass("greyactif");
        $("#curseurdefaut").removeClass("curseurdefautactif")
    }
});
$("#feutregrey").on("click", function(){
    $("#feutregrey").addClass("greyactif");
    if ($("#feutregrey").hasClass("greyactif")) {
        $(":root").get(0).style.setProperty('--curseur', 'var(--curseurgrey)');
        $("#feutreyellow").removeClass("yellowactif");
        $("#feutrepink").removeClass("pinkactif");
        $("#curseurdefaut").removeClass("curseurdefautactif")
    }
});
$("#curseurdefaut").on("click", function(){
    $("#curseurdefaut").addClass("curseurdefautactif");
    if ($("#curseurdefaut").hasClass("curseurdefautactif")) {
        $(":root").get(0).style.setProperty('--curseur', 'defaut');
        $("#feutreyellow").removeClass("yellowactif");
        $("#feutrepink").removeClass("pinkactif");
        $("#feutregrey").removeClass("greyactif")
    }
});

// clic (bouton) pour clean partiel (couleurs toutes divs, garde richtext écrit par visiteur)
$("#cleanpartiel").on("click", function(){
    var protchamptextesprives1 = window.localStorage.getItem('savechamptextesprives1'); // jamais modifier protchamptextesprives1/savechamptextesprives1 sinon perd textes
    $('[data-fordiv]').removeClass("yellow pink grey");
    $('[data-cleanphrases]').removeClass("montrephrases");
    $('[data-cleanphrases]').addClass("cachephrases");
    window.localStorage.clear();
    window.localStorage.setItem('savechamptextesprives1', protchamptextesprives1); // jamais modifier sinon perd textes
    $('#curseurdefaut').addClass("curseurdefautactif");
    $('#feutreyellow').removeClass("yellowactif");
    $('#feutrepink').removeClass("pinkactif");
    $('#feutregrey').removeClass("greyactif");
    $(":root").get(0).style.setProperty('--curseur', 'defaut')
});

// // // // // // // // // // // // // // // // // // // // // //
0
Réponse 4 / 4
Ben_Lyon Messages postés 10 Date d'inscription samedi 5 décembre 2020 Statut Membre Dernière intervention 1 février 2021
Modifié le 1 févr. 2021 à 06:24
Tout fonctionne, c'est bon ! Merci encore Jordane. Tu m'as permis de m'améliorer et d'utiliser des méthodes optimisées. J'ai mieux compris les fonctionnalités que j'ai utilisé. Je travaille maintenant sur un script pour cloner mes phrases affichables (plutôt que de les avoir en doublon), mais ça.. C'est une autre histoire ! Bonne journée.

- Vue finale : https://checkandsave.info/usa/tests/test8/test8.html

- Code : 

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>a</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>
<link rel="stylesheet" href="css/stylemain.css">

<style>
/* design temp à delete */
hr {height: 1px;background-color: grey; border: none}

/* pour toutes variables (pas changer nom "root") */
:root {
--fondpink: pink;
--curseur: defaut;
--curseuryellow: url("feutreyellow.png"), auto;
--curseurpink: url("feutrepink.png"), auto;
--curseurgrey: url("feutregrey.png"), auto;
--curseurdefaut: url("curseurdefaut.png"), auto;
}

img {
position:relative;
top:7px;
}

.cachephrases {
display: none;
content-visibility: hidden;
}

.montrephrases {
display: block;
content-visibility: visible;
}

.yellow {
color: black;
background-color: yellow;
}

.pink {
color: black;
background-color: var(--fondpink);
}

.grey {
color: #D0D0D0;
background-color: white;
}

.transparent {
color: black;
background-color: red;
}

.pinkactif, .yellowactif, .greyactif, .curseurdefautactif {
border: 1px solid red;
box-sizing: border-box;
}

.sujet1:hover {
cursor: var(--curseur);
}
</style>
</head>
<body>

- (clic bouton) clean complet localstorage <button onclick="localStorage.clear()">CLEAN TOTAL</button>
<br /><br />
- (clic bouton) clean couleurs toutes divs, garde richtext écrit par visiteur : <button id="cleanpartiel">CLEAN PARTIEL</button>
<br /><br /><br />

<!-- OPTIONS SURBRILLAGES ("FEUTRES")/AFFICHE PHRASES-->
<u><b>FEUTRES/BOUTON A CLIQUER POUR SURBRILLER PHRASES</b></u>
<br /><br />
- (clic bouton) refresh page : <button onClick="window.location.reload();">Refresh Page</button>
<br />
- (clic image1) curseur defaut : <img src="curseurdefaut.png" id="curseurdefaut" alt="" class="curseurdefautactif" />
<br />
- (clic image2) surbrille yellow + affiche phrase div : <img src="feutreyellow.png" id="feutreyellow" alt="" />
<br />
- (clic image3) surbrille pink : <img src="feutrepink.png" id="feutrepink" alt="" />
<br />
- (clic image4) surbrille grey : <img src="feutregrey.png" id="feutregrey" alt="" />
<br /><br />
- (clic bouton) couleur grey/transparent de toutes divs sauf yellow/pink : <button id="toutgrey">Grey partiel</button>

<br /><br /><hr /><hr /><hr /><hr /><br />

<!-- PHRASES -->
<u><b>PHRASES A CLIQUER</b></u>
<br /><br />
<div class="sujet1">
PHRASE1<div id="zone1" data-fordiv="#zone1" data-pourphrases="#phrase1">phrase1 à surbriller et afficher ci-dessous (si jaune)</div>
<br /><hr /><br />
PHRASE2<div id="zone2" data-fordiv="#zone2" data-pourphrases="#phrase2">phrase2 à surbriller et afficher ci-dessous (si jaune)</div>
<br /><hr /><br />
PHRASE3<div id="zone3" data-fordiv="#zone3" data-pourphrases="#phrase3">phrase3 à surbriller et afficher ci-dessous (si jaune)</div>
</div>

<br /><hr /><hr /><hr /><hr /><br />

<!-- PHRASES "COPIEES" + SURBRILLAGE JAUNE -->
<u><b>PHRASES "COPIEES" + SURBRILLAGE JAUNE</b></u>
<br /><br />
<div id="phrase1" class="cachephrases" data-cleanphrases="#phrase1">
phrase1 affichée
<button data-boutoncleanligne="#zone1" data-removephrase="#phrase1">clean phrase/couleur</button>
</div>

<br /><br /><hr />

<div id="phrase2" class="cachephrases" data-cleanphrases="#phrase2">
phrase2 affichée
<button data-boutoncleanligne="#zone2" data-removephrase="#phrase2" >clean phrase/couleur</button>
</div>

<br /><br /><hr />

<div id="phrase3" class="cachephrases" data-cleanphrases="#phrase3">
phrase3 affichée
<button data-boutoncleanligne="#zone3" data-removephrase="#phrase3">clean phrase/couleur</button>
</div>

<br /><br /><hr /><hr /><hr /><hr /><br />

<!-- ZONE CHAMP TEXTE PRIVE VISITEUR -->
<u><b>ZONE CHAMP TEXTE PRIVE VISITEUR</b></u>
<!-- texte-haut/titre -->
<div class="mainchamptextesprives" >
<!-- menu gauche -->
<div class="menuediteurtextes" >
<button type="button" data-champtextesprives="bold"><i class="fa fa-bold"></i></button>
<button type="button" data-champtextesprives="italic"><i class="fa fa-italic"></i></button>
<button type="button" data-champtextesprives="underline"><i class="fa fa-underline"></i></button>
<button type="button" data-champtextesprives="justifyleft"><i class="fa fa-align-left"></i></button>
<button type="button" data-champtextesprives="justifycenter"><i class="fa fa-align-center"></i></button>
<button type="button" data-champtextesprives="justifyright"><i class="fa fa-align-right"></i></button>
<button type="button" data-champtextesprives="insertunorderedlist"><i class="fa fa-list-ul"></i></button>
<button type="button" data-champtextesprives="insertorderedlist"><i class="fa fa-list-ol"></i></button>
<!-- menu droite -->
<div class="customSelect">Police : <select data-champtextesprives="fontname">
<optgroup label="Serif Fonts"><option value="Bree Serif">Bree Serif</option><option value="Georgia">Georgia</option><option value="Palatino Linotype">Palatino Linotype</option><option value="Times New Roman">Times New Roman</option></optgroup><optgroup label="Sans Serif Fonts"><option value="Arial" selected>Arial</option><option value="Arial Black">Arial Black</option><option value="Asap">Asap</option><option value="Comic Sans MS">Comic Sans MS</option><option value="Impact">Impact</option><option value="Lucida Sans Unicode">Lucida Sans Unicode</option><option value="Tahoma">Tahoma</option><option value="Trebuchet MS">Trebuchet MS</option><option value="Verdana">Verdana</option></optgroup><optgroup label="Monospace Fonts"><option value="Courier New">Courier New</option><option value="Lucida Console">Lucida Console</option></optgroup>
</select></div>
</div>
<!-- champ texte -->
<div class="editeurtextes" contenteditable></div>
<!-- bouton clean/save -->
<div class="buttons">
<button data-champtextesprives="clear" type="button">SUPPRIMER</button>
<button data-champtextesprives="save" type="button">SAUVEGARDER</button>
</div>
</div>

<!-- SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<script>
// voir ci-dessous
</script>
</body>
</html>



/* eslint no-redeclare: "error" */
/* global window, localStorage, document */

// // // // // // // // // // // // // // // // // // // // // //  

// data haut (id="zone1") = fordiv, boutoncleanligne
// data bas/modal (id="phrase1") = pourphrases, cleanphrases, removephrase

// clic (zone phrase) pour fond yellow/montre phrase (si feutre yellow) ou fond pink-grey/cache phrase (si feutre pink-grey)

// Fonctions setItem (sauvegarde états couleurs divs) + fonction getItem (affiche états couleurs divs après refresh)
$(function(){

    function saveClassForDiv(){
        var obj = [];
        $("[data-fordiv]").each(function(){
            let fordiv = $(this).data('fordiv').trim();
            obj.push([fordiv, $(this).attr('class')]);
        });
        window.localStorage.setItem("fordivclass", JSON.stringify(obj));
    }

    function restoreClassForDiv(){
        var arrForDiv = JSON.parse(localStorage.getItem("fordivclass"));
        $.each(arrForDiv, function(index, value) {
            console.log(index, value);
            let elm = $('div' + value[0]);
            elm.addClass(value[1]);
        });
    }

    // Fonctions setItem (sauvegarde états phrase) + fonction getItem (affiche états phrase après refresh)
    function saveClassForSentence(){
        var obj2 = [];
        $("[data-cleanphrases].montrephrases").each(function(){
            let pourphrases = $(this).data('cleanphrases').trim();
            obj2.push([pourphrases, $(this).attr('class')]);
        });
        window.localStorage.setItem("clefphrases", JSON.stringify(obj2));
    }

    function restoreClassForSentence(){
        var affichephrase = JSON.parse(localStorage.getItem("clefphrases"));
        $.each(affichephrase, function(index, value) {
            console.log(index, value);
            let elm2 = $('div' + value[0]);
            elm2.addClass(value[1]);
        });
    }

    // Fonction toggle1
    (function($) {
        $.fn.ftoggle1 = function(func1, func2) {
            var funcs = [func1, func2];
            this.data('toggleclicked', 0);
            this.click(function(){
                var data = $(this).data();
                var tc = data.toggleclicked;
                $.proxy(funcs[tc], this)();
                data.toggleclicked = (tc + 1) % 2;
            });
            return this;
        };
    }(jQuery));

    // Toggle1 (pour couleur yellow/pink/grey de div ponctuelle)
    // Toggle1 - Phase1
    $("[data-fordiv]").ftoggle1(function(){
            var selectora = $(this).data('fordiv');
            var selectorb = $(this).data('pourphrases');

            if ($("#feutreyellow").hasClass("yellowactif")) {
                $(selectora).removeClass("transparent");
                $(selectora).removeClass("grey");
                $(selectora).removeClass("pink");
                $(selectorb).removeClass("cachephrases");
                $(selectorb).addClass("montrephrases");
                $(selectora).addClass("yellow");
                saveClassForDiv();
                saveClassForSentence();
            };

            if ($("#feutrepink").hasClass("pinkactif")) {
                $(selectora).removeClass("yellow");
                $(selectora).removeClass("transparent");
                $(selectora).removeClass("grey");
                $(selectorb).removeClass("montrephrases");
                $(selectorb).addClass("cachephrases");
                $(selectora).addClass("pink");
                saveClassForDiv();
                saveClassForSentence();
            };

            if ($("#feutregrey").hasClass("greyactif")) {
                $(selectora).removeClass("yellow");
                $(selectora).removeClass("pink");
                $(selectora).removeClass("transparent");
                $(selectorb).removeClass("montrephrases");
                $(selectorb).addClass("cachephrases");
                $(selectora).addClass("grey");
                saveClassForDiv();
                saveClassForSentence();
            }
        },

        // Toggle1 - Phase2
        function(){
            var selectora = $(this).data('fordiv');
            var selectorb = $(this).data('pourphrases');

            if ($("#feutreyellow").hasClass("yellowactif")) {
                $(selectora).removeClass("yellow");
                $(selectora).removeClass("pink");
                $(selectora).removeClass("grey");
                $(selectorb).removeClass("montrephrases");
                $(selectorb).addClass("cachephrases");
                $(selectora).addClass("transparent");
                saveClassForDiv();
                saveClassForSentence();
            };

            if ($("#feutrepink").hasClass("pinkactif")) {
                $(selectora).removeClass("yellow");
                $(selectora).removeClass("pink");
                $(selectora).removeClass("grey");
                $(selectorb).removeClass("montrephrases");
                $(selectorb).addClass("cachephrases");
                $(selectora).addClass("transparent");
                saveClassForDiv();
                saveClassForSentence();
            };

            if ($("#feutregrey").hasClass("greyactif")) {
                $(selectora).removeClass("yellow");
                $(selectora).removeClass("pink");
                $(selectora).removeClass("grey");
                $(selectorb).removeClass("montrephrases");
                $(selectorb).addClass("cachephrases");
                $(selectora).addClass("transparent");
                saveClassForDiv();
                saveClassForSentence();
            }
        }

    );

    // Clic (bouton) pour clean phrase unique montrée
    $("[data-removephrase]").on("click", function fpourboutonscleanlignes(){
        var selectora = $(this).data('boutoncleanligne');
        var selectorc = $(this).data('removephrase');
        $(selectora).removeClass("yellow");
        $(selectorc).removeClass("montrephrases");
        $(selectorc).addClass("cachephrases");
        saveClassForDiv();
        saveClassForSentence();
    });

    // Fonction toggle2
    (function($) {
        $.fn.ftoggle2 = function(func3, func4) {
            var funcs2 = [func3, func4];
            this.data('toggleclicked2', 0);
            this.click(function(){
                var data = $(this).data();
                var tc2 = data.toggleclicked2;
                $.proxy(funcs2[tc2], this)();
                data.toggleclicked2 = (tc2 + 1) % 2;
            });
            return this;
        };
    }(jQuery));

    // Toggle2 (pour couleur grey/transparent de toutes divs sauf yellow/pink)
    // Toggle2 - Phase1
    $("#toutgrey").ftoggle2(function(){
            $('[data-fordiv]').removeClass("transparent");
            $('[data-fordiv]').not(".pink,.yellow").addClass("grey");
            saveClassForDiv();
        },

        // Toggle2 - Phase2
        function(){
            $('[data-fordiv]').removeClass("grey");
            $('[data-fordiv]').not(".pink,.yellow").addClass("transparent");
            saveClassForDiv();
        }

    );

    // Affiche états couleurs divs/phrases après refresh
    restoreClassForDiv();
    restoreClassForSentence();

});

// script sauvegarde champ textes privés 1 (savechamptextesprives1)
$('.mainchamptextesprives button[data-champtextesprives]').click(function fclickpourchamptextesprives(){
    document.execCommand($(this).data('champtextesprives'), false)
});
$('.mainchamptextesprives select[data-champtextesprives]').change(function fchangepourchamptextesprives(){
    var $value = $(this).find(':selected').val();
    document.execCommand($(this).data('champtextesprives'), false, $value)
});
if (typeof(Storage) !== "undefined") {
    $('.editeurtextes').keypress(function fkeypresspourchamptextesprives(){
        $(this).find('.saved').detach()
    });
    $('.editeurtextes').html(window.localStorage.getItem("savechamptextesprives1")); // jamais modifier savechamptextesprives1sprives1 sinon perd textes
    $('button[data-champtextesprives="save"]').click(function(){
        var $content = $('.editeurtextes').html();
        window.localStorage.setItem("savechamptextesprives1", $content); // jamais modifier savechamptextesprives1 sinon perd textes
        $('.editeurtextes').append('<span class="saved"><i class="fa fa-check"></i></span>').fadeIn(function ffadeinpourchamptextesprives(){
            $(this).find('.saved').fadeOut(500)
        })
    });
    $('button[data-champtextesprives="clear"]').click(function(){
        $('.editeurtextes').html('');
        window.localStorage.removeItem("savechamptextesprives1")
    })
}; // jamais modifier savechamptextesprives1 sinon perd textes

// clic (image) choix feutre yellow/pink/grey
$("#feutreyellow").on("click", function(){
    $("#feutreyellow").addClass("yellowactif");
    if ($("#feutreyellow").hasClass("yellowactif")) {
        $(":root").get(0).style.setProperty('--curseur', 'var(--curseuryellow)');
        $("#feutrepink").removeClass("pinkactif");
        $("#feutregrey").removeClass("greyactif");
        $("#curseurdefaut").removeClass("curseurdefautactif")
    }
});
$("#feutrepink").on("click", function(){
    $("#feutrepink").addClass("pinkactif");
    if ($("#feutrepink").hasClass("pinkactif")) {
        $(":root").get(0).style.setProperty('--curseur', 'var(--curseurpink)');
        $("#feutreyellow").removeClass("yellowactif");
        $("#feutregrey").removeClass("greyactif");
        $("#curseurdefaut").removeClass("curseurdefautactif")
    }
});
$("#feutregrey").on("click", function(){
    $("#feutregrey").addClass("greyactif");
    if ($("#feutregrey").hasClass("greyactif")) {
        $(":root").get(0).style.setProperty('--curseur', 'var(--curseurgrey)');
        $("#feutreyellow").removeClass("yellowactif");
        $("#feutrepink").removeClass("pinkactif");
        $("#curseurdefaut").removeClass("curseurdefautactif")
    }
});
$("#curseurdefaut").on("click", function(){
    $("#curseurdefaut").addClass("curseurdefautactif");
    if ($("#curseurdefaut").hasClass("curseurdefautactif")) {
        $(":root").get(0).style.setProperty('--curseur', 'defaut');
        $("#feutreyellow").removeClass("yellowactif");
        $("#feutrepink").removeClass("pinkactif");
        $("#feutregrey").removeClass("greyactif")
    }
});

// clic (bouton) pour clean partiel (couleurs toutes divs, garde richtext écrit par visiteur)
$("#cleanpartiel").on("click", function(){
    var protchamptextesprives1 = window.localStorage.getItem('savechamptextesprives1'); // jamais modifier protchamptextesprives1/savechamptextesprives1 sinon perd textes
    $('[data-fordiv]').removeClass("yellow pink grey");
    $('[data-cleanphrases]').removeClass("montrephrases");
    $('[data-cleanphrases]').addClass("cachephrases");
    window.localStorage.clear();
    window.localStorage.setItem('savechamptextesprives1', protchamptextesprives1); // jamais modifier sinon perd textes
    $('#curseurdefaut').addClass("curseurdefautactif");
    $('#feutreyellow').removeClass("yellowactif");
    $('#feutrepink').removeClass("pinkactif");
    $('#feutregrey').removeClass("greyactif");
    $(":root").get(0).style.setProperty('--curseur', 'defaut')
});

// // // // // // // // // // // // // // // // // // // // // //
0

Discussions similaires

ne pas utiliser la souris mais le clavier
isabela -
thomas-richet -

32 réponses
Votl , le chien
Pyrolio -
Pyrolio -

2 réponses
Qu'est ce que le disque Data (D:)?
dededu4733 -
Acxion -

2 réponses
détail facture sfr data ?
BONO -
f76 -

9 réponses
logiciel lecture pour mal-voyant
lolodu61 -
nounou -

11 réponses