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
nahtnam
(Manthan Mallikarjun)
May 25, 2015, 2:19am
2
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
SidV
June 22, 2016, 1:15pm
12
The repository from github is gone. :’(
Update: found this:
https://github.com/SGColdSun/discourse-progressbar
3 Likes
dax
(Daniela)
July 7, 2016, 1:55pm
13
@SidV have you installed it?
Is it still working?
SidV
July 7, 2016, 2:23pm
14
If you find the discourse-progressbar.git
tell me
Maybe @Mittineague knows something about this
dax
(Daniela)
November 1, 2016, 10:10am
15
@Mittineague , any chance you fix this plugin?
2 Likes
SidV
April 19, 2017, 12:35pm
16
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