Add <progress> support

I would like to propose the adding of the <progress /> tag to Discourse. It can be very useful, and can be used wherever a visual representation of a statistic is worthwhile. For example, “1/30 users registered” or “$50 raised of our $500 goal” would be much better represented as a progress element than text.

Additionally, progress bars should be CSS-customizable.

2 Likes

This would fit well into a plugin like the spoiler one.

Exactly. I see no reason for this to be in Core when it is probably one of the easiest Plugins there could be. eg,

plugin.rb

# name: progress
# version: 0.1 

register_asset "javascripts/progress.js.es6", :server_side

progress.js.es6

Discourse.Markdown.whiteListTag("progress", "class", /d-prog/);
Discourse.Markdown.whiteListTag("progress", "max", /[0-9\.]+/);
Discourse.Markdown.whiteListTag("progress", "value", /[0-9\.]+/);

6 Likes

I think I screwed up something. It’s still refusing to work.

Can someone give me feedback? https://github.com/pacificfils/discourse-progressbar

1 Like

I drop mine into the localhost folder instead of doing Git, so I don’t know if this is correct

    - exec:
    cd: $home/plugins
    cmd:
      - mkdir -p plugins
      - git clone https://github.com/discourse/docker_manager.git
      - git clone https://github.com/pacificfils/discourse-progressbar.git

What did you try in the post?
I also tried <progress class="d-prog" value="0.3" max="1.0">30%</progress>
and it worked for me.

Maybe a browser support issue?

Chrome 	Firefox (Gecko) 	IE 	Opera 	Safari
6.0 	6.0 (6.0)[1][2] 	10 	11.0 	 5.2

.

Android Firefox M (Gecko) 	IE M 	 	Opera M Safari M
Yes 	6.0 (6.0)[1][2] 	Not supported 	11.0 	7[3]
2 Likes

I tried:

<progress class="d-prog" value="0.1" max="1.0"></progress>

and got a blank post in return, suggesting that there’s something wrong with the plugin. It does load, though.

It can’t be browser incompatibility, I’m running Chrome, and I see it everywhere else.

AFAIK the progress tag requires something between the opening and closing tags. (though it might only be a fallback for browser’s that don’t support the tag)

and it isn’t “min” it’s “value”
* you’re thinking of the meter tag?
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter

Sorry, that was a typo on my part. Still doesn’t work with something in between the tags.

I’m suspecting the plugin. It doesn’t show up on the Admin Panel list either…

If it isn’t showing at all in the Admin -> plugins page it may not have installed OK

* to get a link there you need to put
# url: http://somedomain.com/path
in plugin.rb

The progress tag does not show in the preview

And it doesn’t show in the post right away until after it’s “cooked”

* notice I was wrong and that nothing is required between the tags

1 Like


Alright! The plugin didn’t load correctly because the code wasn’t wrapped in a function. Once I fixed that, it worked great.

Thanks!


ProgressBar Plugin: https://github.com/pacificfils/discourse-progressbar.git (src)

1 Like

Ah, yes. If the file has a “.js” extension it needs that. When it has an “.es6” extension it runs “auto-magically” and doesn’t need to be.

1 Like

The repository from github is gone. :’(

Update: found this:
https://github.com/SGColdSun/discourse-progressbar

3 Likes

@SidV have you installed it?
Is it still working?

If you find the discourse-progressbar.git tell me :wink:
Maybe @Mittineague knows something about this :thumbsup:

@Mittineague, any chance you fix this plugin?

2 Likes

I found new progress.js

Material Progress —Google Material Design Progress linear bar. By using CSS3 and vanilla JavaScript.

Demo

Check this out:
http://lightningtgc.github.io/MProgress.js/

4 Likes