Faire apparaitre du contenu html avec du CSS, ou JS

[bplc]

Rappel du premier message :

Bonjour,

j'aurais aimer savoir si il exister une façon de faire apparaitre du contenu html avec du CSS,


Je sais que le javascript est plus adapté et je ne suis pas contre, mais le connaissant assez mal, ce n'est pas simple.



Au niveaux JS la seule chose que j'ai réussi a faire pour l'instant, est de changer l'attribut d'un CSS via le sélecteur querySelector

Code:

$(function(){ 
document.querySelector(".MON_CSS").style.MON_ATTRIBUT_CSS = "MA_VALEUR_CSS"
;});

je suppose que en suivant cette méthode, je devrais pouvoir injecter du texte, ou du code.

Je suis encore bien a la ramasse niveau DOM, je n'arrive toujours pas a sélectionner exactement ce que je veux, et j'ai pas mal de bug bizarre, mais j'avance a mon rythme ^^ et pour l'instant je suis très content d'avoir réussir a injecter un attribut CSS xD


Merci bien ^^

[chattigre]

Bonjour,
Alors, si, du replace, il va y en avoir, forcément. On pourra pas faire autrement et ce sera très bien comme ça, ce n'est pas parce que c'est du JS que ce n'est pas propre.

Voici l'ensemble du "Pack Traduction", code à placer bien sûr sur Toutes les pages.

Code:

$(function() {
  var defaultTranslation = "en";

  $('.fa_translate_container').each(function() {
    if ($('.fa_translate_' + _userdata["user_lang"], this).length < 1)
      $('.fa_translate_' + defaultTranslation, this).show();
    else {
      $('.fa_translate_' + _userdata["user_lang"], this).show();
    }
  });
});
$(function() {
  var trans_lang = ["en", "es"]; //Toutes les langues possibles, tous éléments confondus
  //ensemble des traductions.
  var translate = {
    "c1": {
      "original": 'Votre 1ère catégorie',
      "en": "My first cat"
    },
    "f1": {
      "original": 'Votre 1er forum',
      "en": 'My first fofo',
      "es": 'Espagnol',
    },
    "f2": {
      "original": 'Corbeille',
      "en": 'Wastes',
      "es": 'Espagnol',
    },
    "f3": {
      "en": 'AnglaisF3',
      "es": 'Espagnol',
    },
    "f4": {
      "en": 'AnglaisF4',
      "es": 'Espagnol',
    },
    "f5": {
      "en": 'AnglaisF5',
      "es": 'Espagnol',
    }
  };
  if (trans_lang.includes(_userdata.user_lang)) {
  for (var el in translate) { //pour chaque élément du tableau
    if (translate.hasOwnProperty(el)) { //Si il s'agit bien d'un élément direct
      if (Object.keys(translate[el]).includes(_userdata.user_lang)) { //Si la langue est disponible pour cet élément
        var val = translate[el];
        $('#modernbb .topiclist.forums .dterm a[href*="' + el + '-"].forumtitle, .dterm a[href*="' + el + '-"].gensmall, #mpage-body-modern .forum-section .forum-content a[href*="' + el + '-"] h3').html(translate[el][_userdata.user_lang]); //liens web et mobile sur l'index et sous-forums
        $('#modernbb a[href*="' + el + '-"].nav').html(translate[el][_userdata.user_lang]); //fil d'ariane version web
      if (window.location.pathname.indexOf('/' + el + '-') == 0) { //Si on est sur la page de l'élément
        document.title = translate[el][_userdata.user_lang]; //On change le titre de la page
          if (Object.keys(translate[el]).includes("original")) { //Si un texte original est disponible
            $("#modernbb h1.page-title, #mpage-body-modern h1.mobile-title-content, .mobile_title_content").html(translate[el][_userdata.user_lang]); //Gros titre
            $("#modernbb .topiclist:not(.topics) .table-title, #mpage-body-modern .forum h2").each(function() { //Titre sur fond bleu (catégories et forums avec sous-forums)
              $(this).html($(this).html().replace(translate[el]["original"], translate[el][_userdata.user_lang]));
            });
          }
        }
        if ((window.location.pathname == '/') || (window.location.pathname == '/forum')) { //Sur l'index
          $("#modernbb .topiclist:not(.topics) .table-title, #mpage-body-modern .forum h2").each(function() {
            $(this).html($(this).html().replace(translate[el]["original"], translate[el][_userdata.user_lang]));
          });
        }
      }
    }
  }
  }
});

EDITÉ : Oubli d'éléments mobile corrigé

Vous remarquerez que le début est le script de traduction de FA.
A utiliser dans les descriptions de catégories et de forums (avec le fa_translate_container etc.).

Ensuite, il faut configurer le script.

Code:

  var trans_lang = ["en", "es"]; //Toutes les langues possibles, tous éléments confondus

