Clicmenu : achats

[Philippe Dpt35]

J'ai testé sur tablette et smartphone et il n'y a plus le problème de proposition d'affichage de l'image, ni l'image qui resta affichée en grand ensuite sans pouvoir être glissée.
Pour la console, ça je n'ai pas vérifié. Tant que ça fonctionne !

[mothsart]

Je veux pas te miner le moral mais je viens de tester sur une autre tablette et sur le tel de ma femme et j'ai toujours le même soucis.
Là, ça peut pas être lié au cache.

[Philippe Dpt35]

Alors là, je ne comprends pas !
Sur une tablette Samsung Android 4.4 sous Chrome, pas de problème.
Idem avec un smartphone sous Android 9, pas de problème non plus ni avec Chrome, ni avec Firefox.

[Philippe Dpt35]

Ah, ça y est, ça se reproduit après avoir rechargé le cache à plusieurs reprises sous Chrome.
Bizarre tout ça.

[Philippe Dpt35]

Je revois ça et vais en profiter pour tenter de mettre en place une double solution pour supprimer pièces ou billets du comptoir : par appui long ou par drag & drop inverse comme tu le suggères.

[Philippe Dpt35]

@mothsart
Peux-tu vérifier que le problème de demande d'affichage d'image a bien été résolu ?
Je n'ai pas réussi à reproduire le problème chez moi avant ce correctif, il me faut donc d'autres tests.

Désormais la suppression des images peut se faire soit par drag inverse, soit par appui long.
J'ai fait un peu de ménage dans le code. Il en restera à faire si tu confirmes que c'est OK.

Je vais attaquer le problème de la consigne différenciée selon que l'on est ou non en tactile.

[mothsart]

Je vais être honnête : c'est pire.
Toujours le même soucis + plus de drag du tout possible.

Je vois toujours des balises <img> et le fond du soucis vient de là. A part un attribut spécifique (que j'ignore), je pense qu'il n'y a pas d'autre méthode.

[Philippe Dpt35]

Ce qui m'ennuie, c'est que je ne réussis pas à reproduire le problème.
Difficile de le résoudre du coup !

[mothsart]

Ah, le dev à l'aveugle : bienvenue dans la cour des grand !
Pour ma part, je suis dans le cas opposé : j'arrive pas à reproduire quand ça marche.
Comme dis : remplace les <img> par des <div> avec background jusqu'à avoir le même comportement. (tu peux te créer 2 dépôts pour comparer)
Une fois changé, tu mets en ligne et je re-testerai.

[Philippe Dpt35]

J'ai bien créé une div, mais je ne peux me contenter de mettre l'image en background, car j'ai besoin de récupérer les dimensions de l'image pour donner des dimensions à la div, qui ne peut s'afficher sinon. Il me faut donc insérer l'image quelque part.
A moins que tu aies une autre solution à me suggérer !

[mothsart]

tu as quoi : 3/4 tailles d'images diff. Le mieux c'est d'avoir 3,4 classes diff avec des dimensions relatives (% ou wx/wh).

ex:

Code :

<div class="petite-piece piece-cinq-centimes"></div>
<div class="petite-piece piece-vingt-centimes"></div>
<div class="billet billet-cinq-euros"></div>

Code :

.petite-piece {
width: 5%;
height: 5%;
background-repeat: no-repeat;
}

.billet {
width: 5%;
height: 15%;
background-repeat: no-repeat;
}

.piece-cinq-centimes {
background: url('piece-cinq-centime.png');
}

.piece-vingt-centimes {
background: url('piece-cinq-centime.png');
}

.billet-cinq-euros {
background: url('cinq-euros.png');
}

[Alain]

Une piste

Et pour moi cela marche toujours impeccable drag inverse compris
Tablette samsung sm p550 android 6 01 et navigateurs firefox chrome samsung

Par contre sur mon telephone probleme
Cela arrive quand je pousse le billet ou la pièce un peu en dessous ou a droite de la zone de depot
A ce moment laffichage change et jai des bandes blanches a droite et en dessous qui apparaissent et il mest propose de telecharger ou d'ouvrir l'image dans un nouvel onglet

[Philippe Dpt35]

Alain, ton retour m'a permis de voir qu'il y avait un bug lorsqu'on déposait sur une zone non valide (sur la consigne ou la zone d'affichage du prix par exemple).
C'est corrigé.

