Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
550 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Création d'un range personnalisé (fourchette)

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Création d'un range personnalisé (fourchette)

n°2330132
MaybeEijOr​Not
but someone at least
Posté le 07-03-2019 à 16:56:26  profilanswer
 

Bonjour,
 
J'ai attaqué la création d'un range permettant de définir graphiquement une fourchette :
 
https://codepen.io/anon/pen/gEmdYm
 
Néanmoins avez-vous une idée de comment je peux définir un évènement JS pour le déplacement de mes cercles ? Je partais sur du grab mais ça n'a pas l'air de coller, y a t-il un moyen de simuler ça avec un onClick ?
Avez-vous une autre idée ?


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
mood
Publicité
Posté le 07-03-2019 à 16:56:26  profilanswer
 

n°2330149
aliasdmc
Posté le 07-03-2019 à 19:12:44  profilanswer
 

Bonjour MaybeEijOrNot,
 
mousedown = j'écoute le mousemove
mousemove = dans l'event tu as la position du curseur  
voir https://developer.mozilla.org/fr/do [...] /mousemove
mouseup = je n'écoute plus mousemove

n°2330151
MaybeEijOr​Not
but someone at least
Posté le 07-03-2019 à 19:27:39  profilanswer
 

Merci, bon j'avais trouvé pour le mousedown. Par contre merci pour le mousedown, j'étais entrain d'un ajouter au document, si je comprends bien, je n'ai pas besoin de le faire et c'est tant mieux parce que là je n'arrivais pas à le supprimer. xD


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2330153
MaybeEijOr​Not
but someone at least
Posté le 07-03-2019 à 20:10:37  profilanswer
 

Bon j'ai pas mal buggé dessus mais ça y est ça bouge : https://codepen.io/anon/pen/rRybpX

 

J'ai plein de choses à faire (notamment retourner sur des %) mais les bases sont posées. :jap:


Message édité par MaybeEijOrNot le 07-03-2019 à 20:10:55

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2330215
aliasdmc
Posté le 08-03-2019 à 21:55:28  profilanswer
 

Bonjour MaybeEijOrNot,  
Je t'ai fait un exemple mais cela reste un proto, il y a surement des trucs a améliorer, je verais plus tard
https://codepen.io/Zonecss/pen/YgZBRR

n°2330223
MaybeEijOr​Not
but someone at least
Posté le 09-03-2019 à 14:34:10  profilanswer
 

Merci, je n'ai pas encore eu le temps de me repencher dessus.
Mais il faut déjà que je détermine ce que je veux exactement. Je pense que l'histoire des pourcentages par exemple ça va sauter parce que je trouve ça débile en fin de compte. Je vais surement fonctionner avec un "pas" de déplacement. Là encore faut savoir ce que je veux... Est-ce que je fais un pas qui respecte l'écart entre les données ? Est-ce que je fais une échelle log ? Est-ce que je fais un pas constant qui passe d'une donnée à la suivante, peu importe la différence entre les deux données ?


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2330273
aliasdmc
Posté le 10-03-2019 à 14:42:36  profilanswer
 

Bonjour MaybeEijOrNot,  
Dans le systeme proposé j'ai un pas de déplacement identique en fonction du tableau de données

n°2330274
MaybeEijOr​Not
but someone at least
Posté le 10-03-2019 à 14:54:11  profilanswer
 

Oui j'ai remarqué, et je pense que c'est vers quoi je vais me diriger.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2331785
MaybeEijOr​Not
but someone at least
Posté le 11-04-2019 à 16:31:08  profilanswer
 

Bon, pas eu le temps de me pencher dessus à nouveau, j'ai donc terminé aujourd'hui sans faire de "pas" de déplacement du curseur :
https://codepen.io/anon/pen/XQRPQg
 