Tous les éléments ne seront pas forcément traduits dans toutes les langues. Mais dès qu'une langue est présente au moins une fois, il faut l'ajouter ici, sinon le script passera son chemin...

Code:

  var translate = {
    "c1": {
      "original": 'Votre 1ère catégorie',
      "en": "My first cat"
    },
    "f1": {
      "original": 'Votre 1er forum',
      "en": 'My first fofo',
      "es": 'Espagnol'
    },
    "f2": {
      "original": 'Corbeille',
      "en": 'Wastes',
      "es": 'Espagnol'
    },
    "f3": {
      "en": 'AnglaisF3',
      "es": 'Espagnol'
    },
    "f4": {
      "en": 'AnglaisF4',
      "es": 'Espagnol'
    },
    "f5": {
      "en": 'AnglaisF5',
      "es": 'Espagnol'
    }
  };

Tout se passe ici :
Pour chaque forum ou catégorie à traduire, vous devez ajouter un élément qui porte son identifiant (commençant par f ou c + des chiffres, sans le tiret final). Puis ouvrir une accolade et lister les langues sous la forme "lg":"traduction"

Code:

"fID": {
  "lg1": 'Trad lg1',
  "lg2": 'Trad lg2'
},

Le dernier élément d'une liste (dernier forum / catégorie ou dernière traduction d'un élément n'est pas suivi d'une virgule, les autres si.

Je m'attarde sur deux choses  :
- la traduction "original" : Le texte tel qu'il est dans le PA.
Elle est nécessaire dans deux cas :  Les catégories, dont le titre est affiché au format texte sur l'index. Et les forums qui contiennent des sous-forums, dont le nom est affiché textuellement sur leur page.

- L'importance de ne pas inclure de textes confidentiels dans le JS : Un utilisateur averti pourra les lire via le code de la page. A garder à l'esprit si vous avez une rubrique "top secrete" dont le nom doit rester confidentiel... Je parle pas d'un truc genre "Corbeille" hein, mais éventuellement d'un titre un peu sensible ^^

Si vous avez des questions, n'hésitez pas (notamment sur la construction du code ^^)

Bonne soirée

[bplc]

Wow code magnifique :
Je viens de le tester mais il ne fonctionne pas :
Pour les test j'ai mis la langue du fofo par default en FR,la langue par default de admin est francais aussi, 

J'ai changé esp pour la langue que j'utilise, et mis f7 au lieux de f1, mais cela n'as pas fonctionné, sachant qu'un simple point mal placé peux détruire le code, j'ai bien peur de ne pas savoir ou est l'erreur xD dans ce cas de figure existe t'il un mode debug ou autres pour voir d'ou peux provenir une erreur ? 

Code:

$(function() {
  var defaultTranslation = "fr";
 
  $('.fa_translate_container').each(function() {
    if ($('.fa_translate_' + _userdata["user_lang"], this).length < 1)
      $('.fa_translate_' + defaultTranslation, this).show();
    else {
      $('.fa_translate_' + _userdata["user_lang"], this).show();
    }
  });
});
$(function() {
  var trans_lang = ["en", "pt"]; //Toutes les langues possibles, tous éléments confondus
  //ensemble des traductions.
  var translate = {
    "c1": {
      "original": 'Votre 1ère catégorie',
      "pt": "My first cat"
    },
    "f7": {
      "original": 'Votre 1er forum',
      "en": 'My first fofo',
      "pt": 'Espagnol',
    },
    "f2": {
      "original": 'Corbeille',
      "en": 'Wastes',
      "pt": 'Espagnol',
    },
    "f3": {
      "en": 'AnglaisF3',
      "pt": 'Espagnol',
    },
    "f4": {
      "en": 'AnglaisF4',
      "pt": 'Espagnol',
    },
    "f5": {
      "en": 'AnglaisF5',
      "pt": 'Espagnol',
    }
  };
  if (trans_lang.includes(_userdata.user_lang)) {
  for (var el in translate) { //pour chaque élément du tableau
    if (translate.hasOwnProperty(el)) { //Si il s'agit bien d'un élément direct
      if (Object.keys(translate[el]).includes(_userdata.user_lang)) { //Si la langue est disponible pour cet élément
        var val = translate[el];
        $('#modernbb .topiclist.forums .dterm a[href*="' + el + '-"].forumtitle, .dterm a[href*="' + el + '-"].gensmall, #mpage-body-modern .forum-section .forum-content a[href*="' + el + '-"] h3').html(translate[el][_userdata.user_lang]); //liens web et mobile sur l'index et sous-forums
        $('#modernbb a[href*="' + el + '-"].nav').html(translate[el][_userdata.user_lang]); //fil d'ariane version web
      if (window.location.pathname.indexOf('/' + el + '-') == 0) { //Si on est sur la page de l'élément
        document.title = translate[el][_userdata.user_lang]; //On change le titre de la page
          if (Object.keys(translate[el]).includes("original")) { //Si un texte original est disponible
            $("#modernbb h1.page-title, #mpage-body-modern h1.mobile-title-content, .mobile_title_content").html(translate[el][_userdata.user_lang]); //Gros titre
            $("#modernbb .topiclist:not(.topics) .table-title, #mpage-body-modern .forum h2").each(function() { //Titre sur fond bleu (catégories et forums avec sous-forums)
              $(this).html($(this).html().replace(translate[el]["original"], translate[el][_userdata.user_lang]));
            });
          }
        }
        if ((window.location.pathname == '/') || (window.location.pathname == '/forum')) { //Sur l'index
          $("#modernbb .topiclist:not(.topics) .table-title, #mpage-body-modern .forum h2").each(function() {
            $(this).html($(this).html().replace(translate[el]["original"], translate[el][_userdata.user_lang]));
          });
        }
      }
    }
  }
  }
});

