Having a hard time with my progressbar layout...

[Rafael Carrasco]

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           LinkedIn

[Tobias Beer]

Hi Rafael,

May I ask what usecase you have in mind? As a quick tip, if you want
to position text vertically, you have to use block-level elements. If
you want to position your outer div's inline (next to the labels), you
have to make them display:inline, or display:inline-block (which does
not work for some older borwsers).

Cheers, Tobias.

[Tobias Beer]

Hi Rafael,

I played a bit with your code and streamlined it, including StyleSheet
management:

http://tbsandbox.tiddlyspace.com/#[[ProgressBar%20Examples]]

Hope you like it. Feel free to take any or all of it into your
codebase and to ask about whatever codebits you might find difficult
to understand.

Cheers, Tobias.

[colmjude]

> I played a bit with your code and streamlined it, including StyleSheet
> management:
>
> http://tbsandbox.tiddlyspace.com/#[[ProgressBar%20Examples]]
>

Nice work Tobias!

Rafael, if you use what Tobias has done and want to vertically center
the text (numbers) in the progress bars you need to alter the CSS
for .pBarLabel strong.
With the current settings of
.pBar .pBarLabel {
font-size:0.95em;
line-height:normal;
top:-1px;
}

You'd need to set it to something like
.pBarLabel strong {
line-height: 1.25em;
}

Hope that helps

Colm

[Rafael Carrasco]

Hello Tobias. Nice work, it became much better than I was expecting. Sorry for the late email, but I was busy...

Anyway, you asked about a use case for those bars. I just find it inspiring to track my own progress with progress bar. For example, if I'm reading a pdf with 100 pages, and I'm at page 23, I put it on OpenOffice Calc and the corresponding progressbar gets filled a little. And then I update, until I get 100%. Using these techniques I discovered that I start to lose focus on my readings at ~30%, and then eventually stops before 100%, because other new pdf comes.

Also, I wanted to learn how to code plugins for TW, and I've learned that I need a lot more Javascript, CSS and HTML (more pdfs to read!). Man, this is harder than I've thought! But it's cool too. Totally different from the desktop apps that I'm used to code. I'll take a good look at your code, and try to figure it out it's workings.  Thanks Tobias, I'm really grateful! Thank you too colmjude, I'll use your tip.

Best regards!

[Tobias Beer]

I have added some more information to the example tiddler as for
parameters and StyleSheet...

Thinking of some computed progress based on a todo-list it might be
cool if one could define a function that retrieves the next todo when
clicked on the progressbar... that however is just one use-case for a
progress bar. Possibly named parameters also work better. The first
two may remain fixed but at least showVal and showPct should be named
parameters... that way one could more easily add parameters to the
params array later.

Cheers, Tobias.

[Tobias Beer]

Made the changes to the code, such that showVal and showPct are now
named parameters and thus to be specified as...

<<progressbar 10 100 showVal:false showPct:false>>

Cheers, Tobias.

[Tobias Beer]

I also took out that one jQuery statement as it really wasn't
necessary. That way, the macro might even work in legacy versions of
TiddlyWiki.

Cheers, Tobias.

[Rafael Carrasco]

The idea that the progress bar list the next next is also really cool! Didn't thought of that. Also, Ithought it was finished, and still so much work to do.... I really underestimated it.