Kheys
2 109
modifications
« Fonctionnement technique de Jeuxvideo.com » : différence entre les versions
m
→Fonction officielle JVC
user: 23ec76d (?) (JvCare PHP : espace autour du +) |
|||
| (30 versions intermédiaires par 6 utilisateurs non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
{{Bannière Info|Contenu= | {{Bannière Info|Contenu=Cette page détaille le fonctionnement technique de jeuxvideo.com. L'API v4 du site est quant à elle documentée sur [[Documentation de l'API Jeuxvideo.com]].}} | ||
== Introduction == | == Introduction == | ||
| Ligne 162 : | Ligne 160 : | ||
==== JavaScript ==== | ==== JavaScript ==== | ||
function | function jvCare(classe) { | ||
const base16 = '0A12B34C56D78E9F'; | const base16 = '0A12B34C56D78E9F'; | ||
let lien = <nowiki>''</nowiki>; | let lien = <nowiki>''</nowiki>; | ||
const s = classe.split(' ')[1]; | const s = classe.split(' ')[1]; | ||
for (let i = 0; i < s.length; i += 2) { | for (let i = 0; i < s.length; i += 2) { | ||
lien += String.fromCharCode(base16.indexOf(s. | lien += String.fromCharCode(base16.indexOf(s.at(i)) * 16 + base16.indexOf(s.at(i + 1))); | ||
} | } | ||
return lien; | return lien; | ||
} | |||
===== Fonctionnel ===== | |||
function jvCake(classe) { | |||
const base16 = '0A12B34C56D78E9F'; | |||
const s = classe.split(' ')[1]; | |||
const codeUnits = s | |||
.match(/../g) | |||
.map((i) => base16.indexOf(i[0]) * 16 + base16.indexOf(i[1])); | |||
return String.fromCharCode(...codeUnits); | |||
} | } | ||
| Ligne 227 : | Ligne 236 : | ||
== Phoenix == | == Phoenix == | ||
Phoenix | Phoenix était une partie de JVC développée en Node.js et utilisant React. De plus en plus abandonnée au fil du temps, elle était utilisée pour afficher la liste des jeux et des contenus de la rédaction. Phoenix utilisait une API spéciale hébergée au sous-domaine [[Documentation_de_l%27API_Jeuxvideo.com#API_jvc.gg|''api.jvc.gg'']]. Phoenix ainsi que l'API GG disparaissent en février 2025 et les pages qu'elles servaient sont basculées vers la partie principale du site <ref>https://www.jeuxvideo.com/forums/message/1297456370</ref>. | ||
== Passage en React== | |||
'''Fin mai 2025,''' jvc commence à se baser pour certaines parties du site sur la librairie [https://fr.wikipedia.org/wiki/React React] , ce qui a une grosse influence sur les [[Script|userscripts]] . | |||
Insérer du texte manuellement, ne marche plus : | |||
<s>messageTextArea.value = message;</s> | |||
Heureusement, il existe pour cela '''une fonction très utilisée''' sur le web : | |||
function fonctionreact(textarea, value) { | |||
const prototype = Object.getPrototypeOf(textarea); | |||
const nativeSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set; | |||
nativeSetter.call(textarea, value); | |||
textarea.dispatchEvent(new Event('input', { bubbles: true })); | |||
} | |||
Ensuite, il suffit simplement de faire appel à cette fonction quand on doit remplir une zone de texte : | |||
fonctionreact(messageTextArea, message); | |||
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 officielle JVC === | |||
Par ailleurs, en dehors de cette méthode, JVC a proposé une entrée native pour interagir directement avec REACT :<br> | |||
<code>jvc.getMessageEditor();</code> (C'est une entrée partielle, pour réaliser des fonctions officielles du site.) | |||
https://www.jeuxvideo.com/forums/message/1286112457 | |||
jvc.getMessageEditor(".class").insertText(`mon texte`); // Place du texte à l'endroit sur le focus | |||
jvc.getMessageEditor(".class").insertStartLine(`mon texte`); // Place du texte en début de ligne. | |||
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> | |||
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. | |||
Cette fonction prend directement en compte des sélecteurs CSS et pas des éléments, exemple : | |||
let selector = "#message_topic" | |||
jvc.getMessageEditor(selector).insertText('text'); //✅ Marche | |||
let selector = document.getElementById("message_topic") | |||
jvc.getMessageEditor(selector).insertText('text'); //❌ Ne marche pas | |||
Cependant, cette fonction présente plusieurs avantages notables : elle est à la fois native à JVC et intégrée au fonctionnement de React. | |||
De plus, contrairement à une modification directe du champ texte via JavaScript, cette fonction ne nécessite aucune gestion manuelle du curseur, de la sélection ou des espaces, tout est automatiquement pris en charge par la fonction elle-même. | |||
En revanche, pour manipuler le champ entièrement (suppression, remplacement) {{fleched}} la fonction a moins d'intérêt.<br> | |||
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 == | ||
| Ligne 243 : | Ligne 304 : | ||
{{SectionRéférences}} | {{SectionRéférences}} | ||
{{TableauCatégorieFonctionnementJVC}} | {{TableauCatégorieFonctionnementJVC}} | ||
[[Catégorie:Fonctionnement technique de Jeuxvideo.com]] | [[Catégorie:Fonctionnement technique de Jeuxvideo.com]] | ||
[[Catégorie:Extensions et outils]] | [[Catégorie:Extensions et outils]] | ||