[bplc]

EDIT : ok je suis un débile, vous avais utilisé replace, du coup je doit rentrer le nom exacte de ma catégorie dans sa version original, désolé

[bplc]

RE édit ^^ je supprime ma question idiote, vu que vous utiliser une autre méthode.

[bplc]

Vu que vous avais largement répondu a mes questions, je vais mettre ce sujet en Résolu, 
votre travaille est extraordinaire, vous avais largement dépassé mes attentes, je vous remercie  !!!

[chattigre]

Bonjour,

En utilisant un vérificateur de syntaxe je ne constate aucune erreur fatale sur votre code.

Avez-vous bien utilisé le bon code langue correspondant à la langue configurée dans votre profil ?

Attention toutefois à ceci :

Code:

  "f7": {
      "original": 'Votre 1er forum',
      "en": 'My first fofo',
      "pt": 'Espagnol',
    },

Par convention, le dernier élément du tableau, ici pt ne doit pas avoir de virgule à la fin, donc "pt": 'Espagnol'

---
Pour les guillemets, non, ce n'est pas une erreur. Pour une chaine de base, on peut utiliser aussi bien des guillemets doubles que des guillemets simples / apostrophes. Le tout est que la chaine soit ouverte et fermée avec le même caractère.

Pour les sélecteurs CSS par exemple, j'ai volontairement mis des guillemets simples car, dans la chaine, il y a des guillemets doubles. Si je délimitais la chaine avec ces mêmes caractères, il aurait fallu les échapper...

Code:

var str = 'Une chaine';
var str2 = "Une chaine";
var str3 = "Vivement l'année prochaine";
var str4 = 'Vivement l\'année prochaine';
var str5 = 'Il se tourna vers eux et dit "Bonjour, chers amis !"';
var str6 = "Il se tourna vers eux et dit \"Bonjour, chers amis !\"";

Toutes ces écritures sont valides, vous conviendrez que si on peut éviter d'avoir à échapper avec des \, c'est plus simple...
D'ailleurs, ça peut vous servir pour vos traductions : Si vous avez dedans des ", délimitez entre apostrophes, si vous avez des apostrophes, délimitez entre guillemets doubles. Et s'il y a des deux, il faut choisir et échapper le délimiteur

Votre forum étant en mode construction, je ne peux pas aller voir directement dessus...

Bonne soirée

[chattigre]

Re,

D'accord, parfait alors !

Il est possible que l'on ait oublié des éléments, dans ce cas n'hésitez pas à envoyer un MP à un membre du Staff pour demander le replacement de ce sujet

Je pense notamment aux listes déroulantes de forums, de type "sauter vers" mais je n'en vois définitivement pas de "publiques" sous ModernBB, je suis peut-être aveugle
Il y en aura par contre au niveau modération, pour diviser / déplacer / fusionner, actuellement ce n'est pas traduit, je n'y ai pas pensé.

Si c'est nécessaire pour vous, ça doit être faisable, n'hésitez pas à me le signaler !

EDIT : Je n'utilise pas replace partout, mais je l'utilise. Sur les liens, j'utilise directement la méthode html pour remplacer le texte du lien.
Quand ce n'est pas un lien, il n'y a pas trop d'autre solution que vérifier l'url de la page et/ou faire un replace sur un élément précis au maximum mais non limité par CSS à un forum défini.

PS2 : Notez que les noms des forums ne seront pas traduits dans les notifications par e-mail dont le contenu n'est modifiable d'aucune manière.

[bplc]

Merci, non pour l'instant je n'ai pas besoin d'une modération multilingue ^^ ni le dans les notifications par email ^^

Ne nous compliquons pas la tache non plus ^^

J'ai des millier de question a vous poser, car j'ai bien aimé ce petit cour accéléré de JS, mais je vais vous laisser un peu tranquille ^^