@mothsart
Peux-tu me dire si le problème de demande d'affichage d'image est lié à ce bug, auquel cas ce correctif ne devrait plus le reproduire. Je pense que non, mais on ne sait jamais !

[Philippe Dpt35]

Pouvez-vous, l'un et l'autre, après avoir testé le correctif précédent, tester aussi la version alternative suivante :
https://primtux.fr/applications/achats-t...index.html

[Alain]

sur tablette pas de problème

sur telephone pas de probleme en mode paysage

en mode portrait il arrive rarement qu'un billet reste coincé en affichage grand format et qu'il soit proposé une ouverture du fichier dans un autre onglet cela se passe lors du début du passage de la zone bleue à la zone marron

[mothsart]

Pour moi, status quo.

[Philippe Dpt35]

Même la version alternative ? Parce que là, c'est une div avec une image en background !

[mothsart]

ah pardon Philippe, j'allais sur le premier lien comme un benêt.
C'est beaucoup, beaucoup mieux!
Je fais des drags and drop dans les 2 sens et j'ai plus la popup d'ouverture d'image donc mission accompli.

En revanche, y'a une toute petite amélioration a effectué : quand l'image s'agrandit, si elle se situe au dessus du doigts, ça ne drag pas.
Si elle est en dessous, pas de soucis. (du coup, selon là ou en appuie sur l'image, ça le fait ou non)

[mothsart]

Ah mais si : j'ai des cas à la marge ou ça se déclenche encore. Mais quand je regarde le code : j'ai encore des balises <img> qui sont remplacé par des <div> au touch. (ça doit forcément provenir de là : une mini-zone non couverte ou mon pointure va se déplacer sur l'<img> au lieu de la div)

[Philippe Dpt35]

une mini-zone non couverte ou mon pointure va se déplacer sur l'<img> au lieu de la div)

Oui, c'est ça. Je viens de réussir à reproduire le problème sur une tablette en pressant en bordure d'image, sur une zone qui n'est pas recouverte par l'image de drag.

Il va donc me falloir passer toutes les images en background de div.

[Philippe Dpt35]

J'ai mis en place une autre version alternative, dans laquelle toutes les images sont placées en background de div (attention, lien différent des précédents):
https://primtux.fr/applications/achats-tactile3/

Avec cette version, le seul problème que j'ai pu identifier est que si l'on touche une pièce ou un billet en extrême limite d'image, le drag ne peut se faire. Mais ça n'est pas bloquant :
- pas de déclenchement de menu
- une fois relâchée, l'image agrandie disparaît (là, il y avait un bug que j'ai identifié).

ça ne se produit pas avec Firefox. Je ne réussis pas à trouver la nature du problème.

Dites-moi si c'est bien résolu chez vous, et si ça vous semble satisfaisant

[mothsart]

C'est encore mieux, effectivement.
Bizarrement, j'ai encore des cas ou ça ne fonctionne pas sur les pièces de 1, 2 et 10 centimes. (à priori dès que je les touche un peu trop haut).
Ce qui est étonnant c'est qu'elles s'agrandissent.
Peux-être mettre un padding sur les <div> agrandit pour que la zone d'action soit plus grande (tout en étant invisible).

Néanmoins, tu as persévéré et ça paye : good job.

[Philippe Dpt35]

Ce qui est étonnant c'est qu'elles s'agrandissent.

C'est normal, puisque j'ai volontairement mis une image de drag de plus grande dimension. C'est celle-ci qui s'affiche, mais sans que le drag ne se réalise. Cela se produit lorsque l'on touche en zone de bordure d'image, en haut ou en bas.

Je vais tester ton idée de padding dans les div pour avoir une zone plus grande.

En tout cas, ça ne sera pas simple de passer les applications au tactile, ça représente beaucoup de boulot, même si on départ il est normal de patiner un peu faute de maîtrise du sujet.

[Philippe Dpt35]

Un simple padding ne suffit pas, l'image occupe quand-même toute la div. Mais j'ai trouvé diverses solutions sur le net pour résoudre ce problème.

C'est mieux. Sur tout petit écran (smartphone en mode portrait par exemple), et donc avec de toutes petites images, il peut arriver que le problème se produise encore, mais très occasionnellement. Et le smartphone n'est pas la cible principalement visée !

Si ça vous semble OK, je valide tout sur le git et merge sur la branche master.

[mothsart]

Ca serait bien d'éviter les drags quand y'a une popup mais sinon pour le reste c'est tout bon.