Mise en valeur de todo avec macro pour TiddlyWiki
TiddlyWiki est un wiki personnel, permettant de gérer ses notes, si ce nom ne vous dit rien, j’en ai fait une présentation dans Prise de notes synchronisée et interface web.
Nous allons mettre en place ici, trois petites macros permettant de mettre en valeur du texte. Le code colle de très près à celle des gradient qu’on retrouve dans le code source. Le prochain billet devrait être plus vaste sur la dizaine de plugins qui m’ont intéressé pour le moment, et réunissant d’autres astuces.
On cherche donc à avoir de façon rapide le rendu suivant :
L’idée, c’est d’avoir trois macros, todo, note et warn (pour warning),
dont l’utilisation se résume à :
Pour obtenir ce résultat :
- Ouvrez un tiddler, nommez le
todo. - Rajoutez le tag
systemConfig. - Collez y le code qui suit
- Rafraîchissez (relancer) l’application.
Et voilà.
|Name|todo|
|Source|http://www.nicosphere.net|
|Version|0.1.0|
|Author|Nicolas Paris|
|License|BSD|
|~CoreVersion|2.6|
|Type|macro|
|Description|Yellow gradiant effect for todo notices|
!!Usage
{{{
<<todo>>My todo list>>
}}}
!!Code
***/
//{{{
version.extensions.todoMacro = {major: 0, minor: 1, revision: 0, date: new Date(2011,09,09)};
config.macros.todo = {}
config.macros.todo.handler = function(place,macroName,params,wikifier,paramString,tiddler)
{
var panel = wikifier ? createTiddlyElement(place,"div",null,"gradient") : place;
panel.style.position = "relative";
panel.style.overflow = "hidden";
panel.style.zIndex = "0";
if(wikifier) {
var styles = config.formatterHelpers.inlineCssHelper(wikifier);
config.formatterHelpers.applyCssHelper(panel,styles);
}
hi = "#fffb80";
lo = "#ffffff";
var locolors = [], hicolors = [];
locolors.push(hi);
locolors.push(lo);
hicolors.push(hi);
hicolors.push(lo);
drawGradient(panel,"horiz",locolors,hicolors);
if(wikifier)
wikifier.subWikify(panel,">>");
if(document.all) {
panel.style.height = "100%";
panel.style.width = "100%";
}
};
//}}}
Il ne vous reste plus qu’à l’utiliser comme montré en exemple.
Pour les deux autres, le principe est le même, on change la couleur, et on
remplace « todo » par « note » ou « warn ». Pour simplifier, j’en fais deux gist sur les
liens suivant, vous pouvez donc récupérer le code facilement.
Promis le prochain billet sur ce sujet présentera plus de subtilités que celui-ci. Cependant, ça reste une petite fonctionnalité que je voulais, sans réussir à la retrouver sur le web.
