Par quoi remplacer un clic droit sur une tablette ?

[L'Omniscient]

Bonjour !
Je sais plus si j'ai posté ici, j'ai posté sur OC mais j'ai pas eu de réponses qui m'ont aidé.

Je travaille sur la version Tablette de mon jeu. En fait j'ai un seul soucis qui bloque tout, pas de clic droit sur tablette :/
Sur mon jeu, les événements JS :
Clic gauche : permet de déplacer l'objet
Clic droit : permet d'accéder au menu de l'objet

Du coup, est-ce qu'il y a un moyen sur tablette d'activer un simili clic droit ? (Je sais que ya un simili clic droit mais qui ne fonctionne pas comme un clic droit interprété par le Javascript).
Ou alors des événements spéciaux pour tablette avec le JS?
Ou sinon, par quoi puis-je remplacer le clic droit sur tablette ?

Au pire du pire je peux ajouter un petit cadre "Infos" dans lequel on fasse glisser l'objet pour avoir son menu, mais c'est vraiment du tiré par les cheveux...
Merci

[Xenos]

Sur mobile, c'est le maintien appuyé qui remplace le clic droit et permet d'afficher le menu contextuel.
En HTML5, ce menu peut être enrichi par des fonctionnalités spécifiques au site via le tag "menu" https://html.spec.whatwg.org/multipage/g...nu-element

Cf mon article sur les astuces HTML https://toile.reinom.com/les-astuces-et-.../#menuitem

[Ter Rowan]

perso je dirais :
simple clic = menu
appui maintenu = drag & drop

maintenant si l expérience utilisateur décrite par xenos est la bonne je tenterais bien mais pas avec la solution présentée sur le bloc, si pas compatible en 2017 = pas prêt du tout

[Xenos]

L'avantage du tag HTML standard, c'est qu'il sera prêt quand les navigateurs déploieront la techno. En attendant, il y a peu-être des polyfills.

Sinon, tu peux simplement faire ce polyfill pour ton jeu (ou gérer les choses 100% à ta sauce, mais tu perds l'avantage du "quand les navigateurs déploieront la techno t'auras rien à faire") grâce à l'Event contextmenu qui semble très bien supporté (et qui peut, à condition de perdre justement cet aspect "standard basique", permettre de faire des menus plus étoffés et composés de balises HTML).

[L'Omniscient]

Xenos en fait j'ai déjà un document.oncontextmenu = function
Pourtant j'ai pas l'impression que ça marche sur tablette :o Je réessaierai mais il me semble que je n'ai pas réussi à l'activer.
Il n'y a pas un event particulier "maintien appuyer" ? Et j'imagine qu'il faut une condition spéciale qui vérifie si le support est bien une tablette ?

Je préfère pas tenter le HTML5 si c'est pas vraiment supporté aujourd'hui.

[Xenos]

https://xenos.reinom.com/jeuweb/contextmenu-event.html

Ca fonctionne très bien (j'ai mis l'event listener sur un élément HTML et un autre sur le window; sur document, tu devrais avoir pareil; note que les "onmachin", je ne les utilise jamais: mieux vaut préférer addEventListener qui permet d'empiler les listeners sans soucis). Mais attention: on parle bien du menu contextuel (appuis long sur la page) et non des options du navigateur (bouton tactile "physique", autrement dit pas sur l'écran, en bas de mon téléphone, que tous les téléphones n'ont peut-être pas).

[L'Omniscient]

Je suis confronté à un double problème :
- Tout d'abord ça ne fonctionne vraiment pas, j'ai bien essayé ! Voilà mon code (qui fonctionne parfaitement sur PC, à priori sur tous navigateurs je n'y ai pas touché depuis 1 an vu qu'il marchait très bien, il permet de déplacer une image en la dupliquant, je précise que c'est l'un de mes premiers codes ne me jugez pas sur la propreté xD) :

Code :

document.oncontextmenu = function (lobjet) {
    if (lobjet.target.id == "zone_msg_fo") {
    return;
    }
    if (lobjet.target.id.lastIndexOf("nbr") != -1) {
        return false;
    }
    if (lobjet.target.parentNode.parentNode.id == "objets_inventaire") {
        elementclique_inventaire = lobjet.target.id + "2";
        document.getElementById(elementclique_inventaire).style.display = "block";
        if (ancien != " " && ancien != elementclique_inventaire) {
            document.getElementById(ancien).style.display = "none";
        }
        ancien = elementclique_inventaire;
    } else if (lobjet.target.parentNode.parentNode.id == "collection") {
        elementclique = lobjet.target.parentNode.id + '3';
        
        if (document.getElementById(elementclique)) {
            if (window.innerHeight >= 850) {
                document.getElementById('infos_collection_vide').innerHTML = document.getElementById(elementclique).innerHTML;
                document.getElementById('infos_collection_vide').childNodes[1].style.width = "100%";
                document.getElementById('infos_collection_vide').childNodes[1].style.height = "100%";
                document.getElementById('infos_collection_vide').childNodes[1].childNodes[1].childNodes[3].style.display = "none";
            } else {
                document.getElementById(elementclique).style.display = "block";
            }
            if (ancien2 != " " && ancien2 != elementclique) {
                document.getElementById(ancien2).style.display = "none";
            }
            ancien2 = elementclique;
        }
        
    } else if (document.getElementById(ancien) != null && document.getElementById(ancien2) != null) {
        document.getElementById(ancien).style.display = "none";
        document.getElementById(ancien2).style.display = "none";
    } else if (document.getElementById(ancien) != null) {
        document.getElementById(ancien).style.display = "none";
    } else if (document.getElementById(ancien2) != null) {
        document.getElementById(ancien2).style.display = "none";
    }
    return false;
}

- Je testais le jeu sur la tablette de mon père, je n'aurai pas l'occasion de l'avoir avant le 21, et j'aimerais fixer ce problème avant la phase de test. Comment vous faites pour coder du tactile ? Ya pas un simulateur de tablette qui prenne la souris pour un doigt ?

Faut vraiment que je règle ça, c'est tout con, c'est le seul soucis qui empêche de jouer sur tablette :'(

[Xenos]

Ouvre la console d'Opera, et bascule en mode "mobile": le curseur est alors considéré comme un doigt (probablement sensible à la pression si t'as une tablette graphique ou assimilé)

WTF de code?! Hum... Les event listener peuvent se placer sur les éléments HTML: inutile d'aller altérer le "on quelque chose" de l'objet "document". D'autant que le paramètre de la callback est l'event ("lobjet" me laisse penser que tu le vois comme étant l'élément HTML ciblé?! ce qui n'est pas le cas: c'est event.target qui devrait avoir cette info).
Oublies les innerWidth et autres fioritures du genre: JS n'est *pas* fait pour du styling. A la place, rajoute une classe sur un élément HTML lorsque le contextmenu est appelé, et dans le CSS, applique tes stylings à cet élément si cette classe est présente.

Code :

document.querySelector('.my-element #selector .like-css').addEventListener('eventName' /* 'contextmenu' probablement */, function () { ... });

Jette un oeil aux sources JS des minis-jeux que j'ai, du devrais trouver quelques méthodes pour gérer tes events. Sinon, le MDN t'aideras (event touchstart dans ton cas, peut-être, faut voir s'il y en a un plus adapté https://developer.mozilla.org/en-US/docs...touchstart )



En gros, tu finiras avec ca:

Code :

/* CSS */
/* tu convertiras tes JS en code CSS, j'ai la flemme */
.menu {
/*
  document.getElementById(elementclique_inventaire).style.marginLeft = "65%";
  document.getElementById(elementclique_inventaire).style.left = "0%";
  document.getElementById(elementclique_inventaire).style.top = "10%";
  document.getElementById(elementclique_inventaire).style.width = "450px";
  document.getElementById(elementclique_inventaire).style.height = "215px";
*/
@media (min-width: 850px) {
  .menu {
/*            document.getElementById(elementclique_inventaire).style.marginLeft = "0%";
            document.getElementById(elementclique_inventaire).style.left = "12%";
            document.getElementById(elementclique_inventaire).style.top = "71%";
            document.getElementById(elementclique_inventaire).style.width = "35%";
            document.getElementById(elementclique_inventaire).style.height = "215px";*/
  }
}
.menu:not(.opened) {
  display: none;
}
/* etc */

Code :

/* JS */
document.querySelector('#objets_inventaire').addEventListener('contextmenu', function (e) {
  document.getElementById('.menu').classList.add('opened');
});
document.querySelector('#objets_inventaire').addEventListener('contextmenuoff' /* heu, c'est pas ce nom d'event, mais il doit en exister un similaire pour ta fermeture de menu */, function (e) {
  document.getElementById('.menu').classList.remove('opened');
});

[L'Omniscient]

Je suis fatigué je crois.
Ce n'est pas du tout le code qui permet de déplacer un objet, c'est le code qui permet d'ouvrir le descriptif des objets
Et c'est bien ce code qui pose problème.

WTF de code?! Hum... Les event listener peuvent se placer sur les éléments HTML: inutile d'aller altérer le "on quelque chose" de l'objet "document". D'autant que le paramètre de la callback est l'event ("lobjet" me laisse penser que tu le vois comme étant l'élément HTML ciblé?! ce qui n'est pas le cas: c'est event.target qui devrait avoir cette info).
Oublies les innerWidth et autres fioritures du genre: JS n'est *pas* fait pour du styling. A la place, rajoute une classe sur un élément HTML lorsque le contextmenu est appelé, et dans le CSS, applique tes stylings à cet élément si cette classe est présente.

Alors, en fait c'est un code qui se divise en deux. Si on clique dans le cadre "Inventaire", on ouvrira un menu d'objet, si on clique dans le cadre "Recettes" on ouvrira un menu de recette (ils ne sont pas situés au même endroit ni n'ont pas les mêmes informations).

Chaque objet et chaque recette à son menu crée à sa récupération PHP, tous en display none. Les menus ont pour ID le titre de l'objet / la recette + 2 ou 3 selon que ce soit un menu objet ou un menu recette. Du coup les variables elementclique permettent de récupérer le ID du parent contenant l'objet / la recette et son menu, puis de lui ajouter 2 ou 3 pour récupérer le cadre du menu uniquement (au final j'aurais pu récupérer le Xeme enfant du parent ça serait revenu au même), et le met en display block.

Il ne me semble pas que ton code permette de récupérer l'ID correspondant ni ne permette de définir si c'est un objet ou une recette qui s'ouvre. Et en plus, ça ne supprime pas le clic droit global ? Et je ne comprends pas ce que tu récupère dans l'ID, tu récupère un ID avec un nom de class ? Oo

Par contre le coup du .menu:not(.opened) a l'air sympa, je ne connaissais pas :O Ca fonctionne comment ?

Pour tout ce qui est innerWidth, je sais, mais à l'époque je ne savais pas utiliser du médiaquery. Je supprimerai ça progressivement, mais le javascript ajuste énormément le design du coup pour l'instant je laisse comme ça. Enfin, j'ai déjà commencé à faire de l'adaptation médiaquery pour petit à petit supprimer l'adaptation Javascript (sachant que je me confronte à un problème : j'ai basé mon adaptation JS sur du Height, et mon adaptation médiaquery sur du Width, du coup faudrait que je trouve des formats standards qui permettent d'unir les deux, une galère >>)

Touchstart c'est pour un clic ? J'ai déjà un événement sur un clic gauche, c'est le déplacement de l'objet. Il me faut un remplacement du clic droit. (D'ailleurs c'est peut-être pour ça que le clic prolongé ne fonctionne pas, parce qu'il s'arrête à l'événement du clic gauche et ne lance pas l'événement du clic prolongé ?)

EDIT : J'ai essayé la console mobile d'Opéra, alors j'ai l'impression que la console bugue énormément, mais le clic sur les objets d'inventaire a l'air de fonctionner (après avoir switché de sens, parce que sans switcher de sens ça fonctionnait pas xD). Par contre l'affichage des menus recettes ne fonctionne pas... Bon, ça voudrait dire qu'il se pourrait que le oncontextmenu fonctionne si on active les bonnes fonctions ?

[Xenos]

/!\ Note importante: quand je parle de lire un tuto, je ne parle pas juste de le zieuter, ni de faire tous les exercices qu'il contient. Je parle de le lire, tranquillement, et surtout de prendre des notes (un papier, c'est bien plus efficace qu'un Word) sur les points qui te semblent utiles de retenir. Par exemple, "CSS selector: :not() inverser un sélecteur" c'est bien à noter quand on le découvre (après, tu le reprendras tes notes dans 2-3 mois et tu vireras les trucs que t'as retenus).

On s'en fout de récupérer l'ID du truc cliqué dans l'event listener. Le principe est ici d'appliquer un event listener à l'élément HTML qui est cliquable, directement (sinon, t'imagines le bordel? S'il te faut 60 IFs car tu as 60 éléments pouvant être cliqués?!). N'hésite pas à lire le guide complet du MDN sur les events https://developer.mozilla.org/en-US/docs...cks/Events cela peut t'aider à saisir leur fonctionnement (JS est une horreur si tu pars sur de mauvaise bases et habitudes, mais devient un plaisir simple si assimile sa "philosophie" de fonctionnement).

.menu:not(.opened) est simplement une combinaison de sélecteurs CSS https://developer.mozilla.org/en-US/docs.../Selectors Fais le tour des 4 articles sur les sélecteurs (sans forcément l'apprendre par coeur).

Evite de laisser comme ça: ça va te traîner dans les pattes, tu pèteras un plomb quand il faudra modifier du styling (car ton fichu JS ira définir des attributs "style" sur les éléments, que le CSS ne pourra plus écraser) et cela va te pousser à continuer de faire de même. Là, t'en as pour même pas 5 minutes à déplacer les règles dans du CSS et à appliquer/supprimer une classe dans ton JS.

Tu n'as pas à faire la conversion width/height maintenant. C'était effectivement très con de te baser sur la hauteur (le web a pris la décision, logique au fond, de considérer la largeur comme à peu près connue et de laisser la hauteur des pages libres). Mais tu peux tout à faire utiliser la hauteur dans tes media queries https://developer.mozilla.org/en-US/docs...Pseudo-BNF Fais donc en deux temps: dégage tes stylings du JS et fous-les en CSS, puis plus tard, tu changeras le CSS pour basculer de width à height

Touchstart, c'était pour l'exemple, mais t'as déjà tout dans la démo que j'avais faite: https://xenos.reinom.com/jeuweb/contextmenu-event.html contextmenu marche très bien sur mobile (FF en tous cas, à voir sur webkit? mais je doute que ce soit différent). C'est au navigateur de faire le distingo entre un appuis long pour le menu et un appuis court qui trigger le click event.

J'ai rien compris à la question de ton edit.
Tu as un mobile, donc pourquoi ne pas tester directement dessus? C'est bien plus simple. (éventuellement, je peux intégrer la méthodologie pour le faire à un article existant si tu coinces là dessus).


[PS] J'ai l'impression de faire de la Pull request ^^ Ne t'arrêtes pas à l'éventuel ton du post, c'est l'habitude du boulot :/