Ce ne doit pas être très compliqué d'ajouter un pas mais vu mon temps libre en ce moment ce sera sans. Au pire, aliasdmc a proposé une solution mais son code me semblait trop long, et mon but n'est pas non plus de récupérer une solution mais de faire par moi-même.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2347281
MaybeEijOr​Not
but someone at least
Posté le 06-03-2020 à 19:44:34  profilanswer
 

Correction d'un bug à la con, la largeur de la fourchette est définie en pourcentage et lorsque ça donne un nombre non entier en pixels ça merde au premier clic, je recalcule-donc en JS la valeur arrondie en pixels :

 
Code :
  1. function nogood(min, max) {
  2.   let myrange = document.getElementById('myrange');
  3.   myrange.style.width = Math.round(myrange.innerWidth) + 'px';
  4.   document.getElementById('min').value = min;
  5.   document.getElementById('max').value = max;
  6.   document.getElementById('circleleft').addEventListener('mousedown', function(e) {
  7.     smackmybitsup(e, 'left');
  8.   }, false);
  9.   document.getElementById('circleright').addEventListener('mousedown', function(e) {
  10.     smackmybitsup(e, 'right');
  11.   }, false);
  12. }
 

Bon faudrait faire ça à chaque fois que la fenêtre redimensionnée, penser à ajouter un évènement.


Message édité par MaybeEijOrNot le 06-03-2020 à 19:46:09

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
mood
Publicité
Posté le 06-03-2020 à 19:44:34  profilanswer
 

n°2347489
rufo
Pas me confondre avec Lycos!
Posté le 10-03-2020 à 16:35:29  profilanswer
 

Pour info, quand on travaille avec un min et max de forte amplitude (genre, des timestamp), quand on bouge les bornes et qu'on les remets à leur position initiale, on ne retrouve pas les valeurs min/max du début. Pareil, c'est à cause des arrondis.
 
Perso, j'ai corrigé comme ça dans la fonction resize :

Code :
  1. if (left < 0.003) {
  2.    filterMin = min;
  3. }
  4. if (right < 0.003) {
  5.    filterMax = max;
  6. }


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Cantine Calandreta : http://sourceforge.net/projects/canteen-calandreta
n°2347491
MaybeEijOr​Not
but someone at least
Posté le 10-03-2020 à 17:06:23  profilanswer
 

Ok merci je note, ça doit surement pouvoir se corriger lors de l'initialisation aussi.

 

De toute façon faut que je revois tout pour le passer en objet afin de faciliter une implémentation multiple. Mais j'ai du mal à voir comment faire le lien avec le DOM sans le générer dans le JS. Peut-être en attachant l'objet à un élément du DOM sinon.
Pour le bug précédent, je vais tenter de passer par une variable CSS qui fera la différence entre la valeur calculée initiale et la valeur arrondie, ça permettra de garder une valeur en pourcentage dans le CSS.


Message édité par MaybeEijOrNot le 10-03-2020 à 17:06:32

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2347507
rufo
Pas me confondre avec Lycos!
Posté le 10-03-2020 à 20:32:09  profilanswer
 

Je serais intéressé par les évolutions de ton implémentation. Je suis parti de ton code pour faire une variante pour filtrer des données basées sur des dates.
Ca marche bien pour l'instant. Seul bug trouvé : quand on resize la fenêtre, ça part en sucette (mais tu l'avais indiqué) ;)


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Cantine Calandreta : http://sourceforge.net/projects/canteen-calandreta
n°2347514
MaybeEijOr​Not
but someone at least
Posté le 10-03-2020 à 21:22:20  profilanswer
 

Ok, ben ça va dépendre du temps que j'aurai, j'en avais la semaine dernière, mais insuffisant pour finir ce que je voulais faire. Du coup va falloir que je trouve de nouveau du temps, mais j'ai jamais beaucoup de visibilité. :(


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2347720
rufo
Pas me confondre avec Lycos!
Posté le 12-03-2020 à 18:24:38  profilanswer
 

