💡 Territoire : radio bouton stylé


#1

Bonsoir,

Cette fois ci, je vous présente un exercice de style à travers un simple radio bouton haut en couleur.

J’espère que ce territoire offrira de bonnes idées et de nouvelles pistes.
https://oxydum.github.io/territoire/

Enjoy!


#2

Bel exemple :

<<ONP X Y Z "#845EC233" "#845EC288" "#845EC2ff">>

<div style="zoom:50%">
{{Liberté Égalité Fraternité}}
</div>


#3

Bonjour @oxydum

J’ai répliqué le sujet sur mon site (lien ci-dessous)

https://prolegomenes.github.io/learn/Learn2215117.html#ONP

J’ai intégré la Macro ( Oui Non Peut-être), la macro style ( $:/.style) , le tiddler de vérification ( $:/.check) et des tiddlers exemples, mais je n’arrive pas à le faire fonctionner :

Au clic sur les boutons, je n’ai pas de réaction (le tiddler $:/.check n’est pas impacté), donc pas de couleurs non plus.

J’ai raté quelque-chose mais je ne trouve pas quoi. (Je suis en version 5.1.19)


#4

Salut Éric,

J’ai discrètement modifié le widget radio :
$:/core/modules/widgets/radio.js
En effet, sa portée est initialement globale, et ne prend pas en charge les balises ID et NAME. Je les ai simplement ajoutées sans quoi tu as un fonctionnement tout “nu” comme sur ton excellente intégration :stuck_out_tongue:

Cet exercice montre qu’il me faudrait mieux approcher le packaging surtout lorsque je touche au core comme ici.

Je viens de terminer un autre exercice de cet acabit à découvrir bientôt, promis j’essaie de mieux faire la prochaine fois :crazy_face:


#5

Jean Bernard,

Bon…

1- J’ai complété le tiddler de Doc (ICI)
2- J’ai sérieusement analysé le code du Tiddler shadow (core) $:/core/modules/widgets/radio.js que tu as modifié (ICI)
3- Et j’ai envie de faire les commentaires suivants

Le tiddler radio a tout de même été largement modifié. Ceci dépasse mes compétences actuelles en matière de développement mais ça me donne franchement envie de me mettre sérieusement à l’étude de JavaScript.

Y a-t-il un moyen de parvenir à ton résultat sans devoir modifier ce tiddler en dur ? (toujours dans l’optique de conserver le bénéfice des mises-à-jour de TiddlyWiki ultérieures). Peut être via la création d’un plugin ?

Et puis - si tu le permets - une petite envolée lyrique (habitude sans doute causée par ma formation initiale littéraire :smiley:) Je pense que nous avons trouvé ici -depuis ta venue récente - un développeur hors pair, une personnalité qui prend, sur son temps, la peine de s’investir sur ce forum et se mets à la portée de tout un chacun humblement et sans facéties. Chapeau bas Monsieur ! Un beau cadeau qui nous est fait pour 2019.


#6

Merci Éric pour tes compliments et pour ta documentation, je crois qu’en littérature, on appelle cette formulation un zeugma, j’adore !

Sur le plan technique, il s’agit de trouver le chemin le plus simple pour garder le module
$:/core/modules/widgets/radio.js
dans son état d’origine, tout en exploitant un autre module qui prendrait en charge nos modifications.

Bon… allons-y.

  1. Tu clones le module $:/core/modules/widgets/radio.js et tu le renommes ONPradio.js

  2. Tu supprimes le module $:/core/modules/widgets/radio.js (Si ce tiddler est une version modifiée d’un tiddler « shadow », il revient à la version par défaut du plugin $:/core dès lors qu’il est supprimé.)

  3. Il faut modifier la dernière instruction de ONPradio.js ainsi :

exports.ONPradio = RadioWidget;

Tu viens de créer un nouveau widget que tu peux utiliser ainsi :

    <$ONPradio class="..." type="radio" name="..." id="..." index="..." value="...">  </$ONPradio>

  1. Dans le tiddler “Oui Non Peut-être”, remplace les $radio par des $ONPradio

  2. Tu enregistres, actualises et voilĂ  ! (enjoy!)


#7

Jean-Bernard,

OK.

Les modifications sont faites et la documentation complétée. Je ne touche plus à cette dernière sauf remarques de ta part.

Merci pour la leçon de choses.:star_struck:


#8

Le résultat est top ! Je suis tout fier de nous deux :wink: