JVFlux

« Fonctionnement technique de Jeuxvideo.com » : différence entre les versions

← Modification précédente
VisuelWikicode
Anokata (discussion | contributions)
Kheys
2 302 modifications
→Passage en React : autre endpoint pour ecrire
Anokata (discussion | contributions)
Kheys
2 302 modifications
 
(6 versions intermédiaires par le même utilisateur non affichées)
Ligne 246 : Ligne 246 :
<s>messageTextArea.value = message;</s>
<s>messageTextArea.value = message;</s>


Heureusement, il existe pour cela '''une fonction très utilisée''' sur le web :  
Heureusement, il existe '''un astuce très utilisée''' sur le web pour contourner ce soucis.<br>Voilà une variante de cette méthode fournie dans le code de JVChat d'après ce [https://www.jeuxvideo.com/forums/message/1286139785 message] :  


  function fonctionreact(textarea, value) {
  function fonctionReact(textarea, value) {
     const prototype = Object.getPrototypeOf(textarea);
     const prototype = Object.getPrototypeOf(textarea);
     const nativeSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;
     const nativeSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;
Ligne 255 : Ligne 255 :
  }
  }


Option secondaire (plus bas niveau : API DOM) à éviter sauf si la première méthode est bloquée :
Ensuite, il suffit simplement de faire appel à cette fonction quand on doit remplir une zone de texte :


  function fonctionreact(textarea, value) {
  fonctionReact(messageTextArea, message);
    textarea.setRangeText(value, 0, textarea.value.length, "end");
    textarea.dispatchEvent(new Event("input", { bubbles: true }));
}


Ensuite, il suffit simplement de faire appel à cette fonction quand on doit remplir une zone de texte :
En 1er on donne la zone de texte ciblée et en 2nd le texte à insérer.


fonctionreact(messageTextArea, message);
Pour simplifier, <code><span style="color:red;">messageTextArea</span>.value = <span style="color:green;">message</span>;</code> devient <code>fonctionReact(<span style="color:red;">messageTextArea</span>, <span style="color:green;">message</span>);</code> avec cette fonction.


En 1er on donne la zone de texte ciblée et en 2nd le texte à insérer.


Pour simplifier, <code><span style="color:red;">messageTextArea</span>.value = <span style="color:green;">message</span>;</code> devient <code>fonctionreact(<span style="color:red;">messageTextArea</span>, <span style="color:green;">message</span>);</code> avec cette fonction.
Fonction de '''dernier recours'''  (+ bas niveau : API DOM / Simule une vrai entrée clavier) '''à éviter''' ⚠️ sauf si la première méthode est bloquée :


=== Fonction officielle JVC ===
function fonctionReact(textarea, value) {
    textarea.setRangeText(value, 0, textarea.value.length, "end");
    textarea.dispatchEvent(new Event("input", { bubbles: true }));
}
=== Fonction officielle JVC===


Par ailleurs, en dehors de cette méthode, JVC a proposé une entrée native pour interagir directement avec REACT :<br>
Par ailleurs, en dehors de cette méthode, JVC a proposé une entrée native pour interagir directement avec REACT :<br>
Ligne 281 : Ligne 281 :
  jvc.getMessageEditor(".class").selectedText; // Récupérer la sélection utilisateur.
  jvc.getMessageEditor(".class").selectedText; // Récupérer la sélection utilisateur.


PS : Pour garantir le bon fonctionnement, utilisez simplement jvc.getMessageEditor(); '''sans le préfixe "window"'''<ref>Les userscripts sont exécutés dans un environnement isolé (appelé sandbox), ce qui empêche parfois l’accès direct aux objets définis dans le contexte global de la page, comme "window" .</ref>. <br>
PS : Pour garantir le bon fonctionnement, utilisez simplement <code>jvc.getMessageEditor();</code> et/ou <code>unsafeWindow.jvc.getMessageEditor();</code> <ref>Les userscripts sont exécutés dans un environnement isolé (appelé sandbox), ce qui empêche parfois l’accès direct aux objets définis dans le contexte global de la page, comme "window" .</ref>. <br>


Il est nécessaire de faire appel à <code>jvc.getMessageEditor();</code> à chaque modification, sinon vous travaillerez avec une version antérieure de la zone de texte.
Il est nécessaire de faire appel à <code>jvc.getMessageEditor();</code> à chaque modification, sinon vous travaillerez avec une version antérieure.


Cette fonction prend directement en compte des sélecteurs CSS et pas des éléments, exemple :
Cette fonction prend directement en compte des sélecteurs CSS et pas des éléments, exemple :


  let selector = "#message_topic"
  let selector = "#message_topic";
  jvc.getMessageEditor(selector).insertText('text'); //✅ Marche
  jvc.getMessageEditor(selector).insertText('text'); //✅ Marche


  let selector = document.getElementById("message_topic")
  let selector = document.getElementById("message_topic");
  jvc.getMessageEditor(selector).insertText('text'); //❌ Ne marche pas
  jvc.getMessageEditor(selector).insertText('text'); //❌ Ne marche pas


Ligne 301 : Ligne 301 :
De plus, elle ne fonctionne que sur JVC, et ce n'est pas une fonction JavaScript universelle, contrairement à la précédente.
De plus, elle ne fonctionne que sur JVC, et ce n'est pas une fonction JavaScript universelle, contrairement à la précédente.


== Liens externes ==
== Liens externes==


* [http://www.journaldunet.com/solutions/itws/050426_it_jeuxvideo.shtml Interview sur l’architecture de jeuxvideo.com de 1997 à 2005] ([http://web.archive.org/web/20070629165914/http://www.journaldunet.com/solutions/itws/050426_it_jeuxvideo.shtml archive.org])
*[http://www.journaldunet.com/solutions/itws/050426_it_jeuxvideo.shtml Interview sur l’architecture de jeuxvideo.com de 1997 à 2005] ([http://web.archive.org/web/20070629165914/http://www.journaldunet.com/solutions/itws/050426_it_jeuxvideo.shtml archive.org])


== Voir aussi ==
==Voir aussi==


* [[Documentation de l'API Jeuxvideo.com]]
*[[Documentation de l'API Jeuxvideo.com]]


{{SectionRéférences}}
{{SectionRéférences}}
Récupérée de "https://jvflux.fr/Fonctionnement_technique_de_Jeuxvideo.com"