Une fois la slidebar affichée avec une valeur min et max, je dois pouvoir positionner les 2 curseurs automatiquement sur 2 valeurs fournies par un objet sur lequel j'ai cliqué. J'arrive bien à faire le filtrage mais impossible de trouver comment faire bouger les 2 curseurs :( Une idée, svp ?
Merci :jap:


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Cantine Calandreta : http://sourceforge.net/projects/canteen-calandreta
n°2347778
mathieuu
Posté le 13-03-2020 à 09:35:10  profilanswer
 

Salut,  
A priori vous devriez pouvoir faire le job avec ça : https://github.com/leongersen/noUiSlider

n°2347788
MaybeEijOr​Not
but someone at least
Posté le 13-03-2020 à 11:19:24  profilanswer
 

Oui, s'il te faut un truc dans l'immédiat il doit exister plein de solutions complètes. Moi je voulais ma propre version, et surtout légère.

 

Ce que tu veux faire rufo, j'ai prévu aussi de l'ajouter, tu veux agir dans le sens inverse, tu sélectionnes une valeur et les curseurs se mettent à jour tout seul. De même, j'ajouterai l'option pour ne pouvoir déplacer les curseurs que de valeurs existantes en valeurs existantes.
Ces deux choses ne me semblent pas très compliquées. Une histoire de temps... :D

 

Pour ce que tu veux faire, faut récupérer la largeur totale de la barre, calculer par règle de trois la largeur relative des trois éléments avec un offset de quelques pixels (qui doivent correspondre de souvenir au rayon des curseurs) puis leur fixer les largeurs calculées.

 

Mais vu comment on est parti avec le Coronavirus, il y a quand même de bonnes chances que je finisse par trouver du temps dans les semaines à venir. :o


Message édité par MaybeEijOrNot le 13-03-2020 à 11:20:00

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2347835
rufo
Pas me confondre avec Lycos!
Posté le 13-03-2020 à 15:32:30  profilanswer
 

Oui, c'est ce que j'ai fait la règle de 3. L'ennui, c'est que sur une plage étendue (grand écart entre la date min et max), avec les arrondis, une fois que j'ai positionné les 2 curseurs sur des dates définies, quand je bouge un des curseurs, ça décale un peu les 2 valeurs et du coup, ça filtre des objets qui ne devraient pas être impacté. J'ai joué avec floor() pour le min et ceil() pour le max, mais bon, ça marche pas à tous les coups.
 
Edit : en mettant de floor() partout, ça va, ça empêche le filtrage erroné de certains objets. Par contre, ces arrondis font que les dates dans les inputs peuvent légèrement changer quand on bouge l'un des curseurs (de 2-3j). Je précise que je travaille sur une amplitude de 9 ans avec un range qui fait moins de 800px de large.

Message cité 1 fois
Message édité par rufo le 13-03-2020 à 15:42:48

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Cantine Calandreta : http://sourceforge.net/projects/canteen-calandreta
n°2348138
MaybeEijOr​Not
but someone at least
Posté le 15-03-2020 à 20:26:46  profilanswer
 

rufo a écrit :

Par contre, ces arrondis font que les dates dans les inputs peuvent légèrement changer quand on bouge l'un des curseurs (de 2-3j). Je précise que je travaille sur une amplitude de 9 ans avec un range qui fait moins de 800px de large.


Ah oui. xD
 
Peut-être que là par contre il te faudrait une fonction en plus pour affiner, utilisation du clavier ou de boutons pour avancer de jour en jour par exemple.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2348179
rufo
Pas me confondre avec Lycos!
Posté le 16-03-2020 à 08:59:46  profilanswer
 

Non, ça marchera pas : 9 ans, ça fait plus de 800j (i.e. 800 px). Donc, dans mon cas, 1px = plusieurs jours. C'est normal que ça "bagotte". Toutefois, je pense que ce cas arrivera peu.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Cantine Calandreta : http://sourceforge.net/projects/canteen-calandreta
n°2348189
MaybeEijOr​Not
but someone at least
Posté le 16-03-2020 à 09:22:18  profilanswer
 

Cela n'est pas problématique, la fonction inverse met à jour les valeurs et corrige la position, la correction peut très bien être nulle. Cela permet de découpler partiellement.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2349060
MaybeEijOr​Not
but someone at least
Posté le 22-03-2020 à 19:30:22  profilanswer
 

Bon comme prévu, j'ai du temps en ce moment et j'ai passé mon code en objet (un peu à l'arrache) afin de faciliter l'implémentation de plusieurs instances : https://codepen.io/Perrier_ChouFleur/pen/qBdMVaP
 
code : [màj plus bas]
 
Je vais ajouter les fonctionnalités de magnétisme de la barre (déplacer de valeur en valeur) et l'utilisation inverse (saisie manuelle par l'utilisateur puis ajustement automatique de la barre).
Si tu as des bugs particuliers, je veux bien un jeu de données.


Message édité par MaybeEijOrNot le 24-03-2020 à 17:51:11

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2349190
MaybeEijOr​Not
but someone at least
Posté le 23-03-2020 à 18:17:45  profilanswer
 

Bon j'avance, ça commence à grossir un peu trop, mais tant pis. (codepen updated)
 
Pour l'utilisation inverse il faudrait que j'ajoute un listener d'évènement onChange sur les inputs, seulement quand on utilise la barre de la fourchette ces champs sont mis à jour par le JS, est-ce que cela déclenche l'évènement onChange ?
 
Le mode magnétique pour l'instant va coller automatiquement la barre sur la valeur la plus proche une fois que l'utilisateur relâche le curseur, je ne trouve pas ça terrible car il faut faire au moins 50% du chemin, limiter à 1/3 de parcours me semble plus approprié, tout comme le placement de la barre devrait se faire en direct sans attendre de relâcher le curseur (ne pas proposer un déplacement progressif de la barre). Vous en pensez quoi ? Sachant que ces deux choses vont bien alourdir le code.
 
Code : (comment le mettre en spoiler ?) [màj plus bas]


Message édité par MaybeEijOrNot le 24-03-2020 à 17:50:40

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2349232
rufo
Pas me confondre avec Lycos!
Posté le 23-03-2020 à 22:11:32  profilanswer
 

Merci pour ton boulot :jap:


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Cantine Calandreta : http://sourceforge.net/projects/canteen-calandreta
n°2349240
MaybeEijOr​Not
but someone at least
Posté le 23-03-2020 à 23:23:18  profilanswer
 

Ahah, j'avais des problèmes avec les évènements que j'ai trouvé en debuggant autre chose, j'ai passé 2 heures à les retourner dans tous les sens. :fou:  
Je posterai le code corrigé quand j'aurai ajouté le magnétisme.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2349351
MaybeEijOr​Not
but someone at least
Posté le 24-03-2020 à 18:03:41  profilanswer
 

Bon j'ai quelque chose qui me plaît, ce n'est pas exactement ce que j'ai dit précédemment car je ne trouve pas ça si pertinent le replacement de la barre avant d'avoir relâcher la souris. Et l'histoire de magnétiser à partir de 1/3 du chemin et non 50 % ne me semble pas si importante dans cette utilisation, voire même trompeuse. De plus, cela redemande pas mal de travail je pense même si ça peut paraître simple, je suis déjà à environ une centaine de lignes de JS.
 
Et je viens de me rappeler que je voulais aussi utiliser ce genre de fourchette pour filtrer des tailles de fichiers d'ordres de grandeur différents (ko, Mo, Go). :pt1cable:  
 
Rufo, pour ce qui est de ton histoire de floor au lieu de round je ne comprends pas trop ce que ça va changer (en dehors des valeurs aux extrémités), le floor va sélectionner la valeur entre ]1;2] là où le round va sélectionner entre [1,5;2,5[ mais au final l'espace de sélection fait la même taille.
 
codepen.io : https://codepen.io/Perrier_ChouFleur/pen/qBdMVaP
 
code page de test : [màj plus bas]


Message édité par MaybeEijOrNot le 30-03-2020 à 17:57:44

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2349372
rufo
Pas me confondre avec Lycos!
Posté le 24-03-2020 à 20:10:44  profilanswer
 

Pour mon histoire de date, le floor a son importance dans le cas où on a 1px du range qui représente plusieurs valeurs. Je travaille avec des dates sous la forme de timestamp (pour travailler avec des int). Avec le round, je peux me retrouver sur le pixel qui correspond à une valeur > à celle que je veux imposer pour la borne min. Pareil pour la borne max. Du coup, ça filtre plus et mes objets qui ont les dates correspondant exactement aux dates min et max positionnées ne sont pas sélectionnées mais hors de la plage de sélection.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Cantine Calandreta : http://sourceforge.net/projects/canteen-calandreta
n°2349381
MaybeEijOr​Not
but someone at least
Posté le 24-03-2020 à 20:53:12  profilanswer
 

Un calendrier pouvant faire défiler les mois et années, affichant les jours du mois, comme le calendrier Windows n'aurait-il pas été plus approprié dans ton cas ?
L'utilisateur sélectionne alors la date minimale sur le calendrier puis la date maximale, de la même manière que les applis de réservation.
 
Sinon en intégrant mon code à mon projet, j'ai eu un petit problème, les données que je passais n'étaient pas de vrais integer mais des string. -_-'
Il suffit alors de faire une conversion :
datas = datas.map(a => +a);


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2349388
rufo
Pas me confondre avec Lycos!
Posté le 24-03-2020 à 22:40:15  profilanswer
 

Moi, j'ai utilisé parseInt().
Pour le coup du calendrier, oui, ça aurait été plus simple mais on m'a demandé une timeline.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Cantine Calandreta : http://sourceforge.net/projects/canteen-calandreta
n°2349392
MaybeEijOr​Not
but someone at least
Posté le 24-03-2020 à 23:35:34  profilanswer
 

Je ne sais plus pourquoi exactement mais le parseInt n'est pas formidable de souvenir, le +variable est ce qui fonctionne le mieux au niveau de la conversion (ça convertit certains exemple qui ne passent pas avec le parseInt).


Message édité par MaybeEijOrNot le 24-03-2020 à 23:36:58

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2349420
rufo
Pas me confondre avec Lycos!
Posté le 25-03-2020 à 10:55:43  profilanswer
 

Ca pose peut-être des pbs avec des nombres écrits en hexa ?


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Cantine Calandreta : http://sourceforge.net/projects/canteen-calandreta
n°2349484
MaybeEijOr​Not
but someone at least
Posté le 25-03-2020 à 13:47:47  profilanswer
 

C'est moi qui ne suit plus vraiment à jour et qui confond en plus.

 

Depuis ECMA15 il n'y a plus besoin de spécifier la base avec parseInt, avant certains cas ne passaient pas sans spécifier la base, notamment les nombres commençant par un 0 (genre les heures : 3h08).
Mais j'ai pris l'habitude d'utiliser le +var parce que ça fonctionne sur des entiers comme des décimaux, dans ce cas là il existe Nombre(var)...


Message édité par MaybeEijOrNot le 25-03-2020 à 13:48:11

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2350228
MaybeEijOr​Not
but someone at least
Posté le 30-03-2020 à 17:57:03  profilanswer
 

Ajout d'un reset :

 

https://codepen.io/Perrier_ChouFleur/pen/qBdMVaP

 

Bon maintenant faut que je réfléchisse à comment tricher pour pouvoir utiliser cette échelle linéaire avec des données qui seraient mieux affichées en non linéaires (tailles de fichiers), donc je peux toujours transformer mes données d'entrée en appliquant un log, mais ça ne règle pas le problème d'affichage des unités. [:transparency]


Message édité par MaybeEijOrNot le 31-03-2020 à 01:07:35

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2350248
rufo
Pas me confondre avec Lycos!
Posté le 30-03-2020 à 22:54:05  profilanswer
 

T'as qu'à faire comme moi avec mes dates (timestemp pour les valeurs, formatage en jj/mm/aaaa pour l'affichage) : tu travailles avec les vraies valeurs en interne (dans ton tableau de valeurs à afficher) et tu utilises le log pour le positionnement du curseur, mais dans les input type "text", tu affiches la valeur formatée en  Ko, Mo, Go.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Cantine Calandreta : http://sourceforge.net/projects/canteen-calandreta
n°2350253
MaybeEijOr​Not
but someone at least
Posté le 31-03-2020 à 01:07:09  profilanswer
 

C'est plus ou moins ce que j'ai fait.
J'ai mis un display none sur les vrais inputs, j'ai créé deux autres inputs, l'un passe la valeur à l'autre grâce à une conversion, et l'autre passe la valeur à l'un par une conversion inverse.
 
Par contre j'ai dû rajouter la prise en charge des décimales, ce qui a permis de corriger quelques bugs d'approximations.
 
Version mise à jour : https://codepen.io/Perrier_ChouFleu [...] itors=1111
 
 
Le système d'inputs de conversion (méthode bourrin :D ), je précise que mes données de source sont formatées et c'est moi qui ai fait cette connerie, ça aurait été plus simple de tout stocker en octets xD :

Code :
  1. function faketimeinput() {
  2.     function magicfakemin1(e) {
  3.      minFakeInput.value = parseTime(minInput.value, false);
  4.     }
  5.     function magicfakemax1(e) {
  6.      maxFakeInput.value = parseTime(maxInput.value, false);
  7.     }
  8.     function magicfakemin2(e) {
  9.      document.removeEventListener('mousemove', magicfakemin1, false);
  10.      document.removeEventListener('mouseup', magicfakemin2, false);
  11.     }
  12.     function magicfakemax2(e) {
  13.      document.removeEventListener('mousemove', magicfakemax1, false);
  14.      document.removeEventListener('mouseup', magicfakemax2, false);
  15.     }
  16.     let minInput = document.getElementById('time_min');
  17.     let maxInput = document.getElementById('time_max');
  18.     let minFakeInput = document.getElementById('fake_time_min');
  19.     let maxFakeInput = document.getElementById('fake_time_max');
  20.     minFakeInput.value = parseTime(minInput.value, false);
  21.     maxFakeInput.value = parseTime(maxInput.value, false);
  22.     document.getElementById('time_scale').style.display = 'none';
  23.     minInput.addEventListener('input', function(e) {
  24.      minFakeInput.value = parseTime(e.target.value, false);
  25.     }, false);
  26.     minFakeInput.addEventListener('input', function(e) {
  27.      minInput.value = parseTime(e.target.value, true);
  28.      myTimeRange.reverseProcess(1);
  29.      myTimeRange.validateOnMouseUp();
  30.     }, false);
  31.     document.getElementById('time_circleleft').addEventListener('mousedown', function (e) {
  32.      document.addEventListener('mousemove', magicfakemin1, false);
  33.      document.addEventListener('mouseup', magicfakemin2, false);
  34.     }, false);
  35.     maxInput.addEventListener('input', function(e) {
  36.      maxFakeInput.value = parseTime(e.target.value, false);
  37.     }, false);
  38.     maxFakeInput.addEventListener('input', function(e) {
  39.      maxInput.value = parseTime(e.target.value, true);
  40.      myTimeRange.reverseProcess(-1);
  41.      myTimeRange.validateOnMouseUp();
  42.     }, false);
  43.     document.getElementById('time_circleright').addEventListener('mousedown', function (e) {
  44.      document.addEventListener('mousemove', magicfakemax1, false);
  45.      document.addEventListener('mouseup', magicfakemax2, false);
  46.     }, false);
  47.    }


 
Fonction de conversion (pow pow pow) :

Code :
  1. function parseSizes(size, reverse, log) {
  2.    let units = ['o', 'ko', 'Mo', 'Go', 'To'];
  3.    if(reverse === true) {
  4.     size = size.split(' ');
  5.     if(size !== -1) {
  6.      let pow = +units.indexOf(size[1]);
  7.      size = +size[0] * Math.pow(2, 10 * pow);
  8.     } else {
  9.      size = 0;
  10.     }
  11.     if(log === true) {
  12.      if(size > 0) {
  13.       size = Math.round(100 * Math.log(size) / Math.log(2)) / 100;
  14.      }
  15.     }
  16.     return +size;
  17.    } else {
  18.     if(log === true) {
  19.      if(size > 0) {
  20.       size = Math.round(Math.exp(size * Math.log(2)));
  21.      }
  22.     }
  23.     let i = 0;
  24.     while(+size / Math.pow(2, 10 * i) >= 1) {
  25.      i++;
  26.     }
  27.     i -= 1;
  28.     size = +size / Math.pow(2, 10 * i);
  29.     switch(i) {
  30.      case 0:
  31.       size = Math.round(size);
  32.       break;
  33.      case 1:
  34.       size = Math.round(size * 10) / 10;
  35.       break;
  36.      default:
  37.       size = Math.round(size * 100) / 100;
  38.       break;
  39.     }
  40.     return size + ' ' + units[i];
  41.    }
  42.   }


 
Le HTML lié (oui je suis un peu nazi sur le pattern) :

Code :
  1. <div id="filters">
  2.   <span class="underline" id="filterlist">Filtres :</span>
  3.   <ul class="filtertype">
  4.    <li id="taille">Taille &nbsp;
  5.     <div id="size_scale">
  6.      <form>
  7.       <span>min - max : </span><input class="scale" type="text" pattern="[0-9]*\.?[0-9]{0,2}" id="size_min"><span> - </span><input class="scale" type="text" pattern="[0-9]*\.?[0-9]{0,2}" id="size_max">
  8.      </form>
  9.     </div>
  10.     <div id="fake_size_scale">
  11.      <form>
  12.       <span>min - max : </span><input class="fake_scale" type="text" pattern="[0-9]*\.?[0-9]{0,2} [kMGT]?o" id="fake_size_min"><span> - </span><input class="fake_scale" type="text" pattern="[0-9]*\.?[0-9]{0,2} [kMGT]?o" id="fake_size_max">
  13.      </form>
  14.     </div>
  15.     <div class="rangecontainer" id="size_range">
  16.      <div class="range outrange left" id="size_left"></div><div class="inrange circleleft" data-sign="1" id="size_circleleft"></div><div class="range inrange middle" id="size_middle"></div><div class="inrange circleright" data-sign="-1" id="size_circleright"></div><div class="range outrange right" id="size_right"></div>
  17.     </div>
  18.    </li>
  19.   </ul>
  20.   <form class="button" id="submitting"><input type="submit" value="Appliquer les filtres !" form="submitting" id="tofilter"></form>
  21.   <form class="button" id="reset"><input type="submit" value="Supprimer tous les filtres !" form="reset" id="toreset"></form>
  22.  </div>


 
 
Ah, et je dois aussi ajouter une fourchette pour des durées formatées en "xxh xxmin", pour le coup ce n'est pas moi le responsable (enfin je crois) mais j'aurai pu les convertir avant. :o


Message édité par MaybeEijOrNot le 03-04-2020 à 22:40:28

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2350268
rufo
Pas me confondre avec Lycos!
Posté le 31-03-2020 à 09:11:25  profilanswer
 

Perso, je te te recommande de tout travailler en nombres (int ou float) et d'ajouter un paramètre au chargement de ta slidebar pour indiquer le format d'affichage des valeurs.
Ex : hms ou juste hm pour hh:mm:ss ou hh:mm
dmy ou ymd pour dd/mm/yyyy ou yyyy-mm-dd
file pour la taille des fichiers
...
Bref, tu vois le genre.
Et j'ai pas eu besoin de passer par des inputs cachés. Je passe juste par une fonction d'affichage qui donne la valeur à mettre dans les inputs. J'ai la fonction qui fait la conversion inverse dans le cas où la valeur est saisie par le user dans ces champs. En inter, j'ai 4 variables : 2 pour stocker en int les valeurs de début et de fin et 2 autres variables qui continent les mêmes valeurs mais dans leur représentation affichée (c'est surtout pour gérer les cas de valeurs approchées ou, dans mon cas, 1px de slidebar = plusieurs valeurs de dates).


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Cantine Calandreta : http://sourceforge.net/projects/canteen-calandreta
n°2350324
MaybeEijOr​Not
but someone at least
Posté le 31-03-2020 à 15:05:05  profilanswer
 

Tu utilises une fonction d'affichage intégrée à la classe de la CustomRange ou en-dehors ?
Si je suis passé par des inputs cachés c'était pour éviter de modifier la classe, sinon en effet pas besoin de les utiliser. Je vais néanmoins réfléchir à y ajouter comme tu dis une fonction d'affichage.
 
Là je retravaille sur une autre partie du projet et je pense que je vais faire en sorte de stocker des données uniquement en unités de base.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2350348
rufo
Pas me confondre avec Lycos!
Posté le 31-03-2020 à 17:44:52  profilanswer
 

J'ai pas utilisé ta classe : je suis resté sur ton code de base non objet. Ce que j'ai modifié dedans fait que tout marche bien donc pour l'instant, je vais rester comme ça. S'il me reste du temps à la fin, j'utiliserai ta classe ;)


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Cantine Calandreta : http://sourceforge.net/projects/canteen-calandreta
n°2350362
MaybeEijOr​Not
but someone at least
Posté le 31-03-2020 à 19:45:08  profilanswer
 

Ah oui donc c'est pour ça, car sinon tu es soit obligé de modifier la classe (pas pratique quand tu crées plusieurs instances) soit de faire comme j'ai fait.
Bon j'ai fini de retravailler sur les données, donc maintenant tout est en unité de base, ça sera plus simple. J'ai juste dû revoir mes fonctions de tri. Cela m'a permis de faire du nettoyage aussi dans les arrondis.
Faut encore que j'ajoute un filtre sur la durée, donc soit je fais le même bordel que pour les tailles de fichiers (bon avec l'échelle log en moins à gérer) soit comme tu dis j'ajoute une option de formatage à ma classe.
La deuxième option est plus propre, mais ça va encore alourdir, après je pense que ça va rester raisonnable donc je risque de partir là-dessus.

 

Après, le plus drôle m'attend, la fonction de recherche, j'ai gardé le meilleur pour la fin.^^


Message édité par MaybeEijOrNot le 31-03-2020 à 19:46:12

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Création d'un range personnalisé (fourchette)

 

Sujets relatifs
Création d'un "select" personnalisé[Aide] Création jeu textuel
Création site web gestion serveurs minecraftCréation site web gestion serveurs minecraft
création d'u petit gestionnaire de contactscréation d'u petit gestionnaire de contacts
Création d'une alarme et gestion du mode veille d'un téléphoneCréation d'une liste en SQL
Création base de données avec Entity code first 
Plus de sujets relatifs à : Création d'un range personnalisé (fourchette)


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR