Hello! I'm trying to write a plugin to show a progress bar. The idea is that the progress bar gets totally inlined with the tiddler text, showing up exactly where it was called, without affecting the line height. My code is fully functional, but it renders distorted bars(see attachment)! Also, the progress bars are not being rendered where they should, which is on the same line as the sentences.
Here is the test tiddlers contents:
My bar: <<progressbar 28 120>>
First bar with values swapped <<progressbar 120 -28>>
Another bar:-<<progressbar 50 100>>
Only values:-<<progressbar 3 10 true false>>
Only percentage: <<progressbar 16 44 false true>>
Totaly clean: <<progressbar 24 44 false false>>
And here is my code
//{{{
//Thanks to Tobias Beer and Jremy Ruston
version.extensions.ProgressBarMacro = { major: 0, minor: 1, revision: 0,
date: new Date(2010, 09, 21),
source: "http://simonbaird.com/mptw/#HelloWorldMacro";
};
config.macros.progressbar = {};
config.macros.progressbar.defaultContainerDivStyle =
{"width": "200px", "border": "1px solid #0044bb", "margin": "0px
0.5em 0px 0.5em",
"padding": "1px", "background": "white", "position": "absolute",
"float": "none", "display": "inline-block", "height": "12px"};
config.macros.progressbar.defaultContainerSpanStyle =
{"width": "200px", "text-align": "center", "display": "inline-block",
"line-height": "12px"};
config.macros.progressbar.defaultBarStyle =
{"background-color": "#0e7ef5", "height": "10px", "float":"left",
"position": "inline-block"};
config.macros.progressbar.init = function() {
if (!config.macros.progressbar.containerDivStyle){
config.macros.progressbar.containerDivStyle =
config.macros.progressbar.defaultContainerDivStyle;
}
if (!config.macros.progressbar.containerSpanStyle){
config.macros.progressbar.containerSpanStyle =
config.macros.progressbar.defaultContainerSpanStyle;
}
if (!config.macros.progressbar.barStyle){
config.macros.progressbar.barStyle =
config.macros.progressbar.defaultBarStyle;
}
config.macros.progressbar.defaultShowVal = true;
config.macros.progressbar.defaultShowPct = true;
};
config.macros.progressbar.buildCaption = function (curr, maxv, pct, showVal,
showPct){
var valCaption = curr + " / " + maxv;
var pctCaption = pct + "%";
var finalCaption = "" ;
if (showVal == true && showPct == true)
finalCaption = valCaption + " (" + pctCaption + ")";
else if (showVal == true)
finalCaption = valCaption;
else if (showPct == true)
finalCaption = pctCaption;
else
finalCaption = '\u00A0'; //add &nbps; to prevente caption from being
empty
return finalCaption;
}
config.macros.progressbar.handler = function (place, macroName, params,
wikifier, paramString, tiddler) {
var curr = Math.abs(params[0]);
var maxv = Math.abs(params[1]);
var showVal = config.macros.progressbar.defaultShowVal;
if (params.length> 2) showVal = eval(params[2]);
var showPct = config.macros.progressbar.defaultShowPct;
if (params.length> 3) showPct = eval(params[3]);
if (curr > maxv) {
var temp = curr;
curr = maxv;
maxv = temp;
}
var pct = Math.round((curr/maxv)*100);
var caption = config.macros.progressbar.buildCaption(curr, maxv, pct,
showVal, showPct);
var wrapperDiv = createTiddlyElement(place,"div");
jQuery(wrapperDiv).css (config.macros.progressbar.containerDivStyle);
var wrapperSpan =
createTiddlyElement(wrapperDiv,"span",null,null,caption);
jQuery(wrapperSpan).css (config.macros.progressbar.containerSpanStyle);
var progressDiv = createTiddlyElement(wrapperSpan,"div");
jQuery(progressDiv).css (config.macros.progressbar.barStyle);
jQuery(progressDiv).css ({'width': (pct + "%")});
};
//}}}
Anyone have any idea how I can fix those bars and make them look good?
Best regards
--
*Rafael da Silva Carrasco*
*Mestrando em Ciência da Computação*
*Universidade Federal de Viçosa*
Facebook <http://www.facebook.com/mestrecarrasco>
LinkedIn<http://br.linkedin.com/in/rafaelcarrascoufv>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/tiddlywiki?hl=en.
<<attachment: progressbar.png>>
