En bossant sur l'appli que j'utilise pour mes cours, j'ai voulu ajouter un accès rapide à un document en tapant le début du nom de dossier dans un input alimenté par une datalist.

Bien entendu, je veux éviter de devoir passer du clavier à la souris plusieurs fois : tape un bout du nom, clique pour sélectionner, appuie sur entrée pour valider...

Donc, il faudrait que la sélection et l'ouverture du document se fasse:

• quand je tape un bout de nom et que j'appuie sur entrée (il ira chercher le premier de la liste)
• quand je tape le début, que j'utilise les flèches pour aller chercher celui que je veux et que j'appuie sur entrée,
• quand je tape le début et que je clique sur le nom du document qui m'intéresse.

Et là, c'est le drame

En effet, autant on peut capturer un évènement sur un input, autant ce n'est pas possible sur les option ou le datalist

Donc, il faut gruger et agissant sur les events de l'input.

Je mets ici ma solution actuelle (c'est le code que j'utilise avec mon framework js perso parce que j'ai la flemme de changer ):

<input type="text" placeholder="accès rapide à un document" list="docs_list" id="input_docs_list">
<datalist id="docs_list">
    \\ici les option qui vont bien
</datalist>

<script type="text/javascript">
    on('keydown','#input_docs_list',function(e){ // ça, c'est mon VanillaJS
        if(e.keyCode==13||!e.key){ 
            // si on a appuyé sur entrée ou que l'évènement n'est pas déclenché par une touche (donc, c'est la souris)
            window.location.replace("?"+e.target.value);
        }
    });

    on('input','#input_docs_list',function(e){
        // celui-ci est pour firefox
        if(e.inputType=='insertReplacementText'){
            window.location.replace("?"+e.data);
        }
    })
</script>

J'ai testé sous Firefox, Chromium et Edge...

<link rel="stylesheet" href="http://www.warriordudimanche.net/./plugins/Galart/style.css"/> <link rel="stylesheet" href="http://www.warriordudimanche.net/./plugins/Galart/assets/lightbox.css"/> <script src="http://www.warriordudimanche.net/./plugins/Galart/assets/lightbox.js"> <script>[].forEach.call(document.querySelectorAll("[lightbox]"), function(el) { el.lightbox = new Lightbox(el);});

---

► Commentaires

Après avoir commis BadGit, j'ai récidivé cet aprème avec Avatrine... qui génère un avatar sous forme de lettrine à fond de couleur.

Mais pourquoi me direz-vous ?

Parce que :

1. j'ai trouvé ça joli quand je l'ai vu je ne sais plus où
2. j'aime bien faire joujou avec Imagick
3. je fais ce que je veux

Les paramètres

• str: la chaîne
• [color]: la couleur de fond (calculée par défaut avec un hash de la chaîne)
• [sz]: la taille, 128 par défaut

Pour faire simple

En gros, vous lui passez une chaîne de caractères, genre un pseudo par exemple, et il crée une image avec la première lettre du pseudo sur un fond dont la couleur dépend de la chaîne. Et il fait une rotation de 30° (valeur totalement empirique trouvée au doigt mouillé) sur la lettre pour que ce soit plus joli.

Des exemples

?str=Bronco

?str=Bronco&color=red

?str=Bronco&color=blue&sz=256

?str=Jerrywham&sz=256

?str=Sammyfisher&sz=256

Conclusion

Je sais que j'ai déjà fait des générateurs d'avatars... ( voir sur la page d'API https://api.warriordudimanche.net ROR et Avatomic )

avatar (Ror)

avatomic et que celui-ci ne servira probablement pas plus que les autres mais bon... c'est cadeau quand même ! <link rel="stylesheet" href="http://www.warriordudimanche.net/./plugins/Galart/style.css"/> <link rel="stylesheet" href="http://www.warriordudimanche.net/./plugins/Galart/assets/lightbox.css"/> <script src="http://www.warriordudimanche.net/./plugins/Galart/assets/lightbox.js"> <script>[].forEach.call(document.querySelectorAll("[lightbox]"), function(el) { el.lightbox = new Lightbox(el);});

---

► Commentaires

Salut les copaines !

Après mes déboires avec mon ordi portable, je sens que je vais devoir le changer...

Afin de m'éviter des maux de têtes à venir, je cherche un pc:

• 🔴 compatible linux (mint/debian)
• 🔴 Ram 16Go
• 🔴 15p pour le pavé numérique
• 🔴 plutôt léger (autour d'1,5 kg)
• 🟠 si possible un clavier rétroéclairé

Je ne compte pas spécialement jouer avec donc pas besoin de carte graphique dédiée.

J'ai trouvé un lenovo sur https://linuxshop.fr/ordinateur-portable-linux/84-1188-lenovo-15p-r7-15-pouces-amd-ryzen-7-5700u-ram16go-ssd512go.html#/1-distribution_linux-ubuntu_2404_lts_recommande

Il est un peu cher mais bon, c'est mon anniversaire et j'ai l'autorisation de madame !

Seul bémol, pas de rétroéclairage du clavier (très utile pour coder)

Des conseils (sur ce modèle ou un autre) ?

Merci les copaines !

<link rel="stylesheet" href="http://www.warriordudimanche.net/./plugins/Galart/style.css"/> <link rel="stylesheet" href="http://www.warriordudimanche.net/./plugins/Galart/assets/lightbox.css"/> <script src="http://www.warriordudimanche.net/./plugins/Galart/assets/lightbox.js"> <script>[].forEach.call(document.querySelectorAll("[lightbox]"), function(el) { el.lightbox = new Lightbox(el);});

---

► Commentaires

Ben dis-donc, ça s'améliore pas des masses l'indépendance numérique de l'ENT... Pis pour le RGPD, j'te raconte même pas... ( j'en avais parlé ici)

<link rel="stylesheet" href="http://www.warriordudimanche.net/./plugins/Galart/style.css"/> <link rel="stylesheet" href="http://www.warriordudimanche.net/./plugins/Galart/assets/lightbox.css"/> <script src="http://www.warriordudimanche.net/./plugins/Galart/assets/lightbox.js"> <script>[].forEach.call(document.querySelectorAll("[lightbox]"), function(el) { el.lightbox = new Lightbox(el);});

---

► Commentaires

Comme je ne suis pas chez moi, je profite du fait d'avoir plus de temps pour picorer les videos de Grafikart, toujours aussi pertinentes et compréhensibles. Je me note donc ici quelques astuces intéressantes...

Les fonctions anonymes : https://www.youtube.com/watch?v=xJLwegBM64k

Je connaissais sans tellement les utiliser en PHP à cause du point suivant

utiliser une variable hors scope à l'intérieur de la closure...

où comment Bronco a découvert «use»

$closure=function ($arg1,$arg2) use ($var_exterieure){
    #come on, do something
};

Le routeur : https://www.youtube.com/watch?v=tbYa0rJQyoM

La base : une seule variable $_GET

Comme l'URI ne sera pas complexe, on utilise $_SERVER['REQUEST_URI'] pour déterminer une page à charger à la place d'une variable $_GET un peu moche et sans passer par de l'URLrewriting...

On passerait de ça serveur.com/index.php.p=contact

if ($_GET['p']==='contact'){
    require('contact.php');
}

à server.com/contact

if ($_SERVER['REQUEST_URI']==='/contact'){
    require('contact.php');
}

A intégrer dans mon Helium pour la récup de la page demandée ?

Plus complexe : plusieurs variables $_GET

Il utilise une classe routeur ce qui me donne envie d'essayer d'en faire une simplifiée moi-même afin de pouvoir faire par exemple:

$routeur->toGet('page/user'); pour récupérer dans la variable $_GET les infos de l'URI serveur.com/contact/bronco

👍 glopglop : c'est élégant et propre, on peut injecter les données extraites de l'URI dans la variable $_GET afin d'éviter de modifier trop profondément la logique d'une appli existante.

👎 pasgloppasglop : avec ce système, les infos doivent absolument être dans l'ordre attendu ce que n'impose pas l'usage de $_GET

<link rel="stylesheet" href="http://www.warriordudimanche.net/./plugins/Galart/style.css"/> <link rel="stylesheet" href="http://www.warriordudimanche.net/./plugins/Galart/assets/lightbox.css"/> <script src="http://www.warriordudimanche.net/./plugins/Galart/assets/lightbox.js"> <script>[].forEach.call(document.querySelectorAll("[lightbox]"), function(el) { el.lightbox = new Lightbox(el);});

---

► Commentaires